|
|
@@ -0,0 +1,181 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="优惠券"></u-navbar>
|
|
|
+ <view class="main">
|
|
|
+ <view class="content">
|
|
|
+ <view class="img">
|
|
|
+ <img src="../../assets/img/coupons.png" alt="">
|
|
|
+ </view>
|
|
|
+ <p class="title">亲爱的车友</p>
|
|
|
+ <view class="text">
|
|
|
+ 您好！因前天荆鹏快充站在做电力调配测试，对您的充电造成了不好的体验，在此我们深表歉意，为此我们赠送您一张体验券，请点击下方查收，欢迎您再次体验我们的充电服务，并为我们的服务提出宝贵意见，最后，祝您生活愉快！
|
|
|
+ </view>
|
|
|
+ <view class="sign">
|
|
|
+ 51充电联盟荆鹏快充站
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 专享优惠券 -->
|
|
|
+ <view class="exclusive">
|
|
|
+ <p>专享优惠券</p>
|
|
|
+ <view class="img">
|
|
|
+ <img src="../../assets/img/Frame915.png" alt="">
|
|
|
+
|
|
|
+ <view class="num">
|
|
|
+ 20
|
|
|
+ </view>
|
|
|
+ <view class="unit">元</view>
|
|
|
+ <view class="ticket-info">
|
|
|
+ <view class="ticket-name">
|
|
|
+ 无门槛充电抵扣券
|
|
|
+ </view>
|
|
|
+ <view class="condition">
|
|
|
+ 限荆鹏快充站使用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <button class="btn">领取优惠券</button>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page{
|
|
|
+ background-color: #FF4A2D;
|
|
|
+ padding-bottom: 90px;
|
|
|
+ }
|
|
|
+ .main{
|
|
|
+ width: 87.2%;
|
|
|
+ margin: 100px auto 0;
|
|
|
+ position: relative;
|
|
|
+ .content{
|
|
|
+ padding: 24px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
|
|
|
+ border: 2px solid rgba(253, 217, 141, 100);
|
|
|
+ border-radius: 8px;
|
|
|
+ .img{
|
|
|
+ width: 44vw;
|
|
|
+ height: 134px;
|
|
|
+ position: absolute;
|
|
|
+ top: -88px;
|
|
|
+ right: 0px;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(84, 45, 45, 100);
|
|
|
+ margin-bottom: 13px;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgba(84, 45, 45, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: justify;
|
|
|
+ text-decoration:underline;
|
|
|
+ text-decoration-color:#ECE3BA;
|
|
|
+ text-indent: 32px;
|
|
|
+ }
|
|
|
+ .sign{
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 专享优惠券
|
|
|
+ .exclusive{
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 16px 24px 24px 24px ;
|
|
|
+ box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
|
|
|
+ border: 2px solid rgba(253, 217, 141, 100);
|
|
|
+ border-radius: 8px;
|
|
|
+ p{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(255, 73, 75, 100);
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 74.4vw;
|
|
|
+ height: 84px;
|
|
|
+ margin-top: 16px;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .num{
|
|
|
+ font-size:40px;
|
|
|
+ color: rgba(252, 237, 179, 100);
|
|
|
+ position: absolute;
|
|
|
+ top:12px;
|
|
|
+ left: 2vw;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .unit{
|
|
|
+
|
|
|
+ font-size: 20px;
|
|
|
+ color: rgba(252, 237, 179, 100);
|
|
|
+ position: absolute;
|
|
|
+ top: 29px;
|
|
|
+ left: 18vw;
|
|
|
+ }
|
|
|
+ .ticket-info{
|
|
|
+ width: 40vw;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 18px;
|
|
|
+ right: 18px;
|
|
|
+ .ticket-name{
|
|
|
+ line-height: 25px;
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .condition{
|
|
|
+ line-height: 22px;
|
|
|
+ color: #8a6f6f;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 87.4%;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ background-image: linear-gradient(#ffff00,#ff9600);
|
|
|
+ color: rgba(82, 30, 0, 100);
|
|
|
+ font-size: 20px;
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
