You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
3.1 KiB
170 lines
3.1 KiB
<template>
|
|
<view class="vnfee">
|
|
<view class="vnf-tit">
|
|
<view class="vntit">请选择入网套餐</view>
|
|
<view class="vntips">请了解套餐内容后，根据实际需要自行选择入网套餐</view>
|
|
</view>
|
|
<!-- 套餐类型 -->
|
|
<view class="cardlist">
|
|
<!-- 单月购买 -->
|
|
<block>
|
|
<view class="card-item">
|
|
<text class="cdname">单月购买</text>
|
|
<view class="cdprice">
|
|
<text class="price-unit">¥</text>
|
|
<text class="price-num">48.8</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 续费月卡 -->
|
|
<block>
|
|
<view class="card-item">
|
|
<text class="cdname">续费月卡</text>
|
|
<view class="cdprice">
|
|
<text class="price-unit">¥</text>
|
|
<text class="price-num">48.8</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 续费年卡 -->
|
|
<block>
|
|
<view class="card-item active">
|
|
<text class="cdname fire">续费年卡</text>
|
|
<view class="cdprice">
|
|
<text class="price-unit">¥</text>
|
|
<text class="price-num">368.8</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<!-- card 说明 -->
|
|
<view class="carddesc">
|
|
<view class="cdline">平均每月：30.8 元</view>
|
|
<view class="cdline">套餐类型：次年到期自动续费（可提前申请取消）</view>
|
|
<view class="cdline">套餐有效期：12个月 + 6个月（新用户开通成功即加送6个月）</view>
|
|
<view class="cdline">最高可更换绑定设备：3台（同一时间只允许1台设备登录）</view>
|
|
<view class="cdline">最高可绑定登录账号：3个</view>
|
|
</view>
|
|
<view class="xcross"></view>
|
|
<!-- 付款方式 -->
|
|
<view class="pmethod">
|
|
<view class="">
|
|
<image></image>
|
|
<text></text>
|
|
</view>
|
|
<view class="">
|
|
<radio color="#F6390D"></radio>
|
|
</view>
|
|
</view>
|
|
<view class="xcross"></view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.vnf-tit{
|
|
width: 100%;
|
|
padding-left: 36rpx;
|
|
margin-top: 46rpx;
|
|
|
|
.vntit{
|
|
font-size: 46rpx;
|
|
line-height: 1.6;
|
|
}
|
|
.vntips{
|
|
padding: 10rpx;
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
// 套餐
|
|
.cardlist{
|
|
margin-top: 46rpx;
|
|
|
|
|
|
.card-item{
|
|
border: 2rpx solid #FEBD45;
|
|
width: 30%;
|
|
margin-left: 3%;
|
|
float: left;
|
|
height: 260rpx;
|
|
text-align: center;
|
|
border-radius: 4%;
|
|
|
|
.cdname{
|
|
font-size: 32rpx;
|
|
line-height: 1.8;
|
|
font-weight: 600;
|
|
padding: 12rpx 0 12rpx;
|
|
margin-top: 26rpx;
|
|
display: block;
|
|
|
|
&.fire{
|
|
background: url('../../static/fire.svg') no-repeat 10rpx center;
|
|
}
|
|
}
|
|
|
|
.cdprice{
|
|
margin-top: 20rpx;
|
|
font-weight: 600;
|
|
color: #C5884C;
|
|
|
|
.price-unit{
|
|
font-size: 36rpx;
|
|
padding-right: 12rpx;
|
|
}
|
|
|
|
.price-num{
|
|
font-size: 52rpx;
|
|
}
|
|
}
|
|
|
|
&.first{
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
&:hover{
|
|
background-color: #FEBD45;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
//套餐说明
|
|
.carddesc{
|
|
clear: both;
|
|
margin-top: 36rpx;
|
|
padding-top: 32rpx;
|
|
padding-left: 32rpx;
|
|
|
|
.cdline{
|
|
line-height: 36rpx;
|
|
font-size: 26rpx;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.xcross{
|
|
height: 2rpx;
|
|
width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 26rpx;
|
|
background-color: #eee;
|
|
}
|
|
</style>
|
|
|