修改样式

src/components/Hotel/HotelQueryList.vue

@@ -52,15 +52,15 @@
             </td>
             <td>
                 <div class="Hotel_kong">价格</div>
-                <div class="Hotel_kong" style="min-width:60px;">空房</div>
+                <div class="Hotel_kong" style="min-width:60px;">总/用/剩</div>
                 <div class="Hotel_kong">超定</div>
             </td>
             <td v-for="subItem in item.subList">       
-               <div class="Hotel_kong Com_hoteldiv" :class="{'noKucun':subItem.Status==0}">
+               <div class="Hotel_kong Com_hoteldiv" :class="{'noKucun':subItem.Status==0,'classHong':subItem.InventoryType==1,
+                'classWang':subItem.InventoryType==2,'classPing':subItem.InventoryType==3,'classDan':subItem.InventoryType==4,'classTe':subItem.InventoryType==5}">
                   {{subItem.CostPrice}}</div>
-                <div class="Hotel_kong Com_hoteldiv" :class="{'noKucun':subItem.Status==0}">
-            
-                  {{subItem.RemainingInventory}}</div>
+                <div class="Hotel_kong Com_hoteldiv">
+                  {{subItem.Inventory}}/{{subItem.UseInventory}}/{{subItem.RemainingInventory}}</div>
                 <div class="Hotel_kong Com_hoteldiv">
                   <span v-if="subItem.UseInventory-subItem.Inventory>0" style="color:red;">
                     {{subItem.UseInventory-subItem.Inventory}}
@@ -145,7 +145,30 @@
         var weekDay = ["天", "一", "二", "三", "四", "五", "六"];  
         var myDate = new Date(Date.parse(dateStr));  
         return weekDay[myDate.getDay()]
-      }
+      },
+      //获取颜色状态
+      // getClass(status) {
+      //   var classStr = "";
+      //   switch (status) {
+      //     case 1:
+      //       classStr = "classHong";
+      //       break;
+      //     case 2:
+      //       classStr = "classWang";
+      //       break;
+      //     case 3:
+      //       classStr = "classPing";
+      //       break;
+      //     case 4:
+      //       classStr = "classDan";
+      //       break;
+      //     case 5:
+      //       classStr = "classTe";
+      //       break;
+      //   }
+      //   return classStr;
+      // },
+
     },
     mounted() {
       this.GetHotelList();
@@ -155,9 +178,25 @@
 </script>
 
 <style>
+  .classHong{
+    background-color: rgb(255, 55, 55);
+  }
+  .classWang{
+    background-color: rgb(255, 153, 204);
+  }
+  .classPing{
+    background-color: rgb(188, 214, 238);
+  }
+  .classDan{
+    background-color: rgb(221, 221, 221);
+  }
+  .classTe{
+    background-color: rgb(2, 247, 142);
+  }
   .HouseTypeList {
     background: #ccc;
     width:100%;
+    margin-top:20px;
   }
   .Com_hoteldiv{
     min-width: 40px;
@@ -190,4 +229,7 @@
   .HouseTypeList tr td {
     font-size: 12px;
   }
+  .hotelProductManage2_tableBox span{
+    margin:0 10px 10px 0;
+  }
 </style>