样式调整

src/pages/index/components/ip_white_list.vue

@@ -222,8 +222,14 @@ export default {
   .label{
     text-align: right;
   }
-  /deep/ .el-input__inner{
-    background: white;
+  .form-div{
+    /deep/ .el-input__inner{
+      height: 35px;
+      width: 90%;
+      border: 1px solid #a6a5a5;
+      color: #fff;
+      background: #2d3744;
+    }
   }
 }
 </style>

src/pages/index/components/message.vue

@@ -7,13 +7,14 @@
       <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
       </el-table-column>
       <el-table-column label="操作" width="150">
-      <div slot-scope="scope">
-        <el-button  @click="handleDetail(scope.row)" type="primary" size="mini">详情</el-button>
-      </div>
-    </el-table-column>
+        <div slot-scope="scope">
+          <el-button @click="handleDetail(scope.row)" type="primary" size="mini">详情</el-button>
+        </div>
+      </el-table-column>
     </el-table>
     <div class="table-pagination">
-      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total"
+                     @current-change="handlePageChange"
                      :current-page.sync="pageNum" :page-size.sync="pageSize">
       </el-pagination>
     </div>
@@ -22,11 +23,17 @@
       :visible.sync="dialogVisible"
       width="50%"
       custom-class="audit-dialog">
-      <div class="form-div">
-        <el-input disabled v-model="selRow.title"></el-input>
-        <el-input type="textarea" disabled v-model="selRow.messageType"></el-input>
-        <el-input disabled v-model="selRow.publicTime"></el-input>
-      </div>
+      <el-form style="height: 120px" class="form-div" label-position="left" label-width="80px" :model="selRow">
+        <el-form-item label="标题">
+          <el-input disabled v-model="selRow.title"/>
+        </el-form-item>
+        <el-form-item label="消息类型">
+          <el-input disabled v-model="selRow.messageType"/>
+        </el-form-item>
+        <el-form-item label="发布时间">
+          <el-input disabled v-model="selRow.publicTime"/>
+        </el-form-item>
+      </el-form>
     </el-dialog>
   </div>
 </template>
@@ -51,83 +58,77 @@ export default {
           key: 'publicTime'
         },
       ],
-      tableData: [{"title":'系统升级',"messageType":'公告',"publicTime":'2023-12-29 10:00:00'},
-        {"title":'预警提示',"messageType":'系统通知',"publicTime":'2023-12-25 10:00:00'},
-        {"title":'故障提醒',"messageType":'系统通知',"publicTime":'2023-12-29 10:00:00'},],
+      tableData: [{"title": '系统升级', "messageType": '公告', "publicTime": '2023-12-29 10:00:00'},
+        {"title": '预警提示', "messageType": '系统通知', "publicTime": '2023-12-25 10:00:00'},
+        {"title": '故障提醒', "messageType": '系统通知', "publicTime": '2023-12-29 10:00:00'},],
       total: 3,
       pageSize: 10,
       pageNum: 1,
-      radio: '2',
       dialogVisible: false,
       selRow: {},
-      searchWords: undefined
     }
   },
   mounted() {
     this.getTableData()
   },
-  watch: {
-  },
+  watch: {},
   methods: {
     handlePageChange() {
       this.getTableData()
     },
-    handleAudit(row) {
-      this.selRow = row
-      this.dialogVisible = true
-    },
-    handleCancelApply(row) {
-      console.log('enter handle cancel apply')
-    },
     handleDetail(row) {
       this.selRow = row
       this.dialogVisible = true
     },
-    handleConfirm() {
-      const {id} = this.selRow
-      console.log('radio', this.radio)
-      api.applyResource({id, applyType: this.radio}).then(res => {
-        if(res.success) {
-          this.dialogVisible = false
-          this.$message({
-            message: '审核成功!',
-            type: 'success'
-          })
-          this.getTableData()
-        }
-      })
-    },
     getTableData() {
-      const {pageNum, pageSize, searchWords} = this
-      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
-        this.tableData = []
-        res.data.records.map((item, index) => {
-          const newItem = {...item}
-          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
-          this.tableData.push(newItem)
-        })
+      const {pageNum, pageSize} = this
+      api.messageListByPage({pageNum, pageSize}).then(res => {
+        this.tableData = res.data.records || []
         this.total = res.data.total
       })
     },
-    getApplyTypeText(val) {
-      if (!val){
-        return '未申请'
-      }
-      const textMap = {
-        1: '待审批',
-        2: '审批通过',
-        3: '审批驳回'
-      }
-      return textMap[val]
-    },
-    handleSearch() {
-      this.pageNum = 1
-      this.getTableData()
-    }
   }
 }
 </script>
-<style  lang="scss" scoped>
+<style lang="scss" scoped>
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+/deep/ .form-wrapper .el-button {
+  background: linear-gradient(90deg,#0158d9,#3c97e4);
+  width: 100px;
+  height: 40px;
+}
+
 .body-wrapper {
   padding: 20px;
   background: #0c0c0c;
@@ -143,17 +144,12 @@ export default {
     text-align: right;
   }
   .form-div{
-    width: 90%;
     /deep/ .el-input__inner{
-      background: white;
       height: 35px;
-      color: black;
-      margin-bottom: 10px;
-    }
-    /deep/ .el-textarea.is-disabled .el-textarea__inner {
-      background: white;
-      color: black;
-      margin-bottom: 10px;
+      width: 90%;
+      border: 1px solid #a6a5a5;
+      color: #fff;
+      background: #2d3744;
     }
   }
 }

src/pages/index/components/support.vue

@@ -223,6 +223,7 @@ export default {
       width: 90%;
       border: 1px solid #a6a5a5;
       color: #fff;
+      background: #2d3744;
     }
   }
 }