From 2506d5d77b57575df2f0d33fa56d89895fdecbc0 Mon Sep 17 00:00:00 2001
From: lin <1005713861@163.com>
Date: Wed, 27 May 2026 15:52:16 +0800
Subject: [PATCH] feat：星享购 绑卡 倒计时优化+首页新增“退款政策”弹窗
---
pages/quanyi/index.vue | 358 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 233 insertions(+), 125 deletions(-)
diff --git a/pages/quanyi/index.vue b/pages/quanyi/index.vue
index 3c1f689..558b784 100644
--- a/pages/quanyi/index.vue
+++ b/pages/quanyi/index.vue
@@ -1,15 +1,20 @@
<script>
+import textBox from "@/components/textBox/index.vue";
export default {
+ components: {
+ textBox
+ },
async created() {
const _this = this;
await uni.request({
- url: _this.$webHost+'/api/v2/auth/qxgIosUnionLogin?phone='+_this.$util.getUserInfo().phone,
+ // url: _this.$webHost+'/api/v2/auth/ygxLogin?phone='+_this.$util.getUserInfo().phone+'&appId='+'c74c41db-5683-4135-a41c-54019a668d34',
+ url: _this.$webHost + '/api/v2/auth/iosShopUnionLogin?phone=' + _this.$util.getUserInfo().phone + '&configureToDomain=11',
success: function (res) {
- _this.qxgLogin = res.data.data;
- uni.setStorageSync('qxgLogin',_this.qxgLogin)
+ _this.ygxLogin = res.data.data;
+ uni.setStorageSync('ygxLogin',_this.ygxLogin)
uni.request({
url: _this.$webHost+'/api/v2/buryingPoint/record',
method:'PUT',
@@ -30,34 +35,42 @@
},
success:function (info){
_this.memberPeriodConfigInfo = info.data.data;
+ // if(_this.memberPeriodConfigInfo['totalBenefitsAmount']) {
+ // _this.memberPeriodConfigInfo['totalBenefitsAmount'] = _this.memberPeriodConfigInfo['totalBenefitsAmount'].toFixed(2);
+ // }
uni.setStorageSync('memberPeriodConfigInfo',_this.memberPeriodConfigInfo)
+ _this.showTextBox = true;
+ _this.$nextTick(() => {
+ _this.$refs.textBox && _this.$refs.textBox.open()
+ })
}
})
}
})
let mk = setInterval(()=>{
- this.text -=1;
- if(!this.text){
+ _this.text -=1;
+ if(!_this.text){
clearInterval( mk)
}
},1000)
- this.time= setTimeout(()=>{
- this.protocolChecked = [1];
- this.tm = true;
- this.isAgree = true;
- },10000)
+ _this.time= setTimeout(()=>{
+ _this.protocolChecked = [1];
+ _this.tm = true;
+ },3000)
},
data() {
return {
- qxgLogin:{},
+ active: 0,
+ ygxLogin:{},
protocolChecked: [0],
+ showTextBox: false,
isAgree: false,
tm: null,
time:null,
- text:10,
+ text:3,
memberPeriodConfigInfo: {
totalBenefitsAmount: "",
installmentPeriods: "",
@@ -66,7 +79,7 @@
},
methods: {
goHome(){
- uni.switchTab({
+ uni.reLaunch({
url: '/pages/index/index'
});
},
@@ -117,93 +130,192 @@
</script>
<template>
- <view style="background-image: url('/static/imgs/QYBACKA.png');background-repeat: no-repeat;background-size: 100% 100%;background-color: #FFF4FA;">
+ <view style="background: url('/static/img/qyBg.png') no-repeat top center; background-size: 100%;background-color: #210E0E;">
<view class="head" style="position: relative">
- <view style="display: flex;justify-content: flex-start;z-index: 9">
- <view @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4" :style="{ height: '20rpx',lineHeight: '80rpx'}" ></view>
+ <view style="display: flex;justify-content: flex-start;position: absolute;left: 0;top: 65rpx;padding-left: 30rpx;z-index: 9;color: #FFFFFF;">
+ <view @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4" :style="{ height: '80rpx',lineHeight: '80rpx'}" style="margin-top: 20rpx;">
+ <uv-icon name="home" color="#ffffff" size="20"></uv-icon>
+ </view>
+
</view>
+<!-- <view style="text-align: center;font-weight: bold;font-size: 36rpx;position: relative;">-->
+<!-- <view class="mm" style="text-align: center">会员权益说明</view>-->
+<!-- </view>-->
+ </view>
- <view style="margin-left: 20rpx;display: flex;justify-content: space-between;">
+ <view class="title">
+ <view style="margin-top:380rpx;text-align: center;font-weight: bold;line-height:160rpx;font-size:120rpx;color: #552D02;">
+ {{ memberPeriodConfigInfo.totalBenefitsAmount }}<text style="font-size: 40rpx;">元</text>
+ </view>
+ </view>
- <view>
- <view style="margin-top: 60rpx;"><image src="/static/imgs/SMTTA.png" style="width: 378rpx;height: 88rpx;"></image></view>
-
- <view style="margin-top: 10rpx;">
- <image src="/static/imgs/QQXGLK.png" style="width: 178rpx;height: 54rpx;"></image>
+ <view class="content" style="overflow-y: scroll;padding: 30rpx;background: #ffffff;border-top-left-radius: 50rpx;border-top-right-radius: 50rpx;margin-top: 60rpx;padding-bottom: 140rpx;">
+ <view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 40rpx;margin-bottom: 10rpx;">
+ <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion1.png"></image>
+ <view style="font-size: 36rpx;color: #333333;margin: 0 20rpx;">会员须知</view>
+ <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion.png"></image>
+ </view>
+ <view class="tips" style="background-color: #ffffff;border-radius: 32rpx;margin-top: 20rpx;padding: 30rpx;color: #010312;font-size: 28rpx;">
+ <view style="margin-bottom: 20rpx;display: flex;align-items: center;">
+ <image src="/static/img/infoIcon.png" style="width: 48rpx;height: 44rpx;margin-right: 20rpx;"></image>
+ <view style="flex: 1;">
+ 星享购会员年卡是本商城为会员特别打造的专属服务。成为会员后，您可享受各类商品折扣、促销优惠、生活权益及专属特权，并根据会员等级获赠相应超值礼品，体验我们为您准备的尊享会员服务。
</view>
</view>
- <view>
- <image src="/static/imgs/VIPSOA.png" style="width: 272rpx;height: 272rpx;"></image>
+ <view style="margin-bottom: 20rpx;display: flex;align-items: center;">
+ <image src="/static/img/infoIcon.png" style="width: 48rpx;height: 44rpx;margin-right: 20rpx;"></image>
+ <view style="flex: 1;">
+ 保险权益赠送：星享购会员年卡用户有机会获赠涵盖重疾险、意外险、事故险等的综合保障服务。尚未享受持牌机构服务的会员，亦有机会获取此项权益，具体详情请查阅会员中心相关说明。
+ </view>
+ </view>
+ <view style="margin-bottom: 20rpx;display: flex;align-items: center;">
+ <image src="/static/img/infoIcon.png" style="width: 48rpx;height: 44rpx;margin-right: 20rpx;"></image>
+ <view style="flex: 1;">
+ 会员服务一经开通即表示知晓并同意以上内容，自愿加入星享购会员年卡会员，并同意平台及平台权益合作方在账单日收入会员费，可在个人中心查看订单详情。
+ </view>
+ </view>
+ <view style="margin-bottom: 20rpx;display: flex;align-items: center;">
+ <image src="/static/img/infoIcon.png" style="width: 48rpx;height: 44rpx;margin-right: 20rpx;"></image>
+ <view style="flex: 1;">
+ 会员服务到期前，非商城原因不支持中途取消或退款，用户可以选择续订或取消续费。
+ </view>
+ </view>
+ <view style="margin-bottom: 20rpx;display: flex;align-items: center;">
+ <image src="/static/img/infoIcon.png" style="width: 48rpx;height: 44rpx;margin-right: 20rpx;"></image>
+ <view style="flex: 1;">
+ 平台有权根据实际情况优化调整礼品内容和会员权益，最终解释权归星享购所有。
+ </view>
</view>
</view>
+ <!-- <view style="background: url('/static/img/qyBg2.png') no-repeat top center; background-size: 100%;width: 100%;height: 290rpx;margin-top: 20rpx;padding: 40rpx;">
+ <view style="margin-bottom:20rpx;font-size: 44rpx;font-weight: bold;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">尊享会员年卡</view>
+ <view style="font-size: 28rpx;">
+ <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">年卡金额：{{ memberPeriodConfigInfo.totalBenefitsAmount }}元</p>
+ <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">扣款期数：{{ memberPeriodConfigInfo.installmentPeriods }}期(先享后付，免息)</p>
+ <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">有效期：365天</p>
+ </view>
+ </view> -->
- </view>
- <view class="content" style="overflow-y: scroll;padding: 30rpx;padding-top: 0;margin-top: -30rpx;">
- <view class="tips" style="font-size: 28rpx;padding: 28rpx 32rpx;background-image: url('/static/imgs/TIPSBACK.png');background-repeat: no-repeat;background-size: 100% 100%;padding-bottom: 32rpx;">
- <view style="font-size: 28rpx;color: #333333">① {{memberPeriodConfigInfo.showTitle}}商城会员年卡是本商城为会员特别打造的专属服务。成为会员后，您可享受各类商品折扣、促销优惠、生活权益及专属特权，并根据会员等级获赠相应超值礼品，体验我们为您准备的尊享会员服务。</view>
- <view style="font-size: 28rpx;color: #333333">② 保险权益赠送：{{memberPeriodConfigInfo.showTitle}}商城会员年卡用户有机会获赠涵盖重疾险、意外险、事故险等的综合保障服务。尚未享受持牌机构服务的会员，亦有机会获取此项权益，具体详情请查阅会员中心相关说明。</view>
- <view style="font-size: 28rpx;color: #333333">③ 平台保留根据实际情况新增或优化会员权益内容的权利。</view>
- </view>
+<!-- <view style="margin-top: 30rpx;" class="back">-->
+<!-- <view style="flex: 1">-->
+<!-- <view class="tips" style="font-size: 36rpx;font-weight: bold;color: #794007;margin-bottom: 20rpx;">专享特权</view>-->
+<!-- <view class="tips" style="font-size: 26rpx;color: #794007;margin-bottom: 20rpx;line-height: 44rpx;">星享购会员年卡会员 {{ memberPeriodConfigInfo.totalBenefitsAmount }}元/年</view>-->
+<!-- <view class="tips" style="font-size: 26rpx;margin-bottom: 20rpx;color: #794007;line-height: 44rpx;">分期支付：先享后付（提供的实物商品为指定的价值888元的红酒一瓶），分{{ memberPeriodConfigInfo.installmentPeriods }}期支付包年会员服务、免息</view>-->
+<!-- <view class="tips" style="font-size: 26rpx;margin-bottom: 3rpx;color: #794007;line-height: 44rpx;">购买成功后，可在个人中心查看分期订单详情</view>-->
-
- <view class="QXFJH" style="background-image: url('/static/imgs/QXFJH.png');background-size: 100% 100%;text-align: center;background-repeat: no-repeat;padding: 28rpx 0;margin-top: 18rpx;margin-bottom: 16rpx;color: #333333;line-height: 48rpx;">
- <view style="font-weight: 600;">{{memberPeriodConfigInfo.showTitle}}商城会员专享特权</view>
-
- <view>年卡费用：{{memberPeriodConfigInfo.totalBenefitsAmount }}元/年</view>
- <view>支付期数：{{memberPeriodConfigInfo.installmentPeriods }}期</view>
- <!-- <view>支付期数：{{memberPeriodConfigInfo.installmentPeriods }}期（每期{{memberPeriodConfigInfo.totalBenefitsAmount / memberPeriodConfigInfo.installmentPeriods}}元）</view>-->
-
-
- </view>
-
- <view style="font-size: 22rpx;padding: 36rpx 32rpx 24rpx 32rpx;background-image: url('/static/imgs/CLOSAN.png');background-repeat: no-repeat;background-size: 100% 100%;margin-bottom: 32rpx;">
- <view style="font-size: 24rpx;margin-bottom: 30rpx;color: #333333">会员先享后付，包年会员服务、免息，购买成功后可在个人中心查看订单详情。会员服务开通成功不支持取消、退款。</view>
- <view style="font-size: 24rpx;color: #333333">点击按钮即表示知晓并同意以上内容，自愿加入本商城年卡会员，且同意平台及平台权益合作方在账单日收入会员费。</view>
- </view>
-
-
-
-
- <view style="display: flex;gap: 20rpx;">
+<!-- </view>-->
+<!-- <view style="display: flex;margin-top: 150rpx;">-->
+<!-- <checkbox-group activeColor="#fff" @change='isAgree=!isAgree' style="height: 100px;">-->
+<!-- <checkbox :checked="isAgree ? true : false" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">-->
+<!-- </checkbox>-->
+<!-- </checkbox-group>-->
+<!-- </view>-->
+<!-- </view>-->
+<!-- <view class="tips" style="color: #666666;margin-top: 30rpx;font-size: 26rpx">点击按钮即表示知晓并同意以上内容，自愿加入本商城星享购会员年卡会员，并同意平台及平台权益合作方在账单日收入会员费</view>-->
+ <view style="width: 690rpx;display: flex;gap: 20rpx;z-index: 2;background-image: linear-gradient(to right, #FCD694, #B8762D);border-radius: 40rpx;">
+ <view style="width: 300rpx;height: 108rpx;text-align: center;">
+ <view style="width: 300rpx;height: 54rpx;padding: 10rpx 0;font-size: 30rpx;font-weight: bold;">合计 {{ memberPeriodConfigInfo.totalBenefitsAmount }}元/年</view>
+ <view @click="goHome" style="width: 300rpx;height: 54rpx;padding: 10rpx 0;font-size: 24rpx">暂不开通</view>
+ </view>
<button
- style="height: 100rpx;color: #666666;border-radius: 24rpx;font-size: 34rpx;line-height: 100rpx;width: 170rpx;background-color: unset;"
- @click="goHome"
- >暂不开通</button>
- <button
- style="height: 100rpx;color: white;border-radius: 24rpx;font-size: 34rpx;line-height: 100rpx;flex: 1;"
- :disabled="!tm"
+ style="height: 88rpx;color: #ffffff;border-radius: 40rpx;font-size: 34rpx;flex: 1;margin-top: 10rpx;margin-right: 10rpx;line-height: 88rpx;"
+
@click="submit"
:class="tm &&protocolChecked.length?'activityBut':'disabledBut'"
- >同意并开通<text v-if="!tm">({{text}}秒)</text></button>
+ >立即开通<text v-if="!tm">（{{text}}秒）</text></button>
</view>
- <view style="display: flex;margin-top: 20rpx;display: flex;font-weight: 600;">
- <uv-checkbox-group activeColor="#FF1472" @change='isAgree=!isAgree' >
- <uv-checkbox :checked="isAgree ? true : false" activeColor="#FF1472" iconSize="14" size="16" :name="1" shape="circle">
+ <view style="font-size: 24rpx;color: #666666;display: flex;align-items: center;margin: 40rpx 0;height: 50rpx;justify-content: center;">
+ <uv-checkbox-group activeColor="#4766FE" @change='isAgree=!isAgree' style="">
+ <uv-checkbox :checked="isAgree ? true : false" iconColor="#fff" iconSize="14" size="14" :name="1" shape="circle">
+ <text style="color: #20110E;">我已阅读并同意</text>
</uv-checkbox>
- <view style="font-size: 24rpx;color: #8B8D96">我已阅读并同意<text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link(`/pages/web/xieyi?code=${memberPeriodConfigInfo.protocolCode}&title=${memberPeriodConfigInfo.protocolName}`)">{{ memberPeriodConfigInfo.protocolName }}</text></view>
</uv-checkbox-group>
-
+ <!-- <text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link('/pages/protocol/protocol?code=shop_ai_service&title=会员服务协议-YXKJ')">《会员服务协议-YXKJ》</text>
+ <text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link('/pages/protocol/protocol?code=shop_auto_service&title=委托扣款确认书-YXKJ')">《委托扣款确认书-YXKJ》</text>-->
+ <text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link(`/pages/web/xieyi?code=${memberPeriodConfigInfo.protocolCode}&title=${memberPeriodConfigInfo.protocolName}`)">{{memberPeriodConfigInfo.protocolName}}</text>
</view>
+
+
+ <view style="background-color: #ffffff;border-radius: 50rpx 50rpx 0 0;margin-top: 40rpx;">
+ <view class="tab-wrap" style="padding-top: 60rpx;">
+ <text @click="active=0" :class="active==0?'active':''">实物权益</text>
+ <text @click="active=1" :class="active==1?'active':''">虚拟权益</text>
+ </view>
+ <view v-if="active === 0" class="sw-container">
+ <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw1.png"></image>
+ <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw2.png"></image>
+ <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw3.png"></image>
+ <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw4.png"></image>
+ <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw5.png"></image>
+ <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw6.png"></image>
+ <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw7.png"></image>
+ <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw8.png"></image>
+ <!-- <button class="exchange-btn" v-if="active==0" @click="getTips">我要查询</button> -->
+ <view class="note" style="padding-bottom: 50rpx;text-align: center;">页面展示为实物样例，实际以用户收到的商品为准</view>
+ </view>
+ <view v-if="active === 1">
+ <image style="width: 100%;height: 538rpx;" mode="aspectFit" src="/static/img/quanshou/xn1.png"></image>
+ <image style="width: 100%;height: 538rpx;" mode="aspectFit" src="/static/img/quanshou/xn2.png"></image>
+ <image style="width: 100%;height: 342rpx;" mode="aspectFit" src="/static/img/quanshou/xn3.png"></image>
+ <image style="width: 100%;height: 712rpx;" mode="aspectFit" src="/static/img/quanshou/xn4.png"></image>
+ <!-- <button class="exchange-btn" @click="toHuiyuan">我要领取</button> -->
+ <view class="note" style="padding-bottom: 50rpx;text-align: center;">* 虚拟权益以实际兑换为准</view>
+ </view>
+ </view>
+
+<!-- <view class="tips" style="color: #666666;margin-top: 24rpx;margin-bottom: 20rpx;font-size: 26rpx">*会员服务一经开通不支持取消、退款，会员服务到期前，用户可以选择续订或取消续费。</view>-->
+
+
+ <!-- 专享会员生活权益 -->
+ <!-- <view>
+ <view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
+ <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion1.png"></image>
+ <view style="font-size: 36rpx;color: #370606;margin: 0 20rpx;">专享会员生活权益</view>
+ <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion.png"></image>
+ </view>
+ <view class="life" style="background: url('/static/img/qsLife.png') no-repeat top center; background-size: 100%;width: 100%;height: 1506rpx;">
+
+ </view>
+ <view style="width: 690rpx;margin-top: 20rpx;text-align: center;">
+ <button @click="toHuiyuan" style="height: 100rpx;padding: 25rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">兑换生活权益</button>
+ <view style="color: #333;font-size: 24rpx;padding-top: 0rpx;padding-bottom: 10rpx;">以上权益仅为预览展示，实际以兑换页面为准</view>
+ </view>
+ <view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
+ <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion1.png"></image>
+ <view style="font-size: 36rpx;margin: 0 20rpx;color: #370606;">专享会员实物权益</view>
+ <image style="width: 127rpx;height: 18rpx;" src="/static/img/nion.png"></image>
+ </view>
+ <view class="physical" style="background: url('/static/img/qsPhysical.png') no-repeat top center; background-size: 100%;width: 100%;height: 1580rpx;">
+
+ </view>
+ <view style="width: 690rpx;margin-top: 20rpx;text-align: center;">
+ <button @click="getTips" style="height: 100rpx;padding: 25rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">查询实物权益</button>
+ <view style="color: #333;font-size: 24rpx;padding-top: 0rpx;padding-bottom: 40rpx;">以上权益仅为预览展示，实际以商城发出为准</view>
+ </view>
+ </view> -->
+
+ <!-- <view style="text-align: center;display: flex;flex-direction: row;justify-content: center"><text @click="submit(false)" style="color: #666666;margin-bottom: 20rpx;font-size: 28rpx">不同意</text></view>-->
</view>
+ <textBox v-if="showTextBox" ref="textBox" :code="memberPeriodConfigInfo.protocolCode" :title="memberPeriodConfigInfo.protocolName"></textBox>
</view>
</template>
<style scoped lang="scss">
+.uv-checkbox-group {
+ flex: none;
+}
.activityBut{
- background: #FF1472;
- font-weight: 600;
+ //background: #EE2626;
+ background-image: linear-gradient(to right, #493B29, #000218);
+ font-weight: 500;
}
.disabledBut{
- background: #666666;
- font-weight: 600;
-}
-.disabledBut{
- background: #999 !important;
+ background: #7C7C7C;
}
.head{
- padding: 30rpx 10rpx 0 30rpx;
+ padding: 30rpx 30rpx 0 30rpx;
font-size: 32rpx;
color: #252938;
@@ -234,63 +346,11 @@
.mr{
margin-right: 20rpx;
}
- .tips{
- position: relative;
- &::after{
- content: '';
- display: block;
- position: absolute;
- bottom: -38rpx;
- right: 22rpx;
- width: 14rpx;
- height: 62rpx;
- background: #FFD3DD;
- border-radius: 78rpx 78rpx 78rpx 78rpx;
- z-index: 2;
- }
- &::before{
- content: '';
- display: block;
- position: absolute;
- bottom: -38rpx;
- width: 14rpx;
- height: 62rpx;
- background: #FFD3DD;
- border-radius: 78rpx 78rpx 78rpx 78rpx;
- z-index: 2;
- }
- }
-}
-.QXFJH{
- position: relative;
- &::after{
- content: '';
- display: block;
- position: absolute;
- bottom: -38rpx;
- right: 22rpx;
- width: 14rpx;
- height: 62rpx;
- background: #FFD3DD;
- border-radius: 78rpx 78rpx 78rpx 78rpx;
- z-index: 2;
- }
- &::before{
- content: '';
- display: block;
- position: absolute;
- bottom: -38rpx;
- width: 14rpx;
- height: 62rpx;
- left: 32rpx;
- background: #FFD3DD;
- border-radius: 78rpx 78rpx 78rpx 78rpx;
- z-index: 2;
- }
+
}
.back{
- background-image: url("/static/imgs/ba.png");
+ // background-image: url("/static/img/ba.png");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 22rpx 30rpx;
@@ -298,4 +358,52 @@
flex-direction: row;
}
+/* tab */
+.tab-wrap {
+ display: flex;
+ justify-content: space-evenly;
+ margin-bottom: 50rpx;
+}
+.tab-wrap text {
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #666;
+}
+.active {
+ color: #333 !important;
+ position: relative;
+ &::after {
+ content: "";
+ display: block;
+ width: 50rpx;
+ height: 8rpx;
+ background: linear-gradient(271deg, #FFE4A1 0%, #FFC57A 51%, #FFE1B9 100%);
+ border-radius: 32rpx;
+ position: absolute;
+ bottom: -20rpx;
+ left: calc(50% - 25rpx);
+ }
+}
+
+/* 按钮 */
+.exchange-btn {
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #FFD39A;
+ padding: 26rpx;
+ background: linear-gradient(271deg, #2A1601 0%, #3B2106 51%);
+ border-radius: 200rpx;
+ margin-top: 60rpx;
+}
+.note {
+ font-size: 24rpx;
+ color: #999;
+ margin-top: 20rpx;
+}
+
+.sw-container {
+ image {
+ margin-top: 20rpx;
+ }
+}
</style>
--
Gitblit v1.9.3