feat: refresh h5 debug workflow and ui design
This commit is contained in:
nepiedg
+89
-154
@@ -1,29 +1,25 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page-glow page-glow-a"></view>
|
||||
<view class="page-glow page-glow-b"></view>
|
||||
<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
|
||||
|
||||
<view class="page-header">
|
||||
<text class="header-eyebrow">Account</text>
|
||||
<text class="header-title">个人中心</text>
|
||||
<text class="header-subtitle">模式切换、分享与基础设置</text>
|
||||
</view>
|
||||
|
||||
<view class="user-section">
|
||||
<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
|
||||
<view class="user-copy">
|
||||
<text class="user-name">{{ userName }}</text>
|
||||
<text class="user-desc">已连接戒烟记录与统计数据</text>
|
||||
<view class="user-meta">
|
||||
<text class="user-pill">{{ modeText }}</text>
|
||||
<text class="user-pill user-pill-muted">{{ shareToken ? '分享已启用' : '分享未生成' }}</text>
|
||||
<view class="section">
|
||||
<text class="section-label">当前账号</text>
|
||||
<view class="user-section card">
|
||||
<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
|
||||
<view class="user-copy">
|
||||
<text class="user-name">{{ userName }}</text>
|
||||
<text class="user-desc">已连接戒烟记录与统计数据</text>
|
||||
<view class="user-meta">
|
||||
<text class="user-pill">{{ modeText }}</text>
|
||||
<text class="user-pill user-pill-muted">{{ shareToken ? '分享已启用' : '分享未生成' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="mode-card">
|
||||
<text class="section-label">使用模式</text>
|
||||
<view class="mode-card card">
|
||||
<view class="mode-card-header">
|
||||
<view class="menu-icon menu-icon-accent">
|
||||
<text class="menu-glyph">模</text>
|
||||
@@ -48,7 +44,8 @@
|
||||
<text class="mode-hint">当前：{{ modeText }}</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<text class="section-label">常用操作</text>
|
||||
<view class="menu-list card">
|
||||
<view class="menu-item">
|
||||
<view class="menu-icon menu-icon-accent">
|
||||
<text class="menu-glyph">享</text>
|
||||
@@ -83,7 +80,8 @@
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="menu-list">
|
||||
<text class="section-label">更多设置</text>
|
||||
<view class="menu-list card">
|
||||
<view class="menu-item" @tap="clearCache">
|
||||
<view class="menu-icon menu-icon-muted">
|
||||
<text class="menu-glyph">清</text>
|
||||
@@ -111,6 +109,7 @@
|
||||
</view>
|
||||
|
||||
<text class="version">版本 1.0.0</text>
|
||||
<view class="bottom-safe"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -286,98 +285,50 @@ onShow(async () => {
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(52, 200, 160, 0.16), transparent 30%),
|
||||
radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 22%),
|
||||
linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
|
||||
padding: 0 24rpx 168rpx;
|
||||
background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
|
||||
padding: 0 28rpx 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(24rpx);
|
||||
opacity: 0.72;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.page-glow-a {
|
||||
top: 100rpx;
|
||||
left: -140rpx;
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
background: rgba(52, 200, 160, 0.15);
|
||||
}
|
||||
|
||||
.page-glow-b {
|
||||
top: 340rpx;
|
||||
right: -120rpx;
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.nav-placeholder,
|
||||
.page-header,
|
||||
.user-section,
|
||||
.section,
|
||||
.version {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 24rpx 6rpx 18rpx;
|
||||
.section {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.header-eyebrow {
|
||||
.section-label {
|
||||
display: block;
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
color: #98a2b3;
|
||||
margin: 0 0 14rpx 6rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #1a5c45;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 42rpx;
|
||||
line-height: 1.18;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
color: #667085;
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
padding: 12rpx 28rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.66);
|
||||
border-radius: 32rpx;
|
||||
box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
|
||||
backdrop-filter: blur(24rpx);
|
||||
-webkit-backdrop-filter: blur(24rpx);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 132rpx;
|
||||
height: 132rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.82);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border: 4rpx solid rgba(52, 200, 160, 0.16);
|
||||
background-color: rgba(52, 200, 160, 0.06);
|
||||
}
|
||||
|
||||
.user-copy {
|
||||
@@ -388,110 +339,93 @@ onShow(async () => {
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 40rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.user-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.5;
|
||||
color: #667085;
|
||||
color: #52806E;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-top: 18rpx;
|
||||
gap: 14rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.user-pill {
|
||||
padding: 10rpx 20rpx;
|
||||
padding: 14rpx 26rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.64);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.18);
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #17795c;
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.user-pill-muted {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 24rpx;
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.mode-card {
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
border-radius: 32rpx;
|
||||
padding: 30rpx 24rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.66);
|
||||
box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
|
||||
backdrop-filter: blur(24rpx);
|
||||
-webkit-backdrop-filter: blur(24rpx);
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.mode-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 32rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.66);
|
||||
box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
|
||||
backdrop-filter: blur(24rpx);
|
||||
-webkit-backdrop-filter: blur(24rpx);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
gap: 20rpx;
|
||||
padding: 6rpx 0;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
margin: 0 24rpx;
|
||||
margin: 16rpx 0;
|
||||
height: 2rpx;
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 20rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.7);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.18);
|
||||
}
|
||||
|
||||
.menu-icon-accent {
|
||||
background: rgba(52, 200, 160, 0.14);
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
}
|
||||
|
||||
.menu-icon-muted {
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
}
|
||||
|
||||
.menu-glyph {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
@@ -502,15 +436,15 @@ onShow(async () => {
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
font-size: 30rpx;
|
||||
color: #111827;
|
||||
font-size: 28rpx;
|
||||
color: #0D3D2E;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 24rpx;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.5;
|
||||
color: #667085;
|
||||
color: #52806E;
|
||||
}
|
||||
|
||||
.menu-actions {
|
||||
@@ -519,57 +453,54 @@ onShow(async () => {
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #1aa37a;
|
||||
font-size: 22rpx;
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.menu-action {
|
||||
color: #1aa37a;
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.menu-action-sep {
|
||||
color: #98a2b3;
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #98a2b3;
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.menu-value {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #1aa37a;
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
padding: 8rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(247, 249, 252, 0.92);
|
||||
border: 2rpx solid rgba(15, 23, 42, 0.05);
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.mode-switch-item {
|
||||
flex: 1;
|
||||
padding: 22rpx 18rpx;
|
||||
padding: 22rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: transparent;
|
||||
border: 2rpx solid transparent;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 2rpx solid rgba(52, 200, 160, 0.1);
|
||||
box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
|
||||
}
|
||||
|
||||
.mode-switch-item-active {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-color: rgba(255, 255, 255, 0.76);
|
||||
box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.06);
|
||||
background: rgba(52, 200, 160, 0.09);
|
||||
border-color: rgba(52, 200, 160, 0.45);
|
||||
box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
|
||||
}
|
||||
|
||||
.mode-switch-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.mode-switch-desc {
|
||||
@@ -577,30 +508,30 @@ onShow(async () => {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
color: #667085;
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.mode-hint {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: #1aa37a;
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
margin: 0;
|
||||
padding: 12rpx 22rpx;
|
||||
padding: 16rpx 28rpx;
|
||||
line-height: 1.4;
|
||||
font-size: 24rpx;
|
||||
border: none;
|
||||
border-radius: 999rpx;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
|
||||
box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.2);
|
||||
background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
|
||||
box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
|
||||
}
|
||||
|
||||
.share-btn[disabled] {
|
||||
background: #98a2b3;
|
||||
background: #9CC5B5;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@@ -612,7 +543,11 @@ onShow(async () => {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #98a2b3;
|
||||
margin-top: 32rpx;
|
||||
color: #7aA898;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.bottom-safe {
|
||||
height: calc(32rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user