pro_back/src/pages/index/index.vue

<template>
  <div class="common-layout">
    <el-container >
        <el-aside :width="sideWidth + 'px'">
            
            <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                default-active="2"
                class="el-menu-vertical-demo"
                text-color="#fff"
                :collapse="isCollapse"
                @open="handleOpen"
                @close="handleClose"
            >
            <div class="title">开领智数测试服管理系统</div>
                <el-menu-item index="1" @click="gopages()">
                    <el-icon><icon-menu /></el-icon>
                    <template #title>
                        <span>欢迎使用本系统</span>
                    </template>
                </el-menu-item>

                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><setting /></el-icon>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item index="2-1"  @click="gopagesPermiss()">
                      权限管理
                    </el-menu-item>
                    <el-menu-item index="2-2" @click="gopagesDisposition()">系统配置</el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="3">
                  <template #title>
                    <el-icon><Avatar /></el-icon>
                      <span>用户管理</span>
                  </template>
                  <el-menu-item index="3-1" @click="gopagesBackend()">
                      后台管理员
                  </el-menu-item>
                  <el-menu-item index="3-2" @click="gopagesClient()">
                      客户管理
                  </el-menu-item>
                  <el-menu-item index="3-3" @click="gopagesWeiban()">
                      微伴管理
                  </el-menu-item>
                  <el-menu-item index="3-4" @click="gopagesQrcode()">
                      二维码管理
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item index="4">
                <el-icon><setting /></el-icon>
                <template #title>Navigator Four</template>
                </el-menu-item>
            </el-menu>
        </el-aside>
      <el-container>
        <el-header>
            <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :value="!isCollapse">{{ isCollapse ? "展示" : "隐藏" }}</el-radio-button>
            </el-radio-group> -->
            <div class="btn_show">
              <SvgIcon
                    @click="switchShowLogo()"
                    :style="'width:20px;height:20px;'"
                    :name="isCollapse? 'svg:indent.svg' : 'svg:outdent.svg'"
                >
              </SvgIcon>
            </div>
            <el-breadcrumb :separator-icon="ArrowRight">
              <el-breadcrumb-item >homepage</el-breadcrumb-item>
              <el-breadcrumb-item>promotion management</el-breadcrumb-item>
              <el-breadcrumb-item>promotion list</el-breadcrumb-item>
              <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="navbar-cp-container">

              <div class="right">

                <definDropdown
                :show="dataContainer.show_1"
                :ifLeftClick="true"
                :targetQuery="'.target'"
                @onOtherClick="dataContainer.show_1 = false"
                @onClick="
                    () => {
                        dataContainer.show_1 = !dataContainer.show_1;
                    }
                "
                position="outside,bottom,end"
            >
                <div
                    :class="{
                        active: dataContainer.show_1,
                        'user-container': true,
                        target: true,
                    }"
                >
                    <el-image class="img" :src="dataContainer.userInfo.avatar" fit="cover" />
                    <div class="name">
                        {{ dataContainer.userInfo.nickName }}
                        <div class="other">
                            {{ dataContainer.userInfo.userName }}
                        </div>
                    </div>
                    <div class="option">
                        <SvgIcon
                            :style="'width:15px;height:15px;'"
                            name="svg:sort-down.svg"
                        ></SvgIcon>
                    </div>
                </div>
                <template v-slot:dropdown>
                    <div class="bt-list-container">
                        <div class="item" @click="toPath('/main/mine/info')">
                            <SvgIcon
                                :style="'width:16px;height:16px;'"
                                name="svg:user-fill.svg"
                            ></SvgIcon>
                            个人中心
                        </div>
                        <div class="item" @click="toPath('/main/mine/info-password')">
                            <SvgIcon
                                :style="'width:16px;height:16px;'"
                                name="svg:supervise.svg"
                            ></SvgIcon>
                            密码修改
                        </div>
                        <div class="item logout-bt" @click.stop="onLogout">
                            <SvgIcon
                                :style="'width:16px;height:16px;color:#f56c6c;'"
                                name="svg:poweroff.svg"
                            ></SvgIcon>
                            退出登录
                        </div>
                    </div>
                </template>
            </definDropdown>
              </div>

            </div>
        </el-header>
          <el-main>
                <router-view></router-view>
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup >

