wangtianjiao/vueapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 调整按钮样式

Browse Source
This commit is contained in:
王天骄
2026-06-08 17:34:22 +08:00
parent 2bfd15ba5e
commit 9a66c37ee7
30 changed files with 88 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/profile/profile-analysis.vue
+8 -12
View File
@@ -6,9 +6,6 @@
<view class="back-icon"></view>
</button>
<text class="page-title">智能分析</text>
<button class="icon-button" aria-label="分享" @click="showToast('分享功能即将开放')">
<view class="share-icon"></view>
</button>
</header>
<scroll-view class="analysis-scroll" scroll-y>
@@ -264,11 +261,15 @@ page {
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
flex: 0 0 auto;
}
.page-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #00478d;
font-size: 20px;
line-height: 28px;
@@ -277,6 +278,9 @@ page {
}
.icon-button {
position: absolute;
left: 16px;
top: 8px;
width: 40px;
height: 40px;
padding: 0;
@@ -297,7 +301,6 @@ page {
}
.back-icon,
.share-icon,
.trend-icon,
.chart-icon,
.radar-icon,
@@ -320,13 +323,6 @@ page {
mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.42-1.41L7.83%2013H20v-2z'/%3E%3C/svg%3E");
}
.share-icon {
width: 22px;
height: 22px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M18%2016.08c-.76%200-1.44.3-1.96.77L8.91%2012.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A2.99%202.99%200%201%200%2015%205c0%20.24.04.47.09.7L8.04%209.81A3%203%200%201%200%208.04%2014l7.12%204.18c-.05.21-.08.43-.08.65a2.92%202.92%200%201%200%202.92-2.75z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M18%2016.08c-.76%200-1.44.3-1.96.77L8.91%2012.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A2.99%202.99%200%201%200%2015%205c0%20.24.04.47.09.7L8.04%209.81A3%203%200%201%200%208.04%2014l7.12%204.18c-.05.21-.08.43-.08.65a2.92%202.92%200%201%200%202.92-2.75z'/%3E%3C/svg%3E");
}
.analysis-scroll {
flex: 1 1 auto;
min-height: 0;
pages/profile/profile-records.vue
+8 -13
View File
@@ -6,9 +6,6 @@
<view class="back-icon"></view>
</button>
<text class="page-title">学习记录</text>
<button class="icon-button muted" aria-label="设置" @click="showToast('记录筛选设置即将开放')">
<view class="settings-icon"></view>
</button>
</header>
<scroll-view class="records-scroll" scroll-y>
@@ -244,11 +241,15 @@ page {
box-shadow: 0 1px 4px rgba(25, 28, 33, 0.04);
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
flex: 0 0 auto;
}
.page-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #00478d;
font-size: 20px;
line-height: 28px;
@@ -269,6 +270,9 @@ page {
}
.icon-button {
position: absolute;
left: 20px;
top: 12px;
width: 40px;
height: 40px;
display: flex;
@@ -283,7 +287,6 @@ page {
}
.back-icon,
.settings-icon,
.search-icon,
.small-chevron {
background: #00478d;
@@ -302,14 +305,6 @@ page {
mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.42-1.41L7.83%2013H20v-2z'/%3E%3C/svg%3E");
}
.settings-icon {
width: 24px;
height: 24px;
background: #424752;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5%200%200%200-.61-.22l-2.49%201a7.28%207.28%200%200%200-1.69-.98L14.5%202.42A.49.49%200%200%200%2014%202h-4a.49.49%200%200%200-.49.42L9.13%205.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5%200%200%200-.61.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.14.22.4.31.61.22l2.49-1c.51.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.49.42h4c.24%200%20.45-.18.49-.42l.38-2.65c.61-.25%201.18-.58%201.69-.98l2.49%201c.22.08.48%200%20.61-.22l2-3.46a.5.5%200%200%200-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5%200%200%200-.61-.22l-2.49%201a7.28%207.28%200%200%200-1.69-.98L14.5%202.42A.49.49%200%200%200%2014%202h-4a.49.49%200%200%200-.49.42L9.13%205.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5%200%200%200-.61.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.14.22.4.31.61.22l2.49-1c.51.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.49.42h4c.24%200%20.45-.18.49-.42l.38-2.65c.61-.25%201.18-.58%201.69-.98l2.49%201c.22.08.48%200%20.61-.22l2-3.46a.5.5%200%200%200-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E");
}
.records-scroll {
flex: 1 1 auto;
min-height: 0;
pages/profile/profile.vue
+50 -10
View File
@@ -2,11 +2,11 @@
<view class="profile-page">
<view class="profile-shell">
<view class="top-app-bar">
<button class="top-button" aria-label="首页" @click="emit('go-home')">
<view class="menu-icon"></view>
<button class="top-button nav-left" aria-label="首页" @click="goHome">
<view class="home-icon"></view>
</button>
<text class="page-title">个人中心</text>
<button class="top-button" aria-label="设置" @click="emit('open-settings')">
<button class="top-button nav-right" aria-label="配置" @click="openSettings">
<view class="settings-icon"></view>
</button>
</view>
@@ -133,7 +133,7 @@
</template>
<script setup lang="ts">
import { computed, onUnmounted, ref } from 'vue'
import { computed, getCurrentInstance, onUnmounted, ref } from 'vue'
const emit = defineEmits<{
(event: 'open-settings'): void
@@ -146,6 +146,10 @@ const toastVisible = ref(false)
let toastTimer: ReturnType<typeof setTimeout> | null = null
const instance = getCurrentInstance()
const hasGoHomeListener = Boolean(instance?.vnode.props?.onGoHome)
const hasOpenSettingsListener = Boolean(instance?.vnode.props?.onOpenSettings)
const profileMeta = [
{ label: '北京', icon: 'location-icon' },
{ label: '北大医学部', icon: 'school-icon' },
@@ -226,6 +230,28 @@ function handleAction(entry: ActionEntry) {
showToast(entry.toast || '功能即将开放')
}
function goHome() {
if (hasGoHomeListener) {
emit('go-home')
return
}
uni.reLaunch({
url: '/pages/home/home'
})
}
function openSettings() {
if (hasOpenSettingsListener) {
emit('open-settings')
return
}
uni.navigateTo({
url: '/pages/config/config'
})
}
onUnmounted(() => {
if (toastTimer) clearTimeout(toastTimer)
})
@@ -280,11 +306,15 @@ page {
background: #f9f9ff;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
flex: 0 0 auto;
}
.page-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #00478d;
font-size: 20px;
line-height: 28px;
@@ -309,6 +339,8 @@ page {
}
.top-button {
position: absolute;
top: 8px;
width: 40px;
height: 40px;
display: flex;
@@ -317,6 +349,14 @@ page {
border-radius: 2px;
}
.top-button.nav-left {
left: 20px;
}
.top-button.nav-right {
right: 20px;
}
.top-button:active {
background: #ecedf6;
transform: scale(0.96);
@@ -697,7 +737,7 @@ page {
background: #00478d;
}
.menu-icon,
.home-icon,
.settings-icon,
.meta-icon,
.mood-icon,
@@ -714,15 +754,15 @@ page {
mask-size: contain;
}
.menu-icon,
.home-icon,
.settings-icon {
width: 24px;
height: 24px;
}
.menu-icon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%206h18v2H3V6zm0%205h18v2H3v-2zm0%205h18v2H3v-2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%206h18v2H3V6zm0%205h18v2H3v-2zm0%205h18v2H3v-2z'/%3E%3C/svg%3E");
.home-icon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E");
}
.settings-icon {