样式修改 lx

src/views/middle.vue

@@ -87,11 +87,11 @@
             </div>
             <el-table
               :data="currentTableData"
-              border
-              style="width: 100%"
+              :header-cell-style="rowClass"
+              style="width: 100%; margin-top: 12px"
               height="300"
             >
-              <el-table-column prop="id" label="序号" />
+              <el-table-column prop="NO" label="序号" width="50" />
               <el-table-column prop="dmRoomDevice.name" label="通行地点" />
               <el-table-column prop="accessTime" label="时间" />
             </el-table>
@@ -104,13 +104,13 @@
             </div>
             <el-table
               :data="consumptionTableData"
-              border
-              style="width: 100%"
+              :header-cell-style="rowClass"
+              style="width: 100%; margin-top: 12px"
               height="300"
             >
-              <el-table-column prop="id" label="序号" />
-              <el-table-column prop="termName" label="消费设备" />
-              <el-table-column prop="money" label="金额" />
+              <el-table-column prop="NO" label="序号" width="50" />
+              <el-table-column prop="termName" label="消费设备" width="80" />
+              <el-table-column prop="money" label="金额" width="60" />
               <el-table-column prop="createDate" label="时间" />
             </el-table>
           </el-card>
@@ -122,11 +122,11 @@
             </div>
             <el-table
               :data="visitorTableData"
-              border
-              style="width: 100%"
+              :header-cell-style="rowClass"
+              style="width: 100%; margin-top: 12px"
               height="300"
             >
-              <el-table-column prop="id" label="序号" />
+              <el-table-column prop="NO" label="序号" width="50" />
               <el-table-column prop="visitor_name" label="访客名称" />
               <el-table-column prop="start_time" label="到访时间" />
             </el-table>
@@ -245,6 +245,10 @@ export default {
     this.getUser(this.token)
   },
   methods: {
+    /** 表头颜色 */
+    rowClass() {
+      return 'background: rgba(0,0,0,0.03);'
+    },
     getUser(token) {
       if (!localStorage.getItem('dmUser')) {
         ssoGetUser(token).then((res) => {
@@ -347,6 +351,9 @@ export default {
         )
         .then((res) => {
           this.currentTableData = res.data.data.content
+          this.currentTableData.forEach((element, index) => {
+            element.NO = index + 1
+          })
         })
     },
     orderRecord(accToken, nonce, timestamp, cardId) {
@@ -365,6 +372,9 @@ export default {
         )
         .then((res) => {
           this.consumptionTableData = res.data.data.content
+          this.consumptionTableData.forEach((element, index) => {
+            element.NO = index + 1
+          })
         })
     },
     getVisitors(accToken, nonce, timestamp, userId) {
@@ -381,6 +391,9 @@ export default {
         )
         .then((res) => {
           this.visitorTableData = res.data.data
+          this.visitorTableData.forEach((element, index) => {
+            element.NO = index + 1
+          })
         })
     },
     sso(url) {
@@ -555,8 +568,8 @@ export default {
             display: flex;
 
             img {
-              width: 15px;
-              height: 15px;
+              width: 25px;
+              height: 25px;
               margin-right: 5px;
               padding: 3px;
               border-radius: 50%;