yijiongcao
/
registration
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:管理端移动适配

Browse Source
zlx
zhoulexin 4 days ago
parent 0e6fec3b99
commit 98979070d9
2 changed files with 280 additions and 11 deletions
Show Stats Download Patch File Download Diff File

167
src/views/admin/DashboardPage.vue
Unescape Escape View File

@ -169,7 +169,7 @@
{{ formatTime(row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right">
<el-table-column label="操作" width="180" align="center" :fixed="isMobile ? false : 'right'">
<template #default="{ row }">
<el-button type="primary" link @click="viewDetail(row)">
<el-icon><View /></el-icon>
@ -205,11 +205,11 @@
<el-dialog
v-model="detailDialogVisible"
title="报名详情"
width="600px"
:width="dialogWidth"
destroy-on-close
>
<div class="detail-content" v-if="currentDetail">
<el-descriptions :column="2" border>
<el-descriptions :column="detailColumn" border>
<el-descriptions-item label="报名编号">{{ currentDetail.id }}</el-descriptions-item>
<el-descriptions-item label="姓名">{{ currentDetail.name }}</el-descriptions-item>
<el-descriptions-item label="所在单位">{{ currentDetail.organization }}</el-descriptions-item>
@ -250,7 +250,7 @@
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getRegistrationList, getRegistrationStatistics, updateRegistrationStatus, getRegistrationDetail, getAllRegistrations, getSessionList } from '../../api/registration'
@ -272,6 +272,15 @@ const tableRef = ref(null)
const multipleSelection = ref([])
const exportAllLoading = ref(false)
// 移动端适配
const isMobile = ref(false)
const detailColumn = computed(() => isMobile.value ? 1 : 2)
const dialogWidth = computed(() => isMobile.value ? '92%' : '600px')
const mediaQuery = window.matchMedia('(max-width: 768px)')
const updateIsMobile = (e) => { isMobile.value = e.matches }
mediaQuery.addEventListener('change', updateIsMobile)
isMobile.value = mediaQuery.matches
// 管理员信息
const adminUser = reactive({
username: 'admin'
@ -593,6 +602,11 @@ onMounted(() => {
loadData()
loadSessionOptions()
})
// 离开时清理媒体查询监听
onBeforeUnmount(() => {
mediaQuery.removeEventListener('change', updateIsMobile)
})
</script>
<style scoped>
@ -791,12 +805,18 @@ onMounted(() => {
padding: 12px 16px;
}
.admin-logo {
font-size: 16px;
}
.admin-body {
flex-direction: column;
overflow: visible;
}
.admin-aside {
width: 100% !important;
height: auto !important;
border-right: none;
border-bottom: 1px solid #e8e8e8;
}
@ -806,7 +826,9 @@ onMounted(() => {
}
.admin-content {
padding: 16px;
height: 0;
min-height: 0;
padding: 12px;
}
.admin-main {
@ -815,44 +837,175 @@ onMounted(() => {
.admin-stats {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-card {
padding: 16px;
padding: 14px;
}
.stat-icon {
width: 40px;
height: 40px;
margin-bottom: 12px;
}
.stat-icon .el-icon {
font-size: 20px;
}
.stat-value {
font-size: 22px;
}
.stat-label {
font-size: 13px;
}
.search-bar {
flex-direction: column;
align-items: stretch;
padding: 12px;
}
.search-bar .el-input,
.search-bar .el-select {
width: 100% !important;
max-width: 100% !important;
}
.admin-table-card {
padding: 12px;
}
.table-header {
flex-direction: column;
gap: 12px;
gap: 10px;
align-items: flex-start;
}
.table-header h3 {
font-size: 15px;
}
.table-header-actions {
width: 100%;
flex-wrap: wrap;
gap: 8px;
}
.table-header-actions .el-button {
flex: 1;
min-width: 0;
font-size: 12px;
padding: 8px 12px;
}
.el-table {
font-size: 12px;
}
/* 移动端表格横向滚动 */
.el-table__body-wrapper {
overflow-x: auto;
}
/* 操作列按钮竖排显示 */
.el-table .el-button.is-link {
font-size: 12px;
padding: 4px 2px;
}
.pagination-wrapper {
justify-content: center;
overflow-x: auto;
}
.pagination-wrapper .el-pagination {
flex-wrap: wrap;
justify-content: center;
}
/* 详情弹窗适配 */
.detail-content {
padding: 4px 0;
}
.detail-content .el-descriptions__title {
font-size: 13px;
}
.detail-content .el-descriptions__label {
font-size: 12px;
white-space: nowrap;
}
.detail-content .el-descriptions__content {
font-size: 12px;
}
/* 弹窗底部按钮 */
.el-dialog__footer {
display: flex;
gap: 8px;
}
.el-dialog__footer .el-button {
flex: 1;
}
}
@media screen and (max-width: 480px) {
.admin-stats {
grid-template-columns: 1fr;
gap: 10px;
}
.stat-card {
padding: 12px;
}
.stat-value {
font-size: 20px;
}
.admin-logo span {
font-size: 14px;
}
.admin-content {
padding: 8px;
}
.search-bar {
padding: 10px;
gap: 8px;
}
.admin-table-card {
padding: 8px;
}
.table-header-actions .el-button {
font-size: 11px;
padding: 6px 8px;
}
.el-table {
font-size: 11px;
}
.el-table .el-button.is-link {
font-size: 11px;
padding: 2px;
}
.detail-content .el-descriptions__label {
font-size: 11px;
}
.detail-content .el-descriptions__content {
font-size: 11px;
}
}
</style>

124
src/views/admin/SessionManage.vue
Unescape Escape View File

@ -56,7 +56,7 @@
{{ formatTime(row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right">
<el-table-column label="操作" width="180" align="center" :fixed="isMobile ? false : 'right'">
<template #default="{ row }">
<el-button type="primary" link icon="Edit" @click="showEditDialog(row)">编辑</el-button>
<el-button type="danger" link icon="Delete" @click="handleDelete(row)">删除</el-button>
@ -82,7 +82,7 @@
<el-dialog
v-model="dialogVisible"
:title="isEdit ? '编辑期次' : '新增期次'"
width="520px"
:width="dialogWidth"
destroy-on-close
:close-on-click-modal="false"
>
@ -90,7 +90,7 @@
ref="formRef"
:model="form"
:rules="rules"
label-width="100px"
:label-width="isMobile ? '80px' : '100px'"
size="default"
>
<el-form-item label="期次名称" prop="periodName">
@ -136,7 +136,7 @@
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getSessionList, addSession, updateSession, deleteSession } from '../../api/registration'
@ -149,6 +149,14 @@ const editId = ref(null)
const submitLoading = ref(false)
const formRef = ref(null)
// 移动端适配
const isMobile = ref(false)
const dialogWidth = computed(() => isMobile.value ? '92%' : '520px')
const mediaQuery = window.matchMedia('(max-width: 768px)')
const updateIsMobile = (e) => { isMobile.value = e.matches }
mediaQuery.addEventListener('change', updateIsMobile)
isMobile.value = mediaQuery.matches
// 搜索与分页
const searchKeyword = ref('')
const filterStatus = ref('')
@ -337,6 +345,11 @@ const handleDelete = (row) => {
onMounted(() => {
loadSessionList()
})
// 离开时清理媒体查询监听
onBeforeUnmount(() => {
mediaQuery.removeEventListener('change', updateIsMobile)
})
</script>
<style scoped>
@ -382,4 +395,107 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
}
/* ===== 移动端适配 ===== */
@media screen and (max-width: 768px) {
.session-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.session-toolbar h3 {
font-size: 15px;
}
.session-toolbar .el-button {
width: 100%;
}
.search-bar {
flex-direction: column;
align-items: stretch;
padding: 12px;
gap: 8px;
}
.search-bar .el-input,
.search-bar .el-select {
width: 100% !important;
max-width: 100% !important;
}
.session-table-card {
padding: 12px;
overflow-x: auto;
}
/* 表格横向滚动 */
.el-table__body-wrapper {
overflow-x: auto;
}
.el-table {
font-size: 12px;
}
.pagination-wrapper {
justify-content: center;
overflow-x: auto;
}
.pagination-wrapper .el-pagination {
flex-wrap: wrap;
justify-content: center;
}
/* 弹窗适配 */
.el-dialog__footer {
display: flex;
gap: 8px;
}
.el-dialog__footer .el-button {
flex: 1;
}
/* 表单在移动端更紧凑 */
.el-form-item {
margin-bottom: 18px;
}
.el-form-item__label {
font-size: 13px;
}
}
@media screen and (max-width: 480px) {
.session-table-card {
padding: 8px;
}
.session-toolbar h3 {
font-size: 14px;
}
.search-bar {
padding: 10px;
}
.el-table {
font-size: 11px;
}
.el-table .el-button.is-link {
font-size: 11px;
padding: 2px;
}
.el-form-item__label {
font-size: 12px;
}
.el-form-item {
margin-bottom: 14px;
}
}
</style>

Write Preview
Loading…
Cancel
Save