4b4616de1e
- Created new finance application based on Vue Vben Admin - Implemented transaction management, category management, and loan tracking - Added person management for tracking financial relationships - Integrated budget management and financial analytics - Added data import/export functionality - Implemented responsive design for mobile support - Added comprehensive testing with Playwright 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
150 lines
2.8 KiB
CSS
150 lines
2.8 KiB
CSS
/* 移动端全局样式优化 */
|
|
|
|
/* 防止iOS橡皮筋效果 */
|
|
@media (max-width: 768px) {
|
|
html,
|
|
body {
|
|
overscroll-behavior: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* 移除桌面端的侧边栏和顶部导航 */
|
|
.vben-layout-sidebar,
|
|
.vben-layout-header {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 移动端内容区域全屏 */
|
|
.vben-layout-content {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
height: 100vh !important;
|
|
}
|
|
|
|
/* 优化点击效果 */
|
|
* {
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
/* 优化输入框 */
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-size: 16px !important; /* 防止iOS自动缩放 */
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* 优化按钮点击 */
|
|
button,
|
|
.ant-btn {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* 优化模态框和抽屉 */
|
|
.ant-modal {
|
|
max-width: calc(100vw - 32px);
|
|
}
|
|
|
|
.ant-drawer-content-wrapper {
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
/* 优化表单项间距 */
|
|
.ant-form-item {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* 优化列表项 */
|
|
.ant-list-item {
|
|
padding: 12px;
|
|
}
|
|
|
|
/* 优化卡片间距 */
|
|
.ant-card {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* 移动端安全区域适配 */
|
|
.mobile-finance,
|
|
.mobile-quick-add,
|
|
.mobile-transaction-list,
|
|
.mobile-statistics,
|
|
.mobile-budget,
|
|
.mobile-more {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* 浮动按钮安全区域适配 */
|
|
.floating-button {
|
|
bottom: calc(20px + env(safe-area-inset-bottom)) !important;
|
|
}
|
|
|
|
/* 底部标签栏安全区域适配 */
|
|
.mobile-tabs .ant-tabs-nav {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
}
|
|
|
|
/* 横屏优化 */
|
|
@media (max-width: 768px) and (orientation: landscape) {
|
|
.mobile-quick-add .category-grid {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.mobile-statistics .overview-cards {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
/* 小屏幕手机优化 */
|
|
@media (max-width: 375px) {
|
|
.mobile-quick-add .category-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.mobile-statistics .overview-cards {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mobile-budget .budget-summary {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* 动画优化 */
|
|
@media (max-width: 768px) {
|
|
/* 减少动画时间 */
|
|
* {
|
|
animation-duration: 0.2s !important;
|
|
transition-duration: 0.2s !important;
|
|
}
|
|
|
|
/* 禁用复杂动画 */
|
|
.ant-progress-circle {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
/* 触摸优化 */
|
|
@media (pointer: coarse) {
|
|
/* 增大可点击区域 */
|
|
.ant-btn,
|
|
.menu-item,
|
|
.category-item,
|
|
.transaction-item {
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* 增大关闭按钮 */
|
|
.ant-modal-close,
|
|
.ant-drawer-close {
|
|
width: 44px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
}
|
|
} |