首页

src/assets/css/mixin.styl

@@ -5,16 +5,14 @@ $gray1 = #8B90A6
 $orange = #F96700
 $green2 = #65d837
 
-// .green
+.green
-//   background-color $green
+  background-color #11ff0d
-// .yellow
+.yellow
-//   background-color $yellow
+  background-color #fdfd0f
-// .gray
+.gray
-//   background-color $gray
+  background-color #bfbfbf
-// .orange
+.red
-//   background-color $orange
+  background-color #ff1016
-// .green2
-//   background-color $green2
 
 //宽高
 _wh(w, h)

src/pages/modules/homepage/one.vue

@@ -7,32 +7,6 @@
         </div>
         <div class="n_body_container">
             <div class="n_body_container_wraper">
-                <div class="n_left_content">
-                    <div class="item_wrap">
-                        <div class="item_tip item_tip_bg_s">
-                            <div class="item_tip_left">当日混料生产</div>
-                        </div>
-                        <div class="item_content">
-                            <div id="home_echart_1" style="width: 100%; height: 100%;"></div>
-                        </div>
-                    </div>
-                    <div class="item_wrap">
-                        <div class="item_tip item_tip_bg_s">
-                            <div class="item_tip_left">当日压制生产</div>
-                        </div>
-                        <div class="item_content">
-                            <div id="home_echart_2" style="width: 100%; height: 100%;"></div>
-                        </div>
-                    </div>
-                    <div class="item_wrap">
-                        <div class="item_tip item_tip_bg_s">
-                            <div class="item_tip_left">当日成品情况</div>
-                        </div>
-                        <div class="item_content">
-                            <div id="home_echart_3" style="width: 100%; height: 100%;"></div>
-                        </div>
-                    </div>
-                </div>
                 <div class="n_right_content">
                     <div class="right_wrap">
                       <div v-if="MixMachineList.length > 0" class="machine_wrap hlj_s_wrap">
@@ -420,6 +394,38 @@
                 </div>
             </div>
         </div>
+        <div class="n_left_content">
+          <div class="item_wrap">
+              <div class="item_tip item_tip_bg_s">
+                  <div class="item_tip_left">当日混料生产</div>
+              </div>
+              <div class="item_content">
+                  <div id="home_echart_1" style="width: 100%; height: 100%;"></div>
+              </div>
+          </div>
+          <div class="item_wrap">
+              <div class="item_tip item_tip_bg_s">
+                  <div class="item_tip_left">当日压制生产</div>
+              </div>
+              <div class="item_content">
+                  <div id="home_echart_2" style="width: 100%; height: 100%;"></div>
+              </div>
+          </div>
+          <div class="item_wrap">
+              <div class="item_tip item_tip_bg_s">
+                  <div class="item_tip_left">当日成品情况</div>
+              </div>
+              <div class="item_content">
+                  <div id="home_echart_3" style="width: 100%; height: 100%;"></div>
+              </div>
+          </div>
+        </div>
+        <!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
+        <div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
+        <div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
+        <div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
+        <div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
+        <div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div> -->
     </div>
 </template>
 
