系统风格以及部分页面样式变更

frontend/src/views/teachNotice/index.vue

@@ -1,17 +1,5 @@
 <template>
   <div class="app-container teach-notice">
-    <!-- 操作按钮 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
-      </el-col>
-    </el-row>
-
     <!-- 查询条件区域 -->
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
       <el-form-item label="标题" prop="title">
@@ -22,21 +10,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="优先级">
-        <el-input
-          v-model="queryParams.priorityFrom"
-          placeholder="从"
-          type="number"
-          style="width: 100px"
-        />
-        <span class="range-sep">-</span>
-        <el-input
-          v-model="queryParams.priorityTo"
-          placeholder="到"
-          type="number"
-          style="width: 100px"
-        />
-      </el-form-item>
       <el-form-item label="公告类别">
         <el-select
           v-model="queryParams.category"
@@ -49,13 +22,7 @@
             :key="item"
             :label="item"
             :value="item"
-          >
-            <el-checkbox
-              :value="queryParams.category === item"
-              @click.stop.prevent="onCategoryCheck(item)"
-            />
-            <span style="margin-left: 6px">{{ item }}</span>
-          </el-option>
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="发布日期">
@@ -81,34 +48,40 @@
       </el-form-item>
     </el-form>
 
-    <el-alert
-      class="query-tip"
-      title="注意：勾选'选择框'表示启用该项对应的查询条件"
-      type="info"
-      :closable="false"
-      show-icon
-    />
-
     <!-- 数据列表区域 -->
-    <div class="list-title">公告列表</div>
+    <div class="list-heading">
+      <div class="list-title">公告列表</div>
+      <el-button
+        type="primary"
+        icon="el-icon-plus"
+        size="mini"
+        @click="handleAdd"
+      >新增</el-button>
+    </div>
     <el-table v-loading="loading" :data="noticeList" border :height="tableHeight">
       <el-table-column label="序号" type="index" align="center" width="70" />
-      <el-table-column label="发布时间" align="center" min-width="160">
+      <el-table-column label="发布时间" align="center" width="165">
         <template slot-scope="scope">{{ formatTime(scope.row.publishTime) }}</template>
       </el-table-column>
-      <el-table-column label="标题" align="center" prop="title" min-width="280" :show-overflow-tooltip="true" />
+      <el-table-column label="标题" align="left" prop="title" min-width="300" :show-overflow-tooltip="true" />
       <el-table-column label="公告状态" align="center" width="100">
         <template slot-scope="scope">
           <el-tag :type="statusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="公告类别" align="center" prop="category" width="100" />
-      <el-table-column label="优先级" align="center" prop="priority" width="90" />
-      <el-table-column label="阅读次数" align="center" prop="readCount" width="100" />
+      <el-table-column label="公告类别" align="center" prop="category" width="110" />
+      <el-table-column label="优先级" align="center" prop="priority" width="80" />
+      <el-table-column label="阅读次数" align="center" prop="readCount" width="90" />
       <el-table-column label="接收/已读" align="center" width="110">
         <template slot-scope="scope">{{ scope.row.recipientCount }}/{{ scope.row.readerCount }}</template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        width="300"
+        fixed="right"
+        class-name="small-padding fixed-width action-column"
+      >
         <template slot-scope="scope">
           <el-button
             type="text"
@@ -248,8 +221,6 @@ export default {
         pageNum: 1,
         pageSize: 10,
         title: undefined,
-        priorityFrom: undefined,
-        priorityTo: undefined,
         category: undefined,
         publishDateFrom: undefined,
         publishDateTo: undefined
@@ -300,10 +271,6 @@ export default {
       if (status === '已下架') return 'info'
       return 'warning'
     },
-    /** 公告类别复选框：点击即选中该项作为查询条件 */
-    onCategoryCheck(item) {
-      this.queryParams.category = this.queryParams.category === item ? undefined : item
-    },
     /** 查询按钮 */
     handleQuery() {
       this.queryParams.pageNum = 1
@@ -315,8 +282,6 @@ export default {
         pageNum: 1,
         pageSize: 10,
         title: undefined,
-        priorityFrom: undefined,
-        priorityTo: undefined,
         category: undefined,
         publishDateFrom: undefined,
         publishDateTo: undefined
@@ -412,24 +377,27 @@ export default {
 
 <style scoped lang="scss">
 .teach-notice {
-  .mb8 {
-    margin-bottom: 8px;
-  }
   .range-sep {
     margin: 0 8px;
     color: #909399;
   }
-  .query-tip {
-    margin: 4px 0 16px;
+  .list-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 12px;
   }
   .list-title {
     font-size: 16px;
     font-weight: 600;
     color: #303133;
-    margin-bottom: 12px;
     padding-left: 10px;
     border-left: 4px solid var(--edu-green-primary);
   }
+  ::v-deep .action-column .cell {
+    white-space: nowrap;
+  }
   .detail-body {
     padding: 0 8px;
     .detail-row {
@@ -454,5 +422,16 @@ export default {
       }
     }
   }
+
+  @media (max-width: 768px) {
+    .list-heading {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .list-heading .el-button {
+      width: 100%;
+    }
+  }
 }
-</style>
+</style>