申诉管理模块: 页面优化;

This commit is contained in:
dd3s_206
2026-05-22 11:39:21 +08:00
parent 2ad09e5b6b
commit a018f5eb88
5 changed files with 208 additions and 5 deletions
@@ -2,8 +2,49 @@
layout("/layouts/platform.html"){
#-->
<style>
.appeal-search-page .search {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
row-gap: 10px;
}
.appeal-search-page .search .search-item {
width: 100%;
}
.appeal-search-page .search .search-item-label {
width: 76px;
min-width: 76px;
margin-right: 8px;
}
.appeal-search-page .search .search-item-option {
min-width: calc(100% - 76px - 8px);
}
@media screen and (max-width: 1350px) {
.appeal-search-page .search {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 1200px) {
.appeal-search-page .search {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 992px) {
.appeal-search-page .search {
grid-template-columns: 1fr;
}
}
</style>
<div id="app" v-cloak>
<guava ref="guava">
<guava ref="guava" class="appeal-search-page">
<el-card shadow="never">
<search @search="doSearch">
<search-item label="年度">
@@ -2,8 +2,49 @@
layout("/layouts/platform.html"){
#-->
<style>
.appeal-search-page .search {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
row-gap: 10px;
}
.appeal-search-page .search .search-item {
width: 100%;
}
.appeal-search-page .search .search-item-label {
width: 76px;
min-width: 76px;
margin-right: 8px;
}
.appeal-search-page .search .search-item-option {
min-width: calc(100% - 76px - 8px);
}
@media screen and (max-width: 1350px) {
.appeal-search-page .search {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 1200px) {
.appeal-search-page .search {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 992px) {
.appeal-search-page .search {
grid-template-columns: 1fr;
}
}
</style>
<div id="app" v-cloak>
<guava ref="guava">
<guava ref="guava" class="appeal-search-page">
<el-card shadow="never">
<search @search="doSearch">
<search-item label="年度">
@@ -2,8 +2,49 @@
layout("/layouts/platform.html"){
#-->
<style>
.appeal-search-page .search {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
row-gap: 10px;
}
.appeal-search-page .search .search-item {
width: 100%;
}
.appeal-search-page .search .search-item-label {
width: 76px;
min-width: 76px;
margin-right: 8px;
}
.appeal-search-page .search .search-item-option {
min-width: calc(100% - 76px - 8px);
}
@media screen and (max-width: 1350px) {
.appeal-search-page .search {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 1200px) {
.appeal-search-page .search {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 992px) {
.appeal-search-page .search {
grid-template-columns: 1fr;
}
}
</style>
<div id="app" v-cloak>
<guava ref="guava">
<guava ref="guava" class="appeal-search-page">
<el-card shadow="never">
<search @search="doSearch">
<search-item label="年度">
@@ -91,10 +91,49 @@ layout("/layouts/platform.html"){
.appeal-query-page .table-card {
border-radius: 6px;
}
.appeal-search-page .search {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
row-gap: 10px;
}
.appeal-search-page .search .search-item {
width: 100%;
}
.appeal-search-page .search .search-item-label {
width: 76px;
min-width: 76px;
margin-right: 8px;
}
.appeal-search-page .search .search-item-option {
min-width: calc(100% - 76px - 8px);
}
@media screen and (max-width: 1350px) {
.appeal-search-page .search {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 1200px) {
.appeal-search-page .search {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 992px) {
.appeal-search-page .search {
grid-template-columns: 1fr;
}
}
</style>
<div id="app" v-cloak>
<guava ref="guava" class="appeal-query-page">
<guava ref="guava" class="appeal-query-page appeal-search-page">
<el-card shadow="never">
<search @search="doSearch">
<search-item label="年度">
@@ -2,8 +2,49 @@
layout("/layouts/platform.html"){
#-->
<style>
.appeal-search-page .search {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
row-gap: 10px;
}
.appeal-search-page .search .search-item {
width: 100%;
}
.appeal-search-page .search .search-item-label {
width: 76px;
min-width: 76px;
margin-right: 8px;
}
.appeal-search-page .search .search-item-option {
min-width: calc(100% - 76px - 8px);
}
@media screen and (max-width: 1350px) {
.appeal-search-page .search {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 1200px) {
.appeal-search-page .search {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 992px) {
.appeal-search-page .search {
grid-template-columns: 1fr;
}
}
</style>
<div id="app" v-cloak>
<guava>
<guava class="appeal-search-page">
<el-card shadow="never">
<search @search="doSearch">
<search-item label="类型名称">