zhzshszg/src/pages/index/index.vue

<template>
  <div class="wrapper">
    <div class="bgimg">
      <div class="title">主办单位：中共珠海市委党史学习教育领导小组办公室</div>
      <div class="title">中共珠海市委宣传部</div>
      <div class="con">
        <div class="btn" @click="enter">
          <span class="btn-txt">点击进入</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import browser from "@/utils/browser.js";

export default {
  components: {
    /*  bg */
  },
  data() {
    return {
      isMobile: browser.mobile,
      state: false,
      cdn_url: "https://4dscene.4dage.com/ShaoShan/audios/",
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    enter() {
      this.$router.push("/ruins");
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  .bgimg {
    position: absolute;
    z-index: 99;
    width: 100%;
    left: 0;
    height: 100%;
    background: url("../../assets/images/index-bg.png") no-repeat center center;
    background-size: 100% 100%;
    .title {
        position: relative;
        top:42%;
        width: 30vw;
        margin:0 auto;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 41px;
        color: #FCD67B;
        opacity: 1;
        text-align: center;

     }
    .con {
      left: 50%;
      top: 45%;
      width: 20%;
      height: 10%;
      margin-left: -10%;
      position: relative;
      .btn {
        margin: 0 auto;
        margin-top: 0vw;
        width: 100%;
        height: 74px;
        line-height: 74px;
        text-align: center;
        background: url(../../assets/images/index-btn-bg.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        .btn-txt {
          font-size: 32px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          line-height: 54px;
          color: #9c0012;
          opacity: 1;
        }
      }
    }
  }
}
@media screen and (max-width: 1024px) {
  .wrapper {
    .bgimg {
      background: url("../../assets/images/mobile-index-bg.png") no-repeat center center;
      background-size: 100% 100%;
      .title {
        position: relative;
        top:40%;
        width: 75vw;
        margin:0 auto;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 20px;
        color: #FCD67B;
        opacity: 1;
        text-align: center;

     }
      .con {
        width: 80%;
        left: 50%;
        top:0;
        margin-left: -40%;
        margin-top:100%;
        .btn {
          background: url(../../assets/images/mobile-btn-bg.png) no-repeat center center;
          background-size: 100% 100%;
          margin-left: 0px;
          height: 17vw;
          line-height: 17vw;
          .btn-txt {
            font-size: 5vw;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #6a2121;
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>