import { ref,reactive,computed} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Avatar,
} from '@element-plus/icons-vue'
import { ArrowRight} from '@element-plus/icons-vue'
import { RouterView ,useRouter} from 'vue-router';
const router = useRouter();
const isCollapse = ref(false)
const dataContainer = reactive({
  userInfo:{
    avatar:'https://s11.ax1x.com/2023/12/15/pihx4js.jpg',
    nickName:'管理员',
    userName:'admin'
  },
  show_1: false,
})

const sideWidth = computed(() => {
  return isCollapse.value? 60 : 230; // 这里可以根据实际需求调整收缩和展开时的宽度值
});

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const switchShowLogo = () =>{
  isCollapse.value = !isCollapse.value
}


const gopages = ()=>{
    router.push('/index/welcome/index')
}
const gopagesPermiss = ()=>{
  router.push('/index/permissions')
}
const gopagesDisposition = ()=>{
  router.push('/index/disposition')
}
const gopagesBackend = () => {
  router.push('/index/backend')
}
const gopagesClient = ()=>{
  router.push ('/index/client')
}
const gopagesWeiban = ()=> {
  router.push ('/index/weiban')
}
const gopagesQrcode = ()=> {
  router.push ('/index/qrcode')
}

const toPath = (path)=>{
  router.push(`${path}`)
}
const onLogout = ()=>{
  router.push("/login")
}

</script>



<style scoped lang='scss'>

.common-layout {
  display: flex;
  flex-direction: row;
  height: 100vh;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 100vh;
  max-width: 100vh;
}
.el-menu-vertical-demo.el-menu--collapse {
  height: 100vh; /* 设置收缩状态下的固定高度，和非收缩状态下的min-height保持一致 */
  overflow-y: auto; /* 如果内容超出设置的高度，可以添加滚动条来查看隐藏内容 */
}
  .el-aside {
    transition: width 0.3s ease;
    .title{
        display: inline-flex;
         width: 229px;
        height: 40px;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        flex-wrap: nowrap;
        overflow: hidden;
        background-color:#545c64;
        color:#fff;
    }
}
.el-header{
  display: flex;
  align-items: center;
  background-color: white;
  --el-header-padding:0px;
 > .btn_show{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            margin-left: var(--item-gap);
            margin: 10px;
            > * {
                cursor: pointer;
                transition: all 0.2s;
                &:hover {
                    color: #0072e5;
                }
            }
  }
  .el-breadcrumb{
    width: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  @media screen and (max-width: 1000px) {
   .el-breadcrumb{
      display: none;
    }
  }
  @media screen and (min-width: 700px) {
   .el-breadcrumb{
      display: inline-flex;
      flex-wrap: nowrap;
      overflow: hidden;
    }
  }
  .navbar-cp-container{
    width: 100%;
    > .right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 0 0 0 0;
        box-sizing: border-box;
        position: relative;
        height: 100%;
        > * {
            margin-left: var(--item-gap);
        }
        .user-container {
            width: auto;
            height: 100%;
            cursor: pointer;
            border-radius: 0 0 0 0;
            transition: all 0.2s;
            position: relative;
            border: none;
            box-shadow: none;
            border-left: 1px solid var(--border-color);
            box-sizing: border-box;
            padding: 0px var(--item-gap);
            display: flex;
            flex-direction: row;
            align-items: center;
            &.active {
                background-color: #f0f0f0;
                box-shadow: inset 0 1px 4px #0000002a;
            }
            > .img {
                width: 43px;
                min-width: 43px;
                height: 43px;
                border-radius: 50%;
                margin-right: var(--item-gap);
                // border: 2px solid #949494;
                margin: 0 10px;
                box-shadow: #0000002a 2px 2px 5px;
            }
            > .name {
                font-size: 14px;
                font-weight: bold;
                margin-right: var(--item-gap);
                color: #444954;
                display: flex;
                flex-direction: column;
                margin: 0 10px;
                > .other {
                    font-size: 12px;
                    opacity: 0.6;
                    margin-top: 2px;
                    font-weight: 400;
                }
            }
            > .option {
                width: fit-content;
                height: fit-content;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
        }
       > .defin-drop {
          z-index: 9;
       }

    }
  }
}
}


</style>