|
|
@@ -0,0 +1,253 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <ujp-navbar title="选购服务费月卡"></ujp-navbar>
|
|
|
+ <!-- 提示 -->
|
|
|
+<template>
|
|
|
+ <u-alert-tips type="warning" :title="title" :description="description" :show-icon="true"></u-alert-tips>
|
|
|
+</template>
|
|
|
+<!-- 卡片 -->
|
|
|
+<view class="main">
|
|
|
+ <view class="card-1">
|
|
|
+ <view class="price">
|
|
|
+ <view class="current-price">
|
|
|
+ 99<text>元/月</text>
|
|
|
+ </view>
|
|
|
+ <view class="radio-box">
|
|
|
+
|
|
|
+ <u-checkbox-group>
|
|
|
+ <u-checkbox v-model="checked" active-color="#446D94" shape="circle" size="48"></u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="card-2">
|
|
|
+ <view class="price">
|
|
|
+ <view class="current-price">
|
|
|
+ 99<text>元/月</text>
|
|
|
+ </view>
|
|
|
+ <view class="original-cost">
|
|
|
+ 原价 198元/月
|
|
|
+ </view>
|
|
|
+ <view class="radio-box">
|
|
|
+ <u-checkbox-group>
|
|
|
+ <u-checkbox v-model="checked" active-color="#B29467" shape="circle" size="48"></u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+</view>
|
|
|
+<!-- 按钮 -->
|
|
|
+<view class="button">
|
|
|
+ <u-button shape="circle"><text style="font-size: 14px;">￥</text>59.9 开通1个月会员</u-button>
|
|
|
+ <u-button shape="circle" class="btn-2"><text style="font-size: 14px;">￥</text>99 <text class="price">198</text> 开通1个月会员
|
|
|
+
|
|
|
+ <view class="position">
|
|
|
+ <view id="talkbubble">限时5折</view>
|
|
|
+ </view>
|
|
|
+ </u-button>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="hint">
|
|
|
+ 开通表示阅读并同意《服务费折扣协议》
|
|
|
+ </view>
|
|
|
+</view>
|
|
|
+ <!-- 须知 -->
|
|
|
+ <view class="notice">
|
|
|
+ <u-divider fontSize="36" border-color="#bbc039" color="#101010">购卡须知</u-divider>
|
|
|
+ <view class="text">
|
|
|
+ <view class="num">
|
|
|
+ 01
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 服务费月卡默认与购卡人账户进行关联，所涉权益仅可绑定单个车牌，即账户、月卡、车牌三者关联形成一个权益主体
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view class="num">
|
|
|
+ 02
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 服务费月卡有效期内，持卡人在指定充电站为绑定车辆充电，可享受充电服务费全免。持卡人给非绑定车辆充电，将正常收取充电服务费。。
|
|
|
+ </view></view>
|
|
|
+ <view class="text">
|
|
|
+ <view class="num">
|
|
|
+ 03
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 如车牌等信息填写错误，请致电售后客服进行处理。本卡一经售出，不支持任何形式的退换。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view class="num">
|
|
|
+ 04
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 本卡一经售出，不支持任何形式的退换。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ description: '盟主能量包本期限时优惠活动将于9月16日结束。',
|
|
|
+ checked:"false"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ /deep/.u-alert-desc{
|
|
|
+ color: #ff7300;
|
|
|
+ }
|
|
|
+ // 卡片
|
|
|
+ .main{
|
|
|
+ background-color: #404A5E ;
|
|
|
+ padding: 20px 20px 30px 20px;
|
|
|
+ .price{
|
|
|
+ float: right;
|
|
|
+ margin: 32rpx 32rpx 0;
|
|
|
+ }
|
|
|
+ .current-price{
|
|
|
+ font-size: 32px;
|
|
|
+ color: #101010;
|
|
|
+
|
|
|
+ text{
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .original-cost{
|
|
|
+ color: rgba(75, 65, 50, 100);
|
|
|
+ text-decoration: line-through;
|
|
|
+
|
|
|
+ }
|
|
|
+ /deep/.u-iconfont{
|
|
|
+ font-size: 18px !important;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .card-1{
|
|
|
+ background: url(@/assets/img/card_normal.png) no-repeat ;
|
|
|
+
|
|
|
+ background-size:cover;
|
|
|
+ height: 150px;
|
|
|
+ /deep/.u-checkbox__icon-wrap{
|
|
|
+ background-color: #446D94 ;
|
|
|
+ }
|
|
|
+ .radio-box{
|
|
|
+ margin-top: 112rpx;
|
|
|
+ float: right;
|
|
|
+ margin-right: -30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-2{
|
|
|
+ background: url(@/assets/img/card_operate.png) no-repeat ;
|
|
|
+ background-size:cover;
|
|
|
+ height: 150px;
|
|
|
+ margin-top: 16px;
|
|
|
+ /deep/.u-checkbox__icon-wrap{
|
|
|
+ background-color: #B29467 ;
|
|
|
+ }
|
|
|
+ .radio-box{
|
|
|
+ margin-top: 78rpx;
|
|
|
+ float: right;
|
|
|
+ margin-right: -30rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+// 按钮
|
|
|
+.button{
|
|
|
+ margin-top: -20rpx;
|
|
|
+ border-radius: 16px 16px 0px 0px;
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ padding: 20px 20px 16px 20px;
|
|
|
+ .u-btn{
|
|
|
+ background:linear-gradient(#E1D0A5,#E4BE84);
|
|
|
+ box-shadow: 0px 4px 10px 0px rgba(207, 175, 118, 40);
|
|
|
+ border-radius: 50px;
|
|
|
+ color: #101010;
|
|
|
+ font-size: 18px !important;
|
|
|
+ line-height: 44px;
|
|
|
+ height: 44px;
|
|
|
+ .price{
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin: auto 4px;
|
|
|
+ font-size: 12px
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hint{
|
|
|
+ color: rgba(159, 157, 154, 100);
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .btn-2{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .position{
|
|
|
+ position: absolute;
|
|
|
+ top: -16px;
|
|
|
+ left: 24%;
|
|
|
+ }
|
|
|
+ #talkbubble {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 60px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ background: red;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ #talkbubble:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 100%;
|
|
|
+ right: 45%;
|
|
|
+ border-top:5px solid red;
|
|
|
+ border-right:5px solid transparent;
|
|
|
+ border-left: 5px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 须知
|
|
|
+ .notice{
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 20px 20px 30px 30px;
|
|
|
+ /deep/.u-divider{
|
|
|
+ margin-bottom: 16px !important;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ line-height: 24px;
|
|
|
+ display: flex;
|
|
|
+ .num{
|
|
|
+ margin-right:8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
