首页页面完善
This commit is contained in:
@@ -1,25 +1,211 @@
|
||||
<template>
|
||||
<view class="flex flex-col items-center justify-center">
|
||||
<image
|
||||
class="mb-50rpx mt-200rpx h-200rpx w-200rpx"
|
||||
src="@/static/images/logo.png"
|
||||
width="200rpx"
|
||||
height="200rpx"
|
||||
/>
|
||||
<view class="flex justify-center">
|
||||
<text class="font-size-36rpx color-gray-700">
|
||||
{{ title }}
|
||||
</text>
|
||||
<view class='content'>
|
||||
<view class='search-view'>
|
||||
<view class='search-input'>
|
||||
<image :src='assetsUrl+"ic_search.png"'></image>
|
||||
<input placeholder='输入名称、款号搜索' />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='container'>
|
||||
<scroll-view class='category-list' :scroll-y='true'>
|
||||
<view v-for='(item,index) in categoryList' :key='index' class='category-item'
|
||||
@click.stop='changeCategory(index)'
|
||||
:class="{'category-item-active': index === categorySelectedIndex}">
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view class='goods-list' :scroll-y='true' type='custom'>
|
||||
<grid-view type='masonry' :cross-axis-count='2'>
|
||||
<view v-for='(item, index) in goodsList' :key='index' class='goods-item'>
|
||||
<image class='goods-image' :src='item.goodsImage' />
|
||||
<text class='goods-name'>{{ item.goodsName }}</text>
|
||||
<text class='goods-price'>¥{{ item.goodsPrice }}</text>
|
||||
<image class='add-image' :src='assetsUrl+"ic_add_goods.png"' />
|
||||
</view>
|
||||
</grid-view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class='shopping-cart'>
|
||||
<image :src='assetsUrl+"ic_shopping_cart.png"' />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/store';
|
||||
<script setup lang='ts'>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const title = ref<string>();
|
||||
title.value = import.meta.env.VITE_APP_TITLE;
|
||||
const categoryList = ref<string[]>(['女装', '男装', '鞋包配饰', '母婴', '美妆个护', '运动户外', '户外运动', '户外运动']);
|
||||
const categorySelectedIndex = ref<number>(0);
|
||||
|
||||
const store = useUserStore();
|
||||
console.log('store.user_name', store.user_name);
|
||||
const goodsList = ref<any[]>([
|
||||
{
|
||||
goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
|
||||
goodsImage: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/0D/ChMkJ1eV_EiIckZnAAxoKo4d-a0AAT0gwJxjq4ADGhC893.jpg',
|
||||
goodsPrice: 90
|
||||
},
|
||||
{
|
||||
goodsName: '女童夏装套装洋气装短袖阔腿裤子…女童夏装套装洋气装短袖阔腿裤子',
|
||||
goodsImage: 'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
|
||||
goodsPrice: 100
|
||||
}, {
|
||||
goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
|
||||
goodsImage: 'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
|
||||
goodsPrice: 95
|
||||
}, {
|
||||
goodsName: '女童夏装套装洋气装短袖阔腿裤女童夏装套装洋气装短袖阔腿裤子',
|
||||
goodsImage: 'https://img.zcool.cn/community/01c8f15aeac135a801207fa16836ae.jpg@1280w_1l_2o_100sh.jpg',
|
||||
goodsPrice: 93
|
||||
},
|
||||
{
|
||||
goodsName: '女童夏装套装洋气装短袖阔腿裤子…女童夏装套装洋气装短袖阔腿裤子',
|
||||
goodsImage: 'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
|
||||
goodsPrice: 89
|
||||
}, {
|
||||
goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
|
||||
goodsImage: 'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
|
||||
goodsPrice: 108
|
||||
}
|
||||
]);
|
||||
|
||||
const changeCategory = (index: number) => {
|
||||
categorySelectedIndex.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: white;
|
||||
padding: 19rpx 30rpx;
|
||||
|
||||
.search-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: #F7F7F7;
|
||||
padding: 17rpx 23rpx;
|
||||
width: 100%;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 210rpx;
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
|
||||
text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.category-item-active {
|
||||
@extend .category-item;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.category-item-active:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 5rpx;
|
||||
left: 15rpx;
|
||||
height: 30rpx;
|
||||
background: #333333;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
background: white;
|
||||
padding: 38rpx 20rpx 0 20rpx;
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 10rpx 10rpx;
|
||||
|
||||
.goods-image {
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
max-height: 200rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #F32B2B;
|
||||
}
|
||||
|
||||
.add-image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopping-cart {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
right: 40rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 20rpx 1rpx rgba(78, 78, 78, 0.16);
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user