feat: refresh h5 debug workflow and ui design
This commit is contained in:
nepiedg
@@ -17,6 +17,7 @@
|
||||
:class="{ 'mode-switch-item-active': formData.mode === item.value }"
|
||||
@tap="selectMode(item.value)"
|
||||
>
|
||||
<text class="mode-switch-icon">{{ item.icon }}</text>
|
||||
<text class="mode-switch-title">{{ item.label }}</text>
|
||||
<text class="mode-switch-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
@@ -98,7 +99,7 @@
|
||||
v-model="priceYuan"
|
||||
class="inline-field"
|
||||
placeholder="25"
|
||||
placeholder-style="color: #9CA3AF"
|
||||
placeholder-style="color: #9CC5B5"
|
||||
/>
|
||||
<text class="inline-unit">元/包</text>
|
||||
</view>
|
||||
@@ -131,8 +132,8 @@ const navBarHeight = ref(0)
|
||||
const modeSaving = ref(false)
|
||||
|
||||
const modeOptions = [
|
||||
{ value: 'quit', label: '戒烟打卡', desc: '按天记录今天没抽' },
|
||||
{ value: 'record', label: '记录抽烟', desc: '按支数记录变化' }
|
||||
{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟', icon: '🌿' },
|
||||
{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势', icon: '📊' }
|
||||
]
|
||||
|
||||
const formData = ref({
|
||||
@@ -274,50 +275,56 @@ onShareAppMessage(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── 页面基础 ── */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
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%);
|
||||
background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-area {
|
||||
padding: 24rpx 32rpx;
|
||||
padding: 20rpx 32rpx 16rpx;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.nav-subtitle {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #52806E;
|
||||
}
|
||||
|
||||
/* ── 滚动区 ── */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 0 32rpx;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
/* ── 卡片式表单区块 ── */
|
||||
.form-section {
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border-radius: 24rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
|
||||
padding: 28rpx 24rpx;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 18rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
color: #1a5c45;
|
||||
letter-spacing: 0.4rpx;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
@@ -326,7 +333,7 @@ onShareAppMessage(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Mode switch */
|
||||
/* ── 模式选择 ── */
|
||||
.mode-switch {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -334,35 +341,50 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.mode-switch-item {
|
||||
padding: 24rpx;
|
||||
padding: 28rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.66);
|
||||
box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
|
||||
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);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.mode-switch-item-active {
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-color: rgba(26, 163, 122, 0.3);
|
||||
box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.1);
|
||||
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-icon {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.mode-switch-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.mode-switch-item-active .mode-switch-title {
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.mode-switch-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.4;
|
||||
color: #6b7280;
|
||||
margin-top: 6rpx;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.5;
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
/* Inline input */
|
||||
.mode-switch-item-active .mode-switch-desc {
|
||||
color: #3a9e78;
|
||||
}
|
||||
|
||||
/* ── 数字步进器 ── */
|
||||
.inline-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -370,71 +392,70 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.inline-btn {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(52, 200, 160, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
color: #1aa37a;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.06);
|
||||
font-size: 38rpx;
|
||||
color: #34C8A0;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.25);
|
||||
}
|
||||
|
||||
.inline-value {
|
||||
font-size: 36rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
min-width: 48rpx;
|
||||
color: #0D3D2E;
|
||||
min-width: 52rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inline-unit {
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
font-size: 24rpx;
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.inline-field {
|
||||
width: 100rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
color: #0D3D2E;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: 12rpx 16rpx;
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
padding: 10rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.72);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.2);
|
||||
}
|
||||
|
||||
/* Options row */
|
||||
/* ── 标签选择 ── */
|
||||
.options-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.option-tag {
|
||||
padding: 16rpx 28rpx;
|
||||
padding: 14rpx 26rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
font-size: 25rpx;
|
||||
color: #4a7a66;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.18);
|
||||
}
|
||||
|
||||
.option-tag-active {
|
||||
background: rgba(26, 163, 122, 0.12);
|
||||
border-color: rgba(26, 163, 122, 0.3);
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
border-color: rgba(52, 200, 160, 0.45);
|
||||
color: #1a7f61;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Time row */
|
||||
/* ── 作息时间 ── */
|
||||
.time-row {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.time-item {
|
||||
@@ -442,52 +463,52 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.time-label {
|
||||
font-size: 24rpx;
|
||||
color: #6B7280;
|
||||
font-size: 22rpx;
|
||||
color: #7aA898;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.time-picker {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: 20rpx 24rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 32rpx;
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
padding: 18rpx 20rpx;
|
||||
border-radius: 14rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
color: #0D3D2E;
|
||||
text-align: center;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.2);
|
||||
}
|
||||
|
||||
/* ── 底部空白 + 按钮 ── */
|
||||
.bottom-space {
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 24rpx 32rpx;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.95) 40%);
|
||||
padding: 20rpx 28rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
height: 96rpx;
|
||||
background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
|
||||
background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
|
||||
border-radius: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.22);
|
||||
box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user