btgym/src/App.vue

<template>
  <div id="app" class="btgym">
    <!-- 顶部信息 -->
    <div class="topnav">
      <div class="toptxt">
        <div style="margin-left: 2%" class="topTitle">
          累计进馆人数： {{ sumYear_num }} 人
        </div>
        <img class="topImg" src="@/assets/index/top_title.png" />
        <div style="margin-right: 2%" class="topTitle"> {{ nowtime }} {{ curtime }} </div>
      </div>
      <div class="links">
        <router-link to="/ty">体育</router-link>
        <router-link to="/">总览</router-link>
        <router-link to="/cultrue">文化</router-link>
      </div>
    </div>

    <router-view />
    <!-- 底部信息 -->
    <div class="footer"></div>
  </div>
</template>

<script>
//https://www.jianshu.com/p/574b85349d40
// 引入api
import * as homeApi from '@/api/home'

export default {
  data() {
    return {
      // 当前时间
      date: new Date(),
      nowtime: "",
      curtime: '',
      day_num: 0,
      week_num: 0,
      mon_num: 0,
      year_num: 0,
      sumYear_num: 0
    };
  },
  created() {
    const cweeks = ['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
    // 取当前时间
    const year = this.date.getFullYear();
    const month = ('0' + (this.date.getMonth() + 1)).slice(-2);
    const day = ('0' + this.date.getDate()).slice(-2);
    // 周几
    const wday = this.date.getDay();
    // 创建时候附带时间
    const hours = ('0' + this.date.getHours()).slice(-2);
    const minutes = ('0' + this.date.getMinutes()).slice(-2);
    const seconds = ('0' + this.date.getSeconds()).slice(-2);
    this.curtime = `${hours}:${minutes}:${seconds}`
    this.nowtime = `${year}.${month}.${day} ` + cweeks[wday];
  },
  mounted() {
    this.getTimespan();
    this.getStat()
  },
  methods: {
    //
    getTimespan() {
      // 时分秒

      setInterval(() => {
        let tdate = new Date();
        //this.curtime = new Date().get.toLocaleString()
        const hours = ('0' + tdate.getHours()).slice(-2);
        const minutes = ('0' + tdate.getMinutes()).slice(-2);
        const seconds = ('0' + tdate.getSeconds()).slice(-2);
        //  console.log(seconds)
        this.curtime = `${hours}:${minutes}:${seconds}`
      }, 1000)
    },
    getStat() {
      let that = this
      homeApi.allGroupNum().then(res => {
        // get allTimeData
        const tmpdata = res.data.returnData
        this.day_num = tmpdata.day.noRepeatInNum
        this.week_num_num = tmpdata.week.noRepeatInNum
        this.mon_num = tmpdata.month.noRepeatInNum
        this.year_num = tmpdata.year.noRepeatInNum

        this.sumYear_num = tmpdata.sumYear.noRepeatInNum


      });
    },
  },
};
</script>


<style lang="scss">
body {
  margin: 0;
  padding: 0;
  background: #070a24;
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100vh;
}

// 基类
.btgym {
  width: 100vw;
  // height: 100%;
  position: relative;
  background-size: 100%;
  background-repeat: no-repeat;

  // 顶部信息
  .topnav {
    width: 100%;
    height: 14vh;
    background-image: url("assets/index/topnav.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // position: relative;

    // 顶部文字
    .toptxt {
      display: flex;
      justify-content: space-between;

      .topImg {
        margin-top: 0.6%;
        width: 24%;
        height: 3vh;
        margin-left: auto;
        margin-right: auto;
      }

      .topTitle {
        margin-top: 1%;
        color: #00c6ff;
        font-size: 14px;
        font-weight: bold;
      }
    }

    // 操作链接
    .links {
      width: 24%;
      height: 36%;
      // border: 1px solid red;
      margin: 16px auto;
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      font-size: 0.26rem;
      text-align: center;

      a {
        text-decoration: none;
        display: block;
        width: 33.33%;
        height: 86%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #00bdf9;
        display: flex;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        margin-top: 12px;
      }

      // 总览
      a:nth-child(2) {
        margin-top: 22px;
        background-image: url("assets/index/zl.png");
      }

      a:nth-child(1) {
        background-image: url("assets/index/ty.png");
      }

      a:nth-child(3) {
        background-image: url("assets/index/wh.png");
      }

      a.router-link-exact-active {
        color: #fff;
      }

      a.router-link-exact-active:nth-child(1) {
        background-image: url("assets/index/ty_active.png");
      }

      a.router-link-exact-active:nth-child(2) {
        background-image: url("assets/index/zl_active.png");
      }

      a.router-link-exact-active:nth-child(3) {
        background-image: url("assets/index/wh_active.png");
      }
    }
  }

  //底部信息
  .footer {
    width: 100%;
    height: 12vh;
    background-image: url("assets/g_footbg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>