|
|
@@ -0,0 +1,720 @@
|
|
|
+<template>
|
|
|
+ <view class="benefits-page">
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <view class="nav-bar">
|
|
|
+ <view class="nav-content">
|
|
|
+ <view class="nav-left" @click="goBack">
|
|
|
+ <u-icon name="arrow-leftward" color="rgba(255, 255, 255, 1)" size="42"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="nav-title">我的权益</view>
|
|
|
+ <view class="nav-right"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 当前会员状态卡片 -->
|
|
|
+ <view class="membership-card">
|
|
|
+ <view class="card-content">
|
|
|
+ <view class="card-left">
|
|
|
+ <view class="card-title">我的权益</view>
|
|
|
+ <view class="card-subtitle">常规版 剩余5天到期</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card-right">
|
|
|
+ <view class="benefit-item">
|
|
|
+ <view class="benefit-label">查看权益</view>
|
|
|
+ <view class="benefit-count">10/50</view>
|
|
|
+ </view>
|
|
|
+ <view class="benefit-item">
|
|
|
+ <view class="benefit-label">沟通权益</view>
|
|
|
+ <view class="benefit-count">10/50</view>
|
|
|
+ </view>
|
|
|
+ <view class="benefit-item">
|
|
|
+ <view class="benefit-label">普通职位</view>
|
|
|
+ <view class="benefit-count">10/50</view>
|
|
|
+ </view>
|
|
|
+ <view class="benefit-item">
|
|
|
+ <view class="benefit-label">急聘职位</view>
|
|
|
+ <view class="benefit-count">10/50</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 购买VIP享受更多权益 -->
|
|
|
+ <view class="benefits-section">
|
|
|
+ <!-- 权益对比表格 -->
|
|
|
+ <view class="benefits-table">
|
|
|
+ <view class="section-title">购买VIP, 享受更多权益</view>
|
|
|
+ <!-- 表头 -->
|
|
|
+ <view class="table-header">
|
|
|
+ <view class="header-cell benefit-type">权益类型</view>
|
|
|
+ <view class="header-cell basic">基础权益</view>
|
|
|
+ <view class="header-cell regular active">
|
|
|
+ <!-- <view class="plan-tag">生效中</view> -->
|
|
|
+ <view class="plan-name">常规版</view>
|
|
|
+ <view class="plan-expire">剩余5天到期</view>
|
|
|
+ </view>
|
|
|
+ <view class="header-cell vip">VIP版</view>
|
|
|
+ <view class="header-cell flagship recommended">
|
|
|
+ <!-- <view class="plan-tag">推荐</view> -->
|
|
|
+ <view class="plan-name">旗舰版</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 表格内容 -->
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">在线普通职位</view>
|
|
|
+ <view class="row-cell basic">10个</view>
|
|
|
+ <view class="row-cell regular">35个</view>
|
|
|
+ <view class="row-cell vip">45个</view>
|
|
|
+ <view class="row-cell flagship">不限</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">在线急聘职位</view>
|
|
|
+ <view class="row-cell basic">0个</view>
|
|
|
+ <view class="row-cell regular">5个</view>
|
|
|
+ <view class="row-cell vip">15个</view>
|
|
|
+ <view class="row-cell flagship">50个</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">每日查看总数</view>
|
|
|
+ <view class="row-cell basic">20个</view>
|
|
|
+ <view class="row-cell regular">50个</view>
|
|
|
+ <view class="row-cell vip">不限</view>
|
|
|
+ <view class="row-cell flagship">不限</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">每日沟通总数</view>
|
|
|
+ <view class="row-cell basic">5个</view>
|
|
|
+ <view class="row-cell regular">20个</view>
|
|
|
+ <view class="row-cell vip">50个</view>
|
|
|
+ <view class="row-cell flagship">100个</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">查看沟通范围</view>
|
|
|
+ <view class="row-cell basic">仅普通职位</view>
|
|
|
+ <view class="row-cell regular">仅普通职位</view>
|
|
|
+ <view class="row-cell vip">不限</view>
|
|
|
+ <view class="row-cell flagship">不限</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row price-row">
|
|
|
+ <view class="row-cell benefit-type">价格</view>
|
|
|
+ <view class="row-cell basic">免费</view>
|
|
|
+ <view class="row-cell regular">¥599/年</view>
|
|
|
+ <view class="row-cell vip">¥1599/年</view>
|
|
|
+ <view class="row-cell flagship">¥2599/年</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 说明文字 -->
|
|
|
+ <view class="notes">
|
|
|
+ <view class="note-item">
|
|
|
+ <text class="note-number">1.</text>
|
|
|
+ <text class="note-text">基础&常规权益中,查看和开聊权限仅限普通职位使用</text>
|
|
|
+ </view>
|
|
|
+ <view class="note-item">
|
|
|
+ <text class="note-number">2.</text>
|
|
|
+ <text class="note-text">在常规版本体验期中购买VIP及以上版本体验卡将会立即失效</text>
|
|
|
+ </view>
|
|
|
+ <view class="note-item">
|
|
|
+ <text class="note-number">3.</text>
|
|
|
+ <text class="note-text">你可以直接购买VIP,也可以</text>
|
|
|
+ <text class="note-link" @click="viewAllBenefits">查看全部权益包</text>
|
|
|
+ <text class="note-text">进行购买</text>
|
|
|
+ </view>
|
|
|
+ <view class="note-item">
|
|
|
+ <text class="note-number">4.</text>
|
|
|
+ <text class="note-text">如有问题,请联系我的客服</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 升级VIP按钮 -->
|
|
|
+ <view class="upgrade-button" @click="showPaymentModal">
|
|
|
+ 升级VIP
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 支付弹窗 -->
|
|
|
+ <u-popup v-model="showPayment" mode="bottom" border-radius="42" height="auto" :safe-area-inset-bottom="true">
|
|
|
+ <view class="payment-picker">
|
|
|
+ <view class="picker-header">
|
|
|
+ <text class="picker-title">选择会员版本</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="picker-content">
|
|
|
+ <view
|
|
|
+ class="plan-option"
|
|
|
+ :class="{ active: selectedPlan === 'regular' }"
|
|
|
+ @click="selectPlan('regular')"
|
|
|
+ >
|
|
|
+ <view class="option-left">
|
|
|
+ <view class="radio-btn" :class="{ checked: selectedPlan === 'regular' }">
|
|
|
+ <u-icon v-if="selectedPlan === 'regular'" name="checkmark" color="#ffffff" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <text class="option-text">常规版</text>
|
|
|
+ <view class="price-tag">
|
|
|
+ <text>¥599</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ class="plan-option"
|
|
|
+ :class="{ active: selectedPlan === 'vip' }"
|
|
|
+ @click="selectPlan('vip')"
|
|
|
+ >
|
|
|
+ <view class="option-left">
|
|
|
+ <view class="radio-btn" :class="{ checked: selectedPlan === 'vip' }">
|
|
|
+ <u-icon v-if="selectedPlan === 'vip'" name="checkmark" color="#ffffff" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <text class="option-text">VIP版</text>
|
|
|
+ <view class="price-tag">
|
|
|
+ <text>¥1599</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ class="plan-option"
|
|
|
+ :class="{ active: selectedPlan === 'flagship' }"
|
|
|
+ @click="selectPlan('flagship')"
|
|
|
+ >
|
|
|
+ <view class="option-left">
|
|
|
+ <view class="radio-btn" :class="{ checked: selectedPlan === 'flagship' }">
|
|
|
+ <u-icon v-if="selectedPlan === 'flagship'" name="checkmark" color="#ffffff" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <text class="option-text">旗舰版</text>
|
|
|
+ <view class="price-tag">
|
|
|
+ <text>¥2599</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 支付按钮 -->
|
|
|
+ <view class="payment-button" @click="confirmPayment">
|
|
|
+ <text>确认支付 ¥{{ getSelectedPrice() }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 当前会员信息
|
|
|
+ currentPlan: 'regular',
|
|
|
+ remainingDays: 5,
|
|
|
+ // 权益使用情况
|
|
|
+ benefits: {
|
|
|
+ view: { used: 10, total: 50 },
|
|
|
+ communicate: { used: 10, total: 50 },
|
|
|
+ regularJobs: { used: 10, total: 50 },
|
|
|
+ urgentJobs: { used: 10, total: 50 }
|
|
|
+ },
|
|
|
+ // 支付弹窗
|
|
|
+ showPayment: false,
|
|
|
+ selectedPlan: 'regular',
|
|
|
+ planPrices: {
|
|
|
+ regular: 599,
|
|
|
+ vip: 1599,
|
|
|
+ flagship: 2599
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回上一页
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查看全部权益包
|
|
|
+ viewAllBenefits() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '查看全部权益包',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示支付弹窗
|
|
|
+ showPaymentModal() {
|
|
|
+ this.showPayment = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择会员计划
|
|
|
+ selectPlan(plan) {
|
|
|
+ this.selectedPlan = plan
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取选中计划的价格
|
|
|
+ getSelectedPrice() {
|
|
|
+ return this.planPrices[this.selectedPlan]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确认支付
|
|
|
+ confirmPayment() {
|
|
|
+ uni.showToast({
|
|
|
+ title: `支付¥${this.getSelectedPrice()}成功`,
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+ this.showPayment = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.benefits-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 80%));
|
|
|
+ background-size: 100% 40%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding-top: 148rpx;
|
|
|
+}
|
|
|
+
|
|
|
+// 顶部导航栏
|
|
|
+.nav-bar {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ .nav-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ margin-top: 44rpx; // 状态栏高度
|
|
|
+
|
|
|
+ .nav-left, .nav-right {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 当前会员状态卡片
|
|
|
+.membership-card {
|
|
|
+ background: linear-gradient(66.73deg, rgba(255, 160, 162, 1),rgba(255, 203, 204.5, 0.3) 49%,rgba(255, 181.5, 183.25, 0.56) 100%);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ margin: 0 40rpx;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(255, 182, 193, 0.3);
|
|
|
+
|
|
|
+ .card-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .card-left {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 60rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-subtitle {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-right {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: radial-gradient(184.79% 115.97% at 92% 113.99999999999999%,rgba(255, 102, 0, 0.35),rgba(255, 65, 86, 1) 100%);
|
|
|
+ gap: 16rpx;
|
|
|
+ padding: 14rpx 38rpx;
|
|
|
+
|
|
|
+ .benefit-item {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .benefit-label {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .benefit-count {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 权益对比区域
|
|
|
+.benefits-section {
|
|
|
+ margin: 20rpx 40rpx;
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 44rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 权益对比表格
|
|
|
+.benefits-table {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 26rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .table-header {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
|
+ background: #f8f9fa;
|
|
|
+
|
|
|
+ .header-cell {
|
|
|
+ padding: 24rpx 12rpx;
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 26rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ border-right: 1rpx solid #e9ecef;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.benefit-type {
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 26rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.basic {
|
|
|
+ background: rgba(246, 246, 246, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: rgba(246, 246, 246, 1);
|
|
|
+ color: #1976d2;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.vip {
|
|
|
+ background: rgba(255, 235, 235, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.recommended {
|
|
|
+ background: rgba(254, 238, 209, 1);
|
|
|
+ color: #f57c00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plan-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 8rpx;
|
|
|
+ right: 8rpx;
|
|
|
+ background: #ff4444;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plan-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plan-expire {
|
|
|
+ font-size: 16rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
|
+ border-bottom: 1rpx solid #e9ecef;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.price-row {
|
|
|
+ background: #f8f9fa;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-cell {
|
|
|
+ padding: 24rpx 12rpx;
|
|
|
+ font-size: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1rpx solid #e9ecef;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.benefit-type {
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-weight: 500;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(246, 246, 246, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.basic {
|
|
|
+ color: #666;
|
|
|
+ background: rgba(246, 246, 246, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.regular {
|
|
|
+ color: #1976d2;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(246, 246, 246, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.vip {
|
|
|
+ color: #7b1fa2;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(255, 235, 235, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.flagship {
|
|
|
+ color: #f57c00;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(254, 238, 209, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 说明文字
|
|
|
+.notes {
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .note-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+ .note-number , .note-text {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 26rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .note-link {
|
|
|
+ color: #1976d2;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 26rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 升级VIP按钮
|
|
|
+.upgrade-button {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 32rpx;
|
|
|
+ left: 32rpx;
|
|
|
+ right: 32rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
|
|
|
+ border-radius: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(25, 118, 210, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+// 支付弹窗样式 - 仿照 tagManage 页面
|
|
|
+.payment-picker {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.picker-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx 40rpx 20rpx;
|
|
|
+ border-bottom: 1rpx solid #F2F2F2;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .picker-title {
|
|
|
+ color: rgba(34, 37, 42, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 23px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.picker-content {
|
|
|
+ padding: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.plan-option {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgba(227, 231, 236, 1);
|
|
|
+ border-radius: 24px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #F9F9F9;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: #007AFF;
|
|
|
+ background: #F0F9FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .radio-btn {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border: 2rpx solid #E5E5EA;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &.checked {
|
|
|
+ border-color: #007AFF;
|
|
|
+ background: #007AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(29, 33, 41, 1);
|
|
|
+ font-weight: 400;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-tag {
|
|
|
+ background: rgba(153, 196, 250, 0.4);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ color: rgba(1, 107, 246, 1);
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.picker-content :last-child {
|
|
|
+ margin-bottom: 0rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.payment-button {
|
|
|
+ width: 90%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: linear-gradient(90deg, #007AFF 0%, #42a5f5 100%);
|
|
|
+ border-radius: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 32rpx;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
your_username