123

src/views/Index/components/HeaderSwiper/SlideFive/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="slide_five">slide_five</div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+.slide_five {
+}
+</style>

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

@@ -31,6 +31,9 @@
       <swiper-slide :virtualIndex="3">
         <SlideFour />
       </swiper-slide>
+      <swiper-slide :virtualIndex="3">
+        <SlideFive />
+      </swiper-slide>
       <template #container-end>
         <div class="autoplay-progress">
           <svg viewBox="0 0 48 48" ref="progressLine">
@@ -61,6 +64,7 @@ import SlideOne from './SlideOne'
 import SlideTwo from './SlideTwo'
 import SlideThree from './SlideThree'
 import SlideFour from './SlideFour'
+import SlideFive from './SlideFive'
 import Arrow from '@/assets/img/banner/arrow.png'
 export default {
   components: {
@@ -70,6 +74,7 @@ export default {
     SlideTwo,
     SlideThree,
     SlideFour,
+    SlideFive,
   },
   methods: {
     toNext() {

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

@@ -1,5 +1,139 @@
-<template>video player</template>
+<template>
+  <div class="wrap">
+    <div class="mechanical_control_container" id="mechanical_control_container">
+      <div class="empty" v-if="showEmpty"></div>
+      <div class="contract_title">
+        <p class="line"></p>
+        <p class="title">电机<span class="blue_font">控制专家</span></p>
+        <p class="detail">我们通过自主研发电机驱动器，让控制更上一层楼</p>
+      </div>
+      <div class="main_introduce">
+        <div class="img_list_inwrap">
+          <div class="broadside_div"></div>
+          <div class="broadside_div"></div>
+          <div class="broadside_div"></div>
+        </div>
+        <div class="main_imgwrap">
+          <div class="control_btn_wrap"></div>
+          <img src="" class="bottom_img" alt="" />
+        </div>
+        <div class="img_list_inwrap">
+          <div class="broadside_div"></div>
+          <div class="broadside_div"></div>
+          <div class="broadside_div"></div>
+        </div>
+      </div>
+      <div></div>
+    </div>
+  </div>
+</template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { handleScreenAuto } from '@/common/utils'
+const showEmpty = ref(false)
+onMounted(() => {
+  handleScreenAuto(showEmpty, '#mechanical_control_container')
+  window.onresize = handleScreenAuto(showEmpty, '#mechanical_control_container')
+})
+</script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: $common_bg;
+  position: relative;
+  .mechanical_control_container {
+    width: 100%;
+    height: 100%;
+    .empty {
+      min-height: 90px;
+    }
+    .contract_title {
+      z-index: 99;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      font-family: 'SourceHanSans';
+      background-size: 100% 100%;
+      padding: 71px 0 55px 0;
+      box-sizing: border-box;
+      position: relative;
+      white-space: nowrap;
+      .line {
+        width: 39px;
+        height: 5px;
+        background: #283fe7;
+        border-radius: 3px;
+        margin-bottom: 12px;
+      }
+      .img {
+        position: absolute;
+        top: 47%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        width: 295px;
+        height: 35px;
+        z-index: 9;
+      }
+      .title {
+        font-size: 30px;
+        font-weight: bold;
+        color: #000000;
+        margin-bottom: 21px;
+        z-index: 10;
+        .blue_font {
+          color: $theme_color;
+        }
+      }
+      .detail {
+        font-size: 18px;
+        font-weight: 300;
+        color: #646a73;
+        font-family: 'SourceHanSansLight';
+      }
+    }
+    .main_introduce {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 330px;
+      width: 100%;
+      padding: 0 440px;
+      box-sizing: border-box;
+      margin-bottom: 67px;
+      .img_list_inwrap {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        width: 222px;
+        height: 100%;
+        .broadside_div {
+          width: 222px;
+          height: 100px;
+          border-radius: 6px;
+          background: #000;
+        }
+      }
+      .main_imgwrap {
+        flex: 1;
+        padding: 0 43px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .control_btn_wrap {
+          flex: 1;
+        }
+        .bottom_img {
+          width: 511px;
+          height: 310px;
+          border-radius: 7px;
+        }
+      }
+    }
+  }
+}
+</style>