From ce44170338569b806c13fa2405af3eb5ddb4d3c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B7=A6=E5=93=A5?= <17630302050@163.com>
Date: Thu, 13 Nov 2025 22:53:09 +0800
Subject: [PATCH] 1223

---
 manifest.json                |    2 +-
 pages.json                   |    8 +-
 pages/create/index.vue       |  235 +++++++-
 pages/distribution/index.vue |  931 +++++++++++++++++++++++++++++-
 pages/index/index.vue        |    2 +-
 pages/my/editInfo/index.vue  |  268 +++++++++
 pages/my/index.vue           | 1053 +++++++++++++++++++++++++++++++++-
 pages/subscribe/index.vue    |  393 ++++++++++++-
 8 files changed, 2878 insertions(+), 14 deletions(-)
 create mode 100644 pages/my/editInfo/index.vue

diff --git a/manifest.json b/manifest.json
index a70c001..a00f5eb 100644
--- a/manifest.json
+++ b/manifest.json
@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wx26ad074017e1e63f",
         "setting" : {
             "urlCheck" : false
         },
diff --git a/pages.json b/pages.json
index 098f192..f220bff 100644
--- a/pages.json
+++ b/pages.json
@@ -1,5 +1,5 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -30,6 +30,12 @@
 			"style": {
 				"navigationBarTitleText": "我的"
 			}
