This commit is contained in:
Leo
2026-01-06 00:20:56 +08:00
parent 8d2433e432
commit b38633ff49
2 changed files with 39 additions and 23 deletions

View File

@@ -56,7 +56,7 @@
<!-- 桌面端正常显示 -->
<div v-else class="desktop-search-wrapper">
<slot name="form" :expanded="true">
<slot name="form" :expanded="false">
<el-form
:model="formData"
:inline="inline"

View File

@@ -13,9 +13,9 @@
<template #form="{ expanded }">
<el-form
:model="queryParams"
:inline="!expanded"
:label-width="expanded ? '80px' : '68px'"
:label-position="expanded ? 'top' : 'left'"
:inline="true"
label-width="68px"
label-position="left"
>
<el-form-item label="备注">
<el-input v-model="queryParams.remark" placeholder="单据备注" clearable size="small" @keyup.enter.native="handleQuery" />
@@ -1914,6 +1914,27 @@ export default {
margin-bottom: 12px;
}
/* 移动端和桌面端按钮组显示控制 */
@media (max-width: 768px) {
.desktop-only {
display: none !important;
}
.action-buttons-section.mobile-only {
display: block;
}
}
@media (min-width: 769px) {
.mobile-only {
display: none !important;
}
.desktop-action-buttons.desktop-only {
display: block;
}
}
.desktop-action-buttons {
display: flex;
flex-wrap: wrap;
@@ -1923,38 +1944,33 @@ export default {
/* 移动端优化 */
@media (max-width: 768px) {
.action-buttons-section {
.action-buttons-section.mobile-only {
margin-top: 8px;
margin-bottom: 8px;
display: block;
}
.desktop-action-buttons {
display: none;
.desktop-action-buttons.desktop-only {
display: none !important;
}
/* 移动端隐藏分页或简化显示 */
.list-pagination {
display: none; /* 移动端隐藏分页,因为很少用 */
}
/* 或者简化分页显示 */
/* .list-pagination ::v-deep .el-pagination {
display: flex;
justify-content: center;
padding: 8px 0;
}
.list-pagination ::v-deep .el-pagination .el-pagination__sizes,
.list-pagination ::v-deep .el-pagination .el-pagination__total,
.list-pagination ::v-deep .el-pagination .el-pagination__jump {
display: none;
} */
}
/* 桌面端隐藏移动端按钮 */
/* 桌面端显示桌面按钮,隐藏移动端按钮 */
@media (min-width: 769px) {
.action-buttons-section {
display: none;
.action-buttons-section.mobile-only {
display: none !important;
}
.desktop-action-buttons.desktop-only {
display: flex !important;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
}
</style>