修改样式

src/components/Supplier/roomQuery.vue

 <template>
-  <div>
+  <div class="roomQuery">
     <div class="query-box" style="border-bottom: none;">
       <ul style="position:relative;">
         <li>
@@ -102,8 +102,12 @@
       </ul>
     </div>
     <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " class="ownScrollbarStyle">
-      <div style="font-size:12px;padding:2px 4px 3px 20px; color:red">注意事项:每次导出数据最好不要超过一个月。</div><br/>
-      <div style="font-size:12px;padding:2px 4px 3px 20px;">颜色说明: <a>未操作</a> <a>操作中</a> <a>操作完成</a> <a>机位数和人数不相符</a> 。</div>
+      <div style="font-size:12px;padding:2px 4px 3px 20px;">
+        <div style="display:inline-block;color:red">注意事项:每次导出数据最好不要超过一个月。</div>
+        <div class="rq_comSpan" style="display:inline-block;">颜色说明: 
+          <span class="rq_span1">未操作</span><span class="rq_span2">操作中</span><span class="rq_span3">操作完成</span><span class="rq_span4">机位数和人数不相符</span>
+        </div>
+      </div><br/>
       <table border="0" cellspacing="1" cellpadding="0" class="roomQuery_SupplierTable" v-loading='loading'>
         <tr>
           <th width="100">序号</th>
@@ -114,6 +118,7 @@
           <th width="100">时间</th>
           <th width="150">酒店</th>
           <th width="100">酒店使用情况</th>
+          <th width="40">状态</th>
           <th width="100">操作</th>
         </tr>
         <tr v-if="dataList.length==0">
@@ -176,16 +181,20 @@
                   <template v-else-if="childItem.SupplierHotelStatus==2"><a style="color:blue">操作完成</a></template>
                 </template>
               </td>
+              <td v-if="childIndex==0" :rowspan="subItem.hotelList.length">
+                <span v-if="subItem.TCState==3&&subItem.Status==1">正常</span>
+                <span v-else>取消</span>
+              </td>
               <td v-if="childIndex==0"
                 :rowspan="subItem.SupplierRemarks!=''?subItem.hotelList.length+1:subItem.hotelList.length">
                 <el-tooltip class="item" effect="dark" content="操作信息" placement="top-start">
-                  <el-popover placement="bottom" width="460" trigger="click">
+                  <el-popover placement="bottom" width="500" trigger="click">
                     <table>
                       <tr>
-                        <th width="100">
+                        <th width="90">
                           时间
                         </th>
-                        <th width="150">
+                        <th width="160">
                           酒店
                         </th>
                         <th width="100">
@@ -200,7 +209,7 @@
                           <td>
                             {{opItem.CheckInDateStr}}
                           </td>
-                          <td>
+                          <td style="padding-right:10px;">
                             {{opItem.NewHotelName}}
                           </td>
                           <td>
@@ -428,6 +437,7 @@
           if (res.data.resultCode == 1) {
             this.total = res.data.data.count;
             this.dataList = res.data.data.pageData;
+            console.log(this.dataList,'datalist');
           } else {
             this.$message.error(res.data.message)
           }
@@ -626,5 +636,28 @@
     color: red;
     padding-left: 5px;
   }
+  .roomQuery .rq_comSpan{
+    font-size:14px;
+    margin-left: 20px;
+  } 
+  .roomQuery .rq_comSpan>span{
+    display: inline-block;
+    padding:2px 4px;
+    color:#fff;
+    border-radius:5px;
+    margin-right:10px;
+  }
+  .roomQuery .rq_span1{
+    background-color: #333;  
+  }
+  .roomQuery .rq_span2{
+    background-color: #7abd53;  
+  }
+  .roomQuery .rq_span3{
+    background-color: blue;  
+  }
+  .roomQuery .rq_span4{
+    background-color: red;  
+  }
 
 </style>