diff --git a/src/components/header.vue b/src/components/header.vue
index 26a5874..85309ac 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -93,11 +93,12 @@ header
     // font-family "PangMenZhengDao"
     font-family "YouSheBiaoTiHei"
     font-size 50px
-    line-height 100px
+    line-height 88px
     color #fff
     font-weight lighter
     text-align center
     letter-spacing 5px
+    padding-left 5px
     text-shadow 0 8px 8px rgba(0,0,0,0.30)
 .data_box
   position absolute
@@ -113,12 +114,12 @@ header
   color #fff
 .tiem_item
   float left
-  font-size 32px
+  font-size 20px
   line-height 37px
   color #fff
 .colon
   float left
-  font-size 32px
+  font-size 20px
   line-height 37px
   color #fff
 </style>
diff --git a/src/config/getData2.js b/src/config/getData2.js
index a60290c..e74984b 100644
--- a/src/config/getData2.js
+++ b/src/config/getData2.js
@@ -9,3 +9,5 @@ export const kilnDetail = () => post('api/cockpit/kilnDetail', {})
 export const screenTableData = () => post('api/cockpit/screenTableData', {})
 // 窑看板
 export const klineInfo = () => post('api/cockpit/klineInfo', {})
+// 料仓监控
+export const queryliaocang = () => post('api/hand/queryliaocang', {})
diff --git a/src/config/mork2.js b/src/config/mork2.js
index d9aa75b..90e3c9e 100644
--- a/src/config/mork2.js
+++ b/src/config/mork2.js
@@ -2533,3 +2533,7 @@ export const klineInfo = () => {
   }
   return res
 }
+export const queryliaocang = () => {
+  let res = [{point_name: 'LC16'}]
+  return res
+}
diff --git a/src/images/screen1/item_10.png b/src/images/screen1/item_10.png
new file mode 100644
index 0000000..73e66e4
Binary files /dev/null and b/src/images/screen1/item_10.png differ
diff --git a/src/images/screen1/item_11.png b/src/images/screen1/item_11.png
new file mode 100644
index 0000000..b438a92
Binary files /dev/null and b/src/images/screen1/item_11.png differ
diff --git a/src/images/screen1/item_12.png b/src/images/screen1/item_12.png
new file mode 100644
index 0000000..84c2a92
Binary files /dev/null and b/src/images/screen1/item_12.png differ
diff --git a/src/images/screen1/item_8.png b/src/images/screen1/item_8.png
new file mode 100644
index 0000000..ea3fb57
Binary files /dev/null and b/src/images/screen1/item_8.png differ
diff --git a/src/images/screen1/item_9.png b/src/images/screen1/item_9.png
new file mode 100644
index 0000000..fce7929
Binary files /dev/null and b/src/images/screen1/item_9.png differ
diff --git a/src/pages/modules/board/StockBin.vue b/src/pages/modules/board/StockBin.vue
index dfc7545..4c90015 100644
--- a/src/pages/modules/board/StockBin.vue
+++ b/src/pages/modules/board/StockBin.vue
@@ -1,52 +1,68 @@
 <template>
   <div class="st_wraper">
     <div class="state_wraper">
-      <div class="state_icon bg_col_1"></div>
-      <div class="state_title">满货位</div>
-      <div class="state_icon bg_col_2"></div>
-      <div class="state_title">空货位</div>
+      <div class="state_title state_title_1 mgr20">A/B/C区：</div>
+      <div class="state_icon mgr20 bg_col_1"></div>
+      <div class="state_title mgr20">0-2000KG</div>
+      <div class="state_icon mgr20 bg_col_2"></div>
+      <div class="state_title mgr20">2000-6000KG</div>
+      <div class="state_icon mgr20 bg_col_3"></div>
+      <div class="state_title mgr60">6000KG以上</div>
+      <div class="state_title state_title_1 mgr20">Z区：</div>
+      <div class="state_icon mgr20 bg_col_1"></div>
+      <div class="state_title mgr20">0KG以下</div>
+      <div class="state_icon mgr20 bg_col_2"></div>
+      <div class="state_title">0KG以上</div>
     </div>
     <div class="st_content">
       <div class="st_item">
-        <div class="txt">A区</div>
-        <div class="p_wraper">
-          <div class="p_item" v-for="(e, i) in dataList[0]" :key="'a'+ i">
-            <div class="p_item_i">
-              <p class="p1">{{ e.point_name }}</p>
-              <p class="p2">{{ e.qty }}</p>
+        <div class="st_item_i">
+          <div class="txt">C<br>区</div>
+          <div class="p_wraper">
+            <div class="p_item" v-for="(e, i) in dataList[2]" :key="'a'+ i">
+              <div class="p_item_i" :class="{'item_bg_1': Number(e.qty) >= 0 && Number(e.qty) < 2000, 'item_bg_2': Number(e.qty) >= 2000 && Number(e.qty) < 6000, 'item_bg_3': Number(e.qty) >= 6000}">
+                <p class="p1">{{ e.point_name }}</p>
+                <p class="p2">{{ e.qty }}</p>
+              </div>
             </div>
           </div>
         </div>
       </div>
       <div class="st_item">
-        <div class="txt">B区</div>
-        <div class="p_wraper">
-          <div class="p_item" v-for="(e, i) in dataList[1]" :key="'b'+ i">
-            <div class="p_item_i">
-              <p class="p1">{{ e.point_name }}</p>
-              <p class="p2">{{ e.qty }}</p>
+        <div class="st_item_i">
+          <div class="txt">B<br>区</div>
+          <div class="p_wraper">
+            <div class="p_item" v-for="(e, i) in dataList[1]" :key="'b'+ i">
+              <div class="p_item_i" :class="{'item_bg_1': Number(e.qty) >= 0 && Number(e.qty) < 2000, 'item_bg_2': Number(e.qty) >= 2000 && Number(e.qty) < 6000, 'item_bg_3': Number(e.qty) >= 6000}">
+                <p class="p1">{{ e.point_name }}</p>
+                <p class="p2">{{ e.qty }}</p>
+              </div>
             </div>
           </div>
         </div>
       </div>
       <div class="st_item">
-        <div class="txt">C区</div>
-        <div class="p_wraper">
-          <div class="p_item" v-for="(e, i) in dataList[2]" :key="'c'+ i">
-            <div class="p_item_i">
-              <p class="p1">{{ e.point_name }}</p>
-              <p class="p2">{{ e.qty }}</p>
+        <div class="st_item_i">
+          <div class="txt">A<br>区</div>
+          <div class="p_wraper">
+            <div class="p_item" v-for="(e, i) in dataList[0]" :key="'c'+ i">
+              <div class="p_item_i" :class="{'item_bg_1': Number(e.qty) >= 0 && Number(e.qty) < 2000, 'item_bg_2': Number(e.qty) >= 2000 && Number(e.qty) < 6000, 'item_bg_3': Number(e.qty) >= 6000}">
+                <p class="p1">{{ e.point_name }}</p>
+                <p class="p2">{{ e.qty }}</p>
+              </div>
             </div>
           </div>
         </div>
       </div>
       <div class="st_item">
-        <div class="txt">Z区</div>
-        <div class="p_wraper">
-          <div class="p_item" v-for="(e, i) in dataList[3]" :key="'z'+ i" :class="{'p_item_active': e.point_status === '2'}">
-            <div class="p_item_i">
-              <p class="p1">{{ e.point_name }}</p>
-              <p class="p2">{{ e.qty }}</p>
+        <div class="st_item_i">
+          <div class="txt">Z<br>区</div>
+          <div class="p_wraper">
+            <div class="p_item" v-for="(e, i) in dataList[3]" :key="'z'+ i" :class="{'p_item_active': e.point_status === '2'}">
+              <div class="p_item_i" :class="{'item_bg_1': Number(e.qty) >= 0 && Number(e.qty) < 2000, 'item_bg_2': Number(e.qty) >= 2000 && Number(e.qty) < 6000, 'item_bg_3': Number(e.qty) >= 6000}">
+                <p class="p1">{{ e.point_name }}</p>
+                <p class="p2">{{ e.qty }}</p>
+              </div>
             </div>
           </div>
         </div>
@@ -67,13 +83,33 @@ export default {
   created () {
     this.refresh()
     for (let i = 0; i < 4; i++) {
-      if (i < 3) {
+      if (i === 0) {
         for (let j = 0; j < 16; j++) {
-          this.dataList[i].push({point_name: `${i + 1}-${j + 1}`, qty: '100', point_status: '1'})
+          let qty = Math.random()
+          qty = qty.toFixed(4) * 10000
+          qty = qty.toFixed(0)
+          this.dataList[i].push({point_name: `A${16 - j}`, qty: qty, point_status: '1'})
+        }
+      } else if (i === 1) {
+        for (let j = 0; j < 16; j++) {
+          let qty = Math.random()
+          qty = qty.toFixed(4) * 10000
+          qty = qty.toFixed(0)
+          this.dataList[i].push({point_name: `B${16 - j}`, qty: qty, point_status: '1'})
+        }
+      } else if (i === 2) {
+        for (let j = 0; j < 16; j++) {
+          let qty = Math.random()
+          qty = qty.toFixed(4) * 10000
+          qty = qty.toFixed(0)
+          this.dataList[i].push({point_name: `C${16 - j}`, qty: qty, point_status: '1'})
         }
       } else {
         for (let j = 0; j < 12; j++) {
-          this.dataList[i].push({point_name: `${i + 1}-${j + 1}`, qty: '100', point_status: '2'})
+          let qty = Math.random()
+          qty = qty.toFixed(4) * 10000
+          qty = qty.toFixed(0)
+          this.dataList[i].push({point_name: `Z${12 - j}`, qty: qty, point_status: '2'})
         }
       }
     }
@@ -106,17 +142,23 @@ export default {
 .st_wraper
   position relative
   _wh(100%, 100%)
-  background center / 100% 100% url('../../../images/bg-center.png') no-repeat
-  padding 20px 20px 0 20px
+  background center / 100% 100% url('../../../images/screen1/item_8.png') no-repeat
+  padding 30px 30px 0px 30px
 .state_wraper
   _wh(100%, 20px)
   _fj(row, center)
-  margin-bottom 20px
 .state_icon
   _wh(16px, 16px)
 .state_title
-  _font(20px, 20px, #fff,,)
-  margin 0 60px 0 20px
+  _font(18px, 20px, #fff,,)
+.state_title_1
+  font-weight 700
+  font-size 20px
+  color #63bbf6
+.mgr20
+  margin-right 20px
+.mgr60
+  margin-right 60px
 .bg_col_1
   border-radius 4px
   box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
@@ -124,44 +166,60 @@ export default {
   background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
 .bg_col_2
   border-radius 4px
-  box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
-  border 1px solid rgba(42, 189, 251, 50%)
-  background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
+  box-shadow 0px 0px 12px 4px rgba(30, 198, 167, .4)
+  border 1px solid rgba(30, 198, 167, 50%)
+  background radial-gradient(circle at 50% 100%, rgba(30, 198, 167, 50%), #06302b, #05322c);
+.bg_col_3
+  border-radius 4px
+  box-shadow 0px 0px 12px 4px rgba(241, 195, 129, .4)
+  border 1px solid rgba(241, 195, 129, 50%)
+  background radial-gradient(circle at 50% 100%, rgba(241, 195, 129, 50%), #533608, #3f2e13);
 .st_content
   _wh(100%, calc(100% - 40px))
-  _fj(row)
+  margin 10px 0
 .st_item
-  _wh(22%, 100%)
+  _wh(100%, calc(25% - 30px))
+  background top center / 100% 25px url('../../../images/screen1/item_9.png') no-repeat
+  padding-top 25px
+  margin-bottom 30px
+.st_item_i
+  _fj(row)
+  _wh(100%, 100%)
+  background linear-gradient(to bottom, rgba(0, 51, 115, 10%), #003373)
+  padding 20px
 .txt
-  _font(26px, 40px, #fff,,center)
+  width 50px
+  _font(26px, 40px, #63bbf6,,left)
   font-family: "YouSheBiaoTiHei"
-  margin-bottom 20px
 .p_wraper
-  _wh(100%, calc(100% - 60px))
-  _fj(row, flex-start, flex-start)
+  _wh(calc(100% - 50px), 100%)
+  _fj(row, flex-start)
   align-content: flex-start
   flex-wrap wrap
 .p_item
-  _wh(30%, 14%)
-  // padding 14px
-  margin-bottom 4.5%
+  _wh(5.5%, 100%)
   border-radius 4px
-  background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
-  border 2px solid rgba(42, 189, 251, 20%)
+  // background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
+  // border 4px solid rgba(42, 189, 251, 20%)
+  margin: 0 0.375%
   overflow hidden
-  &:nth-child(3n+2)
-    margin 0 5% 2% 5%
 .p_item_i
   _wh(100%, 100%)
-  background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
-  background-size 12px 12px
-  background-repeat repeat
-  _fj(,center)
+  // background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
+  // background-size 12px 12px
+  // background-repeat repeat
+  padding 10px 5px 0 5px
+.item_bg_1
+  background center / 100% 100% url('../../../images/screen1/item_12.png') no-repeat
+.item_bg_2
+  background center / 100% 100% url('../../../images/screen1/item_10.png') no-repeat
+.item_bg_3
+  background center / 100% 100% url('../../../images/screen1/item_11.png') no-repeat
 .p_item_active
-  background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
-  border 2px solid rgba(181, 95, 78, 30%)
+  // background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
+  // border 2px solid rgba(181, 95, 78, 30%)
   .p_item_i
-    background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
+    // background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
 .p1
   _wh(100%, 40%)
   _fj(,center)
@@ -175,5 +233,5 @@ export default {
   _fj(,center)
   _font(18px, 18px, #EFF2FF,,center)
   font-family: "SourceHanSansCN-Bold";
-  background bottom center / 40% auto url('../../../images/out.png') no-repeat
+  // background bottom center / 40% auto url('../../../images/out.png') no-repeat
 </style>