admin/smt
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Enhance onboarding and profile pages with improved navigation and UI updates

Browse Source 
Updated the onboarding page to include a navigation area with a step indicator and adjusted the progress bar styling. In the profile page, simplified the user section, added options for clearing cache and copying feedback email, and improved layout consistency. Enhanced overall visual design with a light green gradient theme.
This commit is contained in:
nepiedg
2026-03-04 12:38:46 +08:00
parent ebca42c34e
commit 17daf254cd
2 changed files with 105 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/onboarding/index.vue
+50 -9
View File
@@ -1,7 +1,12 @@
<template>
<view class="page">
<view class="progress-bar">
<view class="progress-fill" :style="{ width: progressWidth }"></view>
<view class="nav-area" :style="{ paddingTop: navBarHeight + 'px' }">
<view class="nav-row">
<text class="step-indicator">{{ step }} / {{ totalSteps }}</text>
</view>
<view class="progress-bar">
<view class="progress-fill" :style="{ width: progressWidth }"></view>
</view>
</view>
<view class="content">
@@ -105,6 +110,7 @@ import { useLogin } from '@/hooks/useLogin'
const profileStore = useProfileStore()
const { waitForLogin } = useLogin()
const navBarHeight = ref(0)
const step = ref(1)
const totalSteps = 5
@@ -192,6 +198,14 @@ async function nextStep() {
}
onMounted(async () => {
const sys = uni.getSystemInfoSync()
const statusBarH = sys.statusBarHeight || 0
try {
const menuBtn = uni.getMenuButtonBoundingClientRect()
navBarHeight.value = menuBtn.bottom + (menuBtn.top - statusBarH)
} catch (e) {
navBarHeight.value = statusBarH + 44
}
await waitForLogin()
})
</script>
@@ -204,20 +218,48 @@ onMounted(async () => {
flex-direction: column;
}
.nav-area {
padding-left: 32rpx;
padding-right: 32rpx;
background: linear-gradient(to bottom, #D1FAE5, #E9FDF2);
}
.nav-row {
display: flex;
justify-content: center;
align-items: center;
padding: 12rpx 0;
}
.step-indicator {
font-size: 24rpx;
font-weight: 600;
color: #059669;
background-color: rgba(255, 255, 255, 0.7);
padding: 6rpx 24rpx;
border-radius: 999rpx;
}
.progress-bar {
height: 8rpx;
background-color: #E5E7EB;
height: 6rpx;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 999rpx;
margin-top: 8rpx;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #10B981, #34D399);
border-radius: 999rpx;
transition: width 0.3s ease;
}
.content {
flex: 1;
padding: 64rpx 48rpx;
padding: 0 48rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.step {
@@ -227,11 +269,11 @@ onMounted(async () => {
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(20rpx);
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateX(0);
transform: translateY(0);
}
}
@@ -248,7 +290,7 @@ onMounted(async () => {
font-size: 28rpx;
color: #6B7280;
display: block;
margin-bottom: 64rpx;
margin-bottom: 56rpx;
}
.input-group {
@@ -377,7 +419,6 @@ onMounted(async () => {
gap: 24rpx;
padding: 32rpx 48rpx;
padding-bottom: 64rpx;
background-color: #FFFFFF;
}
.btn-primary {