MingGao_vue/minggao/src/page/home/newHome/index.vue

<!--
 * @Description:
 * @Autor: lin
 * @Date: 2024-04-09 14:29:42
 * @LastEditors: lin
 * @LastEditTime: 2024-04-20 14:03:46
-->
<template>
  <div class="bigBox">
    <div class="top">智网监测中心</div>
    <!-- 左边按钮组 -->
    <div class="topLeftBtn">
      <router-link to="/newHome/home">
        <div :class="`newHomeBtn ${$route.path == '/newHome/home' ? 'newHomeBtnClick' : ''}`">首页</div>
      </router-link>
      <router-link to="/newHome/device">
        <div :class="`newHomeBtn newHomeBigBtn ${$route.path == '/newHome/device' ? 'newHomeBigBtnClick' : ''}`">智能测报系统
        </div>
      </router-link>
    </div>
    <div class="topLeftBtn rightBtn">
      <router-link to="/index/taskRegulator" target="_blank">
        <div class="newHomeBtn">下发任务</div>
      </router-link>
      <router-link to="/index/cbd"  target="_blank">
        <div :class="`newHomeBtn`">管理后台
        </div>
      </router-link>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom">
      {{ currentTime }}
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 设置rem
const setBaseFontSize = () => {
  const baseFontSize = (window.innerWidth / 1920) * 9; // 根据屏幕宽度计算基准字体大小
  document.documentElement.style.fontSize = `${baseFontSize}px`; // 设置根元素字体大小
};
export default {
  props: {

  },
  data() {
    return {
      currentTime: '',
      timmer: null
    };
  },
  computed: {

  },
  created() {

  },
  mounted() {
    this.timmer = setInterval(this.updateTime, 1000);
    setBaseFontSize(); // 初始化基准字体大小
    window.addEventListener("resize", setBaseFontSize); // 监听窗口大小变化，重新设置基准字体大小
    console.log(this.$route)
  },
  beforeDestroy() {
    clearInterval(this.timmer);
    document.documentElement.removeAttribute("style");
    window.removeEventListener("resize", setBaseFontSize);
  },
  watch: {

  },
  methods: {
    updateTime() {
      var now = new Date();

      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var day = now.getDay();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();

      // 将星期几转换为中文格式
      var daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      var dayOfWeekText = daysOfWeek[day];

      // 格式化小时、分钟、秒为两位数
      hours = ('0' + hours).slice(-2);
      minutes = ('0' + minutes).slice(-2);
      seconds = ('0' + seconds).slice(-2);

      // 更新时间
      this.currentTime = year + '年' + month + '月' + date + '日 ' + dayOfWeekText + ' ' + hours + ':' + minutes + ':' + seconds;
    }
  },
  components: {

  },
};
</script>
<style lang="less">
.newHomeBtn {
  display: inline-block;
  cursor: pointer;
  width: 6.4vw;
  height: 3.52vh;
  color: #ffffff80;
  font-size: 1.6rem;
  line-height: 2.8vh;
  text-align: center;
  background: url(../../../assets/images/newHome/btn.png) center center no-repeat;
  background-size: 100% 100%;

  &:hover {
    color: #FFF;
    background: url(../../../assets/images/newHome/btnHover.png) center center no-repeat;
    background-size: 100% 100%;
  }
}

.newHomeBtnClick {
  color: #FFF;
  background: url(../../../assets/images/newHome/btnHover.png) center center no-repeat;
  background-size: 100% 100%;
}

.newHomeBigBtn {
  width: 8.125vw;
  background: url(../../../assets/images/newHome/bigBtn.png) center center no-repeat;
  background-size: 100% 100%;

  &:hover {
    color: #FFF;
    background: url(../../../assets/images/newHome/bigBtnHover.png) center center no-repeat;
    background-size: 100% 100%;
  }
}

.newHomeBigBtnClick {
  color: #FFF;
  background: url(../../../assets/images/newHome/bigBtnHover.png) center center no-repeat;
  background-size: 100% 100%;
}
</style>
<style scoped lang="less">
.bigBox {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  .topLeftBtn {
    position: absolute;
    top: 2.5vh;
    left: 2.2vw;
    z-index: 190;
  }
  .rightBtn{
    left: auto;
    right: 2.2vw;
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }

  .top {
    position: absolute;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 4px #FFF;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 5.6px;
    padding-top: 1rem;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 21.4rem;
    box-sizing: border-box;
    background: url('../../../assets/images/newHome/topBanger.png') center center no-repeat;
    background-size: 100% 100%;
    z-index: 2;
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 46.3vw;
    height: 100vh;
    background: url('../../../assets/images/newHome/leftBg.png') center center no-repeat;
    pointer-events: none;
    background-size: 100% 100%;
    z-index: 3;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 46.3vw;
    height: 100vh;
    z-index: 3;
    background: url('../../../assets/images/newHome/rightBg.png') center center no-repeat;
    pointer-events: none;
    background-size: 100% 100%;
  }

  .bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 11.76vh;
    line-height: 17.76vh;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 0 4px #FFF;
    font-size: 1.6rem;
    letter-spacing: 1.6px;
    font-weight: 600;
    z-index: 3;
    background: url('../../../assets/images/newHome/bottom.png') center center no-repeat;
    pointer-events: none;
    background-size: 100% 100%;
  }
}
</style>