airoptweb/src/views/openpage.vue

<template>
    <!-- 打开页-->
  <div class="openpage">
    <el-header>
        <myheader />
    </el-header>
    <!-- 主要内容 -->
    <div class="user lbg_color2">
    <div class="container border">
      <div class="user-slider lbg_color3 el-menu ">

        <el-menu class="lbg_color3  menuclass" :router='true' :default-active="activeIndex" @select="Select">
          <div class="ve_logo_img">
                <el-image
                    style="height: 100%"
                    :src="logo"
                    fit="contain"
                ></el-image>
            </div>
            <el-menu-item  index="/home/newfile">新建</el-menu-item>
           <el-menu-item   index="/home/querylist" >打开</el-menu-item>
          <el-menu-item    index="/home/savefile" >保存</el-menu-item>
          <el-menu-item  >另存</el-menu-item>
          <el-menu-item   >选择</el-menu-item>
        </el-menu>
      </div>
      <section class="user-main ">
        <router-view > </router-view>
      </section>
    </div>
  </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive,computed } from "vue";
import { RouterView, RouterLink,useRouter } from "vue-router"
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import myheader from "@/components/header.vue"
import logo from "@/assets/logo.png";
const router = useRouter();
 let dateKeyref=ref(new Date().getTime())
   //  defaultPage: '/project',
let  defaultPage=ref('/home/newfile');
const activeIndex=computed(()=>{
    const path = router.currentRoute.value.fullPath
    console.log(path);
     if (path === '/') {
        router.replace({ path: defaultPage.value })
     }
     return  path
  })
 function Select(key) {
  router.replace({ path: key })
    if(key=='/home/querylist'){
      console.log(11111)
    }

    }
</script>
<style lang="scss" scoped>
.ve_logo_img{
    text-align: center;
}
.user{
    width: 100%;
    height: calc(100vh - 40px);
}
.user .container .user-slider{
    width: 190px;
    height: 100%;
    padding-top: 20px;
}
.user-slider {
  .el-menu {
    border: none;
    &-item {
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      text-align: center;
      color: #b6b6b6;
      &.is-active {
        color:red;
        background: #2267B1;
      }
    }
  }
  .menuclass {
    background-color:rgba(0, 0, 0, 0)
  }
}
.lbg_color3{
    background: #2267B1;  
}
.border .el-menu{
  border: none;
  .el-menu-item{
    color: #fff;
  }
}

.user .container .user-main{
    width: calc(100% - 190px);
    height: 100%;
    background: #Fff;
    padding: 30px;
}
.user .container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.user-slider .el-menu-item.is-active{
  color: #000;
    background: #ecf5ff;
}
</style>