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