10 changed files with 600 additions and 283 deletions
@ -0,0 +1,222 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="header"> |
|||
<view class="vip-info"> |
|||
<image :src="userInfo.img" mode="" class="vip-info__avatar"></image> |
|||
<div> |
|||
<div class="vip-info__name">{{userInfo.username}}</div> |
|||
<div class="vip-info__tips">你还不是会员,开通立享 9 项特权</div> |
|||
</div> |
|||
</view> |
|||
<view class="vip-explan"> |
|||
会员说明 |
|||
<uni-icons type="help" size="20" color="#eee" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="vip-box"> |
|||
<view class="vip-box__item item-active"> |
|||
<view class="title"> |
|||
1年 |
|||
</view> |
|||
<view class="price"> |
|||
<text class="price-unit">¥</text> 189 |
|||
</view> |
|||
<view class="o-price"> |
|||
¥388 |
|||
</view> |
|||
<view class="save-box"> |
|||
立省60元 |
|||
</view> |
|||
</view> |
|||
<view class="vip-box__item"> |
|||
<view class="title"> |
|||
1年 |
|||
</view> |
|||
<view class="price"> |
|||
<text class="price-unit">¥</text> 189 |
|||
</view> |
|||
<view class="o-price"> |
|||
¥388 |
|||
</view> |
|||
<view class="save-box"> |
|||
立省60元 |
|||
</view> |
|||
</view> |
|||
<view class="vip-box__item"> |
|||
<view class="title"> |
|||
1年 |
|||
</view> |
|||
<view class="price"> |
|||
<text class="price-unit">¥</text> 189 |
|||
</view> |
|||
<view class="o-price"> |
|||
¥388 |
|||
</view> |
|||
<view class="save-box"> |
|||
立省60元 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<button class="sumbit-btn"> |
|||
立即开通 |
|||
</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfo: null |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
onShow() { |
|||
this.userInfo = uni.getStorageSync('userInfo') |
|||
}, |
|||
created() { |
|||
if (this.userInfo) { |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
} else { |
|||
uni.navigateBack() |
|||
uni.showToast({ |
|||
title: '请先登录', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@mixin flex($center: center, $content: center) { |
|||
display: flex; |
|||
align-items: $center; |
|||
justify-content: $content; |
|||
} |
|||
|
|||
.container { |
|||
padding: 30rpx; |
|||
background: #fff; |
|||
|
|||
.vip-box { |
|||
margin: 30px 0; |
|||
@include flex(center,space-between); |
|||
|
|||
.vip-box__item { |
|||
width: 30%; |
|||
height: 300rpx; |
|||
padding: 20rpx; |
|||
@include flex; |
|||
flex-direction: column; |
|||
color: #000; |
|||
border: 1px solid #eee; |
|||
border-radius: 30rpx; |
|||
|
|||
&>view { |
|||
margin-bottom: 15rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 38rpx; |
|||
} |
|||
|
|||
.price { |
|||
font-weight: bold; |
|||
font-size: 48rpx; |
|||
color: #1991fd; |
|||
|
|||
.price-unit{ |
|||
font-size: 24rpx |
|||
} |
|||
} |
|||
|
|||
.o-price{ |
|||
color: #eee; |
|||
font-size: 26rpx; |
|||
text-decoration:line-through; |
|||
} |
|||
|
|||
.save-box{ |
|||
border-radius: 30rpx; |
|||
width: 140rpx; |
|||
height: 50rpx; |
|||
background-color: #e8f4ff; |
|||
font-size: 24rpx; |
|||
color: #68c2ff; |
|||
@include flex; |
|||
} |
|||
} |
|||
|
|||
.item-active { |
|||
border: none; |
|||
background: linear-gradient(to bottom right, #68c2ff, #0684fe); |
|||
|
|||
|
|||
|
|||
.price,.title{ |
|||
color: #fff; |
|||
} |
|||
|
|||
.save-box{ |
|||
color: #fff; |
|||
background-color: rgba(255,255,255,.1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sumbit-btn { |
|||
margin-top: 60rpx; |
|||
height: 88rpx; |
|||
@include flex; |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
background: linear-gradient(to bottom right, #68c2ff, #0684fe); |
|||
} |
|||
|
|||
.header { |
|||
height: 200rpx; |
|||
background-color: gray; |
|||
padding: 20rpx; |
|||
@include flex(center,space-between); |
|||
border-radius: 20rpx; |
|||
|
|||
.vip-explan { |
|||
color: #eee; |
|||
font-size: 24rpx; |
|||
@include flex(center,flex-start); |
|||
|
|||
} |
|||
|
|||
.vip-info { |
|||
@include flex(center,flex-start); |
|||
|
|||
.vip-info__avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.vip-info__name { |
|||
color: #fff; |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.vip-info__tips { |
|||
color: #eee; |
|||
font-size: 24rpx |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Binary file not shown.
Loading…
Reference in new issue