首页

src/pages/modules/homepage/one.vue

@@ -61,6 +61,9 @@
                         </div>
                       </div>
                       <div class="machine_wrap yyj_wrap_1">
+                        <!-- <div class="sh_machine yj_gif">
+                          <img src="../../../images/workshop/yj_2500.gif" alt="">
+                        </div> -->
                         <div class="sh_machine weilan">
                           <img src="../../../images/workshop/weilan_2.png" alt="">
                         </div>
@@ -74,19 +77,18 @@
                         <div class="sh_machine kongtuopan_1">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_2">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
                         <div class="sh_machine robot">
-                          <img src="../../../images/workshop/robot_1.png" alt="">
+                          <img src="../../../images/workshop/robot_2500_yellow.png" alt="">
+                        </div>
+                        <div class="sh_machine block_1">
+                        </div>
+                        <div class="sh_machine block_1 block_2">
                         </div>
                       </div>
-                      <div class="machine_wrap yj_gif_wrap_1">
+                      <div class="machine_wrap yyj_wrap_1 yyj_wrap_2">
-                        <div class="sh_machine yj_gif">
-                          <img src="../../../images/workshop/yj_2500.gif" alt="">
-                        </div>
-                      </div>
-                      <!-- <div class="machine_wrap yyj_wrap_2">
                         <div class="sh_machine weilan">
                           <img src="../../../images/workshop/weilan_1.png" alt="">
                         </div>
@@ -100,18 +102,18 @@
                         <div class="sh_machine kongtuopan_1">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_2">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
                         <div class="sh_machine robot">
-                          <img src="../../../images/workshop/robot_1.png" alt="">
+                          <img src="../../../images/workshop/robot_2500_yellow.png" alt="">
                         </div>
-                      </div> -->
+                      </div>
-                      <div class="machine_wrap cyj_wrap_1">
+                      <div class="machine_wrap yyj_wrap_1 cyj_wrap_1">
                         <div class="sh_machine cyj_1">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
-                        <div class="sh_machine cyj_2">
+                        <div class="sh_machine cyj_1 cyj_2">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
                         <div class="sh_machine weilan">
@@ -120,7 +122,7 @@
                         <div class="sh_machine jzjcj_1">
                           <img src="../../../images/workshop/jzjcj_630.png" alt="">
                         </div>
-                        <div class="sh_machine jzjcj_2">
+                        <div class="sh_machine jzjcj_1 jzjcj_2">
                           <img src="../../../images/workshop/jzjcj_630.png" alt="">
                         </div>
                         <div class="sh_machine lmyzj">
@@ -129,117 +131,117 @@
                         <div class="sh_machine kongtuopan_1">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_2">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_3">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_3">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_4">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_4">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
                         <div class="sh_machine robot">
-                          <img src="../../../images/workshop/robot_2.png" alt="">
+                          <img src="../../../images/workshop/robot_2500_yellow.png" alt="">
                         </div>
                       </div>
-                      <div class="machine_wrap cyj_wrap_2">
+                      <div class="machine_wrap yyj_wrap_1 cyj_wrap_1 cyj_wrap_2">
                         <div class="sh_machine cyj_1">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
-                        <div class="sh_machine cyj_2">
+                        <div class="sh_machine cyj_1 cyj_2">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
                         <div class="sh_machine kongtuopan_1">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_2">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_3">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_3">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_4">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_4">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
                       </div>
-                      <div class="machine_wrap cyj_wrap_3">
+                      <div class="machine_wrap yyj_wrap_1 cyj_wrap_1 cyj_wrap_3">
                         <div class="sh_machine cyj_1">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
                         <div class="sh_machine weilan">
-                          <img src="../../../images/workshop/weilan_2.png" alt="">
+                          <img src="../../../images/workshop/weilan_6.png" alt="">
                         </div>
                         <div class="sh_machine kongtuopan_1">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_2">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
                         <div class="sh_machine jcpmj">
                           <img src="../../../images/workshop/jcpmj.png" alt="">
                         </div>
                         <div class="sh_machine robot">
