<template>
|
<view class="tcx">
|
<view class="tcx_bg">
|
<view class="index_box_vip_row">
|
<view class="vip1">
|
<text>电单车年卡</text>
|
<text>365</text>
|
</view>
|
<view class="vip2">
|
<text>365天畅骑，享受骑车乐趣</text>
|
<u>¥699</u>
|
</view>
|
<view class="vip3">
|
<view class="vip3_info">低至1元/天</view>
|
</view>
|
</view>
|
<view class="info">
|
<view class="info_title">适用规则</view>
|
<view class="info_list">
|
<view class="info_list_row">· 适用项目：电动车</view>
|
<view class="info_list_row">· 适用项目：电动车</view>
|
<view class="info_list_row">· 适用项目：电动车</view>
|
</view>
|
</view>
|
<view class="info">
|
<view class="info_title">套餐说明</view>
|
<view class="info_text">
|
套餐说明内容套餐说明内容套餐说明内容，套餐说明内容套餐说明内容套餐说明内容，套餐说明内容套餐说明内容套餐说明内容。
|
套餐说明内容套餐说明内容套餐说明内容，套餐说明内容套餐说明内容套餐说明内容，套餐说明内容套餐说明内容套餐说明内容，套餐说明内容套餐说明内容套餐说明内容，套餐说明内容套餐说明内容套餐说明内容。
|
套餐说明内容套餐说明内容套餐说明内容，套餐说明内容套餐说明内容套餐说明内容，套餐说明内容套餐说明内容套餐说明内容。
|
</view>
|
</view>
|
<view style="width: 100%; height: calc(96rpx + 20rpx + env(safe-area-inset-bottom));"></view>
|
</view>
|
<view class="tcx_footer">
|
<viwe class="tcx_footer_button" @click="jump">¥365 购买套餐</viwe>
|
<view style="padding-bottom: env(safe-area-inset-bottom)"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
|
};
|
},
|
methods: {
|
jump() {
|
uni.navigateTo({
|
url: '/pages/paymentPage/packageDetails'
|
});
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #F7F7F7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.tcx {
|
width: 100%;
|
.tcx_bg {
|
width: 100%;
|
height: 400rpx;
|
padding: 40rpx 20rpx;
|
box-sizing: border-box;
|
background: linear-gradient(#01B6AD 0%, #F7F7F7 100%);
|
.index_box_vip_row {
|
width: 100%;
|
height: 226rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
|
border-radius: 12rpx;
|
padding: 24rpx;
|
box-sizing: border-box;
|
.vip1 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #303030;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 40rpx;
|
color: #FF5A31;
|
&:before {
|
content: '￥';
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #FF5A31;
|
}
|
}
|
}
|
}
|
.vip2 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 10rpx;
|
margin-bottom: 16rpx;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
}
|
u {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
}
|
.vip3 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.vip3_info {
|
padding: 6rpx 12rpx;
|
box-sizing: border-box;
|
background: rgba(255,90,49,0.1);
|
border-radius: 8rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #FF5A31;
|
}
|
}
|
}
|
.info {
|
width: 100%;
|
padding: 32rpx 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
margin-top: 20rpx;
|
.info_title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #303030;
|
margin-bottom: 26rpx;
|
}
|
.info_list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.info_list_row {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
.info_text {
|
width: 100%;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
}
|
.tcx_footer {
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.tcx_footer_button {
|
width: 100%;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1,182,173,0.24);
|
border-radius: 46rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
margin-bottom: 20rpx;
|
}
|
}
|
}
|
</style>
|
