首页页面完善
This commit is contained in:
@@ -1,18 +1,276 @@
|
||||
<template>
|
||||
<view class='flex flex-col items-center justify-center'>
|
||||
<swiper class='swiper'>
|
||||
<view class='u-flex-column'>
|
||||
<swiper class='swiper' :indicator-dots='true' :autoplay='true' :interval='3000' :duration='1000'
|
||||
@change='swiperChange'>
|
||||
<swiper-item v-for='(item, index) in bannerList' :key='index'>
|
||||
<image :src='item' mode='aspectFill' />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class='basic-view'>
|
||||
<view class='indicator-view'>
|
||||
<view v-for='(item,index) in bannerList' :key='item' class='normal'
|
||||
:class="{'active': index === currentBannerIndex}">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='user-info-card'>
|
||||
<image class='user-avatar' :src='bannerList[0]' mode='aspectFill' />
|
||||
<text class='user-name'>设计小仙女</text>
|
||||
<view class='integral-view'>
|
||||
<text>1000</text>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
<view class='divider' style='height: 83rpx' />
|
||||
<view class='balance-view'>
|
||||
<text>998.00</text>
|
||||
<text>余额（元）</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='menu-view'>
|
||||
<view>
|
||||
<image :src='assetsUrl+"ic_member_card.png"' style='width: 108rpx;height: 72rpx;padding: 11rpx 0' />
|
||||
<text>会员充值</text>
|
||||
</view>
|
||||
<view class='divider' style='margin: 0;height: 153rpx' />
|
||||
<view>
|
||||
<image :src='assetsUrl + "ic_coupon.png"' style='width: 108rpx;height: 95rpx' />
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='second-menu-view'>
|
||||
<view v-for='(item, index) in submenuList' :key='index'>
|
||||
<view class='menu-item' @click='toPath(item.path)'>
|
||||
<image :src='item.icon' />
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class='hot-recommend'>热门推荐</text>
|
||||
|
||||
<view class='bottom-banner-view'>
|
||||
<swiper :indicator-dots='true' :autoplay='true' :interval='3000' :duration='1000'>
|
||||
<swiper-item v-for='(item, index) in bannerList' :key='index'>
|
||||
<image :src='item' mode='aspectFill' />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useUserStore } from '@/store';
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const store = useUserStore();
|
||||
|
||||
const bannerList = ref<string[]>(['1', '2', '3', '4']);
|
||||
const bannerList = ref<string[]>(['https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/0D/ChMkJ1eV_EiIckZnAAxoKo4d-a0AAT0gwJxjq4ADGhC893.jpg',
|
||||
'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
|
||||
'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
|
||||
'https://img.zcool.cn/community/01c8f15aeac135a801207fa16836ae.jpg@1280w_1l_2o_100sh.jpg']);
|
||||
const currentBannerIndex = ref(0);
|
||||
|
||||
const submenuList = [
|
||||
{
|
||||
title: '注册有礼',
|
||||
icon: assetsUrl + 'ic_register_gift.png',
|
||||
path: '/pages/order/order'
|
||||
},
|
||||
{
|
||||
title: '团购秒杀',
|
||||
icon: assetsUrl + 'ic_groupbuy.png',
|
||||
path: '/pages/order/order'
|
||||
},
|
||||
{
|
||||
title: '入群有礼',
|
||||
icon: assetsUrl + 'ic_group_gift.png',
|
||||
path: '/pages/order/order'
|
||||
}
|
||||
];
|
||||
|
||||
const swiperChange = (e: any) => {
|
||||
currentBannerIndex.value = e.detail.current;
|
||||
};
|
||||
|
||||
console.log('store.user_name', store.user_name);
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.swiper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.basic-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
top: -100rpx;
|
||||
}
|
||||
|
||||
.indicator-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
.normal {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: #707070;
|
||||
border-radius: 50%;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
@extend .normal;
|
||||
background: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
margin: 0 24rpx;
|
||||
}
|
||||
|
||||
.user-info-card {
|
||||
@extend .card;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 30rpx;
|
||||
align-items: center;
|
||||
margin-top: 14rpx;
|
||||
|
||||
.user-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.integral-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-view {
|
||||
@extend .integral-view;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #F32B2B;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 40rpx;
|
||||
width: 0.5rpx;
|
||||
height: 100%;
|
||||
background: #C7C7C7;
|
||||
}
|
||||
|
||||
.menu-view {
|
||||
@extend .card;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40rpx 0 32rpx 0;
|
||||
margin-top: 20rpx;
|
||||
|
||||
view:not(:nth-of-type(2)):nth-of-type(n+1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.second-menu-view {
|
||||
@extend .menu-view;
|
||||
|
||||
image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 23rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-recommend {
|
||||
margin-top: 30rpx;
|
||||
margin-left: 24rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bottom-banner-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20rpx 24rpx 0 24rpx;
|
||||
border-radius: 20rpx;
|
||||
height: 285rpx;
|
||||
|
||||
swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user