oa-system/src/components/home.vue

<template>
  <div class="all-box">
    <el-container class="all">
      <el-aside class="delwh">
        <el-menu
        :default-active="indexs"
        class="el-menu-vertical-demo menubar"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse" 
        >
          <div class="user">
            <div class="user-box">
              <div class="user-img">
                <img src="../assets/logo2.png" />
              </div>
              <div v-if="panduan" class="user-text">
                泛美国际 - AI智能办公系统
              </div>
            </div>
          </div>
          <div class="avatar-box">
            <div class="nei-avatar">
              <div class="avatar">
                <div class="avatar-img">
                  <img src="../assets/avatar.jpg" alt="" />
                </div>
                <div v-if="panduan" class="avatar-text">
                  <div class="avatar-name">姓名: {{userinif.userInfo.cnName}} 部门: {{userinif.userInfo.depName}}</div>
                  <div class="avatar-division">职位: {{userinif.userInfo.jobName}}</div>
                </div>
              </div>
            </div>
          </div>
          <el-menu-item index="1" @click="toURL($event.index)">
            <i class="iconfont icon-shouye"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="2" @click="toURL($event.index)">
            <i class="el-icon-menu"></i>
            <span slot="title">企业数据</span>
          </el-menu-item>
          <el-menu-item index="3" @click="toURL($event.index)">
            <i class="el-icon-setting"></i>
            <span slot="title">主业务加价设置</span>
          </el-menu-item>
          <el-menu-item index="4" @click="toURL($event.index)">
            <i class="iconfont icon-tongjitu"></i>
            <span slot="title">数据统计</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="btnradio">
            <el-radio-group v-model="isCollapse" @change="radioChange($event)">
              <el-radio-button class="radiobox" :label="false"
                ><span class="iconfont icon-caidanzhankai icon"></span
              ></el-radio-button>
              <el-radio-button class="radiobox" :label="true"
                ><span class="iconfont icon-caidanshouqi icon"></span
              ></el-radio-button>
            </el-radio-group>
            <div class="header-title">首页</div>
          </div>
          <div class="name-box">
            <div
              class="instrument"
              @click="instrumentclick('.instrument-box', $event)"
            >
              <i class="icon-shiyonggongju"></i>
            </div>
            <div class="message">
              <i class="icon-tongzhi"></i>
            </div>
            <div class="user-inif" @click="instrumentclick('.user-operate', $event)">
              <div class="user-inifs">
                <img src="../assets/avatar.jpg" alt="" />
              </div>
            </div>
          </div>
          <div class="instrument-box">
            <div class="instrument-box-title">实用工具</div>
            <div class="instrument-box-inif">
              <div class="box-inif-ul">
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
                <div class="box-inif-li">
                  <div class="inif-li-img">
                    <img src="../assets/QuNaEr.jpg" alt="" />
                  </div>
                  <div class="inif-li-text">去哪儿</div>
                </div>
              </div>
            </div>
          </div>
          <div class="user-operate">
            <div class="operate-title">
              <div class="avatar">
                <div class="avatar-img">
                  <img src="../assets/avatar.jpg" alt="" />
                </div>
                <div class="avatar-text">
                  <div class="avatar-name">姓名:{{userinif.userInfo.cnName}} 部门: {{userinif.userInfo.depName}}</div>
                  <div class="avatar-division">职位: {{userinif.userInfo.jobName}}</div>
                </div>
              </div>
            </div>
            <div class="operate-ul">
              <div class="operate-li">全屏</div>
              <div class="operate-li">修改密码</div>
              <div class="operate-li">个人资料</div>
              <div class="operate-li">登出</div>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  <script>
    export default {
      data() {
        return {
          isCollapse: false,
          panduan:"",
          username:"雷怡",
          indexs:"1",
          pdinstrument: true,
          userinif:'',
        };
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        //移除element行内样式
        removal() {
          document.querySelector(".menubar").style.height =window.innerHeight + "px";
          document.querySelector(".all").style.height = window.innerHeight + "px";
          document.querySelector(".delwh").style.width = "";
        },
        toURL(val) {
          if (val == "2") {
            this.$router.push({ path: "/home/test" });
            document.querySelector(".header-title").innerHTML = "企业数据";
          } else if (val == "3") {
            this.$router.push({ path: "/home/Advancement" });
            document.querySelector(".header-title").innerHTML = "主业务加价设置";
          } else if (val == "1") {
            this.$router.push({ path: "/home/index" });
            document.querySelector(".header-title").innerHTML = "首页";
          } else if (val == "4") {
            this.$router.push({ path: "/home/Statistics" });
            document.querySelector(".header-title").innerHTML = "数据统计";
          }
        },
        radioChange(val) {
          var radiobox = document.querySelectorAll(".radiobox");
          if (val == true) {
            this.panduan = false;
            document.querySelector(".user-text").style.display = "none";
            document.querySelector(".avatar-text").style.display = "none";
            radiobox[1].style.display = "none";
            radiobox[0].style.display = "inline-block";
          } else if (val == false) {
            this.panduan = true;
            radiobox[1].style.display = "inline-block";
            radiobox[0].style.display = "none";
          }
        },
        ifIndexValue(){
          const url=this.$route.path;
          console.log(url)
          if(url=="/home/test"){
            this.indexs="2";
          }else if(url=="/home/Advancement"){
            this.indexs="3";
          }else if(url=="/home/index"){
            this.indexs="1";
          }else if(url=="/home/Statistics"){
            this.indexs="4";
          }else if(url=="/home/OrderManagement"){
            this.indexs="5";
          }
          console.log(this.indexs)
        },
        //实用工具
        instrumentclick(val, evt) {
          if (document.querySelector(val).style.top!="60px") {
            evt.currentTarget.style.backgroundImage ="linear-gradient(rgba(29,33,41,.03),rgba(29,33,41,.1))";
            evt.currentTarget.firstElementChild.style.color = "#666";
            document.querySelector(val).style.top = 60 + "px";
          } else {
            evt.currentTarget.style.backgroundImage = "";
            evt.currentTarget.firstElementChild.style.color = "";
            document.querySelector(val).style.top = -570 + "px";
          }
        },
      },
      mounted() {
        this.removal();
        this.radioChange(false);
        this.ifIndexValue();
      },
      created() {
        this.userinif=JSON.parse(localStorage.getItem('userinif'));
        console.log(this.userinif)
        console.log(this.$route);
      },
    };
  </script>
  <style>
    .el-menu .el-menu-item.is-active{
      color: #fff;
      background-color: rgba(0, 0, 0, 0.1);
    }
    body {
      margin: 0;
      padding: 0;
    }
    html {
      background-color: #fff;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 260px;
      min-height: 400px;
    }
    .el-menu {
      border-right: none;
    }
    .delwh {
      border-right: solid 1px #e6e6e6;
      background-image: linear-gradient(
        270deg,
        rgba(178, 45, 226, 0.18),
        transparent
      );
      background-color: #0f619f;
    }
    .el-menu-vertical-demo {
      background-image: linear-gradient(
        270deg,
        rgba(178, 45, 226, 0.18),
        transparent
      );
      background-color: #0f619f;
    }
    .el-header {
      border-bottom: solid 1px #e6e6e6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 3;
    }
    .instrument-box {
      position: absolute;
      z-index: 2;
      right: 20px;
      top: -400px;
      width: 350px;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 0 5px #0005;
      transition: all 0.5s;
    }
    .instrument-box-title {
      background: linear-gradient(250deg, #3e93d6, #8a75aa);
      padding: 20px;
      text-align: center;
      color: #fff;
    }
    .instrument-box-inif {
      background-color: #fff;
      height: 320px;
      overflow-y: auto;
    }
    .box-inif-ul {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
    }
    .inif-li-text {
      font-size: 12px;
    }
    .box-inif-li {
      width: 25%;
      height: 81px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      padding: 10px;
      margin: 0 3px;
      cursor: pointer;
    }
    .box-inif-li:hover {
      background-image: linear-gradient(
        rgba(29, 33, 41, 0.03),
        rgba(29, 33, 41, 0.04)
      );
      color: #967bbd;
    }
    .btnradio {
      display: flex;
      align-items: center;
    }
    .name-box {
      display: flex;
      font-size: 14px;
    }
    .user-operate {
      position: absolute;
      z-index: 2;
      right: 20px;
      top: -300px;
      width: 310px;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 0 5px #0005;
      transition: all 0.5s;
    }
    .operate-title {
      background: linear-gradient(250deg, #3e93d6, #8a75aa);
      padding: 20px;
      text-align: center;
      color: #fff;
    }
    .operate-ul{
      background-color: #fff;
    }
    .operate-li{
      padding: 12px 24px;
      cursor: pointer;
      color: #555;
    }
    .operate-li:hover{
      background-image: linear-gradient(
        rgba(29, 33, 41, 0.03),
        rgba(29, 33, 41, 0.04)
      );
      color: #967bbd;
    }
    .names {
      margin-right: 20px;
    }
    .quit {
      cursor: pointer;
    }
    .el-radio-button:first-child .el-radio-button__inner {
      border: none;
    }
    .el-radio-button:last-child .el-radio-button__inner {
      border: none;
    }
    .icon {
      font-size: 20px;
    }
    .el-radio-button__inner {
      padding: 0;
    }
    .header-title {
      margin-left: 20px;
    }
    .icon-shouye {
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px;
      vertical-align: middle;
      display: inline-block;
      font-weight: 600;
    }
    .icon-tongjitu {
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px;
      vertical-align: middle;
      display: inline-block;
      font-weight: 600;
    }
    .user-img {
      width: 40px;
      height: 40px;
    }
    .user-img img {
      width: 100%;
      height: 100%;
    }
    .user-box {
      padding: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .user-text {
      /*margin-left: 15px;*/
      font-size: 16px;
      /*font-weight: 600;*/
      color: #fff;
    }
    .naem-box {
      font-size: 16px;
    }
    .naem-box div {
      padding-left: 20px;
    }
    .el-menu-vertical-demo .el-menu-item {
      color: #82c2f3;
    }
    .el-menu-vertical-demo .el-menu-item:focus,
    .el-menu-vertical-demo .el-menu-item:hover {
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
    }
    .el-menu-vertical-demo .el-menu-item i {
      color: #2595ea;
    }
    .avatar-box {
      height: 9.53rem;
      background-image: url("../assets/cover-2-lg.png");
      background-repeat: no-repeat;
    }
    .nei-avatar {
      height: 100%;
      background-color: rgba(27, 92, 164, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 1.5s;
    }
    .nei-avatar:hover {
      background-color: rgba(27, 92, 164, 0);
    }
    .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .avatar-text {
      color: #fff;
      margin-left: 15px;
      font-size: 14px;
      text-align: left;
    }
    .avatar-text > div {
      line-height: 28px;
    }
    .avatar-img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
    }
    .avatar-img img {
      width: 100%;
    }
    .user-inifs {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .user-inif img {
      width: 100%;
    }
    i.icon-shiyonggongju {
      font-size: 32px;
      color: #2198f3;
    }
    i.icon-tongzhi {
      font-size: 32px;
      color: #2198f3;
    }
    .name-box > div {
      cursor: pointer;
      margin-left: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .name-box i:hover {
      color: #666;
    }
    .el-main {
      background-color: #ebf6fd;
    }
    .inif-li-img {
      width: 50px;
      height: 50px;
    }
    .inif-li-img img {
      width: 100%;
    }

    .instrument-box-inif::-webkit-scrollbar {
      width: 5px;
      height: 16px;
      background-color: transparent;
    }
    /*定义滚动条轨道
    内阴影+圆角*/
    .instrument-box-inif::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
      border-radius: 10px;
      background-color: transparent;
    }
    /*定义滑块
    内阴影+圆角*/
    .instrument-box-inif::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #b9bcc0;
    }
  </style>