From 0c2bfd1bbc7183215e02a654f9aa273d9b3fa9bb Mon Sep 17 00:00:00 2001
From: H1d3rOne <H1d3rOne@users.noreply.github.com>
Date: Fri, 6 Mar 2026 05:01:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5UI=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除顶部玄字图案，使用星空装饰元素
- 新增闪烁星星动画效果
- 使用风格化icon替代文字图标：
  - 四柱八字：☰（八卦符号）
  - 紫微斗数：★（星星）
  - 占星术：✧（星芒）
  - 塔罗牌：◈（菱形）
  - 六爻排盘：☱（八卦符号）
  - 大六壬：☯（阴阳）
  - 奇门遁甲：☳（八卦符号）
  - 梅花易数：❀（花朵）
- 新增标题装饰线和阴阳符号
- 优化整体视觉效果，更符合命理测算主题
- 增强卡片阴影和过渡动画效果
---
 xuan-deduct-uniapp/src/pages/index/index.vue | 139 ++++++++++++++-----
 1 file changed, 104 insertions(+), 35 deletions(-)

diff --git a/xuan-deduct-uniapp/src/pages/index/index.vue b/xuan-deduct-uniapp/src/pages/index/index.vue
index d7f6f50..f1c2c7f 100644
--- a/xuan-deduct-uniapp/src/pages/index/index.vue
+++ b/xuan-deduct-uniapp/src/pages/index/index.vue
@@ -1,20 +1,30 @@
 <template>
   <view class="container">
     <view class="header">
-      <view class="logo-wrapper">
-        <view class="logo">
-          <text class="logo-text">玄</text>
+      <view class="header-bg"></view>
+      <view class="header-content">
+        <view class="header-top">
+          <view class="stars">
+            <text class="star">✦</text>
+            <text class="star star-2">✧</text>
+            <text class="star star-3">✦</text>
+          </view>
+        </view>
+        <text class="title">命理测算</text>
+        <text class="subtitle">传承千年智慧 · 解读命运密码</text>
+        <view class="header-decoration">
+          <view class="decoration-line"></view>
+          <text class="decoration-symbol">☯</text>
+          <view class="decoration-line"></view>
         </view>
       </view>
-      <text class="title">命理测算</text>
-      <text class="subtitle">传承千年智慧 · 解读命运密码</text>
     </view>
     
     <view class="menu-grid">
       <view class="menu-item" @click="goToBazi">
         <view class="menu-icon-wrapper">
           <view class="menu-icon" style="background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);">
-            <text class="icon-text">八</text>
+            <text class="icon-text">☰</text>
           </view>
           <view class="icon-glow" style="background: rgba(220, 38, 38, 0.3);"></view>
         </view>
@@ -30,7 +40,7 @@
       <view class="menu-item" @click="goToZiwei">
         <view class="menu-icon-wrapper">
           <view class="menu-icon" style="background: linear-gradient(135deg, #DB2777 0%, #BE185D 100%);">
-            <text class="icon-text">紫</text>
+            <text class="icon-text">★</text>
           </view>
           <view class="icon-glow" style="background: rgba(219, 39, 119, 0.3);"></view>
         </view>
@@ -46,7 +56,7 @@
       <view class="menu-item" @click="goToZhanxing">
         <view class="menu-icon-wrapper">
           <view class="menu-icon" style="background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);">
-            <text class="icon-text">星</text>
+            <text class="icon-text">✧</text>
           </view>
           <view class="icon-glow" style="background: rgba(147, 51, 234, 0.3);"></view>
         </view>
@@ -62,7 +72,7 @@
       <view class="menu-item" @click="goToTaluo">
         <view class="menu-icon-wrapper">
           <view class="menu-icon" style="background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);">
-            <text class="icon-text">塔</text>
+            <text class="icon-text">◈</text>
           </view>
           <view class="icon-glow" style="background: rgba(139, 92, 246, 0.3);"></view>
         </view>
@@ -78,7 +88,7 @@
       <view class="menu-item" @click="goToLiuyao">
         <view class="menu-icon-wrapper">
           <view class="menu-icon" style="background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);">
-            <text class="icon-text">六</text>
+            <text class="icon-text">☱</text>
           </view>
           <view class="icon-glow" style="background: rgba(37, 99, 235, 0.3);"></view>
         </view>
@@ -94,7 +104,7 @@
       <view class="menu-item" @click="goToDaliuren">
         <view class="menu-icon-wrapper">
           <view class="menu-icon" style="background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);">
