wjbl/fundplatform
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 移动端首页UI调整

Browse Source 
1. 删除顶部标题区域，节省页面垂直空间
2. 快捷操作调整为2行布局（第一行3个，第二行2个）
3. 优化快捷操作图标和文字大小
This commit is contained in:
zhangjf 2026-02-23 12:26:58 +08:00
parent d3a77c23f1
commit e7f1b39ac8
1 changed files with 12 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
fund-mobile/src/views/Home.vue
View File

@ -1,11 +1,5 @@
<template> <template>
<div class="page home"> <div class="page home">
<!-- 顶部标题 -->
<div class="header">
<div class="header-title">资金服务平台</div>
<div class="header-subtitle">Financial Platform</div>
</div>
<!-- 数据概览卡片 --> <!-- 数据概览卡片 -->
<div class="summary-card mac-card fade-in-up"> <div class="summary-card mac-card fade-in-up">
<div class="card-header"> <div class="card-header">
@ -194,26 +188,7 @@ onMounted(() => {
<style scoped> <style scoped>
.home { .home {
padding: 0 16px; padding: 0 16px;
} padding-top: 20px;
.header {
padding: 60px 0 24px;
text-align: center;
}
.header-title {
font-size: 28px;
font-weight: 700;
color: var(--mac-text);
letter-spacing: 1px;
}
.header-subtitle {
font-size: 13px;
color: var(--mac-text-secondary);
margin-top: 6px;
letter-spacing: 2px;
text-transform: uppercase;
} }
.summary-card { .summary-card {
@ -307,19 +282,21 @@ onMounted(() => {
.quick-grid { .quick-grid {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 8px; gap: 12px;
justify-items: center;
} }
.quick-item { .quick-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 12px 4px; padding: 14px 16px;
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
border-radius: 12px; border-radius: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
min-width: 90px;
} }
.quick-item:active { .quick-item:active {
@ -328,13 +305,13 @@ onMounted(() => {
} }
.quick-icon { .quick-icon {
width: 40px; width: 44px;
height: 40px; height: 44px;
border-radius: 12px; border-radius: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20px; font-size: 22px;
color: #fff; color: #fff;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -360,7 +337,7 @@ onMounted(() => {
} }
.quick-text { .quick-text {
font-size: 11px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: var(--mac-text); color: var(--mac-text);
text-align: center; text-align: center;