封装导航栏组件

<template>
  <div id="bigmap">
    <div class="main">
      <!-- 顶部盒子 -->
      <div class="top">
        <div
          class="left"
          :class="isAll === 0 ? 'active' : ''"
          @click="isAll = 0"
        >
          <a href="#">工会财务全景图</a>
        </div>
        <div class="middle">
          <div
            class="middle"
            :class="isAll === 1 ? 'active' : ''"
            @click="isAll = 1"
          >
            <a href="#">工会财务明细图</a>
          </div>
        </div>
        <div class="right">
          <div
            class="right"
            :class="isAll === 2 ? 'active' : ''"
            @click="isAll = 2"
          >
            <a href="#">预算汇总表</a>
          </div>
        </div>
      </div>

      <!-- 工会财务全景图 -->
      <div class="bigbox" v-if="isAll === 0">
        <div>工会财务全景图</div>
        <!-- <div class="header">1</div>
        <div class="footer">1</div> -->
      </div>
      <!-- 工会财务明细图 -->
      <div class="bigbox" v-if="isAll === 1">工会财务明细图</div>
      <!-- 预算汇总表 -->
      <div class="bigbox" v-if="isAll === 2">预算汇总表</div>
    </div>
  </div>
</template>

<script>
// 单独设置jsrem适配文件
// 根标签文字大小 =  当前设备宽度 / 基数
function setFontSize() {
  // 确定基数
  const i = 80
  // 获取设备
  const htmlClient = document.documentElement
  // 设备宽度
  let htmlWidth = htmlClient.offsetWidth
  // 设备宽度不能无限的大不能无限小 (1024 - 1920)
  if (htmlWidth >= 1920) {
    htmlWidth = 1920
  } else if (htmlWidth <= 1024) {
    htmlWidth = 1024
  }
  // 设置根标签文字大小
  htmlClient.style.fontSize = htmlWidth / i + 'px'
}
// 调用函数
setFontSize()
// 当窗口大小发生改变的时候
window.onresize = function () {
  setFontSize()
}

export default {
  data() {
    return {
      isAll: 0
    }
  }
}
</script>

<style lang="less" scoped>
@import url("./base.css");
@bgc1: #e6f2fd;
@bgc2: #fcfeff;
@topbgc: #e0e8f4;
@topfs: #318ac9;

.active {
  background-color: #51bae4;
  a {
    color: #fff;
  }
}

// .headclick {
//   // width: 110%;
//   // display: flex;
//   // transform: translate(-30px);
//   div {
//     transform: translateX(-30px) skewX(-15deg);
//     span {
//       display: block;
//       transform: skewX(15deg);
//     }
//     background: #eaeaea;
//     box-shadow: 10px 10px 10px gray;
//     color: #409eff;
//     font-size: 20px;
//     font-weight: 300;
//   }
//   div:nth-of-type(1) {
//     flex-grow: 4;
//     z-index: 3;
//   }
//   div:nth-of-type(2) {
//     flex-grow: 2;
//     z-index: 2;
//   }
//   div:nth-of-type(3) {
//     flex-grow: 3;
//     span {
//       transform: translate(-10%) skewX(15deg);
//     }
//     z-index: 1;
//   }
//   .active {
//     background: #409eff;
//     font-weight: bold;
//     color: white;
//   }
// }
//
#bigmap {
  width: 80rem;
  height: 100vh;
  background: @bgc1;
  margin: auto;
  .main {
    width: 77.5rem;
    height: 100vh;
    background-color: @bgc1;
    margin: 0 auto;
    .top {
      display: flex;
      height: 3.333rem;
      background-color: @topbgc;
      box-shadow: 0px 6px 11px 0px rgba(137, 148, 157, 0.18);
      border-radius: 0px 0px 14px 14px;
      overflow: hidden; //
      text-align: center;
      line-height: 3.333rem;
      // color: @topfs;
      //  transform: translate(-30px);
      // div {
      //   // transform: translateX(-30px) skewX(-15deg);
      //   // transform: skewX(-20deg);
      //   a {
      //     // display: block;
      //     // transform: skewX(20deg);
      //     color: @topfs;
      //   }
      // }
      .left {
        width: 33.333rem;
        height: 3.333rem;
        .active {
          background-color: #51bae4;
          a {
            color: #fff !important;
          }
        }
      }
      .middle {
        flex: 1;
        height: 3.333rem;
      }
      .right {
        flex: 1;
        height: 3.333rem;
      }
    }

    .bigbox {
      height: 8.333rem;
      background-color: @bgc2;
      margin-top: 0.833rem;
      box-shadow: 0px 6px 11px 0px rgba(137, 148, 157, 0.18);
    }
  }
}
</style>