dreamworks-mobile/src/pages/Hardware.vue

<template>
  <div class="hardware_home_container">
    <Swiper page="hardware" />
    <CaseShow />
    <div class="img_wrap">
      <img :src="Hard" class="img" alt="" />
    </div>
    <HeadLine
      title="合作过的"
      themeTitle="芯片原厂"
      :flip="true"
      line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
    />
    <img :src="Chip" class="img" alt="" />
    <img :src="Wu" class="img" alt="" />
    <!-- <Track /> -->
    <HeadLine
      title="专家"
      themeTitle="电机控制"
      line1="自主研发电机驱动器，让控制更加精准"
    />
    <div class="img_wrap">
      <img :src="Dian" class="img" alt="" />
      <div class="gif_wrap">
        <img :src="Gif2" class="left_img" alt="" />
        <img :src="SAccelerate" class="right_img" alt="" />
      </div>
      <div class="gif_wrap">
        <img :src="Gif1" class="left_img" alt="" />
        <img :src="TAccelerate" class="right_img" alt="" />
      </div>
    </div>
    <AboutUs />
    <Cooperation />
  </div>
</template>

<script setup>
import Swiper from 'cpns/Swiper'
import CaseShow from 'cpns/CaseShow'
import Hard from '@/static/img/hardware/hardware.png'
import Chip from '@/static/img/hardware/chip.png'
import HeadLine from 'cpns/HeadLine'
import Track from 'cpns/Track'
import Wu from '@/static/img/hardware/wulianwang.png'
import Dian from '@/static/img/hardware/dianji.png'
import AboutUs from 'cpns/AboutUs.vue'
import Cooperation from 'cpns/Cooperation'
import Bottom from 'cpns/Bottom'
import SAccelerate from '@/static/img/hardware/s-accelerate.png'
import TAccelerate from '@/static/img/hardware/t-accelerate.png'
import Gif1 from '@/static/img/hardware/1.gif'
import Gif2 from '@/static/img/hardware/2.gif'
</script>

<style lang="scss" scoped>
.hardware_home_container {
  background: #f5f5f5;
  max-width: 100vw;
  overflow: hidden;
  .img_wrap {
    padding: 0 7px;
    .gif_wrap {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      border-radius: 3px;
      overflow: hidden;
      .left_img {
        width: 133px;
        height: 67px;
      }
      .right_img {
        width: 63%;
        height: 67px;
      }
    }
  }
  .img {
    width: 100%;
    height: auto;
  }
}
</style>