+		},
+		{
+			"path": "pages/my/editInfo/index",
+			"style": {
+				"navigationBarTitleText": "编辑信息"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/create/index.vue b/pages/create/index.vue
index 910471a..35b0c63 100644
--- a/pages/create/index.vue
+++ b/pages/create/index.vue
@@ -1,11 +1,240 @@
 <template>
-	<view class="">
-		
+	<view class="create-page">
+		<view class="header-section">
+			<view class="header-badge">
+				<text class="iconfont icon-shandian"></text>
+			</view>
+			<view class="header-title">
+				选择您想要创建的内容类型
+			</view>
+			<view class="header-subtitle">
+				根据业务需求选择合适的方案，快速完成配置
+			</view>
+		</view>
+
+		<view class="card-list">
+			<view
+				v-for="option in createOptions"
+				:key="option.id"
+				class="create-card"
+				:class="option.tone"
+				@click="handleCreate(option)"
+			>
+				<view class="card-icon">
+					<text class="iconfont" :class="option.icon"></text>
+				</view>
+				<view class="card-title">{{ option.title }}</view>
+				<view class="card-desc">
+					{{ option.description }}
+				</view>
+				<view class="card-tags">
+					<view
+						class="tag"
+						v-for="tag in option.tags"
+						:key="tag"
+					>
+						{{ tag }}
+					</view>
+				</view>
+				<view class="action-button" :class="option.tone">
+					<text class="plus">+</text>
+					<text class="action-text">立即创建</text>
+					<text class="iconfont icon-zhifeiji1"></text>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+export default {
+	data() {
+		return {
+			createOptions: [
+				{
+					id: 'group',
+					title: '香水团购',
+					description: '发起香水团购活动，人数越多折扣越大',
+					tags: ['阶梯折扣', '正品保证', '快速成团'],
+					icon: 'icon-shandian',
+					tone: 'group',
+					url: '/pages/index/index',
+					navType: 'switchTab'
+				},
+				{
+					id: 'distribution',
+					title: '香水分装',
+					description: '发起香水分装服务，小容量更实惠',
+					tags: ['小容量', '超值价格', '多款选择'],
+					icon: 'icon-lihe',
+					tone: 'distribution',
+					url: '/pages/distribution/index',
+					navType: 'switchTab'
+				}
+			]
+		};
+	},
+	methods: {
+		handleCreate(option) {
+			if (!option.url) {
+				uni.showToast({
+					title: '功能即将上线',
+					icon: 'none'
+				});
+				return;
+			}
+
+			if (option.navType === 'switchTab') {
+				uni.switchTab({
+					url: option.url
+				});
+				return;
+			}
+
+			uni.navigateTo({
+				url: option.url
+			});
+		}
+	}
+};
 </script>
 
-<style>
+<style scoped>
+.create-page {
+	min-height: 100vh;
+	padding: 48rpx 32rpx 80rpx;
+	background: linear-gradient(180deg, #f4f2ff 0%, #ffffff 45%, #ffffff 100%);
+	box-sizing: border-box;
+}
+
+.header-section {
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+	margin-bottom: 40rpx;
+}
+
+.header-badge {
+	width: 120rpx;
+	height: 120rpx;
+	border-radius: 32rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, #f401ff 0%, #8317ff 100%);
+	color: #fff;
+	box-shadow: 0 20rpx 40rpx rgba(132, 23, 255, 0.2);
+	font-size: 52rpx;
+}
+
+.header-title {
+	font-size: 42rpx;
+	font-weight: 700;
+	color: #1f2240;
+}
+
+.header-subtitle {
+	font-size: 28rpx;
+	color: #7d8198;
+}
+
+.card-list {
+	display: flex;
+	flex-direction: column;
+	gap: 32rpx;
+}
+
+.create-card {
+	background: #ffffff;
+	border-radius: 36rpx;
+	padding: 48rpx 40rpx;
+	box-shadow: 0 28rpx 68rpx rgba(148, 110, 255, 0.12);
+	display: flex;
+	flex-direction: column;
+	gap: 26rpx;
+}
+
+.card-icon {
+	width: 120rpx;
+	height: 120rpx;
+	border-radius: 36rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #ffffff;
+	font-size: 54rpx;
+}
+
+.create-card.group .card-icon {
+	background: linear-gradient(135deg, #ff6388 0%, #ff3b6d 100%);
+	box-shadow: 0 20rpx 40rpx rgba(255, 62, 120, 0.25);
+}
+
+.create-card.distribution .card-icon {
+	background: linear-gradient(135deg, #6e6bff 0%, #9828ff 100%);
+	box-shadow: 0 20rpx 40rpx rgba(120, 64, 255, 0.25);
+}
+
+.card-title {
+	font-size: 38rpx;
+	font-weight: 700;
+	color: #1f2240;
+}
+
+.card-desc {
+	font-size: 28rpx;
+	line-height: 44rpx;
+	color: #646887;
+}
+
+.card-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16rpx;
+}
+
+.tag {
+	padding: 12rpx 24rpx;
+	border-radius: 999rpx;
+	background: rgba(132, 23, 255, 0.08);
+	color: #5a4cff;
+	font-size: 24rpx;
+}
+
+.create-card.group .tag {
+	background: rgba(255, 61, 109, 0.1);
+	color: #ff3d6d;
+}
+
+.create-card.distribution .tag {
+	background: rgba(120, 64, 255, 0.12);
+	color: #624dff;
+}
+
+.action-button {
+	margin-top: 12rpx;
+	height: 96rpx;
+	border-radius: 999rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 16rpx;
+	color: #ffffff;
+	font-size: 32rpx;
+	font-weight: 600;
+}
+
+.action-button .plus {
+	font-size: 40rpx;
+}
+
+.action-button.group {
+	background: linear-gradient(90deg, #ff3d6d 0%, #ff00b8 100%);
+	box-shadow: 0 18rpx 34rpx rgba(255, 0, 120, 0.2);
+}
+
+.action-button.distribution {
+	background: linear-gradient(90deg, #6158ff 0%, #9f21ff 100%);
+	box-shadow: 0 18rpx 34rpx rgba(97, 88, 255, 0.22);
+}
 </style>
\ No newline at end of file
diff --git a/pages/distribution/index.vue b/pages/distribution/index.vue
index 910471a..7cd9f33 100644
--- a/pages/distribution/index.vue
+++ b/pages/distribution/index.vue
@@ -1,11 +1,936 @@
 <template>
-	<view class="">
-		
+	<view class="distribution-page">
+		<view class="header-card">
+			<view class="header-top flex justify-between">
+				<view class="title-wrap">
+					<view class="title-row flex items-center">
+						<text class="iconfont icon-yonghu title-icon"></text>
+						<text class="title-text">分销中心</text>
+					</view>
+					<view class="role-row flex items-center">
+						<view class="role-tag">{{ userInfo.role }}</view>
+						<text class="team-size">团队 {{ userInfo.teamSize }} 人</text>
+					</view>
+				</view>
+				<button class="invite-btn" @click="handleInvite">
+					<text class="iconfont icon-zhifeiji1"></text>
+					邀请
+				</button>
+			</view>
+			<view class="commission-panel">
+				<view class="panel-label">累计佣金</view>
+				<view class="panel-value">¥{{ commission.total }}</view>
+				<view class="progress-bar">
+					<view class="progress-inner" :style="{ width: commission.progress + '%' }"></view>
+				</view>
+				<view class="progress-text">
+					升级进度 {{ commission.progress }}%
+				</view>
+			</view>
+		</view>
+
+		<view class="content-wrap">
+		<view class="overview-card shadow" v-if="activeTab === 0">
+				<view class="card-title flex items-center">
+					<text class="iconfont icon-tubiaoshangshengqushi"></text>
+					数据概览
+				</view>
+				<view class="overview-grid">
+					<view class="overview-item highlight">
+						<view class="item-label">今日佣金</view>
+						<view class="item-value">¥{{ overview.today.amount }}</view>
+						<view class="item-desc success">+{{ overview.today.growth }}%</view>
+					</view>
+					<view class="overview-item">
+						<view class="item-label">团队人数</view>
+						<view class="item-value">{{ overview.team.total }}</view>
+						<view class="item-desc">活跃 {{ overview.team.active }}</view>
+					</view>
+					<view class="overview-item">
+						<view class="item-label">本月订单</view>
+						<view class="item-value">{{ overview.orders }}</view>
+					</view>
+					<view class="overview-item">
+						<view class="item-label">月度营收</view>
+						<view class="item-value">¥{{ overview.revenue }}</view>
+					</view>
+					<view class="overview-item span-2">
+						<view class="item-label">转化率</view>
+						<view class="item-value purple">{{ overview.conversion.rate }}%</view>
+						<view class="item-desc muted">{{ overview.conversion.remark }}</view>
+					</view>
+				</view>
+			</view>
+
+		<view class="tabs-row">
+			<view
+				v-for="(tab, index) in tabs"
+				:key="tab"
+				class="tab-item"
+				:class="{ active: activeTab === index }"
+				@click="changeTab(index)"
+			>
+				{{ tab }}
+			</view>
+		</view>
+
+		<view class="team-card shadow" v-if="activeTab === 1">
+			<view class="card-title flex items-center justify-between">
+				<view class="title-left flex items-center">
+					<text class="iconfont icon-yonghu"></text>
+					团队成员
+				</view>
+				<view class="team-count">{{ teamMembers.length }} 人</view>
+			</view>
+			<view
+				class="team-item"
+				v-for="member in teamMembers"
+				:key="member.id"
+			>
+				<image class="avatar" :src="member.avatar" mode="aspectFill"></image>
+				<view class="member-info">
+					<view class="member-header flex items-center">
+						<view class="member-name">{{ member.name }}</view>
+						<view class="member-role">{{ member.role }}</view>
+					</view>
+					<view class="member-stats">
+						<view class="stat">
+							<view class="stat-label">订单</view>
+							<view class="stat-value">{{ member.orders }}</view>
+						</view>
+						<view class="stat">
+							<view class="stat-label">佣金</view>
+							<view class="stat-value">¥{{ member.commission }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="member-right">
+					<view class="growth">{{ member.growth > 0 ? '+' : '' }}{{ member.growth }}%</view>
+					<view class="arrow">></view>
+				</view>
+			</view>
+		</view>
+
+		<view class="achievement-card shadow" v-if="activeTab === 0">
+				<view class="card-title flex items-center">
+					<text class="iconfont icon-lihe"></text>
+					成就进度
+				</view>
+				<view
+					class="achievement-item"
+					v-for="achievement in achievements"
+					:key="achievement.id"
+				>
+					<view class="achievement-icon">
+						<text class="iconfont" :class="achievement.icon"></text>
+					</view>
+					<view class="achievement-content">
+						<view class="achievement-header flex justify-between items-center">
+							<view class="achievement-title">{{ achievement.title }}</view>
+							<view class="achievement-percent">{{ achievement.percent }}%</view>
+						</view>
+						<view class="achievement-desc">
+							{{ achievement.description }}
+						</view>
+						<view class="achievement-progress">
+							<view class="progress-track">
+								<view class="progress-chunk" :style="{ width: achievement.percent + '%' }"></view>
+							</view>
+							<view class="progress-meta">
+								{{ achievement.current }} / {{ achievement.goal }}
+							</view>
+						</view>
+						<view class="achievement-reward flex items-center">
+							<text class="reward-badge">解锁奖励</text>
+							<text class="reward-text">{{ achievement.reward }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		<view class="settlement-card shadow" v-if="activeTab === 2">
+			<view class="card-title flex items-center">
+				<text class="info-icon">i</text>
+				佣金结算说明
+			</view>
+			<view class="settlement-list">
+				<view
+					class="settlement-item"
+					v-for="rule in settlementRules"
+					:key="rule.id"
+					:class="rule.tone"
+				>
+					<view class="rule-icon">
+						<text v-if="rule.iconType === 'font'" class="iconfont" :class="rule.icon"></text>
+						<text v-else>{{ rule.icon }}</text>
+					</view>
+					<view class="rule-content">
+						<view class="rule-title">{{ rule.title }}</view>
+						<view class="rule-desc">{{ rule.description }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="detail-card shadow" v-if="activeTab === 2">
+			<view class="card-title flex items-center">
+				<text class="iconfont icon-tubiaoshangshengqushi"></text>
+				佣金明细
+			</view>
+			<view
+				class="detail-item"
+				v-for="detail in commissionDetails"
+				:key="detail.id"
+			>
+				<view class="detail-info">
+					<view class="detail-header flex items-center">
+						<view class="detail-tag" :class="detail.type">{{ detail.typeLabel }}</view>
+						<view class="detail-title">{{ detail.product }}</view>
+					</view>
+					<view class="detail-meta">来自: {{ detail.customer }}</view>
+					<view class="detail-time">{{ detail.time }}</view>
+				</view>
+				<view class="detail-amount">+¥{{ detail.amount }}</view>
+			</view>
+		</view>
+		</view>
 	</view>
 </template>
 
 <script>
+export default {
+	data() {
+		return {
+			userInfo: {
+				role: '品鉴分销员',
+				teamSize: 23
+			},
+			commission: {
+				total: '2580.50',
+				progress: 65
+			},
+			overview: {
+				today: {
+					amount: '156',
+					growth: 12.5
+				},
+				team: {
+					total: 23,
+					active: 18
+				},
+				orders: 45,
+				revenue: '8.9K',
+				conversion: {
+					rate: 8.3,
+					remark: '行业领先'
+				}
+			},
+			tabs: ['概览', '团队', '收益'],
+			activeTab: 0,
+			achievements: [
+				{
+					id: 'invite',
+					title: '邀请3位好友',
+					description: '成功邀请3位好友注册并完成首单',
+					current: 2,
+					goal: 3,
+					percent: 67,
+					reward: '解锁高佣金商品推广权',
+					icon: 'icon-zhifeiji1'
+				},
+				{
+					id: 'sales',
+					title: '月销售额达到5000元',
+					description: '单月团队销售额突破5000元',
+					current: 4200,
+					goal: 5000,
+					percent: 84,
+					reward: '晋升为调香分销员',
+					icon: 'icon-tubiaoshangshengqushi'
+				}
+			],
+			teamMembers: [
+				{
+					id: 'member-1',
+					name: '小美',
+					role: '探索分销员',
+					orders: 15,
+					commission: '234.5',
+					growth: 15,
+					avatar: 'https://picsum.photos/seed/distribution-1/120'
+				},
+				{
+					id: 'member-2',
+					name: '香香公主',
+					role: '品鉴分销员',
+					orders: 28,
+					commission: '456.8',
+					growth: 23,
+					avatar: 'https://picsum.photos/seed/distribution-2/120'
+				},
+				{
+					id: 'member-3',
+					name: '花仙子',
+					role: '调香分销员',
+					orders: 42,
+					commission: '789.2',
+					growth: 8,
+					avatar: 'https://picsum.photos/seed/distribution-3/120'
+				}
+			],
+			settlementRules: [
+				{
+					id: 'cycle',
+					title: '结算周期',
+					description: '每月1日结算上月佣金，T+7个工作日到账',
+					icon: 'icon-shijian',
+					iconType: 'font',
+					tone: 'tone-blue'
+				},
+				{
+					id: 'rate',
+					title: '佣金比例',
+					description: '直推订单10%，团队订单5%，高级分销员享受更高比例',
+					icon: '$',
+					iconType: 'text',
+					tone: 'tone-green'
+				},
+				{
+					id: 'withdraw',
+					title: '提现规则',
+					description: '最低提现金额100元，每月可提现2次，手续费2元/笔',
+					icon: 'icon-shaixuan1',
+					iconType: 'font',
+					tone: 'tone-purple'
+				},
+				{
+					id: 'frozen',
+					title: '冻结说明',
+					description: '订单完成后佣金冻结15天，确保售后服务质量',
+					icon: 'icon-shandian',
+					iconType: 'font',
+					tone: 'tone-yellow'
+				}
+			],
+			commissionDetails: [
+				{
+					id: 'detail-1',
+					type: 'direct',
+					typeLabel: '直推',
+					product: '经典玫瑰香水30ml',
+					customer: '张小姐',
+					time: '2025-04-02 14:30',
+					amount: '19.9'
+				},
+				{
+					id: 'detail-2',
+					type: 'team',
+					typeLabel: '团队',
+					product: '薰衣草精油礼盒',
+					customer: '李女士',
+					time: '2025-04-02 13:15',
+					amount: '14.95'
+				}
+			]
+		};
+	},
+	methods: {
+		changeTab(index) {
+			this.activeTab = index;
+		},
+		handleInvite() {
+			uni.showToast({
+				title: '分享邀请即将开放',
+				icon: 'none'
+			});
+		}
+	}
+};
 </script>
 
-<style>
+<style lang="scss" scoped>
+.distribution-page {
+	min-height: 100vh;
+	background: #f7f7ff;
+	padding-bottom: 60rpx;
+}
+
+.header-card {
+	background: var(--background-linear-gradient);
+	color: #ffffff;
+	padding: 120rpx 44rpx 220rpx;
+	border-bottom-left-radius: 48rpx;
+	border-bottom-right-radius: 48rpx;
+	box-shadow: 0 28rpx 48rpx rgba(136, 45, 255, 0.3);
+	position: relative;
+}
+
+.header-top {
+	align-items: flex-start;
+}
+
+.title-wrap {
+	.title-row {
+		margin-bottom: 20rpx;
+	}
+
+	.title-icon {
+		font-size: 44rpx;
+		margin-right: 16rpx;
+	}
+
+	.title-text {
+		font-size: 44rpx;
+		font-weight: 600;
+	}
+
+	.role-row {
+		.role-tag {
+			background: rgba(255, 255, 255, 0.18);
+			border-radius: 32rpx;
+			padding: 12rpx 24rpx;
+			font-size: 24rpx;
+			margin-right: 16rpx;
+		}
+
+		.team-size {
+			font-size: 26rpx;
+			opacity: 0.85;
+		}
+	}
+}
+
+.invite-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #9810fa;
+	background: #ffffff;
+	border-radius: 999rpx;
+	padding: 0 36rpx;
+	height: 72rpx;
+	font-size: 28rpx;
+	font-weight: 500;
+	box-shadow: 0 12rpx 24rpx rgba(255, 255, 255, 0.3);
+}
+
+.invite-btn .iconfont {
+	margin-right: 12rpx;
+	font-size: 32rpx;
+}
+
+.commission-panel {
+	margin-top: 80rpx;
+	background: rgba(255, 255, 255, 0.18);
+	border-radius: 32rpx;
+	padding: 48rpx 40rpx;
+	backdrop-filter: blur(8rpx);
+}
+
+.panel-label {
+	font-size: 28rpx;
+	opacity: 0.85;
+}
+
+.panel-value {
+	font-size: 72rpx;
+	font-weight: 600;
+	margin-top: 20rpx;
+	letter-spacing: 2rpx;
+}
+
+.progress-bar {
+	height: 16rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.32);
+	margin-top: 40rpx;
+	overflow: hidden;
+}
+
+.progress-inner {
+	height: 100%;
+	background: linear-gradient(to right, #ffe2ff, #ffe5f9, #fff7d7);
+	border-radius: inherit;
+}
+
+.progress-text {
+	margin-top: 20rpx;
+	font-size: 24rpx;
+	text-align: right;
+	opacity: 0.9;
+}
+
+.content-wrap {
+	position: relative;
+	margin-top: -160rpx;
+	padding: 0 32rpx;
+}
+
+.shadow {
+	box-shadow: 0 20rpx 40rpx rgba(102, 106, 255, 0.12);
+}
+
+.overview-card {
+	background: #ffffff;
+	border-radius: 32rpx;
+	padding: 40rpx 34rpx;
+}
+
+.card-title {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #2c2d50;
+	gap: 12rpx;
+	margin-bottom: 36rpx;
+}
+
+.card-title .iconfont {
+	font-size: 32rpx;
+	color: #9810fa;
+}
+
+.title-left {
+	gap: 12rpx;
+}
+
+.overview-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	grid-gap: 28rpx;
+}
+
+.overview-item {
+	background: #f7f8ff;
+	border-radius: 28rpx;
+	padding: 32rpx 30rpx;
+	box-shadow: inset 0 0 0 1rpx rgba(152, 16, 250, 0.05);
+
+	&.highlight {
+		background: rgba(152, 16, 250, 0.12);
+		color: #39146b;
+	}
+
+	&.span-2 {
+		grid-column: span 2;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+}
+
+.item-label {
+	font-size: 26rpx;
+	color: #61638a;
+}
+
+.item-value {
+	font-size: 42rpx;
+	font-weight: 600;
+	margin: 16rpx 0 8rpx;
+	color: #2b2d4f;
+}
+
+.item-value.purple {
+	color: #9810fa;
+}
+
+.item-desc {
+	font-size: 24rpx;
+	color: #7f80aa;
+}
+
+.item-desc.success {
+	color: #00c951;
+}
+
+.item-desc.muted {
+	color: #a2a6d1;
+}
+
+.tabs-row {
+	margin-top: 32rpx;
+	background: #ffffff;
+	border-radius: 999rpx;
+	padding: 12rpx;
+	display: flex;
+	justify-content: space-between;
+	gap: 12rpx;
+}
+
+.tab-item {
+	flex: 1;
+	text-align: center;
+	padding: 22rpx 0;
+	border-radius: 999rpx;
+	font-size: 28rpx;
+	color: #7d7fad;
+	transition: all 0.3s;
+}
+
+.tab-item.active {
+	background: linear-gradient(135deg, #a548ff, #f24bbf);
+	color: #ffffff;
+	box-shadow: 0 10rpx 20rpx rgba(152, 16, 250, 0.25);
+}
+
+.achievement-card {
+	margin-top: 32rpx;
+	background: #ffffff;
+	border-radius: 32rpx;
+	padding: 40rpx 34rpx;
+}
+
+.settlement-card {
+	margin-top: 32rpx;
+	background: #ffffff;
+	border-radius: 32rpx;
+	padding: 40rpx 34rpx;
+}
+
+.info-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 40rpx;
+	height: 40rpx;
+	border-radius: 50%;
+	background: rgba(152, 16, 250, 0.12);
+	color: #9810fa;
+	font-weight: 600;
+	margin-right: 12rpx;
+	font-size: 28rpx;
+}
+
+.settlement-list {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+.settlement-item {
+	display: flex;
+	align-items: center;
+	padding: 28rpx;
+	border-radius: 28rpx;
+	background: #f7f8ff;
+	gap: 24rpx;
+
+	&.tone-blue {
+		background: rgba(118, 141, 255, 0.14);
+		.rule-icon {
+			color: #4a6cff;
+			background: rgba(74, 108, 255, 0.16);
+		}
+	}
+
+	&.tone-green {
+		background: rgba(0, 201, 81, 0.14);
+		.rule-icon {
+			color: #00c951;
+			background: rgba(0, 201, 81, 0.16);
+		}
+	}
+
+	&.tone-purple {
+		background: rgba(152, 16, 250, 0.12);
+		.rule-icon {
+			color: #9810fa;
+			background: rgba(152, 16, 250, 0.18);
+		}
+	}
+
+	&.tone-yellow {
+		background: rgba(255, 166, 0, 0.14);
+		.rule-icon {
+			color: #ff8b0d;
+			background: rgba(255, 166, 0, 0.2);
+		}
+	}
+}
+
+.rule-icon {
+	width: 80rpx;
+	height: 80rpx;
+	border-radius: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 36rpx;
+	color: #9810fa;
+	background: rgba(152, 16, 250, 0.12);
+}
+
+.rule-content {
+	flex: 1;
+}
+
+.rule-title {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #2b2d4f;
+	margin-bottom: 12rpx;
+}
+
+.rule-desc {
+	font-size: 26rpx;
+	color: #5a5c8f;
+	line-height: 1.6;
+}
+
+.detail-card {
+	margin-top: 32rpx;
+	background: #ffffff;
+	border-radius: 32rpx;
+	padding: 40rpx 34rpx;
+}
+
+.detail-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 32rpx 0;
+	border-bottom: 1rpx solid #f0f1ff;
+	gap: 32rpx;
+
+	&:last-child {
+		border-bottom: 0;
+		padding-bottom: 0;
+	}
+}
+
+.detail-info {
+	flex: 1;
+}
+
+.detail-header {
+	gap: 16rpx;
+	margin-bottom: 12rpx;
+}
+
+.detail-tag {
+	font-size: 22rpx;
+	border-radius: 999rpx;
+	padding: 10rpx 22rpx;
+	background: rgba(152, 16, 250, 0.12);
+	color: #9810fa;
+
+	&.direct {
+		background: rgba(0, 201, 81, 0.12);
+		color: #00c951;
+	}
+
+	&.team {
+		background: rgba(118, 141, 255, 0.14);
+		color: #4a6cff;
+	}
+}
+
+.detail-title {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #2b2d4f;
+}
+
+.detail-meta,
+.detail-time {
+	font-size: 24rpx;
+	color: #9a9cc0;
+	margin-top: 8rpx;
+}
+
+.detail-amount {
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #00c951;
+	white-space: nowrap;
+}
+
+.team-card {
+	margin-top: 32rpx;
+	background: #ffffff;
+	border-radius: 32rpx;
+	padding: 40rpx 34rpx;
+}
+
+.team-count {
+	font-size: 26rpx;
+	color: #7c7ea7;
+	background: rgba(152, 16, 250, 0.12);
+	padding: 10rpx 26rpx;
+	border-radius: 999rpx;
+}
+
+.team-item {
+	display: flex;
+	align-items: center;
+	padding: 32rpx 0;
+	border-bottom: 1rpx solid #f0f1ff;
+	gap: 24rpx;
+
+	&:last-child {
+		border-bottom: 0;
+		padding-bottom: 0;
+	}
+}
+
+.avatar {
+	width: 96rpx;
+	height: 96rpx;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.member-info {
+	flex: 1;
+}
+
+.member-header {
+	gap: 16rpx;
+	margin-bottom: 12rpx;
+}
+
+.member-name {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #2b2d4f;
+}
+
+.member-role {
+	font-size: 22rpx;
+	color: #7c7ea7;
+	background: rgba(152, 16, 250, 0.12);
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+}
+
+.member-stats {
+	display: flex;
+	gap: 56rpx;
+}
+
+.stat-label {
+	font-size: 24rpx;
+	color: #9a9cc0;
+	margin-bottom: 8rpx;
+}
+
+.stat-value {
+	font-size: 26rpx;
+	color: #2b2d4f;
+	font-weight: 600;
+}
+
+.member-right {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 16rpx;
+}
+
+.growth {
+	background: rgba(0, 201, 81, 0.12);
+	color: #00c951;
+	padding: 10rpx 28rpx;
+	border-radius: 999rpx;
+	font-size: 24rpx;
+	font-weight: 600;
+}
+
+.arrow {
+	font-size: 28rpx;
+	color: #a2a6d1;
+}
+
+.achievement-item {
+	display: flex;
+	padding: 32rpx 0;
+	border-bottom: 1rpx solid #f0f1ff;
+	gap: 24rpx;
+
+	&:last-child {
+		border-bottom: 0;
+		padding-bottom: 0;
+	}
+}
+
+.achievement-icon {
+	width: 96rpx;
+	height: 96rpx;
+	border-radius: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(152, 16, 250, 0.12);
+	color: #9810fa;
+
+	.iconfont {
+		font-size: 44rpx;
+	}
+}
+
+.achievement-content {
+	flex: 1;
+}
+
+.achievement-header {
+	margin-bottom: 12rpx;
+
+	.achievement-title {
+		font-size: 30rpx;
+		font-weight: 600;
+		color: #2b2d4f;
+	}
+
+	.achievement-percent {
+		font-size: 26rpx;
+		color: #9810fa;
+		font-weight: 600;
+	}
+}
+
+.achievement-desc {
+	font-size: 24rpx;
+	color: #7c7ea7;
+	line-height: 1.6;
+	margin-bottom: 24rpx;
+}
+
+.achievement-progress {
+	margin-bottom: 20rpx;
+}
+
+.progress-track {
+	height: 18rpx;
+	border-radius: 999rpx;
+	background: #f1f2fe;
+	overflow: hidden;
+	margin-bottom: 12rpx;
+}
+
+.progress-chunk {
+	height: 100%;
+	border-radius: inherit;
+	background: linear-gradient(135deg, #a246ff, #f447c3);
+}
+
+.progress-meta {
+	font-size: 24rpx;
+	color: #9a9cc0;
+}
+
+.achievement-reward {
+	gap: 12rpx;
+}
+
+.reward-badge {
+	background: rgba(152, 16, 250, 0.12);
+	color: #9810fa;
+	border-radius: 999rpx;
+	padding: 8rpx 20rpx;
+	font-size: 22rpx;
+}
+
+.reward-text {
+	font-size: 24rpx;
+	color: #5a5c8f;
+}
 </style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b7d1864..e23d774 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -230,7 +230,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	.header {
 		padding: 30rpx;
 		box-shadow: 0 2rpx 6rpx 0 rgb(0 0 0 / 0.1), 0 2rpx 4rpx -2rpx rgb(0 0 0 / 0.1);
diff --git a/pages/my/editInfo/index.vue b/pages/my/editInfo/index.vue
new file mode 100644
index 0000000..255e740
--- /dev/null
+++ b/pages/my/editInfo/index.vue
@@ -0,0 +1,268 @@
+<template>
+	<view class="page">
+		<view class="header">
+			<text class="title">编辑个人信息</text>
+			<text class="subtitle">完善资料便于我们为您提供更贴心的服务</text>
+		</view>
+
+		<view class="form-card">
+			<view class="form-item">
+				<text class="form-label">姓名</text>
+				<input
+					class="form-input"
+					v-model="form.name"
+					type="text"
+					placeholder="请输入您的姓名"
+					placeholder-class="form-placeholder"
+				/>
+			</view>
+			<view class="form-item">
+				<text class="form-label">手机号</text>
+				<input
+					class="form-input"
+					v-model="form.phone"
+					type="number"
+					maxlength="11"
+					placeholder="请输入常用手机号"
+					placeholder-class="form-placeholder"
+				/>
+			</view>
+			<view class="form-item">
+				<text class="form-label">邮箱</text>
+				<input
+					class="form-input"
+					v-model="form.email"
+					type="text"
+					placeholder="请输入联系邮箱"
+					placeholder-class="form-placeholder"
+				/>
+			</view>
+			<view class="form-item">
+				<text class="form-label">地址</text>
+				<textarea
+					class="form-textarea"
+					v-model="form.address"
+					placeholder="请输入联系地址"
+					placeholder-class="form-placeholder"
+					auto-height="true"
+				/>
+			</view>
+		</view>
+
+		<view class="tips-card">
+			<text class="tips-title">信息使用说明</text>
+			<text class="tips-text">
+				姓名和联系方式仅用于订单通知及售后服务，我们会严格保护您的隐私信息。
+			</text>
+		</view>
+
+		<view class="actions">
+			<button class="btn cancel" @click="handleCancel">取消</button>
+			<button class="btn submit" type="primary" @click="handleSubmit">保存信息</button>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			form: {
+				name: '',
+				phone: '',
+				email: '',
+				address: ''
+			}
+		};
+	},
+	onLoad() {
+		this.loadProfile();
+	},
+	methods: {
+		loadProfile() {
+			try {
+				const stored = uni.getStorageSync('userProfile');
+				if (stored) {
+					this.form = {
+						...this.form,
+						...stored
+					};
+				}
+			} catch (error) {
+				console.warn('加载个人信息失败', error);
+			}
+		},
+		validatePhone(phone) {
+			const phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
+			return phoneReg.test(phone);
+		},
+		validateEmail(email) {
+			const emailReg =
+				/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@(([^<>()[\]\.,;:\s@"]+\.)+[^<>()[\]\.,;:\s@"]{2,})$/i;
+			return emailReg.test(email);
+		},
+		handleCancel() {
+			uni.navigateBack({
+				delta: 1
+			});
+		},
+		handleSubmit() {
+			if (!this.form.name.trim()) {
+				return this.showToast('请填写姓名');
+			}
+			if (!this.form.phone.trim() || !this.validatePhone(this.form.phone.trim())) {
+				return this.showToast('请填写有效的手机号');
+			}
+			if (this.form.email.trim() && !this.validateEmail(this.form.email.trim())) {
+				return this.showToast('请填写有效的邮箱');
+			}
+			if (!this.form.address.trim()) {
+				return this.showToast('请填写联系地址');
+			}
+
+			try {
+				uni.setStorageSync('userProfile', { ...this.form });
+				this.showToast('保存成功', 'success');
+				setTimeout(() => {
+					uni.navigateBack({
+						delta: 1
+					});
+				}, 800);
+			} catch (error) {
+				this.showToast('信息保存失败，请稍后重试');
+				console.error('保存个人信息失败', error);
+			}
+		},
+		showToast(title, icon = 'none') {
+			uni.showToast({
+				title,
+				icon,
+				duration: 2000
+			});
+		}
+	}
+};
+</script>
+
+<style scoped>
+.page {
+	background: #f7f8fa;
+	padding: 40rpx 32rpx 80rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 32rpx;
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.title {
+	font-size: 36rpx;
+	color: #1a1a1a;
+	font-weight: 600;
+}
+
+.subtitle {
+	font-size: 26rpx;
+	color: #8c8c8c;
+	line-height: 1.6;
+}
+
+.form-card {
+	background: #ffffff;
+	border-radius: 24rpx;
+	padding: 32rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 32rpx;
+	box-shadow: 0 12rpx 30rpx rgba(16, 30, 54, 0.06);
+}
+
+.form-item {
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.form-label {
+	font-size: 28rpx;
+	color: #1a1a1a;
+	font-weight: 500;
+}
+.form-input{
+	height: 80rpx;
+}
+
+.form-input,
+.form-textarea {
+	width: 100%;
+	background: #f5f7fb;
+	border-radius: 16rpx;
+	padding: 24rpx 28rpx;
+	font-size: 28rpx;
+	color: #1a1a1a;
+	box-sizing: border-box;
+}
+
+.form-textarea {
+	min-height: 160rpx;
+	line-height: 1.6;
+}
+
+.form-placeholder {
+	color: #b0b3ba;
+	font-size: 28rpx;
+}
+
+.tips-card {
+	background: #fff8f2;
+	border-radius: 24rpx;
+	padding: 28rpx 32rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.tips-title {
+	font-size: 28rpx;
+	color: #ff7a00;
+	font-weight: 600;
+}
+
+.tips-text {
+	font-size: 26rpx;
+	color: #a66b3a;
+	line-height: 1.6;
+}
+
+.actions {
+	display: flex;
+	gap: 24rpx;
+	padding: 0 4rpx;
+}
+
+.btn {
+	flex: 1;
+	height: 92rpx;
+	border-radius: 46rpx;
+	font-size: 30rpx;
+	font-weight: 500;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.cancel {
+	color: #1a1a1a;
+	background: #e9ecf1;
+}
+
+.submit {
+	color: #ffffff;
+	background: linear-gradient(135deg, #8b40ff 0%, #ff3c8d 100%);
+	border: none;
+}
+</style>
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 910471a..13ff2ee 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -1,11 +1,1060 @@
 <template>
-	<view class="">
+	<view class="page">
+		<view class="profile-card">
+			<view class="profile-header">
+				<view class="avatar-wrapper">
+					<view class="avatar">100x100</view>
+					<view class="avatar-upload">📷</view>
+				</view>
+				<view class="profile-info">
+					<view class="title-row">
+						<text class="name">香香公主</text>
+						<view class="vip-badge">
+							<text>品鉴会员</text>
+						</view>
+					</view>
+					<view class="meta-row">
+						<text class="meta-item">加入于 2025-01-15</text>
+					</view>
+					<view class="meta-row">
+						<text class="meta-item">上海市浦东新区张江高科技园区</text>
+					</view>
+				</view>
+				<view class="edit-btn" @click="navigateTo('/pages/my/editInfo/index')">编辑资料</view>
+			</view>
+			<view class="stats-grid">
+				<view class="stat-card" v-for="item in stats" :key="item.label">
+					<view class="stat-icon" :style="{ color: item.color }">{{ item.icon }}</view>
+					<text class="stat-value" :style="{ color: item.color }">{{ item.value }}</text>
+					<text class="stat-label">{{ item.label }}</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="tabs">
+			<view
+				class="tab-item"
+				v-for="(tab, index) in tabs"
+				:key="tab"
+				:class="{ active: index === currentTab }"
+				@click="handleTabClick(index)"
+			>
+				{{ tab }}
+			</view>
+		</view>
+
+		<view class="monthly-card" v-if="currentTab === 0">
+			<view class="monthly-title">本月数据</view>
+			<view class="monthly-list">
+				<view class="monthly-item" v-for="item in monthlyData" :key="item.label">
+					<text class="monthly-label">{{ item.label }}</text>
+					<text
+						class="monthly-value"
+						:style="{ color: item.color || '#1A1A1A' }"
+					>
+						{{ item.value }}
+					</text>
+				</view>
+			</view>
+		</view>
+		<view class="orders-card" v-if="currentTab === 1">
+			<view class="orders-header">
+				<text class="orders-title">我的订单</text>
+				<view class="orders-more">查看全部</view>
+			</view>
+			<view class="order-list">
+				<view class="order-item" v-for="order in orders" :key="order.no">
+					<view class="order-top">
+						<text class="order-no">{{ order.no }}</text>
+						<view class="order-tags">
+							<view class="order-tag type">{{ order.type }}</view>
+							<view class="order-tag status" :class="order.statusClass">{{ order.status }}</view>
+						</view>
+						<text class="order-date">{{ order.date }}</text>
+					</view>
+					<view class="order-body">
+						<view class="order-thumb">60x60</view>
+						<view class="order-info">
+							<text class="order-name">{{ order.product }}</text>
+							<text class="order-spec">{{ order.spec }}</text>
+						</view>
+					</view>
+					<view class="order-footer">
+						<view class="order-amount">
+							<text class="amount-label">订单总额</text>
+							<text class="amount-value">{{ order.amount }}</text>
+						</view>
+						<view class="order-actions">
+							<view
+								class="order-action"
+								v-for="action in order.actions"
+								:key="action.label"
+							>
+								{{ action.label }}
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="favorites-card" v-if="currentTab === 2">
+			<view class="favorites-wrapper">
+				<view class="favorite-item" v-for="favorite in favorites" :key="favorite.title">
+					<view class="favorite-thumb">150x150</view>
+					<view class="favorite-info">
+						<view class="favorite-top">
+							<text class="favorite-title">{{ favorite.title }}</text>
+							<view class="favorite-heart">♡</view>
+						</view>
+						<view class="favorite-meta">
+							<text class="favorite-rating">⭐ {{ favorite.rating }}</text>
+							<text class="favorite-count">({{ favorite.count }})</text>
+						</view>
+						<view class="favorite-price">
+							<text class="favorite-current">{{ favorite.price }}</text>
+							<text class="favorite-origin">{{ favorite.origin }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="achievements-card" v-if="currentTab === 3">
+			<view
+				class="achievement-item"
+				v-for="achievement in achievements"
+				:key="achievement.title"
+				:class="{ highlight: achievement.highlight }"
+			>
+				<view class="achievement-left">
+					<view class="achievement-icon" :style="{ backgroundColor: achievement.iconBg }">
+						<text class="achievement-icon-text">{{ achievement.icon }}</text>
+					</view>
+					<view class="achievement-info">
+						<text class="achievement-title">{{ achievement.title }}</text>
+						<text class="achievement-desc">{{ achievement.desc }}</text>
+						<view
+							class="achievement-progress"
+							v-if="achievement.progressText"
+						>
+							<view class="achievement-progress-bar">
+								<view
+									class="achievement-progress-fill"
+									:style="{ width: achievement.progress + '%' }"
+								></view>
+							</view>
+							<text class="achievement-progress-text">{{ achievement.progressText }}</text>
+						</view>
+						<text class="achievement-reward">奖励：{{ achievement.reward }}</text>
+					</view>
+				</view>
+				<text class="achievement-trophy">{{ achievement.trophy }}</text>
+			</view>
+		</view>
+		<view class="settings-card" v-if="currentTab === 4">
+			<view class="settings-section">
+				<text class="settings-section-title">账户设置</text>
+				<view class="settings-list">
+					<view class="settings-item" v-for="item in accountSettings" :key="item.title">
+						<view class="settings-left">
+							<view class="settings-icon">{{ item.icon }}</view>
+							<view class="settings-text">
+								<text class="settings-title">{{ item.title }}</text>
+								<text class="settings-desc">{{ item.desc }}</text>
+							</view>
+						</view>
+						<text class="settings-arrow">›</text>
+					</view>
+				</view>
+			</view>
+			<view class="settings-section">
+				<text class="settings-section-title">其他设置</text>
+				<view class="settings-list">
+					<view class="settings-item" v-for="item in otherSettings" :key="item.title">
+						<view class="settings-left">
+							<view class="settings-icon">{{ item.icon }}</view>
+							<view class="settings-text">
+								<text class="settings-title">{{ item.title }}</text>
+								<text class="settings-desc">{{ item.desc }}</text>
+							</view>
+						</view>
+						<text class="settings-arrow">›</text>
+					</view>
+				</view>
+			</view>
+			<view class="logout-btn">退出登录</view>
+		</view>
+		<view class="quick-card">
+			<view class="quick-title">快捷功能</view>
+			<view class="quick-grid">
+				<view
+					class="quick-item"
+					v-for="action in quickActions"
+					:key="action.label"
+				>
+					<view class="quick-icon">{{ action.icon }}</view>
+					<text class="quick-label">{{ action.label }}</text>
+				</view>
+			</view>
+		</view>
+
 		
 	</view>
 </template>
 
 <script>
+export default {
+	data() {
+		return {
+			currentTab: 0,
+			stats: [
+				{ icon: '🎁', value: '1280', label: '当前积分', color: '#7B43FF' },
+				{ icon: '🛍️', value: '23', label: '总订单数', color: '#2877FF' },
+				{ icon: '📈', value: '¥321', label: '累计省钱', color: '#26B95A' },
+				{ icon: '👥', value: '8', label: '团队人数', color: '#FF7A00' }
+			],
+			tabs: ['概览', '订单', '收藏', '成就', '设置'],
+			monthlyData: [
+				{ label: '本月订单', value: '5单' },
+				{ label: '本月消费', value: '¥450.00', color: '#26B95A' },
+				{ label: '分享次数', value: '18次', color: '#7B43FF' },
+				{ label: '分销佣金', value: '¥568.00', color: '#FF7A00' }
+			],
+			quickActions: [
+				{ icon: '💳', label: '我的钱包' },
+				{ icon: '📍', label: '地址管理' },
+				{ icon: '🔔', label: '消息通知' },
+				{ icon: '❓', label: '帮助中心' }
+			],
+			favorites: [
+				{
+					title: '经典玫瑰香水30ml',
+					rating: '4.8',
+					count: 1250,
+					price: '¥199',
+					origin: '¥299'
+				}
+			],
+			achievements: [
+				{
+					title: '拼团达人',
+					desc: '成功参与10次拼团',
+					progress: 80,
+					progressText: '8/10',
+					reward: '专属优惠券',
+					icon: '👥',
+					iconBg: '#f3f4f8',
+					trophy: '',
+					highlight: false
+				},
+				{
+					title: '分享达人',
+					desc: '分享商品20次',
+					progress: 90,
+					progressText: '18/20',
+					reward: '500积分',
+					icon: '🔗',
+					iconBg: '#f3f4f8',
+					trophy: '',
+					highlight: false
+				},
+				{
+					title: '消费达人',
+					desc: '累计消费满2000元',
+					progress: 100,
+					progressText: '',
+					reward: 'VIP会员体验',
+					icon: '🛍️',
+					iconBg: '#ffeeb7',
+					trophy: '🏆',
+					highlight: true
+				}
+			],
+			accountSettings: [
+				{ icon: '👤', title: '个人信息', desc: '姓名、手机、邮箱' },
+				{ icon: '🛡️', title: '账户安全', desc: '密码、支付设置' },
+				{ icon: '🔔', title: '通知设置', desc: '消息推送偏好' }
+			],
+			otherSettings: [
+				{ icon: '📄', title: '隐私政策', desc: '查看隐私条款' },
+				{ icon: '❓', title: '帮助中心', desc: '常见问题解答' }
+			],
+			orders: [
+				{
+					no: 'ORD20250402001',
+					type: '拼团订单',
+					status: '已完成',
+					statusClass: 'success',
+					date: '2025-04-02',
+					product: '经典玫瑰香水30ml',
+					spec: '￥199 × 1',
+					amount: '¥199.00',
+					actions: [{ label: '查看详情' }, { label: '再次购买' }]
+				},
+				{
+					no: 'ORD20250401001',
+					type: '秒杀订单',
+					status: '待收货',
+					statusClass: 'warning',
+					date: '2025-04-01',
+					product: '小样体验包',
+					spec: '￥1 × 1',
+					amount: '¥1.00',
+					actions: [{ label: '查看详情' }]
+				},
+				{
+					no: 'ORD20250328001',
+					type: '普通订单',
+					status: '待付款',
+					statusClass: 'pending',
+					date: '2025-03-28',
+					product: '薰衣草精油礼盒',
+					spec: '￥299 × 1',
+					amount: '¥299.00',
+					actions: [{ label: '查看详情' }]
+				}
+			]
+		};
+	},
+	methods: {
+		handleTabClick(index) {
+			this.currentTab = index;
+		},
+		navigateTo(url) {
+			uni.navigateTo({
+				url: url
+			});
+		}
+	}
+};
 </script>
 
-<style>
+<style scoped>
+.page {
+	min-height: 100vh;
+	/* padding: 24rpx; */
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+	padding-bottom: 24rpx;
+}
+
+.profile-card {
+	background-color: #ffffff;
+	/* border-radius: 24rpx; */
+	
+	padding-bottom: 24rpx;
+}
+
+.profile-header {
+	background: linear-gradient(135deg, #8b40ff 0%, #ff3c8d 100%);
+	/* border-radius: 24rpx 24rpx 0 0; */
+	padding: 40rpx 32rpx;
+	display: flex;
+	align-items: flex-start;
+	gap: 24rpx;
+	color: #ffffff;
+	position: relative;
+}
+
+.avatar-wrapper {
+	position: relative;
+}
+
+.avatar {
+	width: 160rpx;
+	height: 160rpx;
+	border-radius: 50%;
+	background-color: rgba(255, 255, 255, 0.2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 26rpx;
+	color: #ffffff;
+	border: 4rpx solid rgba(255, 255, 255, 0.4);
+}
+
+.avatar-upload {
+	width: 56rpx;
+	height: 56rpx;
+	border-radius: 50%;
+	background-color: #ffffff;
+	color: #8b40ff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	font-size: 32rpx;
+	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
+}
+
+.profile-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.title-row {
+	display: flex;
+	align-items: center;
+	gap: 16rpx;
+}
+
+.name {
+	font-size: 40rpx;
+	font-weight: 700;
+}
+
+.vip-badge {
+	background-color: rgba(255, 255, 255, 0.2);
+	border-radius: 999rpx;
+	padding: 8rpx 20rpx;
+	font-size: 24rpx;
+	display: flex;
+	align-items: center;
+}
+
+.vip-badge text {
+	color: #ffe178;
+	font-weight: 600;
+}
+
+.meta-row {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+	font-size: 24rpx;
+	opacity: 0.88;
+}
+
+.meta-item {
+	color: rgba(255, 255, 255, 0.9);
+}
+
+.edit-btn {
+	position: absolute;
+	right: 32rpx;
+	top: 40rpx;
+	padding: 12rpx 28rpx;
+	border-radius: 999rpx;
+	background-color: rgba(255, 255, 255, 0.15);
+	border: 2rpx solid rgba(255, 255, 255, 0.5);
+	font-size: 24rpx;
+}
+
+.stats-grid {
+	padding: 32rpx;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 24rpx;
+	
+}
+
+.stat-card {
+	background-color: #f9f9ff;
+	border-radius: 24rpx;
+	padding: 32rpx 24rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12rpx;
+	box-shadow: inset 0 0 0 2rpx rgba(139, 64, 255, 0.05);
+}
+
+.stat-icon {
+	font-size: 44rpx;
+}
+
+.stat-value {
+	font-size: 44rpx;
+	font-weight: 700;
+}
+
+.stat-label {
+	font-size: 26rpx;
+	color: #5f5f5f;
+}
+
+.tabs {
+	display: flex;
+	background-color: #ffffff;
+	border-radius: 999rpx;
+	padding: 12rpx;
+	margin: 0 24rpx;
+	gap: 12rpx;
+	box-shadow: 0 12rpx 24rpx 0 rgba(123, 67, 255, 0.08);
+}
+
+.tab-item {
+	flex: 1;
+	text-align: center;
+	padding: 16rpx 0;
+	border-radius: 999rpx;
+	font-size: 28rpx;
+	color: #757c8e;
+}
+
+.tab-item.active {
+	background: linear-gradient(135deg, #8b40ff 0%, #ff3c8d 100%);
+	color: #ffffff;
+	font-weight: 600;
+}
+
+.monthly-card {
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	padding: 32rpx;
+	margin: 0 24rpx;
+	box-shadow: 0 12rpx 24rpx 0 rgba(123, 67, 255, 0.08);
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+.monthly-title {
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #1a1a1a;
+}
+
+.monthly-list {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+.monthly-item {
+	display: flex;
+	justify-content: space-between;
+	font-size: 28rpx;
+	color: #404040;
+}
+
+.monthly-label {
+	color: #757c8e;
+}
+
+.monthly-value {
+	font-weight: 600;
+}
+
+.quick-card {
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	padding: 32rpx;
+	margin: 0 24rpx;
+	box-shadow: 0 12rpx 24rpx 0 rgba(123, 67, 255, 0.08);
+	display: flex;
+	flex-direction: column;
+	gap: 32rpx;
+}
+
+.quick-title {
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #1a1a1a;
+}
+
+.quick-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 24rpx;
+}
+
+.quick-item {
+	background-color: #f6f8ff;
+	border-radius: 24rpx;
+	padding: 32rpx 24rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16rpx;
+	border: 2rpx solid rgba(79, 116, 255, 0.1);
+	box-shadow: 0 6rpx 18rpx rgba(79, 116, 255, 0.08);
+}
+
+.quick-icon {
+	font-size: 48rpx;
+	color: #1a274c;
+}
+
+.quick-label {
+	font-size: 28rpx;
+	color: #1a274c;
+	font-weight: 500;
+}
+
+.favorites-card {
+	margin: 0 24rpx;
+	padding: 24rpx 24rpx 36rpx;
+	background-color: #ffffff;
+	box-shadow: 0 12rpx 24rpx 0 rgba(123, 67, 255, 0.08);
+	border-radius: 24rpx;
+}
+
+.favorites-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+.favorite-item {
+	background-color: #f6f8ff;
+	border-radius: 24rpx;
+	padding: 24rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+	border: 2rpx solid rgba(79, 116, 255, 0.12);
+	box-shadow: inset 0 0 0 2rpx rgba(79, 116, 255, 0.04);
+}
+
+.favorite-thumb {
+	width: 100%;
+	height: 400rpx;
+	border-radius: 16rpx;
+	background-color: #eef2ff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 44rpx;
+	color: #b3bac9;
+}
+
+.favorite-info {
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.favorite-top {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.favorite-title {
+	font-size: 30rpx;
+	color: #273248;
+	font-weight: 600;
+}
+
+.favorite-heart {
+	width: 48rpx;
+	height: 48rpx;
+	border-radius: 12rpx;
+	background-color: #ffffff;
+	box-shadow: 0 6rpx 18rpx rgba(79, 116, 255, 0.08);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 26rpx;
+	color: #273248;
+}
+
+.favorite-meta {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+	font-size: 24rpx;
+	color: #8c94a3;
+}
+
+.favorite-rating {
+	color: #ffb400;
+}
+
+.favorite-price {
+	display: flex;
+	align-items: baseline;
+	gap: 12rpx;
+}
+
+.favorite-current {
+	font-size: 32rpx;
+	color: #ff2e2e;
+	font-weight: 700;
+}
+
+.favorite-origin {
+	font-size: 26rpx;
+	color: #b3bac9;
+	text-decoration: line-through;
+}
+
+.settings-card {
+	margin: 0 24rpx;
+	padding: 24rpx;
+	background-color: #ffffff;
+	box-shadow: 0 12rpx 24rpx 0 rgba(123, 67, 255, 0.08);
+	border-radius: 24rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 32rpx;
+}
+
+.settings-section {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+	background-color: #f8faff;
+	padding: 24rpx;
+	border-radius: 24rpx;
+	border: 2rpx solid rgba(79, 116, 255, 0.08);
+	box-shadow: inset 0 0 0 2rpx rgba(79, 116, 255, 0.04);
+}
+
+.settings-section-title {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #1a1a1a;
+}
+
+.settings-list {
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.settings-item {
+	background-color: #ffffff;
+	border-radius: 20rpx;
+	padding: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border: 2rpx solid rgba(79, 116, 255, 0.1);
+	box-shadow: 0 8rpx 18rpx rgba(79, 116, 255, 0.06);
+}
+
+.settings-left {
+	display: flex;
+	align-items: center;
+	gap: 20rpx;
+}
+
+.settings-icon {
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 20rpx;
+	background-color: #f0f4ff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 34rpx;
+	color: #4f74ff;
+}
+
+.settings-text {
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+}
+
+.settings-title {
+	font-size: 28rpx;
+	color: #273248;
+	font-weight: 600;
+}
+
+.settings-desc {
+	font-size: 24rpx;
+	color: #8c94a3;
+}
+
+.settings-arrow {
+	font-size: 36rpx;
+	color: #c4cad6;
+}
+
+.logout-btn {
+	margin-top: 8rpx;
+	padding: 28rpx 0;
+	text-align: center;
+	border-radius: 20rpx;
+	border: 2rpx solid rgba(255, 99, 132, 0.2);
+	color: #ff4d6d;
+	font-size: 28rpx;
+	background-color: rgba(255, 99, 132, 0.08);
+}
+
+.achievements-card {
+	margin: 0 24rpx;
+	padding: 24rpx;
+	background-color: #ffffff;
+	box-shadow: 0 12rpx 24rpx 0 rgba(123, 67, 255, 0.08);
+	border-radius: 24rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+.achievement-item {
+	background-color: #f8faff;
+	border-radius: 24rpx;
+	padding: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border: 2rpx solid rgba(79, 116, 255, 0.08);
+	box-shadow: inset 0 0 0 2rpx rgba(79, 116, 255, 0.04);
+}
+
+.achievement-item.highlight {
+	background: linear-gradient(135deg, rgba(255, 238, 183, 0.55), rgba(255, 255, 255, 0.9));
+	border: 2rpx solid rgba(255, 200, 64, 0.5);
+}
+
+.achievement-left {
+	display: flex;
+	align-items: center;
+	gap: 24rpx;
+	flex: 1;
+}
+
+.achievement-icon {
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 999rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.achievement-icon-text {
+	font-size: 40rpx;
+}
+
+.achievement-info {
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.achievement-title {
+	font-size: 30rpx;
+	color: #273248;
+	font-weight: 600;
+}
+
+.achievement-desc {
+	font-size: 24rpx;
+	color: #8c94a3;
+}
+
+.achievement-progress {
+	display: flex;
+	align-items: center;
+	gap: 16rpx;
+	margin-top: 12rpx;
+}
+
+.achievement-progress-bar {
+	flex: 1;
+	height: 18rpx;
+	border-radius: 12rpx;
+	background-color: rgba(79, 116, 255, 0.15);
+	overflow: hidden;
+}
+
+.achievement-progress-fill {
+	height: 100%;
+	border-radius: 12rpx;
+	background: linear-gradient(135deg, #fccc75, #f5b34b);
+}
+
+.achievement-progress-text {
+	font-size: 24rpx;
+	color: #273248;
+}
+
+.achievement-reward {
+	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #f5b34b;
+	padding: 16rpx 20rpx;
+	background-color: rgba(255, 190, 60, 0.15);
+	border-radius: 16rpx;
+}
+
+.achievement-trophy {
+	font-size: 44rpx;
+	color: #f5b34b;
+	align-self: flex-start;
+}
+
+.orders-card {
+	background-color: #ffffff;
+	padding: 32rpx;
+	margin: 0 24rpx;
+	box-shadow: 0 12rpx 24rpx 0 rgba(123, 67, 255, 0.08);
+	display: flex;
+	flex-direction: column;
+	gap: 32rpx;
+}
+
+.orders-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.orders-title {
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #1a1a1a;
+}
+
+.orders-more {
+	font-size: 24rpx;
+	color: #4f5f7a;
+	padding: 12rpx 28rpx;
+	border-radius: 999rpx;
+	background-color: #f2f7ff;
+}
+
+.order-list {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+.order-item {
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	border: 2rpx solid rgba(79, 116, 255, 0.12);
+	padding: 32rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+	box-shadow: 0 10rpx 26rpx rgba(79, 116, 255, 0.06);
+}
+
+.order-top {
+	display: flex;
+	align-items: center;
+	gap: 16rpx;
+}
+
+.order-no {
+	font-size: 26rpx;
+	color: #212a3a;
+	font-weight: 600;
+	flex-shrink: 0;
+}
+
+.order-tags {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
+
+.order-tag {
+	font-size: 22rpx;
+	padding: 8rpx 20rpx;
+	border-radius: 999rpx;
+}
+
+.order-tag.type {
+	background-color: rgba(79, 116, 255, 0.12);
+	color: #4f74ff;
+}
+
+.order-tag.status {
+	color: #ffffff;
+}
+
+.order-tag.status.success {
+	background-color: #6cd198;
+}
+
+.order-tag.status.warning {
+	background-color: #c79bff;
+}
+
+.order-tag.status.pending {
+	background-color: #f7c96b;
+	color: #5a3b00;
+}
+
+.order-date {
+	margin-left: auto;
+	font-size: 24rpx;
+	color: #8c94a3;
+}
+
+.order-body {
+	display: flex;
+	gap: 24rpx;
+}
+
+.order-thumb {
+	width: 120rpx;
+	height: 120rpx;
+	border-radius: 16rpx;
+	background-color: #eef2ff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 24rpx;
+	color: #8c94a3;
+}
+
+.order-info {
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+	justify-content: center;
+}
+
+.order-name {
+	font-size: 30rpx;
+	color: #273248;
+	font-weight: 600;
+}
+
+.order-spec {
+	font-size: 24rpx;
+	color: #8c94a3;
+}
+
+.order-footer {
+	display: flex;
+	align-items: center;
+	gap: 24rpx;
+}
+
+.order-amount {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
+
+.amount-label {
+	font-size: 24rpx;
+	color: #8c94a3;
+}
+
+.amount-value {
+	font-size: 32rpx;
+	color: #ff2e2e;
+	font-weight: 700;
+}
+
+.order-actions {
+	margin-left: auto;
+	display: flex;
+	gap: 20rpx;
+}
+
+.order-action {
+	padding: 12rpx 28rpx;
+	border-radius: 999rpx;
+	border: 2rpx solid rgba(79, 116, 255, 0.35);
+	font-size: 24rpx;
+	color: #4f5f7a;
+}
 </style>
\ No newline at end of file
diff --git a/pages/subscribe/index.vue b/pages/subscribe/index.vue
index 910471a..ee0653e 100644
--- a/pages/subscribe/index.vue
+++ b/pages/subscribe/index.vue
@@ -1,11 +1,398 @@
 <template>
-	<view class="">
-		
+	<view class="subscribe-page">
+		<view class="banner">
+			<view class="banner-head">
+				<view class="banner-icon">
+					<text class="iconfont icon-lihe"></text>
+				</view>
+				<view class="banner-info">
+					<view class="banner-title">盲盒订阅</view>
+					<view class="banner-desc">每月惊喜，专属香氛体验</view>
+				</view>
+				<view class="banner-meta">
+					<view class="meta-item">
+						<view class="meta-label">当前等级</view>
+						<view class="meta-value">{{ memberInfo.level }}</view>
+					</view>
+					<view class="meta-item">
+						<view class="meta-label">下次配送</view>
+						<view class="meta-value">{{ memberInfo.nextDelivery }}</view>
+					</view>
+					<view class="meta-item unlocked">
+						<view class="meta-label">已解锁</view>
+						<view class="meta-value">{{ memberInfo.unlocked }}种</view>
+					</view>
+				</view>
+			</view>
+			<view class="tab-bar">
+				<view
+					v-for="tab in tabs"
+					:key="tab.key"
+					class="tab-item"
+					:class="{ active: activeTab === tab.key }"
+					@click="switchTab(tab.key)"
+				>
+					{{ tab.label }}
+				</view>
+			</view>
+		</view>
+
+		<view class="content">
+			<view class="membership-card">
+				<view class="card-header">
+					<view class="card-icon">
+						<text class="iconfont icon-xingxing"></text>
+					</view>
+					<view class="card-title">
+						<view class="card-name">{{ plan.name }}</view>
+						<view class="card-subtitle">{{ plan.tagline }}</view>
+					</view>
+					<view class="card-price">
+						<view class="current">￥{{ plan.price }}</view>
+						<view class="original">￥{{ plan.originalPrice }}</view>
+						<view class="discount">{{ plan.discount }}</view>
+					</view>
+				</view>
+
+				<view class="card-section">
+					<view class="section-title">会员权益</view>
+					<view class="benefit-list">
+						<view
+							class="benefit-item"
+							v-for="benefit in plan.benefits"
+							:key="benefit"
+						>
+							<view class="indicator"></view>
+							<text>{{ benefit }}</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="card-section">
+					<view class="section-title">订阅特色</view>
+					<view class="feature-tags">
+						<view
+							class="tag"
+							v-for="tag in plan.features"
+							:key="tag"
+						>
+							{{ tag }}
+						</view>
+					</view>
+				</view>
+
+				<view class="card-action">
+					<button class="subscribe-button" @click="handleSubscribe">
+						立即订阅
+					</button>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+export default {
+	data() {
+		return {
+			activeTab: 'plan',
+			tabs: [
+				{ key: 'plan', label: '订阅计划' },
+				{ key: 'scents', label: '香型管理' },
+				{ key: 'records', label: '配送记录' },
+				{ key: 'settings', label: '订阅设置' }
+			],
+			memberInfo: {
+				level: '品鉴会员',
+				nextDelivery: '2025-04-05',
+				unlocked: 4
+			},
+			plan: {
+				name: '探索会员',
+				tagline: '无门槛',
+				price: 99,
+				originalPrice: 129,
+				discount: '95折',
+				benefits: [
+					'盲盒95折优惠',
+					'月返5%积分',
+					'基础客服支持',
+					'每月1次退换货',
+					'标准配送'
+				],
+				features: ['4种香型', '基础包装', '标准配送']
+			}
+		};
+	},
+	methods: {
+		switchTab(key) {
+			this.activeTab = key;
+
+			if (key !== 'plan') {
+				uni.showToast({
+					title: '即将上线，敬请期待',
+					icon: 'none'
+				});
+			}
+		},
+		handleSubscribe() {
+			uni.showToast({
+				title: '订阅成功',
+				icon: 'success'
+			});
+		}
+	}
+};
 </script>
 
-<style>
+<style scoped>
+.subscribe-page {
+	min-height: 100vh;
+	padding: 48rpx 32rpx 80rpx;
+	box-sizing: border-box;
+	background: linear-gradient(180deg, #fdf2ff 0%, #ffffff 45%, #ffffff 100%);
+}
+
+.banner {
+	padding: 48rpx 36rpx 32rpx;
+	border-radius: 32rpx;
+	background: linear-gradient(135deg, #ff3fb4 0%, #8f39ff 100%);
+	color: #fff;
+	box-shadow: 0 30rpx 50rpx rgba(143, 57, 255, 0.18);
+}
+
+.banner-head {
+	display: flex;
+	align-items: center;
+	gap: 32rpx;
+}
+
+.banner-icon {
+	width: 120rpx;
+	height: 120rpx;
+	border-radius: 40rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(255, 255, 255, 0.16);
+	font-size: 60rpx;
+	box-shadow: inset 0 10rpx 20rpx rgba(255, 255, 255, 0.2);
+}
+
+.banner-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.banner-title {
+	font-size: 42rpx;
+	font-weight: 600;
+}
+
+.banner-desc {
+	font-size: 28rpx;
+	opacity: 0.85;
+}
+
+.banner-meta {
+	display: flex;
+	gap: 32rpx;
+}
+
+.meta-item {
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+}
+
+.meta-label {
+	font-size: 24rpx;
+	opacity: 0.7;
+}
+
+.meta-value {
+	font-size: 30rpx;
+	font-weight: 600;
+}
+
+.meta-item.unlocked .meta-value {
+	display: flex;
+	align-items: baseline;
+}
+
+.tab-bar {
+	margin-top: 32rpx;
+	padding: 4rpx;
+	border-radius: 24rpx;
+	background: rgba(255, 255, 255, 0.18);
+	display: flex;
+	gap: 12rpx;
+}
+
+.tab-item {
+	flex: 1;
+	padding: 18rpx 0;
+	text-align: center;
+	border-radius: 18rpx;
+	font-size: 26rpx;
+	opacity: 0.85;
+	transition: all 0.2s ease-in-out;
+}
+
+.tab-item.active {
+	background: #fff;
+	color: #7b3cff;
+	box-shadow: 0 12rpx 20rpx rgba(255, 255, 255, 0.26);
+	opacity: 1;
+}
+
+.content {
+	margin-top: 40rpx;
+}
+
+.membership-card {
+	background: #fff;
+	border-radius: 32rpx;
+	padding: 40rpx 36rpx;
+	box-shadow: 0 20rpx 40rpx rgba(30, 10, 80, 0.05);
+	display: flex;
+	flex-direction: column;
+	gap: 40rpx;
+}
+
+.card-header {
+	display: flex;
+	align-items: center;
+	gap: 28rpx;
+}
+
+.card-icon {
+	width: 110rpx;
+	height: 110rpx;
+	border-radius: 32rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, #ff60e9 0%, #894dff 100%);
+	color: #fff;
+	font-size: 52rpx;
+	box-shadow: 0 20rpx 40rpx rgba(137, 77, 255, 0.25);
+}
+
+.card-title {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+}
+
+.card-name {
+	font-size: 36rpx;
+	font-weight: 600;
+	color: #2c2440;
+}
+
+.card-subtitle {
+	font-size: 26rpx;
+	color: #8f87a5;
+}
+
+.card-price {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 6rpx;
+}
+
+.card-price .current {
+	font-size: 40rpx;
+	font-weight: 700;
+	color: #7b3cff;
+}
+
+.card-price .original {
+	font-size: 26rpx;
+	color: #b4acc8;
+	text-decoration: line-through;
+}
+
+.card-price .discount {
+	font-size: 24rpx;
+	color: #7b3cff;
+	padding: 8rpx 20rpx;
+	border-radius: 16rpx;
+	background: rgba(123, 60, 255, 0.1);
+}
+
+.card-section {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+.section-title {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #30274a;
+}
+
+.benefit-list {
+	display: flex;
+	flex-direction: column;
+	gap: 18rpx;
+}
+
+.benefit-item {
+	display: flex;
+	align-items: center;
+	gap: 16rpx;
+	font-size: 26rpx;
+	color: #4a3f63;
+}
+
+.benefit-item .indicator {
+	width: 20rpx;
+	height: 20rpx;
+	border-radius: 50%;
+	background: linear-gradient(135deg, #ff62e2 0%, #864dff 100%);
+}
+
+.feature-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16rpx;
+}
+
+.feature-tags .tag {
+	padding: 14rpx 24rpx;
+	border-radius: 20rpx;
+	font-size: 24rpx;
+	color: #7b3cff;
+	background: rgba(123, 60, 255, 0.08);
+}
+
+.card-action {
+	display: flex;
+	justify-content: center;
+}
+
+.subscribe-button {
+	width: 100%;
+	height: 96rpx;
+	border-radius: 28rpx;
+	background: linear-gradient(135deg, #ff47c8 0%, #8547ff 100%);
+	color: #fff;
+	font-size: 30rpx;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 20rpx 40rpx rgba(133, 71, 255, 0.25);
+}
+
+.subscribe-button::after {
+	border: none;
+}
 </style>
\ No newline at end of file