1111
This commit is contained in:
fuenmao
+88
-107
@@ -193,7 +193,7 @@ onUnmounted(() => { active = false })
|
||||
type="primary"
|
||||
size="small"
|
||||
round
|
||||
color="#0c5045"
|
||||
color="#0284c7"
|
||||
@click="router.replace('/assessment')"
|
||||
>
|
||||
立即进行健康评估
|
||||
@@ -214,7 +214,7 @@ onUnmounted(() => { active = false })
|
||||
<p class="plan-summary-text">香型建议：{{ dashboard.tcmResult.aromaRecommendation }}；音乐建议：{{ dashboard.tcmResult.musicRecommendation }}</p>
|
||||
</template>
|
||||
<p v-else class="plan-summary-text">完成四诊后，才能一键启动体质相关的设备预设。</p>
|
||||
<VanButton type="primary" size="small" round color="#0c5045" @click="router.push('/tcm-assessment')">
|
||||
<VanButton type="primary" size="small" round color="#0284c7" @click="router.push('/tcm-assessment')">
|
||||
{{ dashboard?.tcmResult?.hasCompleted ? '重新评估体质' : '去完成四诊' }}
|
||||
</VanButton>
|
||||
</section>
|
||||
@@ -300,17 +300,20 @@ onUnmounted(() => { active = false })
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
padding-bottom: 90px;
|
||||
background: #f2f0e9;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 20px var(--page-gutter, 16px) calc(88px + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(180deg, #bfe3fc 0%, #e0f2fe 22%, #f0f9ff 48%, #f8fafc 100%);
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
background: linear-gradient(135deg, #0c5045, #123d36);
|
||||
color: #fff;
|
||||
padding: 34px 20px 28px;
|
||||
border-radius: 0 0 32px 32px;
|
||||
box-shadow: 0 10px 30px rgba(12, 80, 69, 0.12);
|
||||
background: transparent;
|
||||
color: #0f172a;
|
||||
padding: 4px 4px 20px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.user-row {
|
||||
@@ -320,52 +323,54 @@ onUnmounted(() => { active = false })
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #d6a657, #b88636);
|
||||
color: #fff;
|
||||
background: #f0f9ff;
|
||||
color: #0284c7;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 26px;
|
||||
font-family: serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 2px 10px rgba(2, 132, 199, 0.12);
|
||||
border: 2px solid #bae6fd;
|
||||
}
|
||||
|
||||
.user-info h2 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.phone-text {
|
||||
margin: 0 0 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.user-badge {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #ffe6ba;
|
||||
background: #f0f9ff;
|
||||
color: #0284c7;
|
||||
border: 1px solid #bae6fd;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
padding: 16px 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
border-radius: 16px;
|
||||
padding: 20px 16px;
|
||||
margin-bottom: 14px;
|
||||
box-shadow: 0 4px 18px rgba(18, 63, 55, 0.04);
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #eef2f6;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
@@ -378,14 +383,14 @@ onUnmounted(() => { active = false })
|
||||
.card-head h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #123f37;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #0c5045;
|
||||
color: #0284c7;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -394,13 +399,14 @@ onUnmounted(() => { active = false })
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background: #f0f0ed;
|
||||
color: #88948e;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.status-indicator.done {
|
||||
background: #eef6f3;
|
||||
color: #0c5045;
|
||||
background: #f0f9ff;
|
||||
color: #0284c7;
|
||||
border: 1px solid #bae6fd;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -411,7 +417,8 @@ onUnmounted(() => { active = false })
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
background: #f8f7f3;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 10px 6px;
|
||||
text-align: center;
|
||||
@@ -422,30 +429,31 @@ onUnmounted(() => { active = false })
|
||||
|
||||
.m-label {
|
||||
font-size: 11px;
|
||||
color: #798a83;
|
||||
color: #64748b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.m-val {
|
||||
font-size: 15px;
|
||||
color: #173d36;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.m-val small {
|
||||
font-size: 10px;
|
||||
color: #8fa099;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.m-val.highlight {
|
||||
color: #0c5045;
|
||||
color: #0284c7;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.m-status-tag {
|
||||
font-size: 10px;
|
||||
color: #0c5045;
|
||||
background: rgba(12, 80, 69, 0.1);
|
||||
color: #0284c7;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
margin-top: 4px;
|
||||
@@ -466,40 +474,28 @@ onUnmounted(() => { active = false })
|
||||
}
|
||||
|
||||
.profile-tag-item.theme-gold {
|
||||
background: #fcf9f2;
|
||||
border-color: rgba(214, 166, 87, 0.3);
|
||||
}
|
||||
|
||||
.profile-tag-item.theme-gold .tag-title {
|
||||
color: #9c6c19;
|
||||
background: #fffbeb;
|
||||
border-color: #fde68a;
|
||||
}
|
||||
.profile-tag-item.theme-gold .tag-title { color: #d97706; }
|
||||
|
||||
.profile-tag-item.theme-blue {
|
||||
background: #f3f8fd;
|
||||
border-color: rgba(66, 153, 225, 0.3);
|
||||
}
|
||||
|
||||
.profile-tag-item.theme-blue .tag-title {
|
||||
color: #2b6cb0;
|
||||
background: #f0f9ff;
|
||||
border-color: #bae6fd;
|
||||
}
|
||||
.profile-tag-item.theme-blue .tag-title { color: #0284c7; }
|
||||
|
||||
.profile-tag-item.theme-green {
|
||||
background: #f1f8f5;
|
||||
border-color: rgba(12, 80, 69, 0.2);
|
||||
}
|
||||
|
||||
.profile-tag-item.theme-green .tag-title {
|
||||
color: #0c5045;
|
||||
background: #ecfdf5;
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
.profile-tag-item.theme-green .tag-title { color: #10b981; }
|
||||
|
||||
.profile-tag-item.theme-purple {
|
||||
background: #f8f4fd;
|
||||
border-color: rgba(159, 122, 234, 0.3);
|
||||
}
|
||||
|
||||
.profile-tag-item.theme-purple .tag-title {
|
||||
color: #6b46c1;
|
||||
background: #faf5ff;
|
||||
border-color: #e9d5ff;
|
||||
}
|
||||
.profile-tag-item.theme-purple .tag-title { color: #9333ea; }
|
||||
|
||||
.tag-title {
|
||||
font-size: 13px;
|
||||
@@ -509,7 +505,7 @@ onUnmounted(() => { active = false })
|
||||
|
||||
.tag-desc {
|
||||
font-size: 11px;
|
||||
color: #60736c;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -520,15 +516,15 @@ onUnmounted(() => { active = false })
|
||||
.empty-state p {
|
||||
margin: 0 0 12px;
|
||||
font-size: 12px;
|
||||
color: #84968f;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 方案卡片 */
|
||||
.version-tag {
|
||||
font-size: 11px;
|
||||
color: #0c5045;
|
||||
background: #eef6f3;
|
||||
color: #0284c7;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
@@ -537,7 +533,7 @@ onUnmounted(() => { active = false })
|
||||
.plan-summary-text {
|
||||
margin: 0 0 14px;
|
||||
font-size: 12px;
|
||||
color: #556c64;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -548,7 +544,8 @@ onUnmounted(() => { active = false })
|
||||
}
|
||||
|
||||
.plan-row {
|
||||
background: #f9f8f4;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
@@ -564,28 +561,28 @@ onUnmounted(() => { active = false })
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #0c5045;
|
||||
background: #0284c7;
|
||||
}
|
||||
|
||||
.plan-row-head strong {
|
||||
font-size: 13px;
|
||||
color: #173e37;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.plan-target, .plan-advice {
|
||||
margin: 2px 0;
|
||||
font-size: 12px;
|
||||
color: #697c75;
|
||||
color: #64748b;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 菜单导航 */
|
||||
.action-card-menu {
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
border: 1px solid #eef2f6;
|
||||
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@@ -593,24 +590,15 @@ onUnmounted(() => { active = false })
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid rgba(18, 63, 55, 0.05);
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-item:active { background: #f8fafc; }
|
||||
|
||||
.menu-item:active {
|
||||
background: #f8f7f3;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.menu-left { display: flex; align-items: center; gap: 12px; }
|
||||
|
||||
.menu-icon {
|
||||
width: 36px;
|
||||
@@ -621,51 +609,44 @@ onUnmounted(() => { active = false })
|
||||
}
|
||||
|
||||
.icon-assess {
|
||||
background: #eef7f3;
|
||||
color: #0c5045;
|
||||
background: #f0f9ff;
|
||||
color: #0284c7;
|
||||
}
|
||||
|
||||
.icon-device {
|
||||
background: #fbf5e8;
|
||||
color: #b07e26;
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.menu-text strong {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #183e37;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.menu-text small {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #7b8e88;
|
||||
color: #64748b;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: #b3bfb9;
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.logout-wrap {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.logout-wrap { margin-top: 24px; }
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
padding: 13px 0;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(220, 70, 70, 0.25);
|
||||
background: #ffffff;
|
||||
color: #d64545;
|
||||
border: 1px solid #fecaca;
|
||||
background: #fff5f5;
|
||||
color: #ef4444;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
background: #fff5f5;
|
||||
}
|
||||
.logout-btn:active { background: #fee2e2; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user