5 changed files with 320 additions and 3 deletions
-
14pages.json
-
4pages/discover/discover.vue
-
183pages/user/my/center.vue
-
2pages/user/my/my.vue
-
120pages/user/my/setting.vue
@ -0,0 +1,183 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="false" :showIcon="false" titleColor="white" bgColor="transparent!important" title="会员中心"></lf-nav> |
|||
<view class="center-top"> |
|||
<view class="ocupy"></view> |
|||
<view class="lf-flex lf-p-32 lf-row-between"> |
|||
<view class="lf-row-between"> |
|||
<view> |
|||
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="center-img"></image> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<view class="lf-color-white lf-font-36 lf-m-l-20">182****5380 </view> |
|||
<view class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-white"></view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-center lf-flex-column"> |
|||
<view class="lf-iconfont icon-shoucang lf-color-white"></view> |
|||
<view class="lf-font-24 lf-color-white">支付码</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-flex lf-row-between center-tag"> |
|||
<view class="lf-row-center lf-flex-column"> |
|||
<view class="lf-font-36 lf-color-white">0</view> |
|||
<view class="lf-font-24 lf-color-white">积分</view> |
|||
</view> |
|||
<view class="lf-row-center lf-flex-column"> |
|||
<view class="lf-font-36 lf-color-white">0.00</view> |
|||
<view class="lf-font-24 lf-color-white">余额</view> |
|||
</view> |
|||
<view class="lf-row-center lf-flex-column"> |
|||
<view class="lf-font-36 lf-color-white">0</view> |
|||
<view class="lf-font-24 lf-color-white">优惠券</view> |
|||
</view> |
|||
</view> |
|||
<view class="center-card"> |
|||
<view class="lf-p-30 lf-row-between lf-w-100"> |
|||
<view class="lf-flex-column"> |
|||
<view class="lf-font-48 lf-font-bold" style="color: #15716E;"> |
|||
VIP 预备会员 |
|||
</view> |
|||
<view class="lf-font-28" style="color: #15716E;">卡号: 638329</view> |
|||
</view> |
|||
<view class="card-tag"> |
|||
会员权益 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lf-row-center"> |
|||
<view class="order-card"> |
|||
<view class="lf-row-between"> |
|||
<view class="lf-color-black lf-font-32 lf-font-bold"> |
|||
商家订单 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<view class="lf-font-24 lf-color-777">全部订单</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
<view class="order-tag lf-flex-wrap"> |
|||
<view class="order-children" v-for="i of 4"> |
|||
<view class="function-tag"></view> |
|||
<view class="lf-color-black lf-font-28 lf-m-t-20">待付款</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lf-row-center"> |
|||
<view class="order-card1"> |
|||
<view class="lf-row-between"> |
|||
<view class="lf-color-black lf-font-32 lf-font-bold"> |
|||
我的服务 |
|||
</view> |
|||
<view></view> |
|||
</view> |
|||
<view class="order-tag lf-flex-wrap"> |
|||
<view class="order-children" v-for="i of 5"> |
|||
<view class="function-tag"></view> |
|||
<view class="lf-color-black lf-font-28 lf-m-t-20">会员服务</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.order-children { |
|||
width: 134rpx; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right: 27rpx; |
|||
&:nth-child(4n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 5) { |
|||
margin-top: 50rpx; |
|||
} |
|||
} |
|||
.function-tag { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
background: #D8D8D8; |
|||
border: 1rpx solid #979797; |
|||
border-radius: 50%; |
|||
} |
|||
.order-tag { |
|||
padding: 50rpx 0; |
|||
display: flex; |
|||
flex: wrap; |
|||
// justify-content: space-around; |
|||
align-items: center; |
|||
} |
|||
.order-card { |
|||
padding: 30rpx 30rpx 0 30rpx; |
|||
width: 686rpx; |
|||
height: 100%; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
border-radius: 20rpx; |
|||
margin: 150rpx 0 30rpx 0; |
|||
} |
|||
.order-card1 { |
|||
padding: 30rpx 30rpx 0 30rpx; |
|||
width: 686rpx; |
|||
height: 100%; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
border-radius: 20rpx; |
|||
} |
|||
.card-tag { |
|||
width: 144rpx; |
|||
height: 53rpx; |
|||
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%); |
|||
border-radius: 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
color: white; |
|||
justify-content: center; |
|||
font-size: 26rpx; |
|||
} |
|||
.center-card { |
|||
width: 686rpx; |
|||
height: 160rpx; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
border-radius: 20rpx; |
|||
margin: 0 auto; |
|||
position: absolute; |
|||
bottom: -120rpx; |
|||
left: 32rpx; |
|||
z-index: 9999; |
|||
} |
|||
.center-tag { |
|||
padding: 0 80rpx 0 80rpx; |
|||
} |
|||
.ocupy { |
|||
height: 160rpx; |
|||
width: 100%; |
|||
} |
|||
.center-top { |
|||
position: relative; |
|||
width: 750rpx; |
|||
height: 512rpx; |
|||
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%); |
|||
} |
|||
.center-img { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border: 2rpx solid #FFFFFF; |
|||
border-radius: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,120 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" title="设置"></lf-nav> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
昵称 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<view class="lf-font-28 lf-color-555">182****5380</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
头像 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<view class="lf-row-center"> |
|||
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="set-img"></image> |
|||
</view> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
会员资料 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
地址管理 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<self-line/> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
修改手机号 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
支付密码设着 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<self-line/> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
关于我们 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
客服电话 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<view class="lf-font-28 lf-color-555">0315-7483482</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<button class="set-btn">退出账号</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.set-btn { |
|||
width: 550rpx; |
|||
height: 100rpx; |
|||
background: #15716E; |
|||
border-radius: 50rpx; |
|||
margin: 40rpx auto; |
|||
font-size: 32rpx; |
|||
color: white; |
|||
} |
|||
.set-img { |
|||
width: 41rpx; |
|||
height: 41rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.set-tag { |
|||
height: 100rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue