refactor: 优化首页UI设计
- 移除顶部玄字图案，使用星空装饰元素 - 新增闪烁星星动画效果 - 使用风格化icon替代文字图标： - 四柱八字：☰（八卦符号） - 紫微斗数：★（星星） - 占星术：✧（星芒） - 塔罗牌：◈（菱形） - 六爻排盘：☱（八卦符号） - 大六壬：☯（阴阳） - 奇门遁甲：☳（八卦符号） - 梅花易数：❀（花朵） - 新增标题装饰线和阴阳符号 - 优化整体视觉效果，更符合命理测算主题 - 增强卡片阴影和过渡动画效果
This commit is contained in:
H1d3rOne committed
1 parent
3a8ee8f702
commit
0c2bfd1bbc
1 file changed
+104
-35
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user