|
@@ -0,0 +1,125 @@
|
|
|
|
+<template>
|
|
|
|
+ <view >
|
|
|
|
+ <ujp-navbar title="包月卡购买" ></ujp-navbar>
|
|
|
|
+ <!-- 卡片 -->
|
|
|
|
+ <view class="monthly-card">
|
|
|
|
+ <view class="main">
|
|
|
|
+ <view class="title-1">
|
|
|
|
+ 充电服务费包月卡
|
|
|
|
+ </view>
|
|
|
|
+ <view class="title-2">
|
|
|
|
+ 有效期内,合约充电站使用度数无上限
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <img class="cover" src="../../assets/img/cover@3.png" alt="">
|
|
|
|
+ </view>
|
|
|
|
+ <view class="slogan-1">
|
|
|
|
+ 充电服务费包月卡
|
|
|
|
+ </view>
|
|
|
|
+ <view class="slogan-2">
|
|
|
|
+ 单次购买、整月受益!
|
|
|
|
+ </view>
|
|
|
|
+ <view class="slogan-3">
|
|
|
|
+ 仅限车主购买,适用于平台对外开放充电站
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 立即开通 -->
|
|
|
|
+ <view class="bottom">
|
|
|
|
+ <button class="dredge">立即开通 ¥59.90/月</button>
|
|
|
|
+ <p>开通表示阅读并同意
|
|
|
|
+ <text class="agreement">《服务费折扣协议》</text>
|
|
|
|
+ </p>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ page{
|
|
|
|
+ background-color: #2a2c31;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 卡片
|
|
|
|
+ .monthly-card{
|
|
|
|
+ margin: 20px;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ height: 150px;
|
|
|
|
+ background:linear-gradient(#F2E6CA,#C9A87B);
|
|
|
|
+ position: relative;
|
|
|
|
+ .main{
|
|
|
|
+ padding: 24px 0 24px 24px ;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background: url(@/assets/img/card@3.png) ;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: 30% 10%;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
|
+ .title-1{
|
|
|
|
+ line-height: 28px;
|
|
|
|
+
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
+ }
|
|
|
|
+ .title-2{
|
|
|
|
+ line-height: 24px;
|
|
|
|
+
|
|
|
|
+ font-size: 17px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .cover{
|
|
|
|
+ width: 102%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: -10px;
|
|
|
|
+ left: -2px;
|
|
|
|
+ right: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .slogan-1{
|
|
|
|
+ height: 36px;
|
|
|
|
+ color: rgba(234, 217, 180, 100);
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
+ }
|
|
|
|
+ .slogan-2{
|
|
|
|
+ height: 36px;
|
|
|
|
+ color: rgba(234, 217, 180, 100);
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
+ }
|
|
|
|
+ .slogan-3{
|
|
|
|
+ height: 20px;
|
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ // 立即开通
|
|
|
|
+ .bottom{
|
|
|
|
+
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 40px;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ .dredge{
|
|
|
|
+ width: 72.2%;
|
|
|
|
+ border-radius: 50px;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ background:linear-gradient(to right,#C9A87B,#F2E6CA);
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
+ }
|
|
|
|
+ p{
|
|
|
|
+ height: 20px;
|
|
|
|
+ color: rgba(226, 222, 217, 100);
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ .agreement{
|
|
|
|
+ color: #897a69;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|