-                          <img src="../../../images/workshop/robot_3.png" alt="">
+                          <img src="../../../images/workshop/robot_2500_yellow.png" alt="">
                         </div>
                       </div>
-                      <div class="machine_wrap cyj_wrap_2 cyj_wrap_4">
+                      <div class="machine_wrap yyj_wrap_1 cyj_wrap_1 cyj_wrap_2 cyj_wrap_4">
                         <div class="sh_machine cyj_1">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
-                        <div class="sh_machine cyj_2">
+                        <div class="sh_machine cyj_1 cyj_2">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
                         <div class="sh_machine kongtuopan_1">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_2">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_3">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_3">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_4">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_4">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
                       </div>
-                      <div class="machine_wrap yyj_wrap_2 yyj_wrap_3">
+                      <div class="machine_wrap yyj_wrap_1 yyj_wrap_2 yyj_wrap_3">
                         <div class="sh_machine yyj">
                           <img src="../../../images/workshop/yyj_gray.png" alt="">
                         </div>
                         <div class="sh_machine wzm"></div>
                       </div>
-                      <div class="machine_wrap cyj_wrap_1 cyj_wrap_5">
+                      <div class="machine_wrap yyj_wrap_1 cyj_wrap_1 cyj_wrap_5">
                         <div class="sh_machine cyj_1">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
-                        <div class="sh_machine cyj_2">
+                        <div class="sh_machine cyj_1 cyj_2">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
                       </div>
-                      <div class="machine_wrap cyj_wrap_2 cyj_wrap_6">
+                      <div class="machine_wrap yyj_wrap_1 cyj_wrap_1 cyj_wrap_2 cyj_wrap_6">
                         <div class="sh_machine cyj_1">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
-                        <div class="sh_machine cyj_2">
+                        <div class="sh_machine cyj_1 cyj_2">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
                       </div>
-                      <div class="machine_wrap cyj_wrap_3 cyj_wrap_7">
+                      <div class="machine_wrap yyj_wrap_1 cyj_wrap_1 cyj_wrap_3 cyj_wrap_7">
                         <div class="sh_machine cyj_1">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
                       </div>
-                      <div class="machine_wrap cyj_wrap_2 cyj_wrap_4 cyj_wrap_8">
+                      <div class="machine_wrap yyj_wrap_1 cyj_wrap_1 cyj_wrap_2 cyj_wrap_4 cyj_wrap_8">
                         <div class="sh_machine cyj_1">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
-                        <div class="sh_machine cyj_2">
+                        <div class="sh_machine cyj_1 cyj_2">
                           <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_3">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_3">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
-                        <div class="sh_machine kongtuopan_4">
+                        <div class="sh_machine kongtuopan_1 kongtuopan_4">
                           <img src="../../../images/workshop/ktp.png" alt="">
                         </div>
                       </div>
