main
parent
158713e3b8
commit
1f735c5c53
@ -1,457 +1,431 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 顶部标题 -->
|
||||
<view class="header">
|
||||
<view class="header-title">管理您的账户信息和服务</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card">
|
||||
<view class="user-info">
|
||||
<image
|
||||
<view class="container">
|
||||
<!-- 顶部标题 -->
|
||||
<view class="header">
|
||||
<view class="header-title">管理您的账户信息和服务</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card">
|
||||
<view class="user-info">
|
||||
<div class="avatar"></div>
|
||||
<!-- <image
|
||||
class="avatar"
|
||||
src="/static/imgs/avatar.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="user-details">
|
||||
<view class="username">
|
||||
张三
|
||||
<u-icon
|
||||
name="checkmark-circle-fill"
|
||||
color="#ffa500"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</view>
|
||||
<view class="user-id">用户ID: U12345678</view>
|
||||
<view class="membership">
|
||||
会员等级: 年会员 (有效期至: 2026-05-15)
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit-btn" @click="editProfile">
|
||||
<text>点击编辑资料</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 账户余额 -->
|
||||
<view class="balance-card">
|
||||
<view class="balance-header">
|
||||
<view class="balance-label">账户余额</view>
|
||||
<u-button type="default" size="small" shape="round" @click="recharge">
|
||||
充值
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="balance-amount">¥50.00</view>
|
||||
</view>
|
||||
|
||||
<!-- 会员套餐 -->
|
||||
<view class="membership-section">
|
||||
<view class="membership-grid">
|
||||
<view
|
||||
class="membership-item"
|
||||
:class="{ active: selectedPlan === 'monthly' }"
|
||||
@click="selectPlan('monthly')"
|
||||
>
|
||||
<view class="tag new">新人特惠</view>
|
||||
<view class="plan-name">包月会员</view>
|
||||
<view class="plan-price">¥120</view>
|
||||
</view>
|
||||
<view
|
||||
class="membership-item"
|
||||
:class="{ active: selectedPlan === 'season' }"
|
||||
@click="selectPlan('season')"
|
||||
>
|
||||
<view class="tag popular">最受欢迎</view>
|
||||
<view class="plan-name">包季会员</view>
|
||||
<view class="plan-price">¥300</view>
|
||||
<view class="plan-discount">立减¥60</view>
|
||||
</view>
|
||||
<view
|
||||
class="membership-item"
|
||||
:class="{ active: selectedPlan === 'yearly' }"
|
||||
@click="selectPlan('yearly')"
|
||||
>
|
||||
<view class="tag yearly">年度首享</view>
|
||||
<view class="plan-name">包年会员</view>
|
||||
<view class="plan-price">¥1000</view>
|
||||
<view class="plan-discount">立减¥440</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="payment-section">
|
||||
<view
|
||||
class="payment-item"
|
||||
:class="{ active: selectedPayment === 'alipay' }"
|
||||
@click="selectPayment('alipay')"
|
||||
>
|
||||
<view class="payment-info">
|
||||
<u-icon name="alipay-circle-fill" color="#1677ff" size="24"></u-icon>
|
||||
<text class="payment-name">支付宝</text>
|
||||
</view>
|
||||
<u-icon
|
||||
:name="
|
||||
selectedPayment === 'alipay'
|
||||
? 'checkmark-circle-fill'
|
||||
: 'radio-button-off'
|
||||
"
|
||||
:color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</view>
|
||||
<view
|
||||
class="payment-item"
|
||||
:class="{ active: selectedPayment === 'wechat' }"
|
||||
@click="selectPayment('wechat')"
|
||||
>
|
||||
<view class="payment-info">
|
||||
<u-icon name="weixin-fill" color="#07c160" size="24"></u-icon>
|
||||
<text class="payment-name">支付宝</text>
|
||||
</view>
|
||||
<u-icon
|
||||
:name="
|
||||
selectedPayment === 'wechat'
|
||||
? 'checkmark-circle-fill'
|
||||
: 'radio-button-off'
|
||||
"
|
||||
:color="selectedPayment === 'wechat' ? '#ff3333' : '#ccc'"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-section">
|
||||
<u-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="confirmPayment"
|
||||
:loading="paying"
|
||||
>
|
||||
确认支付
|
||||
</u-button>
|
||||
<view class="agreement">
|
||||
购买前请仔细阅读
|
||||
<text class="link" @click="showAgreement">《会员服务协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
></image> -->
|
||||
<view class="user-details">
|
||||
<view class="username">
|
||||
张三
|
||||
<u-icon name="checkmark-circle-fill" color="#ffa500" size="16"></u-icon>
|
||||
</view>
|
||||
<view class="user-id">用户ID: U12345678</view>
|
||||
<view class="membership">
|
||||
会员等级: 年会员 (有效期至: 2026-05-15)
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit-btn" @click="editProfile">
|
||||
<text>点击编辑资料</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 账户余额 -->
|
||||
<view class="balance-card">
|
||||
<div>
|
||||
|
||||
<view class="balance-header">
|
||||
<view class="balance-label">账户余额</view>
|
||||
</view>
|
||||
<view class="balance-amount">¥50.00</view>
|
||||
</div>
|
||||
<uv-button type="primary" color="#fff" customStyle="color:#000;width:90px" shape="circle" @click="recharge">
|
||||
充值
|
||||
</uv-button>
|
||||
</view>
|
||||
|
||||
<!-- 会员套餐 -->
|
||||
<view class="membership-section">
|
||||
<view class="membership-grid">
|
||||
<view class="membership-item" :class="{ active: selectedPlan === 'monthly' }"
|
||||
@click="selectPlan('monthly')">
|
||||
<view class="tag">新人特惠</view>
|
||||
<view class="plan-name">包月会员</view>
|
||||
<view class="plan-price">¥120</view>
|
||||
</view>
|
||||
<view class="membership-item" :class="{ active: selectedPlan === 'season' }"
|
||||
@click="selectPlan('season')">
|
||||
<view class="tag">最受欢迎</view>
|
||||
<view class="plan-name">包季会员</view>
|
||||
<view class="plan-price">¥300</view>
|
||||
<view class="plan-discount">立减¥60</view>
|
||||
</view>
|
||||
<view class="membership-item" :class="{ active: selectedPlan === 'yearly' }"
|
||||
@click="selectPlan('yearly')">
|
||||
<view class="tag">年度首享</view>
|
||||
<view class="plan-name">包年会员</view>
|
||||
<view class="plan-price">¥1000</view>
|
||||
<view class="plan-discount">立减¥440</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="payment-section">
|
||||
<view class="payment-item" :class="{ active: selectedPayment === 'alipay' }"
|
||||
@click="selectPayment('alipay')">
|
||||
<view class="payment-info">
|
||||
<uv-icon name="shopping-cart-fill" color="#1677ff" size="24"></uv-icon>
|
||||
<text class="payment-name">支付宝</text>
|
||||
</view>
|
||||
<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
|
||||
size="20"></uv-icon>
|
||||
</view>
|
||||
<view class="payment-item" :class="{ active: selectedPayment === 'wechat' }"
|
||||
@click="selectPayment('wechat')">
|
||||
<view class="payment-info">
|
||||
<uv-icon name="weixin-fill" color="#07c160" size="24"></uv-icon>
|
||||
<text class="payment-name">微信</text>
|
||||
</view>
|
||||
<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wechat' ? '#ff3333' : '#ccc'"
|
||||
size="20"></uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-section">
|
||||
<uv-button type="primary" size="large" @click="confirmPayment" :loading="paying">
|
||||
确认支付
|
||||
</uv-button>
|
||||
<view class="agreement">
|
||||
购买前请仔细阅读
|
||||
<text class="link" @click="showAgreement">《会员服务协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
|
||||
import { useAuthStore, useUserStore } from "@/store";
|
||||
import RPC from "@/utils/request";
|
||||
|
||||
const modal = ref(null);
|
||||
const authStore = useAuthStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 响应式数据
|
||||
const selectedPlan = ref("season"); // 默认选中包季会员
|
||||
const selectedPayment = ref("alipay"); // 默认选中支付宝
|
||||
const paying = ref(false);
|
||||
|
||||
// 选择会员套餐
|
||||
const selectPlan = (plan) => {
|
||||
selectedPlan.value = plan;
|
||||
};
|
||||
|
||||
// 选择支付方式
|
||||
const selectPayment = (payment) => {
|
||||
selectedPayment.value = payment;
|
||||
};
|
||||
|
||||
// 编辑资料
|
||||
const editProfile = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pagesA/edit-profile/edit-profile",
|
||||
});
|
||||
};
|
||||
|
||||
// 充值
|
||||
const recharge = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/recharge/recharge",
|
||||
});
|
||||
};
|
||||
|
||||
// 确认支付
|
||||
const confirmPayment = async () => {
|
||||
if (!selectedPlan.value) {
|
||||
uni.showToast({
|
||||
title: "请选择会员套餐",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedPayment.value) {
|
||||
uni.showToast({
|
||||
title: "请选择支付方式",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
paying.value = true;
|
||||
try {
|
||||
const params = {
|
||||
plan: selectedPlan.value,
|
||||
paymentMethod: selectedPayment.value,
|
||||
};
|
||||
|
||||
// 这里调用支付API
|
||||
// const result = await RPC.post('/api/payment', params)
|
||||
|
||||
uni.showToast({
|
||||
title: "正在跳转支付...",
|
||||
icon: "loading",
|
||||
duration: 2000,
|
||||
});
|
||||
|
||||
// 模拟支付过程
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: "支付成功",
|
||||
icon: "success",
|
||||
});
|
||||
paying.value = false;
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error("支付失败:", error);
|
||||
uni.showToast({
|
||||
title: "支付失败，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
paying.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 显示协议
|
||||
const showAgreement = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/agreement/agreement",
|
||||
});
|
||||
};
|
||||
import {
|
||||
ref
|
||||
} from "vue";
|
||||
import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
|
||||
import {
|
||||
useAuthStore,
|
||||
useUserStore
|
||||
} from "@/store";
|
||||
import RPC from "@/utils/request";
|
||||
|
||||
const modal = ref(null);
|
||||
const authStore = useAuthStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 响应式数据
|
||||
const selectedPlan = ref("season"); // 默认选中包季会员
|
||||
const selectedPayment = ref("alipay"); // 默认选中支付宝
|
||||
const paying = ref(false);
|
||||
|
||||
// 选择会员套餐
|
||||
const selectPlan = (plan) => {
|
||||
selectedPlan.value = plan;
|
||||
};
|
||||
|
||||
// 选择支付方式
|
||||
const selectPayment = (payment) => {
|
||||
selectedPayment.value = payment;
|
||||
};
|
||||
|
||||
// 编辑资料
|
||||
const editProfile = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pagesA/edit-profile/edit-profile",
|
||||
});
|
||||
};
|
||||
|
||||
// 充值
|
||||
const recharge = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/recharge/recharge",
|
||||
});
|
||||
};
|
||||
|
||||
// 确认支付
|
||||
const confirmPayment = async () => {
|
||||
if (!selectedPlan.value) {
|
||||
uni.showToast({
|
||||
title: "请选择会员套餐",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedPayment.value) {
|
||||
uni.showToast({
|
||||
title: "请选择支付方式",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
paying.value = true;
|
||||
try {
|
||||
const params = {
|
||||
plan: selectedPlan.value,
|
||||
paymentMethod: selectedPayment.value,
|
||||
};
|
||||
|
||||
// 这里调用支付API
|
||||
// const result = await RPC.post('/api/payment', params)
|
||||
|
||||
uni.showToast({
|
||||
title: "正在跳转支付...",
|
||||
icon: "loading",
|
||||
duration: 2000,
|
||||
});
|
||||
|
||||
// 模拟支付过程
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: "支付成功",
|
||||
icon: "success",
|
||||
});
|
||||
paying.value = false;
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error("支付失败:", error);
|
||||
uni.showToast({
|
||||
title: "支付失败，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
paying.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 显示协议
|
||||
const showAgreement = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/agreement/agreement",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%);
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 16px 16px;
|
||||
|
||||
.header-title {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
margin: 0 16px 16px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
|
||||
.username {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.membership {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
text-align: right;
|
||||
color: #4285f4;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
margin: 0 16px 16px;
|
||||
background: linear-gradient(135deg, #4285f4 0%, #6fa8f5 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
|
||||
.balance-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.balance-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-amount {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.membership-section {
|
||||
margin: 0 16px 24px;
|
||||
|
||||
.membership-grid {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.membership-item {
|
||||
flex: 1;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px 12px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
border-color: #4285f4;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
|
||||
&.new {
|
||||
background: #ff6b6b;
|
||||
}
|
||||
|
||||
&.popular {
|
||||
background: #ff3333;
|
||||
}
|
||||
|
||||
&.yearly {
|
||||
background: #ff3333;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin: 12px 0 8px;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ff3333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.plan-discount {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-section {
|
||||
margin: 0 16px 24px;
|
||||
|
||||
.payment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
border-color: #4285f4;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.payment-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.payment-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-section {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
|
||||
.agreement {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 12px;
|
||||
|
||||
.link {
|
||||
color: #4285f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%);
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 16px 16px;
|
||||
|
||||
.header-title {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
margin: 0 16px 16px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-bottom: 12px;
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
background-color: skyblue;
|
||||
overflow: hidden;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
|
||||
.username {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.membership {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
text-align: right;
|
||||
color: #4285f4;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 16px 16px;
|
||||
background: linear-gradient(135deg, #4285f4 0%, #6fa8f5 100%);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
color: white;
|
||||
|
||||
.balance-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.balance-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-amount {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.membership-section {
|
||||
margin: 0 16px 16px;
|
||||
|
||||
.membership-grid {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.membership-item {
|
||||
flex: 1;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px 12px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
border-color: #4285f4;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
padding: 2px 8px;
|
||||
border-radius: 0 0 10px 0;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
background: #ff3333;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin: 12px 0 8px;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ff3333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.plan-discount {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-section {
|
||||
margin: 0 16px 24px;
|
||||
|
||||
.payment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
border-color: #4285f4;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.payment-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.payment-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-section {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
|
||||
.agreement {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 12px;
|
||||
|
||||
.link {
|
||||
color: #4285f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue