样式

src/assets/css/reset.css

@@ -144,3 +144,9 @@ div, p {
 .jccenter {
 	justify-content: center;
 }
+.popshow {
+	transform: translateY(0);
+}
+.pophide {
+	transform: translateY(100%);
+}

src/pages/board.vue

@@ -7,7 +7,7 @@
           <div class="zd-row jccenter yj_name">{{ e.point_code }}</div>
           <div class="yj_info_wraper">
             <div class="zd-row flexcol jccenter yj_info">
-              <div class="yj_info_p1">{{ e.point_status }}</div>
+              <div class="yj_info_p1">{{ ['待机', '生产中', '故障'][Number(e.point_status) - 1] }}</div>
               <div class="yj_info_p2">压机状态</div>
             </div>
             <div class="zd-row flexcol jccenter yj_info">
@@ -392,19 +392,23 @@ footer
   background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
 .yj_info_wraper
   height calc(100% - .45rem)
-  padding .1rem
+  padding 0 .1rem
 .yj_info
   height calc(100% / 6)
   background center bottom / 100% 3px url(../assets/images/screen1/line_1.png) no-repeat
+  &:last-child
+    background transparent
 .yj_info_p1
   width 100%
   font-size: .18rem;
   line-height: .18rem;
+  height: .18rem;
   color: #FFFFFF;
   letter-spacing: 1.88px;
   text-align: center;
   font-weight: 700;
   margin-bottom: 8px;
+  overflow: hidden;
 .yj_info_p2
   width 100%
   font-size: .14rem
@@ -435,7 +439,6 @@ footer
 .left_wrap
   width 30%
   height 100%
-  margin-right .32rem
   background-color rgba(6,11,24,0.70)
 .right_wrap
   width calc(70% - .32rem)