feat: mobile UI adaptation but not work perfectly
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
/* 手机UI适配 */
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Utility visibility helpers */
|
||||
.mobile-hidden { display: block; }
|
||||
.mobile-only { display: none; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mobile-hidden { display: none !important; }
|
||||
.mobile-only { display: block !important; }
|
||||
|
||||
/* Element Plus common components */
|
||||
.el-card__body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
width: 96% !important;
|
||||
margin: 6vh auto !important;
|
||||
}
|
||||
|
||||
.el-button, .el-input__inner, .el-select, .el-textarea__inner {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
width: 90% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ipad适配 */
|
||||
@media (max-width: 1500px) {
|
||||
.mobile-hidden { display: none !important; }
|
||||
.mobile-only { display: block !important; }
|
||||
}
|
||||
@@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<el-header class="app-header">
|
||||
<div class="header-content">
|
||||
<h1 class="logo">爱特工作室物品管理及财务管理系统</h1>
|
||||
<div class="left-wrap">
|
||||
<el-button type="text" class="menu-toggle mobile-only" @click="drawerVisible = true" aria-label="打开导航">
|
||||
<el-icon><Menu /></el-icon>
|
||||
</el-button>
|
||||
<h1 class="logo">爱特工作室物品管理及财务管理系统</h1>
|
||||
</div>
|
||||
<el-menu
|
||||
mode="horizontal"
|
||||
:default-active="$route.path"
|
||||
@@ -38,16 +43,56 @@
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="header-actions">
|
||||
<el-button type="text" class="settings-btn" @click="goToSettings">
|
||||
<el-button type="text" class="settings-btn" @click="goToSettings" aria-label="设置">
|
||||
<el-icon><Setting /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移动端抽屉导航 -->
|
||||
<el-drawer v-model="drawerVisible" title="导航" size="80%" :with-header="true">
|
||||
<el-menu
|
||||
mode="vertical"
|
||||
:default-active="$route.path"
|
||||
router
|
||||
class="mobile-menu"
|
||||
@select="drawerVisible = false"
|
||||
>
|
||||
<el-menu-item index="/">
|
||||
<el-icon><House /></el-icon>
|
||||
物品统计
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/items">
|
||||
<el-icon><Box /></el-icon>
|
||||
物品管理
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/usage">
|
||||
<el-icon><Document /></el-icon>
|
||||
使用记录
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/personnel">
|
||||
<el-icon><User /></el-icon>
|
||||
人员管理
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/department-management">
|
||||
<el-icon><OfficeBuilding /></el-icon>
|
||||
部门管理
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/finance">
|
||||
<el-icon><Money /></el-icon>
|
||||
财务管理
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/finance/records">
|
||||
<el-icon><Tickets /></el-icon>
|
||||
财务记录
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-drawer>
|
||||
</el-header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Box, Document, House, Money, OfficeBuilding, Setting, Tickets, User} from '@element-plus/icons-vue'
|
||||
import {Box, Document, House, Money, OfficeBuilding, Setting, Tickets, User, Menu} from '@element-plus/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'AppHeader',
|
||||
@@ -59,7 +104,13 @@ export default {
|
||||
Tickets,
|
||||
Setting,
|
||||
User,
|
||||
OfficeBuilding
|
||||
OfficeBuilding,
|
||||
Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
drawerVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToSettings() {
|
||||
@@ -89,6 +140,19 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
color: #606266;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: #409eff;
|
||||
font-size: 20px;
|
||||
@@ -131,4 +195,33 @@ export default {
|
||||
.settings-btn:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 移动端/平板端样式覆盖，避免标题、菜单与设置按钮堆叠 */
|
||||
@media (max-width: 1500px) {
|
||||
.app-header {
|
||||
height: auto !important;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.header-content {
|
||||
position: static;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.logo {
|
||||
position: static;
|
||||
font-size: 16px;
|
||||
max-width: 60vw;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.nav-menu {
|
||||
display: none !important;
|
||||
}
|
||||
.menu-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
.header-actions {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,7 @@ import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
import './assets/responsive.css'
|
||||
|
||||
const debounce = (fn, delay) => {
|
||||
let timeoutId
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<AppHeader />
|
||||
<div class="dashboard">
|
||||
<el-row :gutter="42">
|
||||
<el-col :span="6">
|
||||
<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon available">
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon in-use">
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon total">
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon maintenance">
|
||||
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon damaged">
|
||||
@@ -67,7 +67,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon lost">
|
||||
@@ -80,7 +80,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon abandoned">
|
||||
@@ -93,7 +93,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon prohibited">
|
||||
@@ -109,48 +109,52 @@
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" style="margin-top: 20px;">
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="24" :md="12">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>当前使用中的物品</span>
|
||||
</template>
|
||||
<el-table :data="currentUsages" style="width: 100%" max-height="300">
|
||||
<el-table-column prop="item_name" label="物品名称" />
|
||||
<el-table-column prop="user" label="使用者" />
|
||||
<el-table-column prop="start_time" label="开始时间">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.start_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="purpose" label="使用目的">
|
||||
<template #default="scope">
|
||||
{{ scope.row.purpose || '无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-wrapper">
|
||||
<el-table :data="currentUsages" style="width: 100%" max-height="300" size="small">
|
||||
<el-table-column prop="item_name" label="物品名称" />
|
||||
<el-table-column prop="user" label="使用者" />
|
||||
<el-table-column prop="start_time" label="开始时间">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.start_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="purpose" label="使用目的">
|
||||
<template #default="scope">
|
||||
{{ scope.row.purpose || '无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="24" :md="12">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>最新添加的物品</span>
|
||||
</template>
|
||||
<el-table :data="recentItems" style="width: 100%" max-height="300">
|
||||
<el-table-column prop="name" label="物品名称" />
|
||||
<el-table-column prop="category" label="类别" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusType(scope.row.status)">
|
||||
{{ getStatusText(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="添加时间">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-wrapper">
|
||||
<el-table :data="recentItems" style="width: 100%" max-height="300" size="small">
|
||||
<el-table-column prop="name" label="物品名称" />
|
||||
<el-table-column prop="category" label="类别" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusType(scope.row.status)">
|
||||
{{ getStatusText(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="添加时间">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -271,37 +275,14 @@ export default {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-icon.available {
|
||||
background-color: #67c23a;
|
||||
}
|
||||
|
||||
.stat-icon.in-use {
|
||||
background-color: #e6a23c;
|
||||
}
|
||||
|
||||
.stat-icon.total {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.stat-icon.maintenance {
|
||||
background-color: #909399;
|
||||
}
|
||||
|
||||
.stat-icon.damaged {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
|
||||
.stat-icon.lost {
|
||||
background-color: #f59e0b;
|
||||
}
|
||||
|
||||
.stat-icon.abandoned {
|
||||
background-color: #8e8e8e;
|
||||
}
|
||||
|
||||
.stat-icon.prohibited {
|
||||
background-color: #409eff;
|
||||
}
|
||||
.stat-icon.available { background-color: #67c23a; }
|
||||
.stat-icon.in-use { background-color: #e6a23c; }
|
||||
.stat-icon.total { background-color: #409eff; }
|
||||
.stat-icon.maintenance { background-color: #909399; }
|
||||
.stat-icon.damaged { background-color: #f56c6c; }
|
||||
.stat-icon.lost { background-color: #f59e0b; }
|
||||
.stat-icon.abandoned { background-color: #8e8e8e; }
|
||||
.stat-icon.prohibited { background-color: #409eff; }
|
||||
|
||||
.stat-info h3 {
|
||||
margin: 0;
|
||||
@@ -313,4 +294,27 @@ export default {
|
||||
margin: 5px 0 0 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-wrapper .el-table {
|
||||
min-width: 600px; /* allow horizontal scroll on small screens */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard { padding: 12px; }
|
||||
|
||||
.stat-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 18px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.stat-info h3 { font-size: 22px; }
|
||||
.stat-info p { font-size: 12px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<AppHeader />
|
||||
<div class="finance-detail-container">
|
||||
<div class="detail-header">
|
||||
<el-button @click="$router.go(-1)" style="margin-bottom: 20px;">
|
||||
<el-button @click="$router.go(-1)" class="back-btn">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
@@ -20,13 +20,13 @@
|
||||
|
||||
<div class="record-details">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<div class="detail-item">
|
||||
<label>标题：</label>
|
||||
<span>{{ record.title }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<div class="detail-item">
|
||||
<label>金额：</label>
|
||||
<span class="amount" :class="record.record_type">
|
||||
@@ -37,7 +37,7 @@
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<div class="detail-item">
|
||||
<label>类型：</label>
|
||||
<el-tag :type="record.record_type === 'income' ? 'success' : 'danger'">
|
||||
@@ -45,7 +45,7 @@
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<div class="detail-item">
|
||||
<label>交易日期：</label>
|
||||
<span>{{ record.transaction_date }}</span>
|
||||
@@ -54,13 +54,13 @@
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<div class="detail-item">
|
||||
<label>所属部门：</label>
|
||||
<span>{{ record.department ? record.department.name : '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<div class="detail-item">
|
||||
<label>类别：</label>
|
||||
<span>{{ record.category ? record.category.name : '-' }}</span>
|
||||
@@ -78,7 +78,7 @@
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<div class="detail-item">
|
||||
<label>批准人：</label>
|
||||
<span>{{ record.fund_manager || '-' }}</span>
|
||||
@@ -143,7 +143,7 @@
|
||||
|
||||
<script>
|
||||
import {API_BASE_URL_WITHOUT_API, financeService} from '@/services/api';
|
||||
import {Delete, Plus} from '@element-plus/icons-vue';
|
||||
import {Delete, Plus, ArrowLeft} from '@element-plus/icons-vue';
|
||||
import AppHeader from "@/components/AppHeader.vue";
|
||||
import FinanceRecordForm from './FinanceRecordForm.vue';
|
||||
|
||||
@@ -153,7 +153,8 @@ export default {
|
||||
AppHeader,
|
||||
FinanceRecordForm,
|
||||
Plus,
|
||||
Delete
|
||||
Delete,
|
||||
ArrowLeft
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -232,6 +233,11 @@ export default {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-item span,
|
||||
.description {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.amount.income {
|
||||
color: #67c23a;
|
||||
font-weight: bold;
|
||||
@@ -302,4 +308,34 @@ export default {
|
||||
max-height: 70vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
/* visually larger target on phones */
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.finance-detail-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.images-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.proof-image {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -480,6 +480,7 @@ export default {
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
@@ -600,6 +601,7 @@ export default {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.email-info {
|
||||
@@ -635,6 +637,7 @@ export default {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.delete-email-btn {
|
||||
@@ -717,4 +720,56 @@ export default {
|
||||
.dark .content-section li {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.settings-container {
|
||||
padding: 12px;
|
||||
}
|
||||
.settings-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.setting-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 14px 0;
|
||||
}
|
||||
.setting-control {
|
||||
width: 100%;
|
||||
}
|
||||
.email-management-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.email-actions {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.email-actions .el-button {
|
||||
width: auto;
|
||||
}
|
||||
.new-email-form .form-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.form-row .el-input {
|
||||
width: 100% !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.form-row .el-switch {
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-row .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
.content-section h3 {
|
||||
font-size: 16px;
|
||||
margin: 16px 0 8px 0;
|
||||
}
|
||||
.content-section p,
|
||||
.content-section li {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user