btgym/src/components/index/index.vue

<template>
    <div class="hello">
      <div class="main" :class="backVal == 1 ? 'bla1' : 'bla'" >

        <div class="topCard">
          <div class="item">
            <div style="margin-left: 2%;" class="topTitle">累计进馆人数：3,435,123万人</div>
            <img class="topImg" src="../../assets/index/top_title.png"/>
            <div style="margin-right: 2%;" class="topTitle">星期四 16:33:33 天气：晴</div>
          </div>

          <!-- 功能区 -->
          <div class="selectItem">
            <div @click="clickItme(1)" class="ty guan" :class="selectVal == 1 ? 'ty_active' : 'ty'">
              <div class="txt">体育</div>
            </div>
            <div @click="clickItme(2)" class="zl guan" :class="selectVal == 2 ? 'zl_active' : 'zl'">
              <div class="txt">总览</div>
            </div>
            <div @click="clickItme(3)" class="wh guan" :class="selectVal == 3 ? 'wh_active' : 'wh'">
              <div class="txt">文化</div>
            </div>

          </div>
        </div>
        
         <!-- 中间视图 -->
        <router-view></router-view>
        
        <!-- 底部 -->
        <div class="bottom"></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        selectVal: 3,
        keliuList: [
          {
            unit: '年'
          },
          {
            unit: '月'
          },
          {
            unit: '日'
          }
        ],
        selectVal1: '年',
        backVal: 3

      }
    },
    mounted() {
      this.$router.push({ path: '/zongLan/zongLan' })
    },
    methods: {
      // 1:体育 2 总览 3 文化
      clickItme(val){
        this.selectVal = val
        if(val == 1){
          this.$router.push({ path: '/tiyuchang/tiyuchang' })
          this.backVal = 1
        }else if(val == 2){
          this.$router.push({ path: '/zongLan/zongLan' })
          this.backVal = 3
        }
        else if(val == 3){
          this.$router.push({ path: '/stadium/stadium' })
          this.backVal = 2
        }
      },
      clickQushi(val){
        this.selectVal1 = val
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .bla{
    background-image: url('../../assets/index/bg.jpg');
  }
  .bla1{
    background-image: url('../../assets/tiyuguan/bg.jpg');
  }
    .main{
      width: 100vw;
      height: 100vh;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
      .topCard{
        width: 100%;
        height: 20%;
        background-image: url('../../assets/index/topnav.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
        position: relative;
        // padding-top: 20px;
        .item{
          display: flex;
          justify-content: space-between;
        }
        .topImg{
          margin-top: 1%;
          width: 35%;
          height: 15%;
        }
        .topTitle{
          margin-top: 1%;
          color: #00C6FF;
          font-size: 14px;
          font-weight: bold;
        }
        .selectItem{
          width: 39%;
          height: 38%;
          // border: 1px solid red;
          margin: 0 auto;
          margin-top: 2.4%;
          display: flex;
          justify-content: space-between;
          .guan{
            width: 33.33%;
            height: 86%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            text-align: center;
            color: #00BDF9;
            font-weight: bold;
            font-size: 1em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor:pointer
          }
          .ty{
            background-image: url('../../assets/index/ty.png');
          }
          .ty_active{
            color: white;
            background-image: url('../../assets/index/ty_active.png');
          }
          .zl{
            background-image: url('../../assets/index/zl.png');
          }
          .zl_active{
            color: white;
            background-image: url('../../assets/index/zl_active.png');
          }
          .wh{
            background-image: url('../../assets/index/wh.png');
          }
          .wh_active{
            color: white;
            background-image: url('../../assets/index/wh_active.png');
          }
          .tiyuchang{
            .txt{
              transform: rotate(3deg);
              margin-top: -7px;
            }
          }
          .tiyuguan{
            margin-top: 1.4%;
            
            .txt{
              transform: rotate(3deg);
              margin-top: -7px;
            }
          }
          .zonglan{
            margin-top: 2.8%;
            
            height: 77%;
            .txt{
              margin-top: -2px;
            }
          }
          .youyong{
            margin-top: 1.4%;
            .txt{
              margin-top: -7px;
              transform: rotate(-3deg);
            }
          }
          .bowu{
            .txt{
              transform: rotate(-3deg);
              margin-top: -7px;
            }
          }
        }
      }

      .bottom{
        width: 100%;
        height: 12%;
        background-image: url('../../assets/g_footbg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
      }
    }
  </style>