-            <text class="icon-text">壬</text>
+            <text class="icon-text">☯</text>
           </view>
           <view class="icon-glow" style="background: rgba(124, 58, 237, 0.3);"></view>
         </view>
@@ -110,7 +120,7 @@
       <view class="menu-item" @click="goToQimen">
         <view class="menu-icon-wrapper">
           <view class="menu-icon" style="background: linear-gradient(135deg, #D97706 0%, #B45309 100%);">
-            <text class="icon-text">奇</text>
+            <text class="icon-text">☳</text>
           </view>
           <view class="icon-glow" style="background: rgba(217, 119, 6, 0.3);"></view>
         </view>
@@ -126,7 +136,7 @@
       <view class="menu-item" @click="goToMeihua">
         <view class="menu-icon-wrapper">
           <view class="menu-icon" style="background: linear-gradient(135deg, #059669 0%, #047857 100%);">
-            <text class="icon-text">梅</text>
+            <text class="icon-text">❀</text>
           </view>
           <view class="icon-glow" style="background: rgba(5, 150, 105, 0.3);"></view>
         </view>
@@ -194,40 +204,75 @@ page {
 }
 
 .header {
+  position: relative;
   text-align: center;
-  padding: 80rpx 0 60rpx;
+  padding: 60rpx 0 50rpx;
+  margin-bottom: 20rpx;
 }
 
-.logo-wrapper {
+.header-bg {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300rpx;
+  height: 300rpx;
+  background: radial-gradient(circle, rgba(219, 39, 119, 0.15) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.header-content {
+  position: relative;
+  z-index: 1;
+}
+
+.header-top {
+  margin-bottom: 20rpx;
+}
+
+.stars {
   display: flex;
   justify-content: center;
-  margin-bottom: 32rpx;
-}
-
-.logo {
-  width: 120rpx;
-  height: 120rpx;
-  background: linear-gradient(135deg, #DB2777 0%, #BE185D 100%);
-  border-radius: 32rpx;
-  display: flex;
   align-items: center;
-  justify-content: center;
-  box-shadow: 0 16rpx 48rpx rgba(219, 39, 119, 0.3);
+  gap: 20rpx;
 }
 
-.logo-text {
-  font-size: 56rpx;
-  color: #ffffff;
-  font-weight: 700;
+.star {
+  font-size: 32rpx;
+  color: #DB2777;
+  opacity: 0.6;
+  animation: twinkle 2s ease-in-out infinite;
+}
+
+.star-2 {
+  font-size: 40rpx;
+  opacity: 0.8;
+  animation-delay: 0.5s;
+}
+
+.star-3 {
+  animation-delay: 1s;
+}
+
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
 }
 
 .title {
-  font-size: 56rpx;
+  font-size: 64rpx;
   font-weight: 700;
   color: #831843;
   display: block;
   margin-bottom: 16rpx;
-  letter-spacing: 8rpx;
+  letter-spacing: 12rpx;
+  text-shadow: 0 4rpx 12rpx rgba(131, 24, 67, 0.1);
 }
 
 .subtitle {
@@ -235,6 +280,28 @@ page {
   color: #9D174D;
   opacity: 0.8;
   letter-spacing: 4rpx;
+  display: block;
+  margin-bottom: 30rpx;
+}
+
+.header-decoration {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20rpx;
+  margin-top: 20rpx;
+}
+
+.decoration-line {
+  width: 80rpx;
+  height: 2rpx;
+  background: linear-gradient(90deg, transparent, #DB2777, transparent);
+}
+
+.decoration-symbol {
+  font-size: 32rpx;
+  color: #DB2777;
+  opacity: 0.6;
 }
 
 .menu-grid {
@@ -246,12 +313,13 @@ page {
 .menu-item {
   display: flex;
   align-items: center;
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.95);
   border-radius: 24rpx;
   padding: 28rpx 32rpx;
   box-shadow: 0 8rpx 32rpx rgba(131, 24, 67, 0.08);
   backdrop-filter: blur(20rpx);
   border: 2rpx solid rgba(255, 255, 255, 0.8);
+  transition: all 0.3s ease;
 }
 
 .menu-item:active {
@@ -273,6 +341,7 @@ page {
   justify-content: center;
   position: relative;
   z-index: 2;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
 }
 
 .icon-glow {
@@ -287,9 +356,9 @@ page {
 }
 
 .icon-text {
-  font-size: 44rpx;
+  font-size: 48rpx;
   color: #ffffff;
-  font-weight: 700;
+  font-weight: 400;
 }
 
 .menu-content {