mky-vent-base/src/views/vent/home/clique/testPage.vue

<template>
  <div class="company-home">
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <a-row class="company-content" justify="space-between" wrap>
      <a-col class="company-content__card" v-for="(item, i) in cards" :key="i" flex="24%">
        <p class="company-content__card_title">{{ item.title }}</p>
        <div class="company-content__card_content">你好</div>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { computed, ref, inject } from 'vue';
  // import mapComponent from './components/3Dmap/index.vue';
  const globalConfig = inject('globalConfig');
  // const mainTitle = ref('国家能源神东煤炭集团');
  const mainTitle = ref('XXXX集团');
  const cards = ref<{ title: string }[]>(
    globalConfig.History_Type == 'vent'
      ? [
          {
            title: '布尔台矿',
          },
          {
            title: '柳塔矿矿',
          },
          {
            title: '寸草塔二矿',
          },
          {
            title: '乌兰木伦矿',
          },
          {
            title: '寸草塔矿',
          },
          {
            title: '石坎台矿',
          },
          {
            title: '补连塔矿',
          },
          {
            title: '哈拉沟矿',
          },
        ]
      : [
          {
            title: 'betk',
          },
          {
            title: 'ltk',
          },
          {
            title: 'ctk',
          },
          {
            title: 'wlml',
          },
          {
            title: 'cctk',
          },
          {
            title: 'sgtk',
          },
          {
            title: 'bltk',
          },
          {
            title: 'hlagk',
          },
        ]
  );
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .company-home {
    width: 100%;
    height: 100%;
    color: #fff;
    position: relative;
    // background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
    // background-size: 100% 100%;

    .top-bg {
      width: 100%;
      height: 97px;
      background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
      position: absolute;
      z-index: 1;
      .main-title {
        height: 96px;
        font-family: 'douyuFont';
        font-size: 20px;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .company-content {
      width: 100%;
      height: 100%;
      background: url('../../../../assets/images/company/content-bg.png') no-repeat;
      background-size: 100% 100%;
      pointer-events: none;
      padding: 150px 100px 100px 100px;

      .company-content__card {
        height: 320px;
        background: url('../../../../assets/images/company/area-card4.png') no-repeat;
        background-size: 100% 100%;
        padding: 0 20px 0 20px;
        text-align: center;
      }
      .company-content__card_title {
        margin-top: 10px;
        font-family: 'douyuFont';
      }
      .company-content__card_content {
        height: 250px;
      }
    }
  }
</style>