shuangchuangzhou_2022/src/pages/Home.vue

<template>
  <div
    class="home"
    :style="{
      backgroundImage: `url(${require('@/assets/images/proj2022/bg.png')})`,
    }"
  >
    <div class="h-con">
      <div class="h-title">
        <img :src="require('@/assets/images/proj2022/title.png')" alt="" />
      </div>
      <!-- <ul>
        <li v-for="(item, i) in units" :key="i">
          <span>{{ item.unit }}：</span>
          <span>{{ item.val }}</span>
        </li>
      </ul> -->
      <img class="tunits" :src="require('@/assets/images/proj2022/pc_units.png')" alt="" />

      <img @click="$showBirdView({
        hideClose:true
      })" class="h-btn" :src="require('@/assets/images/project/btn.png')" alt="" />
    </div>
  </div>
</template>

<script>
// import {units} from './units'

export default {
  data() {
    return {
      // units,
    };
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-color: #10337f;
  background-size: 100% auto;
  background-position: bottom left;

  .h-con {
    width: 60%;
    margin: 0 auto;
    padding-top: 30px;
    color: #fff;
    text-align: center;
    .h-title {
      width: 100%;
      > img {
        width: 90%;
      }
    }
    .tunits {
      width: 98%;
      margin: 40px auto 0;
    }
    > ul {
      width: 96%;
      margin: 40px auto 0;
      text-align: left;
      > li {
        display: flex;
        margin: 10px 0;
        > span {
          line-height: 1.4;
          font-size: 22px;
          &:first-of-type {
            text-align: justify;
            min-width: 150px;
            flex-shrink: 0;
          }
        }
      }
    }
    .h-btn {
      margin: 8% auto 0;
      max-width: 298px;
      cursor: pointer;
    }
  }
}

@media screen and (max-width: 1600px) {
  .home {
    .h-con {
      > ul {
        > li {
          > span {
            font-size: 18px;
            &:first-of-type {
              min-width: 120px;
            }
          }
        }
      }
      .h-btn {
        max-width: 218px;
      }
    }
  }
}
</style>