hjyd/src/views/Index/components/MechanicalDrive/index.vue

<template>
  <div class="wrap">
    <div class="empty" v-if="showEmpty"></div>
    <div class="flex_center">
      <div class="mechanical_drive_container" id="mechanical_drive_container">
        <div class="contract_title" id="mechanical_drive_ani">
          <p class="line"></p>
          <p class="title"><span class="blue_font">机械传动</span>专家</p>
          <p class="detail">
            我们精通气动、液动、电动等各种传动机构，完成机械所需的各种动作
          </p>
        </div>
        <div class="content_main">
          <Card title="同步带传动" i="1" />
          <Card title="链条传动" i="2" />
          <Card title="丝杠传动" i="3" />
          <Card title="直线导轨" i="4" />
          <Card title="气缸传动" i="5" />
          <Card title="行星轮传动" i="6" />
          <Card title="蜗轮蜗杆传动" i="7" />
          <Card title="锥齿传动" i="8" />
          <Card title="齿轮传动" i="9" />
          <Card title="电动顶杆" i="10" />
          <Card title="同步带传动" i="11" />
          <Card title="行星减速机" i="12" />
          <Card title="谐波减速机" i="13" />
          <Card title="RV减速机" i="14" />
          <Card title="液压传动" i="15" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { handleScreenAuto } from '@/common/utils'
import Card from './Card'
const showEmpty = ref(true)
onMounted(() => {
  handleScreenAuto('#mechanical_drive_container')
  window.onresize = handleScreenAuto('#mechanical_drive_container')
})
</script>

<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: $common_bg;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .empty {
    min-height: 90px;
  }
  .flex_center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .mechanical_drive_container {
      width: 100%;
      height: 100%;

      .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;
        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';
          letter-spacing: 2px;
        }
      }
      .content_main {
        padding: 0 99px 50px 99px;
        column-gap: 67px;
        display: grid;
        justify-content: space-evenly;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, 1fr);
        row-gap: 37px;
      }
    }
  }
}
</style>