@@ -907,6 +913,7 @@ export default {
 <style lang="stylus" scoped>
 @import '~@css/mixin'
 .n_container
+    position relative
     _wh(100%, 100%)
     overflow hidden
 .n_header
@@ -924,20 +931,22 @@ export default {
         margin-right -3px
 .n_body_container
     _wh(100%, 92%)
-    padding 40px 0 20px 20px
+    padding 40px 0 20px 0
     _bis('../../../images/bg_content_l.jpg')
 .n_body_container_wraper
     _wh(100%, 100%)
     _fj(row)
 .n_left_content
-    _wh(33%, 100%)
+    position absolute
+    left 0
+    top 0
+    _wh(calc(100% / 3), 100%)
     background-color #070b1c
 .n_right_content
-    _wh(calc(67% - 16px), 100%)
+    padding-left calc(100% / 3)
+    _wh(100%, 100%)
 .item_wrap
-    _wh(100%, 33%)
+    _wh(100%, calc(100% / 3))
-    +.item_wrap
-        margin-top .5%
 .item_tip
     _wh(100%, 32px)
     line-height 32px
@@ -979,8 +988,8 @@ export default {
 .hlj_s_wrap
   width 4%
   height 85.5%
-  top 12%
+  top 9%
-  left 11%
+  left 15%
   .hlj_s
     height 7%
     .yj_info_wrap
@@ -1008,7 +1017,7 @@ export default {
   width 4%
   height 66.5%
   top 44%
-  left 14%
+  left 15%
   .hlj
     height 7%
     .yj_info_wrap
@@ -1051,7 +1060,7 @@ export default {
 .lz_wrap_1
   width 2%
   height 84.6%
-  top 13%
+  top 10%
   left 24%
   .lz
     &:nth-child(2)
@@ -1064,7 +1073,7 @@ export default {
   width 2%
   height 66.3%
   top 45%
-  left 19%
+  left 20%
   .lz
     &:nth-child(2)
       top 6.5%
@@ -1091,8 +1100,8 @@ export default {
 .yjlz_wrap_1
   width 2%
   height 16.442%
-  top 3%
+  top 2%
-  left 41%
+  left 42%
   .lz_1
     width 100%
     img
@@ -1101,14 +1110,14 @@ export default {
     top auto
     bottom 0
 .yjlz_wrap_2
-  top 22%
+  top 21%
 .yjlz_wrap_3
   top 41%
   .lz_1
     top 50%
     transform translateY(-50%)
 .yjlz_wrap_5
-  top 60%
+  top 62%
   .lz_1
     top 50%
     transform translateY(-50%)
@@ -1125,8 +1134,8 @@ export default {
 .yj_wrap_1
   width 16%
   height 16.442%
-  top 3%
+  top 2%
-  left 44%
+  left 44.7%
   .yj_info_wrap
     width 60%
     top: 0
@@ -1186,12 +1195,13 @@ export default {
   .block_2
     left:86%
 .yj_wrap_2
-  top 22%
+  top 21%
   .robot
-    animation rotate_630_1 1.5s linear 1.5s infinite alternate-reverse
+    transform: rotate(-46deg)
+    animation rotate_2500_2 1.5s linear 1.5s infinite alternate-reverse
   .kongtuopan_1
     top 37%
-    left 70%
+    left 85%
     transform rotate(90deg)
   .kongtuopan_2
     top 76%
@@ -1247,6 +1257,8 @@ export default {
   .robot
     left: 79%;
     top: 49%;
+    transform: rotate(-4deg)
+    animation rotate_630_1 1.5s linear 1.5s infinite alternate-reverse
   .kongtuopan_1
     top: 21%
     left: 64%;
@@ -1258,7 +1270,7 @@ export default {
     top: 64%
     left: 80%;
 .yj_wrap_5
-  top 60%
+  top 61%
   .kongtuopan_1
     top: 14%;
     left: 64%;
@@ -1299,7 +1311,7 @@ export default {
 .yj_wrap_8
   top 89%
 .yj_wrap_17
-  left 60%
+  left 65%
   .yyj
     left auto
     right 0
@@ -1311,7 +1323,7 @@ export default {
     left auto
     right 0
 .yj_wrap_15
-  left 60%
+  left 65%
   .cyj_1
     left auto
     right 0
@@ -1319,7 +1331,7 @@ export default {
       left 0
       right auto
 .yj_wrap_13
-  left 60%
+  left 65%
   .cyj_1
     left auto
     right 0
@@ -1327,7 +1339,7 @@ export default {
       left 0
       right auto
 .yj_wrap_12
-  left 60%
+  left 65%
   .cyj_1
     left auto
     right 0
@@ -1335,7 +1347,7 @@ export default {
       left 0
       right auto
 .yj_wrap_10
-  left 60%
+  left 65%
   .yj_info_wrap_1
     left auto
     right -81%
@@ -1388,13 +1400,13 @@ export default {
         transform: rotateZ(-46deg)
     }
     90% {
-        transform: rotateZ(-120deg) rotateY(-30deg)
+        transform: rotateZ(-115deg) rotateY(-30deg)
     }
     100% {
-        transform: rotateZ(-120deg) rotateY(0deg)
+        transform: rotateZ(-115deg) rotateY(0deg)
     }
 }
-@keyframes rotate_630_1 {
+@keyframes rotate_2500_2 {
     0% {
       transform: rotateZ(-46deg)
     }
@@ -1405,10 +1417,27 @@ export default {
         transform: rotateZ(-46deg)
     }
     90% {
-        transform: rotateZ(-90deg)
+        transform: rotateZ(-120deg) rotateY(-30deg)
     }
     100% {
-        transform: rotateZ(-90deg)
+        transform: rotateZ(-120deg) rotateY(0deg)
+    }
+}
+@keyframes rotate_630_1 {
+    0% {
+      transform: rotateZ(-4deg)
+    }
+    10% {
+        transform: rotateZ(-4deg)
+    }
+    20% {
+        transform: rotateZ(-20deg)
+    }
+    90% {
+        transform: rotateZ(-115deg) rotateY(-30deg)
+    }
+    100% {
+        transform: rotateZ(-115deg) rotateY(0deg)
     }
 }
 @keyframes rotate_630_2 {
@@ -1431,4 +1460,8 @@ export default {
         transform: rotateZ(15deg)
     }
 }
+.style_block
+  position absolute
+  _wh(calc(100% / 3), calc(100% / 3))
+  background red
 </style>

src/pages/modules/homepage/two.vue

@@ -241,55 +241,61 @@
                       </div>
                     </div>
                 </div>
-                <div class="n_right_content">
-                    <div class="item_wrap">
-                        <div class="item_tip item_tip_bg_s">
-                            <div class="item_tip_left">设备运行情况</div>
-                        </div>
-                        <div class="item_content">
-                            <div id="home_echart_4" style="width: 100%; height: 100%;"></div>
-                        </div>
-                    </div>
-                    <div class="item_wrap">
-                        <div class="item_tip item_tip_bg_s">
-                            <div class="item_tip_left">近一月故障次数前5设备</div>
-                        </div>
-                        <div class="item_content">
-                            <div id="home_echart_5" style="width: 100%; height: 100%;"></div>
-                        </div>
-                    </div>
-                    <div class="item_wrap">
-                        <div class="item_tip item_tip_bg_s">
-                            <div class="item_tip_left">最近10次设备故障</div>
-                        </div>
-                        <div class="item_content">
-                            <div class="scroll_wrap">
-                                <ul class="scroll_tab_1">
-                                    <li>故障时间</li>
-                                    <li>设备编码</li>
-                                    <li>设备名称</li>
-                                    <li>故障信息</li>
-                                    <li>当前状态</li>
-                                </ul>
-                                <div class="scroll_container_1">
-                                    <vue-seamless-scroll :data="LastTenFailureList" :class-option="defaultOption1">
-                                        <ul class="scroll-ul_1">
-                                            <li v-for="(e, i) in LastTenFailureList" :key="i">
-                                                <div class="scroll-ul_1_div">{{e.failure_time}}</div>
-                                                <div class="scroll-ul_1_div">{{e.device_code}}</div>
-                                                <div class="scroll-ul_1_div">{{e.device_name}}</div>
-                                                <div class="scroll-ul_1_div">{{e.failure_info}}</div>
-                                                <div class="scroll-ul_1_div">{{e.device_status_name}}</div>
-                                            </li>
-                                        </ul>
-                                    </vue-seamless-scroll>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
+        <div class="n_right_content">
+          <div class="item_wrap">
+              <div class="item_tip item_tip_bg_s">
+                  <div class="item_tip_left">设备运行情况</div>
+              </div>
+              <div class="item_content">
+                  <div id="home_echart_4" style="width: 100%; height: 100%;"></div>
+              </div>
+          </div>
+          <div class="item_wrap">
+              <div class="item_tip item_tip_bg_s">
+                  <div class="item_tip_left">近一月故障次数前5设备</div>
+              </div>
+              <div class="item_content">
+                  <div id="home_echart_5" style="width: 100%; height: 100%;"></div>
+              </div>
+          </div>
+          <div class="item_wrap">
+              <div class="item_tip item_tip_bg_s">
+                  <div class="item_tip_left">最近10次设备故障</div>
+              </div>
+              <div class="item_content">
+                  <div class="scroll_wrap">
+                      <ul class="scroll_tab_1">
+                          <li>故障时间</li>
+                          <li>设备编码</li>
+                          <li>设备名称</li>
+                          <li>故障信息</li>
+                          <li>当前状态</li>
+                      </ul>
+                      <div class="scroll_container_1">
+                          <vue-seamless-scroll :data="LastTenFailureList" :class-option="defaultOption1">
+                              <ul class="scroll-ul_1">
+                                  <li v-for="(e, i) in LastTenFailureList" :key="i">
+                                      <div class="scroll-ul_1_div">{{e.failure_time}}</div>
+                                      <div class="scroll-ul_1_div">{{e.device_code}}</div>
+                                      <div class="scroll-ul_1_div">{{e.device_name}}</div>
+                                      <div class="scroll-ul_1_div">{{e.failure_info}}</div>
+                                      <div class="scroll-ul_1_div">{{e.device_status_name}}</div>
+                                  </li>
+                              </ul>
+                          </vue-seamless-scroll>
+                      </div>
+                  </div>
+              </div>
+          </div>
+        </div>
+        <!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
+        <div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
+        <div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
+        <div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
+        <div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
+        <div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div> -->
     </div>
 </template>
 
@@ -615,6 +621,7 @@ export default {
 <style lang="stylus" scoped>
 @import '~@css/mixin'
 .n_container
+    position relative
     _wh(100%, 100%)
     overflow hidden
 .n_header
@@ -632,21 +639,23 @@ export default {
         padding-left 3px
 .n_body_container
     _wh(100%, 92%)
-    padding 40px 20px 20px 0
+    padding 40px 0 20px 0
     _bis('../../../images/bg_content_r.jpg')
 .n_body_container_wraper
     _wh(100%, 100%)
     _fj(row)
 .n_left_content
     position relative
-    _wh(calc(67% - 16px), 100%)
+    padding-right calc(100% / 3)
+    _wh(100%, 100%)
 .n_right_content
-    _wh(33%, 100%)
+    position absolute
+    right 0
+    top 0
+    _wh(calc(100% / 3), 100%)
     background-color #070b1c
 .item_wrap
-    _wh(100%, 33%)
+    _wh(100%, calc(100% / 3))
-    +.item_wrap
-        margin-top .5%
 .item_tip
     _wh(100%, 32px)
     line-height 32px
@@ -710,13 +719,12 @@ export default {
 .status_wrap
     position absolute
     top -26px
-    right 40px
+    right calc(100% / 3)
     z-index 1
     _fj(row)
 .status_item
     _fj(row)
-    +.status_item
+    margin-right 20px
-        margin-left 20px
 .status_tip
     _wh(15px, 15px)
     border-radius 50%
@@ -724,14 +732,6 @@ export default {
     box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
 .status_name
     _font(16px, 1, #fff)
-.green
-  background-color $green2
-.yellow
-  background-color $yellow
-.gray
-  background-color $gray1
-.red
-  background-color $orange
 .machine_wrap
   position absolute
   z-index 2
@@ -757,7 +757,7 @@ export default {
       _wh(100%, auto)
 .mtp_wrap_2
   top 35%
-  left 0
+  left 1%
 .gtssj_wrap_1
   width 2.5%
   top 35%
@@ -1041,5 +1041,8 @@ export default {
     100% {
         transform: rotateZ(-90deg)
     }
-}
+}.style_block
+    position absolute
+    _wh(calc(100% / 3), calc(100% / 3))
+    background red
 </style>

src/pages/modules/takeshape/one.vue

@@ -314,6 +314,12 @@
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
                       </div>
+                      <div class="machine_wrap yj_wrap_1 yj_wrap_17">
+                        <div class="sh_machine yyj">
+                          <img src="../../../images/workshop/yj_2500_gray.png" alt="">
+                        </div>
+                        <div class="sh_machine wzm"></div>
+                      </div>
                       <div class="machine_wrap yj_wrap_1 yj_wrap_2 yj_wrap_17">
                         <div class="sh_machine yyj">
                           <img src="../../../images/workshop/yj_2500_gray.png" alt="">
@@ -668,7 +674,7 @@ export default {
     animation rotate_630_1 1.5s linear 1.5s infinite alternate-reverse
   .kongtuopan_1
     top 37%
-    left 70%
+    left 85%
     transform rotate(90deg)
   .kongtuopan_2
     top 76%
@@ -776,24 +782,61 @@ export default {
 .yj_wrap_8
   left 8%
 .yj_wrap_17
-  top 70%
+  top 54%
   .yyj
+    left auto
+    right 0
     img
       left auto
       right 37%
       transform rotate(180deg)
+  .wzm
+    left auto
+    right 0
 .yj_wrap_15
-  top 70%
+  top 54%
   .cyj_1
+    left auto
+    right 0
     img
       left 0
       right auto
 .yj_wrap_13
-  top 70%
+  top 54%
+  .cyj_1
+    left auto
+    right 0
+    img
+      left 0
+      right auto
 .yj_wrap_12
-  top 70%
+  top 54%
+  .cyj_1
+    left auto
+    right 0
+    img
+      left 0
+      right auto
 .yj_wrap_10
-  top 70%
+  top 54%
+  .yj_info_wrap_1
+    left auto
+    right -81%
+    _bis('../../../images/workshop/txtbg1.png')
+    p
+      text-align left
+    .bg_line
+      left -50%
+  .cyj_1
+    left auto
+    right 0
+    img
+      left 0
+      right auto
+  .kongtuopan_1
+    left auto
+    right 64%
+    transform rotate(-90deg)
 @keyframes rotate_2500_1 {
     0% {
       transform: rotateZ(-46deg)