style: 移动端首页UI调整
1. 删除顶部标题区域,节省页面垂直空间 2. 快捷操作调整为2行布局(第一行3个,第二行2个) 3. 优化快捷操作图标和文字大小
This commit is contained in:
parent
d3a77c23f1
commit
e7f1b39ac8
@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<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="card-header">
|
||||
@ -194,26 +188,7 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.home {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
@ -307,19 +282,21 @@ onMounted(() => {
|
||||
|
||||
.quick-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 4px;
|
||||
padding: 14px 16px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.quick-item:active {
|
||||
@ -328,13 +305,13 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@ -360,7 +337,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.quick-text {
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--mac-text);
|
||||
text-align: center;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user