fix: 色彩饱和度+10%+微信登录按钮全宽+图标
This commit is contained in:
Yuzhiran Dev
+83
-83
@@ -95,56 +95,56 @@ page, .theme-light {
|
|||||||
--text-disabled: rgba(13, 13, 26, 0.15);
|
--text-disabled: rgba(13, 13, 26, 0.15);
|
||||||
|
|
||||||
/* 品牌色 — Indigo 高饱和 */
|
/* 品牌色 — Indigo 高饱和 */
|
||||||
--color-brand: #6366f1;
|
--color-brand: #5b5ff8;
|
||||||
--color-brand-light: #818cf8;
|
--color-brand-light: #7b87fd;
|
||||||
--color-brand-dark: #4f46e5;
|
--color-brand-dark: #4f46e5;
|
||||||
--color-brand-bg: rgba(99, 102, 241, 0.08);
|
--color-brand-bg: rgba(91, 95, 248, 0.08);
|
||||||
--color-brand-glow: rgba(99, 102, 241, 0.1);
|
--color-brand-glow: rgba(91, 95, 248, 0.1);
|
||||||
|
|
||||||
/* 维度色 — 高饱和度，在浅色底上鲜艳 */
|
/* 维度色 — 高饱和度，在浅色底上鲜艳 */
|
||||||
--dim1-color: #6366f1;
|
--dim1-color: #5b5ff8;
|
||||||
--dim1-bg: rgba(99, 102, 241, 0.2);
|
--dim1-bg: rgba(91, 95, 248, 0.2);
|
||||||
--dim1-icon-bg: rgba(99, 102, 241, 0.25);
|
--dim1-icon-bg: rgba(91, 95, 248, 0.25);
|
||||||
--dim1-border: rgba(99, 102, 241, 0.3);
|
--dim1-border: rgba(91, 95, 248, 0.3);
|
||||||
--dim1-glow: rgba(99, 102, 241, 0.08);
|
--dim1-glow: rgba(91, 95, 248, 0.08);
|
||||||
|
|
||||||
--dim2-color: #0891b2;
|
--dim2-color: #0095ba;
|
||||||
--dim2-bg: rgba(8, 145, 178, 0.2);
|
--dim2-bg: rgba(0, 149, 186, 0.2);
|
||||||
--dim2-icon-bg: rgba(8, 145, 178, 0.25);
|
--dim2-icon-bg: rgba(0, 149, 186, 0.25);
|
||||||
--dim2-border: rgba(8, 145, 178, 0.3);
|
--dim2-border: rgba(0, 149, 186, 0.3);
|
||||||
--dim2-glow: rgba(8, 145, 178, 0.08);
|
--dim2-glow: rgba(0, 149, 186, 0.08);
|
||||||
|
|
||||||
--dim3-color: #059669;
|
--dim3-color: #009b6a;
|
||||||
--dim3-bg: rgba(5, 150, 105, 0.2);
|
--dim3-bg: rgba(0, 155, 106, 0.2);
|
||||||
--dim3-icon-bg: rgba(5, 150, 105, 0.25);
|
--dim3-icon-bg: rgba(0, 155, 106, 0.25);
|
||||||
--dim3-border: rgba(5, 150, 105, 0.3);
|
--dim3-border: rgba(0, 155, 106, 0.3);
|
||||||
--dim3-glow: rgba(5, 150, 105, 0.08);
|
--dim3-glow: rgba(0, 155, 106, 0.08);
|
||||||
|
|
||||||
--dim4-color: #d97706;
|
--dim4-color: #df7700;
|
||||||
--dim4-bg: rgba(217, 119, 6, 0.2);
|
--dim4-bg: rgba(223, 119, 0, 0.2);
|
||||||
--dim4-icon-bg: rgba(217, 119, 6, 0.25);
|
--dim4-icon-bg: rgba(223, 119, 0, 0.25);
|
||||||
--dim4-border: rgba(217, 119, 6, 0.3);
|
--dim4-border: rgba(223, 119, 0, 0.3);
|
||||||
--dim4-glow: rgba(217, 119, 6, 0.08);
|
--dim4-glow: rgba(223, 119, 0, 0.08);
|
||||||
|
|
||||||
--dim5-color: #dc2626;
|
--dim5-color: #e51c1c;
|
||||||
--dim5-bg: rgba(220, 38, 38, 0.2);
|
--dim5-bg: rgba(229, 28, 28, 0.2);
|
||||||
--dim5-icon-bg: rgba(220, 38, 38, 0.25);
|
--dim5-icon-bg: rgba(229, 28, 28, 0.25);
|
||||||
--dim5-border: rgba(220, 38, 38, 0.3);
|
--dim5-border: rgba(229, 28, 28, 0.3);
|
||||||
--dim5-glow: rgba(220, 38, 38, 0.08);
|
--dim5-glow: rgba(229, 28, 28, 0.08);
|
||||||
|
|
||||||
/* 功能色 */
|
/* 功能色 */
|
||||||
--color-free: #059669;
|
--color-free: #009b6a;
|
||||||
--color-free-bg: rgba(5, 150, 105, 0.1);
|
--color-free-bg: rgba(0, 155, 106, 0.1);
|
||||||
--color-pro: #d97706;
|
--color-pro: #df7700;
|
||||||
--color-pro-bg: rgba(217, 119, 6, 0.1);
|
--color-pro-bg: rgba(223, 119, 0, 0.1);
|
||||||
--color-vip: #dc2626;
|
--color-vip: #e51c1c;
|
||||||
--color-vip-bg: rgba(220, 38, 38, 0.1);
|
--color-vip-bg: rgba(229, 28, 28, 0.1);
|
||||||
--color-hot: #dc2626;
|
--color-hot: #e51c1c;
|
||||||
--color-hot-bg: rgba(220, 38, 38, 0.12);
|
--color-hot-bg: rgba(229, 28, 28, 0.12);
|
||||||
--color-new: #0891b2;
|
--color-new: #0095ba;
|
||||||
--color-new-bg: rgba(8, 145, 178, 0.12);
|
--color-new-bg: rgba(0, 149, 186, 0.12);
|
||||||
--color-pick: #6366f1;
|
--color-pick: #5b5ff8;
|
||||||
--color-pick-bg: rgba(99, 102, 241, 0.12);
|
--color-pick-bg: rgba(91, 95, 248, 0.12);
|
||||||
|
|
||||||
/* 圆角/间距/过渡 */
|
/* 圆角/间距/过渡 */
|
||||||
--radius-sm: 8px;
|
--radius-sm: 8px;
|
||||||
@@ -189,54 +189,54 @@ page, .theme-light {
|
|||||||
--text-muted: rgba(255, 255, 255, 0.3);
|
--text-muted: rgba(255, 255, 255, 0.3);
|
||||||
--text-disabled: rgba(255, 255, 255, 0.15);
|
--text-disabled: rgba(255, 255, 255, 0.15);
|
||||||
|
|
||||||
--color-brand: #818cf8;
|
--color-brand: #7b87fd;
|
||||||
--color-brand-light: #a5b4fc;
|
--color-brand-light: #a2b2ff;
|
||||||
--color-brand-dark: #6366f1;
|
--color-brand-dark: #5b5ff8;
|
||||||
--color-brand-bg: rgba(99, 102, 241, 0.12);
|
--color-brand-bg: rgba(91, 95, 248, 0.12);
|
||||||
--color-brand-glow: rgba(99, 102, 241, 0.15);
|
--color-brand-glow: rgba(91, 95, 248, 0.15);
|
||||||
|
|
||||||
--dim1-color: #a78bfa;
|
--dim1-color: #a485ff;
|
||||||
--dim1-bg: rgba(99, 102, 241, 0.12);
|
--dim1-bg: rgba(164, 133, 255, 0.12);
|
||||||
--dim1-icon-bg: rgba(99, 102, 241, 0.2);
|
--dim1-icon-bg: rgba(164, 133, 255, 0.2);
|
||||||
--dim1-border: rgba(99, 102, 241, 0.18);
|
--dim1-border: rgba(164, 133, 255, 0.18);
|
||||||
--dim1-glow: rgba(99, 102, 241, 0.08);
|
--dim1-glow: rgba(164, 133, 255, 0.08);
|
||||||
|
|
||||||
--dim2-color: #60a5fa;
|
--dim2-color: #5ba4ff;
|
||||||
--dim2-bg: rgba(96, 165, 250, 0.12);
|
--dim2-bg: rgba(91, 164, 255, 0.12);
|
||||||
--dim2-icon-bg: rgba(96, 165, 250, 0.2);
|
--dim2-icon-bg: rgba(91, 164, 255, 0.2);
|
||||||
--dim2-border: rgba(96, 165, 250, 0.18);
|
--dim2-border: rgba(91, 164, 255, 0.18);
|
||||||
--dim2-glow: rgba(96, 165, 250, 0.08);
|
--dim2-glow: rgba(91, 164, 255, 0.08);
|
||||||
|
|
||||||
--dim3-color: #34d399;
|
--dim3-color: #2cda9b;
|
||||||
--dim3-bg: rgba(52, 211, 153, 0.12);
|
--dim3-bg: rgba(44, 218, 155, 0.12);
|
||||||
--dim3-icon-bg: rgba(52, 211, 153, 0.2);
|
--dim3-icon-bg: rgba(44, 218, 155, 0.2);
|
||||||
--dim3-border: rgba(52, 211, 153, 0.18);
|
--dim3-border: rgba(44, 218, 155, 0.18);
|
||||||
--dim3-glow: rgba(52, 211, 153, 0.08);
|
--dim3-glow: rgba(44, 218, 155, 0.08);
|
||||||
|
|
||||||
--dim4-color: #fbbf24;
|
--dim4-color: #ffc020;
|
||||||
--dim4-bg: rgba(251, 191, 36, 0.12);
|
--dim4-bg: rgba(255, 192, 32, 0.12);
|
||||||
--dim4-icon-bg: rgba(251, 191, 36, 0.2);
|
--dim4-icon-bg: rgba(255, 192, 32, 0.2);
|
||||||
--dim4-border: rgba(251, 191, 36, 0.18);
|
--dim4-border: rgba(255, 192, 32, 0.18);
|
||||||
--dim4-glow: rgba(251, 191, 36, 0.08);
|
--dim4-glow: rgba(255, 192, 32, 0.08);
|
||||||
|
|
||||||
--dim5-color: #fb7185;
|
--dim5-color: #ff6c82;
|
||||||
--dim5-bg: rgba(251, 113, 133, 0.12);
|
--dim5-bg: rgba(255, 108, 130, 0.12);
|
||||||
--dim5-icon-bg: rgba(251, 113, 133, 0.2);
|
--dim5-icon-bg: rgba(255, 108, 130, 0.2);
|
||||||
--dim5-border: rgba(251, 113, 133, 0.18);
|
--dim5-border: rgba(255, 108, 130, 0.18);
|
||||||
--dim5-glow: rgba(251, 113, 133, 0.08);
|
--dim5-glow: rgba(255, 108, 130, 0.08);
|
||||||
|
|
||||||
--color-free: #34d399;
|
--color-free: #2cda9b;
|
||||||
--color-free-bg: rgba(52, 211, 153, 0.12);
|
--color-free-bg: rgba(44, 218, 155, 0.12);
|
||||||
--color-pro: #fbbf24;
|
--color-pro: #ffc020;
|
||||||
--color-pro-bg: rgba(251, 191, 36, 0.12);
|
--color-pro-bg: rgba(255, 192, 32, 0.12);
|
||||||
--color-vip: #fb7185;
|
--color-vip: #ff6c82;
|
||||||
--color-vip-bg: rgba(251, 113, 133, 0.12);
|
--color-vip-bg: rgba(255, 108, 130, 0.12);
|
||||||
--color-hot: #fb7185;
|
--color-hot: #ff6c82;
|
||||||
--color-hot-bg: rgba(251, 113, 133, 0.15);
|
--color-hot-bg: rgba(255, 108, 130, 0.15);
|
||||||
--color-new: #60a5fa;
|
--color-new: #5ba4ff;
|
||||||
--color-new-bg: rgba(96, 165, 250, 0.15);
|
--color-new-bg: rgba(91, 164, 255, 0.15);
|
||||||
--color-pick: #a78bfa;
|
--color-pick: #a485ff;
|
||||||
--color-pick-bg: rgba(99, 102, 241, 0.15);
|
--color-pick-bg: rgba(164, 133, 255, 0.15);
|
||||||
|
|
||||||
--glow-brand: 0 0 20px rgba(99, 102, 241, 0.1);
|
--glow-brand: 0 0 20px rgba(99, 102, 241, 0.1);
|
||||||
--glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.15);
|
--glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.15);
|
||||||
|
|||||||
@@ -36,6 +36,7 @@
|
|||||||
<!-- 微信小程序一键登录入口 -->
|
<!-- 微信小程序一键登录入口 -->
|
||||||
<view class="wx-login-row" v-if="isMiniApp">
|
<view class="wx-login-row" v-if="isMiniApp">
|
||||||
<view class="wx-login-btn" @click="wechatLogin">
|
<view class="wx-login-btn" @click="wechatLogin">
|
||||||
|
<text class="wx-icon">💬</text>
|
||||||
<text>微信一键登录</text>
|
<text>微信一键登录</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -363,7 +364,8 @@ const handleRegister = async () => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.wx-login-btn {
|
.wx-login-btn {
|
||||||
padding: 10px 28px;
|
width: 100%;
|
||||||
|
height: 46px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -371,14 +373,19 @@ const handleRegister = async () => {
|
|||||||
background: linear-gradient(135deg, #07c160, #06ad56);
|
background: linear-gradient(135deg, #07c160, #06ad56);
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 14px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.3);
|
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.3);
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wx-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user