|
|
@@ -1,420 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="vip-container">
|
|
|
- <!-- 顶部会员信息 -->
|
|
|
- <view class="vip-header">
|
|
|
- <view class="vip-title">尊贵会员</view>
|
|
|
- <view class="vip-expire" v-if="userInfo.isVip">VIP到期时间: {{userInfo.vipExpireDate}}</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 会员价格选择 -->
|
|
|
- <view class="vip-price-options">
|
|
|
- <view class="price-option" v-for="(item, index) in priceOptions" :key="index"
|
|
|
- :class="{active: selectedPrice === index}" @tap="selectPrice(index)">
|
|
|
- <view class="price-tag" v-if="item.tag">{{item.tag}}</view>
|
|
|
- <view class="price">¥{{item.price}}</view>
|
|
|
- <view class="duration">{{item.name}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 会员特权列表 -->
|
|
|
- <view class="vip-privileges">
|
|
|
- <view class="privileges-title">尊享特权</view>
|
|
|
- <view class="privileges-list">
|
|
|
- <view class="privilege-item" v-for="(item, index) in privileges" :key="index">
|
|
|
- <image class="privilege-icon" :src="item.icon" mode="aspectFit"></image>
|
|
|
- <view class="privilege-info">
|
|
|
- <view class="privilege-name">{{item.name}}</view>
|
|
|
- <view class="privilege-desc">{{item.desc}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 底部支付按钮 -->
|
|
|
- <view class="bottom-pay-btn">
|
|
|
- <view class="total-price">合计: <text class="price-value">¥{{priceOptions[selectedPrice].price}}</text></view>
|
|
|
- <view class="pay-button" @tap="showPaymentOptions">立即续费</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 支付方式选择弹窗 -->
|
|
|
- <uni-popup ref="paymentPopup" type="bottom">
|
|
|
- <view class="payment-popup">
|
|
|
- <view class="popup-header">
|
|
|
- <view class="popup-title">选择支付方式</view>
|
|
|
- <view class="popup-close" @tap="closePaymentPopup">×</view>
|
|
|
- </view>
|
|
|
- <view class="payment-options">
|
|
|
- <view class="payment-option" @tap="selectPayment('alipay')">
|
|
|
- <image class="payment-icon" src="../../static/icon/pay_ali.png" mode="aspectFit"></image>
|
|
|
- <view class="payment-name">支付宝支付</view>
|
|
|
- <image class="payment-select"
|
|
|
- :src="paymentMethod === 'alipay' ? 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9IiM3RjI4REUiIHN0cm9rZT0iIzk3NThERSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgogIDxwYXRoIGQ9Ik0xMCAyMCBMMTcgMjcgTDMwIDE0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4=' : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgo8L3N2Zz4='"
|
|
|
- mode="aspectFit"></image>
|
|
|
- </view>
|
|
|
- <view class="payment-option" @tap="selectPayment('wechat')">
|
|
|
- <image class="payment-icon" src="../../static/icon/pay_wx.png" mode="aspectFit"></image>
|
|
|
- <view class="payment-name">微信支付</view>
|
|
|
- <image class="payment-select"
|
|
|
- :src="paymentMethod === 'wechat' ? 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9IiM3RjI4REUiIHN0cm9rZT0iIzk3NThERSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgogIDxwYXRoIGQ9Ik0xMCAyMCBMMTcgMjcgTDMwIDE0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4=' : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgo8L3N2Zz4='"
|
|
|
- mode="aspectFit"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="confirm-payment" @tap="confirmPayment">确认支付 ¥{{priceOptions[selectedPrice].price}}</view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- userInfo: {
|
|
|
- isVip: false,
|
|
|
- vipExpireDate: '2023-10-23'
|
|
|
- },
|
|
|
- priceOptions: [{
|
|
|
- name: '月度VIP',
|
|
|
- price: '98.00',
|
|
|
- tag: ''
|
|
|
- },
|
|
|
- {
|
|
|
- name: '季度VIP',
|
|
|
- price: '198.00',
|
|
|
- tag: '推荐'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '年度VIP',
|
|
|
- price: '398.00',
|
|
|
- tag: ''
|
|
|
- }
|
|
|
- ],
|
|
|
- selectedPrice: 1, // 默认选中的价格选项索引
|
|
|
- privileges: [{
|
|
|
- name: '无限AI生成',
|
|
|
- icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTMwIDE1IEw0MCAyMCBMNDAgNDAgTDMwIDQ1IEwyMCA0MCBMMjAgMjAgWiIgZmlsbD0iIzk3NThERSIgLz4KICA8cGF0aCBkPSJNMzAgMjUgTDM1IDI3LjUgTDM1IDM3LjUgTDMwIDQwIEwyNSAzNy41IEwyNSAyNy41IFoiIGZpbGw9IiNmZmZmZmYiIC8+CiAgPHBhdGggZD0iTTE1IDIyIEwxOCAyNCBMMTggMjggTDE1IDMwIEwxMiAyOCBMMTIgMjQgWiIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNNDUgMjIgTDQ4IDI0IEw0OCAyOCBMNDUgMzAgTDQyIDI4IEw0MiAyNCBaIiBmaWxsPSIjZmZmZmZmIiAvPgo8L3N2Zz4=',
|
|
|
- desc: '无限次使用AI创作功能'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '高级模型使用',
|
|
|
- icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMTUiIGZpbGw9IiM5NzU4REUiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNMTUgMTUgTDIwIDIwIE00NSAxNSBMNDAgMjAgTTE1IDQ1IEwyMCA0MCBNNDUgNDUgTDQwIDQwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgLz4KPC9zdmc+',
|
|
|
- desc: '使用更高级的AI模型创作'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '优先创作队列',
|
|
|
- icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTE1IDIwIEg0NSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8cGF0aCBkPSJNMTUgMzAgSDM1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgogIDxwYXRoIGQ9Ik0xNSA0MCBIMjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+CiAgPHBhdGggZD0iTTQwIDM1IEw1MCA0NSIgc3Ryb2tlPSIjOTc1OERFIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8cGF0aCBkPSJNNTAgMzUgTDQwIDQ1IiBzdHJva2U9IiM5NzU4REUiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgo8L3N2Zz4=',
|
|
|
- desc: '创作请求优先处理'
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'VIP专属客服',
|
|
|
- icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIyNSIgcj0iMTIiIGZpbGw9IiNmZmZmZmYiIC8+CiAgPHBhdGggZD0iTTE4IDQyIEMxOCAzNSwgMjQgMzIsIDMwIDMyIEMzNiAzMiwgNDIgMzUsIDQyIDQyIiBmaWxsPSIjOTc1OERFIiAvPgogIDxyZWN0IHg9IjIyIiB5PSIxNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjQiIHJ4PSIyIiBmaWxsPSIjNUYxN0REIiAvPgogIDxwYXRoIGQ9Ik0xOCA0MiBINDIiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIzIiAvPgo8L3N2Zz4=',
|
|
|
- desc: '专人解答任何问题'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '尊贵身份标识',
|
|
|
- icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTMwIDEwIEwzNyAyNCBMNTIgMjYgTDQxIDM3IEw0NCA1MiBMMzAgNDUgTDE2IDUyIEwxOSAzNyBMOCAyNiBMMjMgMjQgWiIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNMjUgMjUgTDMwIDM1IEwzNSAyNSBMMjUgMjUgWiIgZmlsbD0iIzk3NThERSIgLz4KPC9zdmc+',
|
|
|
- desc: '展示您的VIP身份'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '高级内容访问',
|
|
|
- icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHJlY3QgeD0iMTUiIHk9IjE1IiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHJ4PSI1IiBmaWxsPSIjOTc1OERFIiAvPgogIDxwYXRoIGQ9Ik0yMCAyNSBINDAgTTIwIDM1IEg0MCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8dGV4dCB4PSIzMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgZmlsbD0iI2ZmZmZmZiIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+VklQPC90ZXh0Pgo8L3N2Zz4=',
|
|
|
- desc: '专享更多高级内容'
|
|
|
- }
|
|
|
- ],
|
|
|
- paymentMethod: 'alipay', // 默认支付方式
|
|
|
- privilegesHeight: 0, // 添加存储特权区域高度的变量
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- // 获取用户信息，检查是否为VIP
|
|
|
- this.getUserInfo();
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- // 页面渲染完成后获取vip-privileges的高度
|
|
|
- this.getPrivilegesHeight();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取用户信息
|
|
|
- getUserInfo() {
|
|
|
- // 这里添加获取用户信息的API调用
|
|
|
- // 示例数据
|
|
|
- this.userInfo = {
|
|
|
- isVip: true,
|
|
|
- vipExpireDate: '2023-10-23'
|
|
|
- };
|
|
|
- },
|
|
|
- // 选择价格选项
|
|
|
- selectPrice(index) {
|
|
|
- this.selectedPrice = index;
|
|
|
- },
|
|
|
- // 显示支付方式选择弹窗
|
|
|
- showPaymentOptions() {
|
|
|
- this.$refs.paymentPopup.open();
|
|
|
- },
|
|
|
- // 关闭支付方式选择弹窗
|
|
|
- closePaymentPopup() {
|
|
|
- this.$refs.paymentPopup.close();
|
|
|
- },
|
|
|
- // 选择支付方式
|
|
|
- selectPayment(method) {
|
|
|
- this.paymentMethod = method;
|
|
|
- },
|
|
|
- // 确认支付
|
|
|
- confirmPayment() {
|
|
|
- // 根据选择的支付方式进行支付
|
|
|
- uni.showLoading({
|
|
|
- title: '支付中...'
|
|
|
- });
|
|
|
-
|
|
|
- // 模拟支付过程
|
|
|
- setTimeout(() => {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: '支付成功',
|
|
|
- icon: 'success'
|
|
|
- });
|
|
|
- this.$refs.paymentPopup.close();
|
|
|
- }, 1500);
|
|
|
-
|
|
|
- // 在实际应用中，这里会调用支付API
|
|
|
- console.log('支付方式:', this.paymentMethod);
|
|
|
- console.log('支付金额:', this.priceOptions[this.selectedPrice].price);
|
|
|
- },
|
|
|
- // 获取特权列表区域的高度
|
|
|
- getPrivilegesHeight() {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.select('.vip-privileges').boundingClientRect(data => {
|
|
|
- if (data) {
|
|
|
- this.privilegesHeight = data.height;
|
|
|
- console.log('特权区域高度:', this.privilegesHeight);
|
|
|
- } else {
|
|
|
- console.log('未能获取到特权区域元素');
|
|
|
- // 如果首次获取失败，可以添加延迟重试
|
|
|
- setTimeout(() => {
|
|
|
- this.getPrivilegesHeight();
|
|
|
- }, 100);
|
|
|
- }
|
|
|
- }).exec();
|
|
|
- },
|
|
|
- // 如果需要在某些数据变化后重新获取高度
|
|
|
- updatePrivilegesHeight() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.getPrivilegesHeight();
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .vip-container {
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #161616;
|
|
|
- padding-bottom: 120rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .vip-header {
|
|
|
- background: linear-gradient(to right, #7F28DE, #5F17DD);
|
|
|
- padding: 80rpx 40rpx;
|
|
|
- color: #ffffff;
|
|
|
- border-radius: 0 0 30rpx 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .vip-title {
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .vip-expire {
|
|
|
- font-size: 28rpx;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
-
|
|
|
- .vip-price-options {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 40rpx;
|
|
|
- margin-top: -60rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .price-option {
|
|
|
- width: 210rpx;
|
|
|
- height: 240rpx;
|
|
|
- background-color: #242424;
|
|
|
- border-radius: 20rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- transition: all 0.3s;
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: linear-gradient(to bottom, #9758DE, #5F17DD);
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .price-tag {
|
|
|
- position: absolute;
|
|
|
- top: -20rpx;
|
|
|
- padding: 6rpx 20rpx;
|
|
|
- background-color: #FF6B00;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 24rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .duration {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #cccccc;
|
|
|
- }
|
|
|
-
|
|
|
- .vip-privileges {
|
|
|
- padding: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .privileges-title {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #ffffff;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .privileges-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .privilege-item {
|
|
|
- width: 48%;
|
|
|
- background-color: #242424;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 30rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .privilege-icon {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .privilege-name {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #ffffff;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .privilege-desc {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-pay-btn {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- background-color: #242424;
|
|
|
- padding: 30rpx 40rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .total-price {
|
|
|
- color: #cccccc;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .price-value {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .pay-button {
|
|
|
- background: linear-gradient(to right, #9758DE, #5F17DD);
|
|
|
- color: #ffffff;
|
|
|
- padding: 20rpx 60rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- /* 支付方式选择弹窗样式 */
|
|
|
- .payment-popup {
|
|
|
- background-color: #242424;
|
|
|
- border-radius: 30rpx 30rpx 0 0;
|
|
|
- padding: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .popup-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .popup-title {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #ffffff;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .popup-close {
|
|
|
- font-size: 48rpx;
|
|
|
- color: #999999;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .payment-options {
|
|
|
- margin-bottom: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .payment-option {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 30rpx 0;
|
|
|
- border-bottom: 1px solid #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .payment-icon {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .payment-name {
|
|
|
- flex: 1;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .payment-select {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .confirm-payment {
|
|
|
- background: linear-gradient(to right, #9758DE, #5F17DD);
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- padding: 30rpx 0;
|
|
|
- border-radius: 50rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- margin-top: 60rpx;
|
|
|
- }
|
|
|
-</style>
|
