123

src/views/Index/components/MechanicalControl/index.vue

@@ -9,33 +9,55 @@
       </div>
       <div class="main_introduce">
         <div class="img_list_inwrap">
-          <div class="broadside_div">
+          <div class="broadside_div bg1">
             <div class="dialog_text">舵机</div>
           </div>
-          <div class="broadside_div">
+          <div class="broadside_div bg2">
             <div class="dialog_text">直流电机</div>
           </div>
-          <div class="broadside_div">
+          <div class="broadside_div bg3">
             <div class="dialog_text">伺服电机</div>
           </div>
         </div>
         <div class="main_imgwrap">
-          <div class="control_btn_wrap"></div>
-          <img src="" class="bottom_img" alt="" />
+          <div class="control_btn_wrap">
+            <div class="btn">自主研发电机控制驱动器</div>
+          </div>
+          <img :src="MainPic" class="bottom_img" alt="" />
         </div>
         <div class="img_list_inwrap">
-          <div class="broadside_div">
+          <div class="broadside_div bg4">
             <div class="dialog_text">步进电机</div>
           </div>
-          <div class="broadside_div">
+          <div class="broadside_div bg5">
             <div class="dialog_text">有刷电机</div>
           </div>
-          <div class="broadside_div">
+          <div class="broadside_div bg6">
             <div class="dialog_text">无刷电机</div>
           </div>
         </div>
       </div>
-      <div></div>
+      <div class="bottom_quxian">
+        <div class="left_img">
+          <img :src="Qu" class="gif" alt="" />
+        </div>
+        <div class="text_cont">
+          <div class="s_text">
+            <p class="line"></p>
+            <span>S型加速</span>
+            <p class="line"></p>
+          </div>
+          <div class="t_text">
+            <p class="line"></p>
+            <span>T型加速</span>
+            <p class="line"></p>
+          </div>
+        </div>
+        <div class="right_img">
+          <img :src="Q1" class="img" alt="" />
+          <img :src="Q2" class="img" alt="" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -43,6 +65,10 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { handleScreenAuto } from '@/common/utils'
+import MainPic from '@/assets/img/control/yanfaqudongqi.jpg'
+import Qu from '@/assets/img/control/quxian.gif'
+import Q1 from '@/assets/img/control/t.png'
+import Q2 from '@/assets/img/control/s.png'
 const showEmpty = ref(false)
 onMounted(() => {
   handleScreenAuto(showEmpty, '#mechanical_control_container')
@@ -131,20 +157,49 @@ onMounted(() => {
           overflow: hidden;
           .dialog_text {
             position: absolute;
-            display: flex;
+            display: none;
             align-items: center;
             justify-content: center;
             font-size: 23px;
             font-weight: 400;
             color: #ffffff;
-            background: #000;
-            opacity: 0.5;
+            background: rgba(0, 0, 0, 0.5);
             left: 0;
             right: 0;
             top: 0;
             bottom: 0;
           }
         }
+        .broadside_div:hover {
+          cursor: pointer;
+          .dialog_text {
+            display: flex;
+          }
+        }
+        .bg1 {
+          background: url(../../../../assets/img/control/duoji.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .bg2 {
+          background: url(../../../../assets/img/control/zhiliu.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .bg3 {
+          background: url(../../../../assets/img/control/sifu.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .bg4 {
+          background: url(../../../../assets/img/control/bujin.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .bg5 {
+          background: url(../../../../assets/img/control/youshua.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .bg6 {
+          background: url(../../../../assets/img/control/wushua.png) no-repeat;
+          background-size: 100% 100%;
+        }
       }
       .main_imgwrap {
         flex: 1;
@@ -152,16 +207,100 @@ onMounted(() => {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        height: 100%;
+        border-radius: 7px;
+        overflow: hidden;
         .control_btn_wrap {
           flex: 1;
+          background: linear-gradient(#fafafa, #eeeeee);
+          display: flex;
+          align-items: center;
+          color: #fff;
+          justify-content: center;
+          .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 18px 41px;
+            background: linear-gradient(90deg, #283fe7, #4b17e1);
+            border-radius: 29px;
+          }
         }
         .bottom_img {
+          display: block;
           width: 511px;
-          height: 310px;
+          height: 187px;
           border-radius: 7px;
         }
       }
     }
+    .bottom_quxian {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 319px;
+      width: 100%;
+      padding: 0 440px;
+      box-sizing: border-box;
+      .left_img {
+        .gif {
+          width: 353px;
+          height: 319px;
+        }
+      }
+      .text_cont {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        flex-direction: column;
+        height: 100%;
+        .s_text {
+          font-size: 35px;
+          font-family: 'ZonaPro';
+          font-weight: bold;
+          color: #000000;
+          background: linear-gradient(0deg, #283fe7 0%, #4b17e1 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          white-space: nowrap;
+          .line {
+            width: 70px;
+            height: 1px;
+            background: #283fe7;
+            margin: 0 33px;
+          }
+        }
+        .t_text {
+          font-size: 35px;
+          font-family: 'ZonaPro';
+          margin-top: 20px;
+          font-weight: bold;
+          color: #959595;
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          white-space: nowrap;
+          .line {
+            width: 70px;
+            height: 1px;
+            background: #283fe7;
+            margin: 0 33px;
+          }
+        }
+      }
+      .right_img {
+        width: 319px;
+        height: 100%;
+        .img {
+          width: 100%;
+          height: 160px;
+        }
+      }
+    }
   }
 }
 </style>