@@ -856,225 +858,152 @@ export default {
       left 200%
 .yyj_wrap_1
   width 16%
-  height 14%
+  height 16.442%
-  top 5%
+  top 3%
   left 43%
-  transform scale(0.9)
   .yyj
-    width 28.22%
+    width 50%
-    left 30.5%
+    img
+      width: 83%;
+      left: 37%;
   .wzm
-    _wh(50.9%, 46.95%)
+    _wh(50%, 41%)
     background-color #d9d9d9
     top auto
     bottom 0
   .jzjcss
-    width 22%
+    width: 24%;
-    left 51%
+    left: 51%;
-    top 11%
+    top: 25%;
   .weilan
-    width 49.1%
+    width: 46%;
-    height 73%
+    left: 54%;
-    left auto
+    top 37%
-    right 0
-    top auto
-    bottom 0
   .robot
-    width 24%
+    width 1%
-    left 53%
+    height 1%
-    top 54%
+    left: 75%;
-    transform rotate(270deg)
+    top: 55%;
+    transform: rotate(-46deg)
+    animation rotate_2500_1 1.5s linear 1.5s infinite alternate-reverse
+    img
+      width 2400%
+      top: -800%;
+      left: -2000%;
   .kongtuopan_1
-    width 15%
+    width: 12%;
-    top auto
-    left auto
-    bottom 20%
-    right 30%
-  .kongtuopan_2
-    width 15%
-    top auto
-    left auto
-    bottom 20%
-    right 14%
-.yyj_wrap_2
-  width 16%
-  height 14%
-  top 22%
-  left 43%
-  transform scale(0.9)
-  .yyj
-    width 28.22%
-    left 30.5%
-  .wzm
-    _wh(50.9%, 46.95%)
-    background-color #d9d9d9
-    top auto
-    bottom 0
-  .jzjcss
-    width 22%
-    left 51%
-    top 11%
-  .weilan
-    width 49.1%
-    height 73%
-    left auto
-    right 0
-    top auto
-    bottom 0
-  .robot
-    width 24%
-    left 72%
-    top 65%
-    transform rotate(90deg)
-  .kongtuopan_1
-    width 15%
-    top 52%
-    left auto
-    right 6%
-    transform rotate(90deg)
-  .kongtuopan_2
-    width 15%
-    top auto
-    left auto
-    bottom -10%
-    right 17%
-    transform rotate(-90deg)
-.cyj_wrap_1
-  width 11%
-  height 9%
-  top 41%
-  left 48.3%
-  .cyj_1
-    width 20%
-  .cyj_2
-    width 20%
-    top 100%
-  .jzjcj_1
-    width: 10%;
-    left: 21%;
-    top: 36%
-  .jzjcj_2
-    width: 10%;
-    left: 21%;
-    top: 94%
-  .lmyzj
-    width: 16%;
-    left: 25%;
-    top: 65%;
-  .weilan
-    width 70%
-    left auto
-    right 0
-    top 49%
-  .robot
-    width: 20%;
     top: 81%;
-    left: auto;
+    left: 61%;
-    right: 17%;
-  .kongtuopan_1
-    width: 20%;
-    top: 57%;
-    left: auto;
-    right: 35%;
   .kongtuopan_2
-    width: 20%;
+    left: 74%;
-    top: 57%;
+  .block_1
-    left: auto;
+    width: 10%;
-    right: 5%;
+    height: 9%;
-  .kongtuopan_3
+    left: 74%;
-    width: 20%;
+    top: 27%;
-    top: 103%;
+    background-color #fff
-    left: auto;
+  .block_2
-    right: 35%;
+    left:86%
-  .kongtuopan_4
+.yyj_wrap_2
-    width: 20%;
+  top 22%
-    top: 103%;
-    left: auto;
-    right: 5%;
-.cyj_wrap_2
-  width 11%
-  height 9%
-  top 60%
-  left 48.5%
-  .cyj_1
-    width 20%
-  .cyj_2
-    width 20%
-    top 100%
-  .kongtuopan_1
-    width 20%
-    top 20%
-    left 44%
-    transform rotate(90deg)
-  .kongtuopan_2
-    width 20%
-    top 68%
-    left 44%
-    transform rotate(90deg)
-  .kongtuopan_3
-    width 20%
-    top 120%
-    left 44%
-    transform rotate(90deg)
-  .kongtuopan_4
-    width 20%
-    top 160%
-    left 44%
-    transform rotate(90deg)
-.cyj_wrap_3
-  width 11%
-  height 9%
-  top 75%
-  left 48.5%
-  .cyj_1
-    width 20%
-    top 50%
-  .weilan
-    width: 65%;
-    left: auto;
-    right: 0;
-    top: 32.2%;
-    img
-      transform rotate(-90deg)
   .robot
-    width: 18%;
+    animation rotate_630_1 1.5s linear 1.5s infinite alternate-reverse
-    top: 67%;
-    left: 55%;
   .kongtuopan_1
-    width 20%
+    top 37%
-    top 75%
+    left 70%
-    left auto
-    right -2%
     transform rotate(90deg)
   .kongtuopan_2
-    width 20%
+    top 76%
-    top: 112%;
+  .weilan
-    left: auto;
+    top 16%
-    right: -2%;
+.cyj_wrap_1
-    transform rotate(90deg)
+  top 41%
-  .jcpmj
+  .cyj_1
-    width: 20%;
+    width 50%
-    top: 35%;
+    height 50%
-    left: 43%;
     img
-      transform rotate(-90deg)
+      width 28%
+      left auto
+      right 0
+  .cyj_2
+    top 50%
+    img
+      top auto
+      bottom 0
+  .jzjcj_1
+    width 7%
+    height 50%
+    left 51%
+    img
+      top auto
+      bottom 5%
+  .jzjcj_2
+    top 50%
+    img
+      top 5%
+  .lmyzj
+    width: 13%;
+    left: 54%;
+    top: 33%;
+  .weilan
+    top 6%
+  .robot
+    left: 79%;
+    top: 49%;
+  .kongtuopan_1
+    top: 21%
+    left: 64%;
+  .kongtuopan_2
+    left: 80%;
+  .kongtuopan_3
+    top: 64%
+  .kongtuopan_4
+    top: 64%
+    left: 80%;
+.cyj_wrap_2
+  top 60%
+  .kongtuopan_1
+    top: 14%;
+    left: 64%;
+    transform rotate(90deg)
+  .kongtuopan_2
+    top 30%
+  .kongtuopan_3
+    top 70%
+  .kongtuopan_4
+    top 86%
+.cyj_wrap_3
+  top 75%
+  .cyj_1
+    top 25%
+    img
+      top 50%
+      transform translateY(-50%)
+  .weilan
+    top 15%
+  .robot
+    left: 75%
+    transform: rotate(15deg);
+    animation rotate_630_2 3s linear 1.5s infinite reverse
+  .kongtuopan_1
+    top 43%
+    left 90%
+    transform rotate(90deg)
+  .kongtuopan_2
+    top: 63%
+  .jcpmj
+    width: 18%;
+    top: 12%;
+    left: 57%;
 .cyj_wrap_4
   top 89%
 .yyj_wrap_3
   left auto
   right 13%
   .yyj
-    width 28.22%
-    left -7.5%
-    transform rotate(180deg)
-    height 42%
     img
-      _wh(100%, 100%)
+      left -23%
-  .wzm
+      transform rotate(180deg)
-    _wh(50.9%, 46.95%)
-    background-color #d9d9d9
-    top auto
-    bottom 0
 .cyj_wrap_5
   left auto
   right 17%
@@ -1088,15 +1017,9 @@ export default {
   left auto
   right 17%
   .kongtuopan_3
-    width 20%
+    left 18%
-    top 120%
-    left -30%
-    transform rotate(90deg)
   .kongtuopan_4
-    width 20%
+    left 18%
-    top 160%
-    left -30%
-    transform rotate(90deg)
 .lz_wrap_4
   width 2%
   height 63%
@@ -1120,8 +1043,58 @@ export default {
     width 100%
     img
       _wh(100%, auto)
-.yj_gif_wrap_1
+@keyframes rotate_2500_1 {
-  width 10%
+    0% {
-  .yj_gif
+      transform: rotate(-46deg)
-    width 100%
+    }
+    10% {
+        transform: rotate(-46deg)
+    }
+    20% {
+        transform: rotate(-46deg)
+    }
+    90% {
+        transform: rotate(-120deg)
+    }
+    100% {
+        transform: rotate(-120deg)
+    }
+}
+@keyframes rotate_630_1 {
+    0% {
+      transform: rotate(-46deg)
+    }
+    10% {
+        transform: rotate(-46deg)
+    }
+    20% {
+        transform: rotate(-46deg)
+    }
+    90% {
+        transform: rotate(-90deg)
+    }
+    100% {
+        transform: rotate(-90deg)
+    }
+}
+@keyframes rotate_630_2 {
+    0% {
+      transform: rotate(150deg)
+    }
+    10% {
+        transform: rotate(150deg)
+    }
+    50% {
+        transform: rotate(70deg)
+    }
+    60% {
+        transform: rotate(70deg)
+    }
+    90% {
+        transform: rotate(15deg)
+    }
+    100% {
+        transform: rotate(15deg)
+    }
+}
 </style>