style: 统一记录、工具、我的三个页面的色系风格
- 将工具页面和我的页面的header从粉色(#DB2777)改为紫色(#8B5CF6) - 统一所有页面的阴影颜色为紫色系 - 保持与记录页面一致的视觉风格
This commit is contained in:
H1d3rOne committed
1 parent
c5fa876fb2
commit
fa1413d22d
2 files changed
+45
-246
No files matched your search
@@ -1,26 +1,6 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<view class="user-card">
|
||||
<view class="header-card">
|
||||
<view class="avatar">
|
||||
<text class="avatar-text">👤</text>
|
||||
</view>
|
||||
@@ -78,131 +58,29 @@ export default {
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 50%, #FBCFE8 100%);
|
||||
background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 50%, #DDD6FE 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 0 32rpx 160rpx;
|
||||
padding: 32rpx;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
|
||||
border-radius: 32rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
text-align: center;
|
||||
padding: 60rpx 0 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.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: 64rpx;
|
||||
font-weight: 700;
|
||||
color: #831843;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 12rpx;
|
||||
text-shadow: 0 4rpx 12rpx rgba(131, 24, 67, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(131, 24, 67, 0.08);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(139, 92, 246, 0.25);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(135deg, #DB2777 0%, #BE185D 100%);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -217,14 +95,14 @@ page {
|
||||
.username {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
color: #ffffff;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.user-desc {
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
@@ -239,15 +117,13 @@ page {
|
||||
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);
|
||||
box-shadow: 0 8rpx 32rpx rgba(139, 92, 246, 0.08);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
|
||||
background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,23 +1,11 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<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 class="header-card">
|
||||
<view class="header-icon">
|
||||
<text class="icon-text">🔧</text>
|
||||
</view>
|
||||
<text class="header-title">实用工具</text>
|
||||
<text class="header-subtitle">便捷的命理小工具</text>
|
||||
</view>
|
||||
|
||||
<view class="tool-list">
|
||||
@@ -70,114 +58,51 @@ export default {
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 50%, #FBCFE8 100%);
|
||||
background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 50%, #DDD6FE 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 0 32rpx 160rpx;
|
||||
padding: 32rpx;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
|
||||
border-radius: 32rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
text-align: center;
|
||||
padding: 60rpx 0 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(139, 92, 246, 0.25);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.header-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
}
|
||||
|
||||
.star {
|
||||
font-size: 32rpx;
|
||||
color: #DB2777;
|
||||
opacity: 0.6;
|
||||
animation: twinkle 2s ease-in-out infinite;
|
||||
.icon-text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.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: 64rpx;
|
||||
.header-title {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #831843;
|
||||
color: #ffffff;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 12rpx;
|
||||
text-shadow: 0 4rpx 12rpx rgba(131, 24, 67, 0.1);
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.header-subtitle {
|
||||
font-size: 26rpx;
|
||||
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;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.tool-list {
|
||||
@@ -192,9 +117,7 @@ page {
|
||||
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);
|
||||
box-shadow: 0 8rpx 32rpx rgba(139, 92, 246, 0.08);
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
|
||||
Reference in new issue
Block a user