style: 优化记录、工具、我的三个页面使用不同色系
- 记录页面：蓝色系（#3B82F6）- 代表记录、历史 - 工具页面：橙色系（#F97316）- 代表工具、实用 - 我的页面：绿色系（#10B981）- 代表个人、生机 - 同一页面内各元素色系保持一致
This commit is contained in:
H1d3rOne committed
1 parent
fa1413d22d
commit
0d9779d2b9
4 files changed
+74
-151
No files matched your search
@@ -13,27 +13,24 @@
|
||||
"path": "pages/records/records",
|
||||
"style": {
|
||||
"navigationBarTitleText": "测算记录",
|
||||
"navigationBarBackgroundColor": "#DB2777",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationStyle": "custom"
|
||||
"navigationBarBackgroundColor": "#3B82F6",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tools/tools",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工具",
|
||||
"navigationBarBackgroundColor": "#DB2777",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationStyle": "custom"
|
||||
"navigationBarBackgroundColor": "#F97316",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationBarBackgroundColor": "#DB2777",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationStyle": "custom"
|
||||
"navigationBarBackgroundColor": "#10B981",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -58,7 +58,7 @@ export default {
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 50%, #DDD6FE 100%);
|
||||
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -69,12 +69,12 @@ page {
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
|
||||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||||
border-radius: 32rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(139, 92, 246, 0.25);
|
||||
box-shadow: 0 16rpx 48rpx rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -117,13 +117,14 @@ page {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(139, 92, 246, 0.08);
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
|
||||
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -139,7 +140,7 @@ page {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #1F2937;
|
||||
color: #065F46;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
@@ -152,7 +153,7 @@ page {
|
||||
|
||||
.arrow-text {
|
||||
font-size: 36rpx;
|
||||
color: #D1D5DB;
|
||||
color: #6EE7B7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@@ -163,6 +164,6 @@ page {
|
||||
|
||||
.version-text {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
color: #10B981;
|
||||
}
|
||||
</style>
|
||||
@@ -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="empty-state" v-if="records.length === 0">
|
||||
@@ -105,16 +93,16 @@ export default {
|
||||
},
|
||||
getTypeColor(type) {
|
||||
const colors = {
|
||||
bazi: '#DC2626',
|
||||
ziwei: '#8B5CF6',
|
||||
liuyao: '#059669',
|
||||
meihua: '#EC4899',
|
||||
qimen: '#7C3AED',
|
||||
daliuren: '#0891B2',
|
||||
taluo: '#F59E0B',
|
||||
zhanxing: '#3B82F6'
|
||||
bazi: '#3B82F6',
|
||||
ziwei: '#6366F1',
|
||||
liuyao: '#0EA5E9',
|
||||
meihua: '#06B6D4',
|
||||
qimen: '#0284C7',
|
||||
daliuren: '#2563EB',
|
||||
taluo: '#1D4ED8',
|
||||
zhanxing: '#1E40AF'
|
||||
}
|
||||
return colors[type] || '#6B7280'
|
||||
return colors[type] || '#3B82F6'
|
||||
},
|
||||
getTypeName(type) {
|
||||
const names = {
|
||||
@@ -201,114 +189,51 @@ export default {
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 50%, #FBCFE8 100%);
|
||||
background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 50%, #BFDBFE 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, #3B82F6 0%, #1D4ED8 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(59, 130, 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);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -324,14 +249,14 @@ page {
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #6B7280;
|
||||
color: #3B82F6;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 26rpx;
|
||||
color: #9CA3AF;
|
||||
color: #60A5FA;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
@@ -346,9 +271,8 @@ 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(59, 130, 246, 0.1);
|
||||
border: 2rpx solid rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.record-icon {
|
||||
@@ -374,14 +298,14 @@ page {
|
||||
.record-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
color: #1E40AF;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
color: #3B82F6;
|
||||
}
|
||||
|
||||
.record-actions {
|
||||
@@ -409,7 +333,7 @@ page {
|
||||
|
||||
.arrow-text {
|
||||
font-size: 36rpx;
|
||||
color: #D1D5DB;
|
||||
color: #93C5FD;
|
||||
font-weight: 300;
|
||||
}
|
||||
</style>
|
||||
@@ -37,12 +37,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
tools: [
|
||||
{ name: '农历查询', desc: '公历农历互转', icon: '📅', color: 'linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%)', path: '/pages/tool-lunar/tool-lunar' },
|
||||
{ name: '干支查询', desc: '年月日时干支', icon: '🕐', color: 'linear-gradient(135deg, #10B981 0%, #059669 100%)', path: '/pages/tool-ganzhi/tool-ganzhi' },
|
||||
{ name: '生肖查询', desc: '十二生肖属性', icon: '🐉', color: 'linear-gradient(135deg, #F59E0B 0%, #D97706 100%)', path: '/pages/tool-shengxiao/tool-shengxiao' },
|
||||
{ name: '星座查询', desc: '十二星座运势', icon: '⭐', color: 'linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%)', path: '/pages/tool-xingzuo/tool-xingzuo' },
|
||||
{ name: '五行查询', desc: '五行属性分析', icon: '🔥', color: 'linear-gradient(135deg, #EF4444 0%, #DC2626 100%)', path: '/pages/tool-wuxing/tool-wuxing' },
|
||||
{ name: '吉日查询', desc: '黄道吉日查询', icon: '📆', color: 'linear-gradient(135deg, #EC4899 0%, #DB2777 100%)', path: '/pages/tool-jiri/tool-jiri' }
|
||||
{ name: '农历查询', desc: '公历农历互转', icon: '📅', color: 'linear-gradient(135deg, #F97316 0%, #EA580C 100%)', path: '/pages/tool-lunar/tool-lunar' },
|
||||
{ name: '干支查询', desc: '年月日时干支', icon: '🕐', color: 'linear-gradient(135deg, #FB923C 0%, #F97316 100%)', path: '/pages/tool-ganzhi/tool-ganzhi' },
|
||||
{ name: '生肖查询', desc: '十二生肖属性', icon: '🐉', color: 'linear-gradient(135deg, #FDBA74 0%, #FB923C 100%)', path: '/pages/tool-shengxiao/tool-shengxiao' },
|
||||
{ name: '星座查询', desc: '十二星座运势', icon: '⭐', color: 'linear-gradient(135deg, #F59E0B 0%, #D97706 100%)', path: '/pages/tool-xingzuo/tool-xingzuo' },
|
||||
{ name: '五行查询', desc: '五行属性分析', icon: '🔥', color: 'linear-gradient(135deg, #EA580C 0%, #C2410C 100%)', path: '/pages/tool-wuxing/tool-wuxing' },
|
||||
{ name: '吉日查询', desc: '黄道吉日查询', icon: '📆', color: 'linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%)', path: '/pages/tool-jiri/tool-jiri' }
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -58,7 +58,7 @@ export default {
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 50%, #DDD6FE 100%);
|
||||
background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -69,12 +69,12 @@ page {
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
|
||||
background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
||||
border-radius: 32rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(139, 92, 246, 0.25);
|
||||
box-shadow: 0 16rpx 48rpx rgba(249, 115, 22, 0.25);
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
@@ -117,7 +117,8 @@ page {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(139, 92, 246, 0.08);
|
||||
box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.1);
|
||||
border: 2rpx solid rgba(249, 115, 22, 0.1);
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
@@ -141,14 +142,14 @@ page {
|
||||
.tool-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
color: #C2410C;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
color: #F97316;
|
||||
}
|
||||
|
||||
.tool-arrow {
|
||||
@@ -161,7 +162,7 @@ page {
|
||||
|
||||
.arrow-text {
|
||||
font-size: 36rpx;
|
||||
color: #D1D5DB;
|
||||
color: #FDBA74;
|
||||
font-weight: 300;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user