上代码:
<template>
<div class="main">
<div class="main-left">
<img :src="logo" alt="" width="200" height="60" @click="gourl('index')" />
<div class="menus">
<div
class="menus-item"
:class="[urlname == 'index' ? 'active' : '']"
@click="gourl('index')"
>
<span class="text">000</span>
</div>
<div
class="menus-item"
:class="[urlname == 'aaa' ? 'active' : '']"
@click="gourl('aaa')"
>
<span class="text">111</span>
</div>
<div
class="menus-item"
:class="[urlname == 'bbb' ? 'active' : '']"
@click="gourl('bbb')"
>
<span class="text">222</span>
</div>
<div
class="menus-item"
:class="[urlname == 'ccc' ? 'active' : '']"
@click="gourl('ccc')"
>
<span class="text">333</span>
</div>
</div>
</div>
<div class="main-right">
<div class="main-right-top">
<div>
<el-dropdown>
<el-icon><avatar /></el-icon>
<span class="el-dropdown-link"> Yzp </span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="a">Action 1</el-dropdown-item>
<el-dropdown-item command="b">Action 2</el-dropdown-item>
<el-dropdown-item command="c" @click="exit"
><el-icon><switch-button /></el-icon>退出</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div>
<slot></slot>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import logos from "@/assets/img/logo.svg"
const router = useRouter()
//img资源
const logo = ref(logos)
let urlname = router.currentRoute.value.name
function gourl(name: string) {
if (router.resolve({ name }).name != urlname) {
router.push({ name })
}
}
function exit() {
router.push("/")
}
</script>
<style scoped lang="scss">
.main {
display: flex;
flex-direction: row;
width: 100%;
.main-left {
display: flex;
width: 200px;
flex-direction: column;
img {
background-color: #c0f1ec;
}
.menus {
background-color: #c0f1ec;
height: calc(100vh - 65px);
.menus-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
background-color: #6acdbc;
margin-bottom: 10px;
cursor: pointer;
color: white;
}
.active {
background-color: white;
color: #42adeb;
}
}
}
.main-right {
width: calc(100% - 200px);
flex-direction: column;
.main-right-top {
height: 60px;
background-color: bisque;
display: flex;
justify-content: end;
align-items: center;
padding-right: 15px;
div {
display: flex;
align-items: center;
img {
margin-right: 5px;
}
}
}
}
}
</style>