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

<template>
  <div class="wrap">
    <div class="empty" v-if="showEmpty"></div>
    <div class="flex_center" id="read_widely_container_flex">
      <div class="read_widely_container" id="read_widely_container">
        <div class="contract_title" id="read_widely_ani">
          <p class="line"></p>
          <p class="title">我们<span class="blue_font">涉猎广泛</span></p>
          <p class="detail">跨行业技术研发综合体</p>
        </div>
        <div class="content">
          <div class="card_wrap">
            <Card title="3C消费电子" 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" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: url(../../../../assets/img/readwidely/back1.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .empty {
    min-height: 90px;
  }
  .flex_center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .read_widely_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: 56px 0 35px 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';
          letter-spacing: 2px;
        }
      }
      .content {
        padding: 0 164px 55px 164px;
        box-sizing: border-box;
        width: 100%;
        .card_wrap {
          column-gap: 37px;
          padding: 41px;
          background: url(../../../../assets/img/readwidely/back2.png) no-repeat;
          background-size: 100% 100%;
          display: grid;
          justify-content: space-evenly;
          row-gap: 33px;
          align-items: center;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(4, 1fr);
        }
      }
    }
  }
}
</style>