From dbb43bc57e272d3efe008fb1f056f5e945b470e2 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Sat, 4 Oct 2025 16:54:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E4=BB=A3=E7=A0=81?=
=?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.cursor/rules/css-style-guide.mdc | 26 ++++++++-
src/pages/mine/index.vue | 91 +++++++++++++++++++++++--------
2 files changed, 94 insertions(+), 23 deletions(-)
diff --git a/.cursor/rules/css-style-guide.mdc b/.cursor/rules/css-style-guide.mdc
index bff9f3d..6bd299c 100644
--- a/.cursor/rules/css-style-guide.mdc
+++ b/.cursor/rules/css-style-guide.mdc
@@ -225,7 +225,31 @@ const iconColor = computed(() => (themeStore.isDark ? "#ffffff" : "#333333"));
❌ **不要使用 `@apply` 指令**
❌ **不要把一次性样式放到全局**
❌ **不要使用非语义化的类名**
-❌ **不要在模板中堆叠超过5个原子类**
+❌ **不要在模板中堆叠超过5个原子类**
+❌ **不要混用UnoCSS原子类和自定义CSS类** - 一个元素应该只使用原子类或只使用自定义类，避免样式管理混乱
+
+### 混用问题示例
+
+```vue
+
+内容
+内容
+
+
+内容
+
+
+内容
+内容
+```
+
+### 解决方案
+
+当需要混用时，选择以下方案之一：
+
+1. **原子类数量≤5个**：移除自定义类，只使用原子类
+2. **原子类数量>5个**：将所有样式合并到自定义类中
+3. **语义明确的区域**：优先使用自定义类，将原子类样式合并进去
## 组件库样式覆盖
diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue
index c5a182f..0d3b48f 100644
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -47,22 +47,22 @@
-
+
-
+
0.00
我的余额
-
+
0
我的收藏
-
+
0
浏览历史
@@ -71,7 +71,7 @@
-
+
@@ -90,7 +90,7 @@
-
+
常见问题
@@ -98,7 +98,7 @@
-
+
问题反馈
@@ -106,7 +106,7 @@
-
+
关于我们
@@ -116,7 +116,7 @@
-
+
@@ -129,6 +129,7 @@
title="会员中心"
label="解锁更多特权"
is-link
+ custom-class="service-cell"
@click="navigateToSection('services', 'vip')"
>
@@ -142,6 +143,7 @@
title="优惠券"
label="查看我的优惠券"
is-link
+ custom-class="service-cell"
@click="navigateToSection('services', 'coupon')"
>
@@ -155,6 +157,7 @@
title="邀请有礼"
label="邀请好友得奖励"
is-link
+ custom-class="service-cell"
@click="navigateToSection('services', 'invite')"
>
@@ -326,8 +329,14 @@ const navigateToSection = (section: string, subSection?: string) => {
width: 70rpx;
height: 70rpx;
background-color: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(10rpx);
border-radius: 50%;
- // 移除无效果的box-shadow
+ transition: all 0.3s ease;
+
+ &:active {
+ background-color: rgba(255, 255, 255, 0.7);
+ transform: scale(0.9);
+ }
}
// 通知徽章 - 超过5个原子类，使用CSS类
@@ -359,24 +368,56 @@ const navigateToSection = (section: string, subSection?: string) => {
height: 80rpx;
background-color: var(--wot-color-bg-light, #f3f4f6);
border-radius: 16rpx;
-}
-
-// 工具图标
-.tool-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 90rpx;
- height: 90rpx;
- background-color: var(--wot-color-bg-light, #f3f4f6);
- border-radius: 18rpx;
- transition: transform 0.15s ease;
+ transition: all 0.3s ease;
&:active {
+ background-color: var(--wot-color-theme, #165dff);
transform: scale(0.95);
}
}
+// 数据统计项
+.stats-item {
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:active {
+ background-color: var(--wot-color-bg-light, #f8f9fa);
+ transform: scale(0.98);
+ }
+}
+
+// 卡片动画
+:deep(.stats-card) {
+ margin: 20rpx 30rpx;
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
+ transform: translateY(-2rpx);
+ }
+}
+
+:deep(.tools-card),
+:deep(.services-card) {
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
+ transform: translateY(-2rpx);
+ }
+}
+
+// 服务项动画
+:deep(.service-cell) {
+ transition: all 0.2s ease;
+
+ &:active {
+ background-color: var(--wot-color-bg-light, #f8f9fa) !important;
+ transform: scale(0.98);
+ }
+}
+
// 登录按钮样式
:deep(.btn-login) {
font-size: 24rpx !important;
@@ -390,5 +431,11 @@ const navigateToSection = (section: string, subSection?: string) => {
font-size: 32rpx !important;
font-weight: bold !important;
border-radius: 40rpx !important;
+ transition: all 0.3s ease !important;
+
+ &:active {
+ opacity: 0.8 !important;
+ transform: scale(0.98) !important;
+ }
}