zhouzhenyuan
1 year ago
parent
80c78c961b
commit
62b0448d30
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,274 @@ |
||||
<template> |
||||
<view class="member"> |
||||
<view> |
||||
<u-navbar title="会员中心" back-icon-color="#fff" :border-bottom="false" title-color="#333" |
||||
:background="background"></u-navbar> |
||||
</view> |
||||
<view class="tips"> |
||||
<image src="/static/default-logo.png" mode="" class="headIcon"></image> |
||||
<view class="meInfo"> |
||||
<view class="info"> |
||||
<view class="name"> |
||||
Deioio |
||||
</view> |
||||
<view class="hy"> |
||||
v月卡会员 |
||||
</view> |
||||
</view> |
||||
<view class="time"> |
||||
有效期至2024.01.21 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="main"> |
||||
<view class="mTitle"> |
||||
月卡订单记录 |
||||
</view> |
||||
<view class="card"> |
||||
<view class="tp"> |
||||
<view class="info"> |
||||
生效中 |
||||
</view> |
||||
</view> |
||||
<view class="detail"> |
||||
<view class="topLine"> |
||||
<view class="send"> |
||||
省钱月卡1个月 |
||||
</view> |
||||
<view class="btn"> |
||||
活动赠送 |
||||
</view> |
||||
</view> |
||||
<view class="time"> |
||||
2023.12.22-2024.01.21 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="showInfo"> |
||||
已展示近18个月省钱月卡订单 |
||||
</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="fLeft"> |
||||
<view class="ys"> |
||||
已省 <text>￥3.2</text> |
||||
</view> |
||||
<view class="yj"> |
||||
原价 ￥30 |
||||
</view> |
||||
</view> |
||||
<view class="btn"> |
||||
<text>￥36</text>开卡3个月 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import img from "@/static/member/top.png" |
||||
export default { |
||||
data() { |
||||
return { |
||||
payTypeChose:true, |
||||
isChose: 0, |
||||
isVip: false, |
||||
background: { |
||||
background: 'url(' + img + ') center top no-repeat', |
||||
backgroundSize: '100% auto', |
||||
}, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.member { |
||||
width: 100%; |
||||
background: url('../../static/member/merBack.png') 100% no-repeat; |
||||
background-size: 100% 100%; |
||||
position: relative; |
||||
} |
||||
|
||||
.tips { |
||||
width: 698rpx; |
||||
height: 234rpx; |
||||
margin: 46rpx 0 0 26rpx; |
||||
background-image: url('/static/member/bg.png'); |
||||
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0rpx 0 0 34rpx; |
||||
|
||||
.headIcon { |
||||
width: 114rpx; |
||||
height: 114rpx; |
||||
margin-right: 30rpx; |
||||
margin-top: 12rpx; |
||||
} |
||||
|
||||
.meInfo { |
||||
.info { |
||||
display: flex; |
||||
margin-bottom: 26rpx; |
||||
|
||||
.name { |
||||
height: 50rpx; |
||||
font-size: 36rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #785B45; |
||||
line-height: 50rpx; |
||||
margin-right: 18rpx; |
||||
} |
||||
|
||||
.hy { |
||||
width: 126rpx; |
||||
height: 42rpx; |
||||
background: rgba(255, 255, 255, 0.71); |
||||
border-radius: 62rpx 62rpx 62rpx 62rpx; |
||||
opacity: 1; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 42rpx; |
||||
|
||||
} |
||||
} |
||||
|
||||
.time { |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 34rpx; |
||||
|
||||
} |
||||
} |
||||
.buyInfo{ |
||||
// width: 112rpx; |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 40rpx; |
||||
margin-left: 86rpx; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
.main { |
||||
width: 750rpx; |
||||
height: 1296rpx; |
||||
background: #FFFFFF; |
||||
opacity: 1; |
||||
border-radius: 50rpx 50rpx 0 0; |
||||
position: relative; |
||||
top: -30rpx; |
||||
padding-top: 56rpx; |
||||
} |
||||
|
||||
.mTitle { |
||||
width: 192rpx; |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #8B4338; |
||||
line-height: 44rpx; |
||||
margin: 0rpx 0 0 38rpx; |
||||
} |
||||
|
||||
.card { |
||||
width: 654rpx; |
||||
height: 192rpx; |
||||
background: #FFF4F4; |
||||
border-radius: 8rpx 8rpx 8rpx 8rpx; |
||||
opacity: 1; |
||||
margin: 26rpx 0 0 38rpx; |
||||
display: flex; |
||||
|
||||
.tp { |
||||
|
||||
width: 84rpx; |
||||
height: 84rpx; |
||||
background-image: url('../../static/member/tip.png'); |
||||
background-size: 100% 100%; |
||||
|
||||
.info { |
||||
width: 84rpx; |
||||
height: 40rpx; |
||||
line-height: 40rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
transform: rotate(-45deg); |
||||
} |
||||
} |
||||
|
||||
.detail { |
||||
margin-top: 48rpx; |
||||
|
||||
.topLine { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.send { |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #785B45; |
||||
line-height: 40rpx; |
||||
} |
||||
|
||||
.btn { |
||||
width: 106rpx; |
||||
height: 36rpx; |
||||
border-radius: 50rpx 50rpx 50rpx 50rpx; |
||||
opacity: 1; |
||||
border: 2rpx solid rgba(134, 102, 77, 0.45); |
||||
text-align: center; |
||||
line-height: 36rpx; |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: rgba(120, 91, 69, 0.63); |
||||
line-height: 36rpx; |
||||
margin-left: 8rpx; |
||||
} |
||||
} |
||||
|
||||
.time { |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 34rpx; |
||||
margin-top: 28rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.showInfo { |
||||
width: 100%; |
||||
|
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #785B45; |
||||
line-height: 40rpx; |
||||
text-align: center; |
||||
margin-top: 46rpx; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
Loading…
Reference in new issue