界面美化

src/views/ProcessManagement/MaterialVerificationMaintenance/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card class="topCard">
-      <div class="topDiv">
+      <div class="topDiv materialToolbar">
         <span style="margin-left: 10px">{{ $t('materialVerificationMaintenance.stationNumberLabel') }}</span>
         <el-select v-model="stationNumberValue" clearable :placeholder="$t('materialVerificationMaintenance.selectStationNumber')" size="small" style="width: 250px" @change="searchOrder">
           <el-option
@@ -46,6 +46,7 @@
         <!--        <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">物料导入</el-button>-->
         <el-button type="warning" plain size="small" icon="el-icon-download" @click="exportExcel()">{{ $t('materialVerificationMaintenance.exportMaterial') }}</el-button>
       </div>
+      <div class="tablePanel">
       <el-table
         v-loading="loading"
         ref="multipleTable"
@@ -149,6 +150,7 @@
           </template>
         </el-table-column>
       </el-table>
+      </div>
     </el-card>
     <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :title="$t('materialVerificationMaintenance.createMaterial')" center style="min-height: 200px;" width="800px">
       <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px">
@@ -1239,6 +1241,16 @@ export default {
 .topDiv{
   margin-bottom: 10px;
 }
+
+.materialToolbar {
+  align-items: flex-end;
+}
+
+.tablePanel {
+  padding-top: 4px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(243,248,252,0.92) 100%);
+}
 .el-select{
   width:200px
 }
@@ -1273,4 +1285,8 @@ export default {
 ::v-deep.el-input.is-disabled .el-input__inner{
   background-color: white!important;
 }
+
+::v-deep .materialToolbar .el-button {
+  margin-bottom: 2px;
+}
 </style>