160 lines
3.9 KiB
Vue
160 lines
3.9 KiB
Vue
<!-- /**用于显示sidebar的页面 */ -->
|
||
<template>
|
||
<!-- 这一层用来放边栏 -->
|
||
<el-container
|
||
style="height: 100%; border: 0px; background-color: #f5f6fa; width: 100%"
|
||
>
|
||
<el-header class="containerSystemName">
|
||
<!-- 这里要放两个部件，一个是系统名称一个是折叠按钮 -->
|
||
<!-- 这里主要调整el-container的布局模式就直接写在这里了 -->
|
||
<el-container style="padding: 0">
|
||
<el-container class="text-systemName">
|
||
<img
|
||
src="@/assets/logo.png"
|
||
alt=""
|
||
style="width: 40px; height: 40px"
|
||
/>
|
||
<el-text v-show="!isFold" style="color: white; font-size: 16px"
|
||
>线索库系统</el-text
|
||
>
|
||
</el-container>
|
||
<el-button class="btnFold" @click="handleFold"
|
||
><el-icon><Fold /></el-icon
|
||
></el-button>
|
||
</el-container>
|
||
</el-header>
|
||
<el-menu
|
||
style="border: none; height: 100vh"
|
||
text-color="rgba(255,255,255,0.65)"
|
||
active-text-color="#ffd04b"
|
||
default-active="/Home"
|
||
:collapse="isCollapse"
|
||
:collapse-transition="false"
|
||
class="containerSelections"
|
||
router
|
||
>
|
||
<el-menu-item index="/Home">
|
||
<el-icon><HomeFilled /></el-icon>
|
||
<span v-show="!isFold">系统首页</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="/Delete">
|
||
<el-icon><DeleteFilled /></el-icon>
|
||
<span v-show="!isFold">回收站</span>
|
||
</el-menu-item>
|
||
<!--
|
||
@brief: 用于调试我设计的各种界面，相当于一个画板
|
||
@date: 2024年6月29日
|
||
@author: myz
|
||
-->
|
||
<el-menu-item index="/test">
|
||
<el-icon><View /></el-icon>
|
||
<span v-show="!isFold">测试专用</span>
|
||
</el-menu-item>
|
||
</el-menu>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "AsideMenu",
|
||
props: {
|
||
isCollapse: Boolean,
|
||
},
|
||
data() {
|
||
// 控制折叠状态变量:
|
||
return {
|
||
isFold: false,
|
||
};
|
||
},
|
||
methods: {
|
||
// 控制折叠状态
|
||
handleFold() {
|
||
this.isFold = !this.isFold;
|
||
// 向indexPage传递边栏的折叠状态
|
||
if (this.isFold) this.$emit("update:isCollapse", true);
|
||
else this.$emit("update:isCollapse", false);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
/** @brief: CSS设计 @date: 2024年6月20日 @author: myz */
|
||
<style scoped>
|
||
.containerSystemName {
|
||
color: white; /**字体颜色为白色 */
|
||
background-color: #090470; /* 容器背景颜色 */
|
||
display: flex;
|
||
justify-content: center; /**水平居中 */
|
||
align-items: center; /**竖直居中 */
|
||
font-weight: bolder; /** 字体加粗 */
|
||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/
|
||
font-size: 14px; /**字体大小 */
|
||
height: 8%;
|
||
width: 100%;
|
||
padding-left: 0;
|
||
padding-right: 3px;
|
||
}
|
||
|
||
.text-systemName {
|
||
background-color: #090470; /* 容器背景颜色 */
|
||
display: flex;
|
||
/**竖直居中 */
|
||
align-items: center;
|
||
/**水平居中 */
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding: 0;
|
||
}
|
||
.containerSelections {
|
||
background-color: #000c17;
|
||
height: 92%;
|
||
width: 100%;
|
||
border: 0px;
|
||
}
|
||
|
||
/**覆写悬浮，选中等样式 */
|
||
|
||
.btnFold {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #8f9191;
|
||
font-size: 28px;
|
||
background-color: transparent;
|
||
border: 0;
|
||
}
|
||
|
||
.btnFold:hover {
|
||
background-color: transparent;
|
||
color: #1ad4c4d4;
|
||
}
|
||
.el-menu--line {
|
||
background-color: #000c17 !important;
|
||
}
|
||
.el-menu--line.el-menu-item {
|
||
background-color: #000c17 !important;
|
||
padding-left: 49px !important;
|
||
}
|
||
.el-menu-item:hover {
|
||
color: #ffd04b !important;
|
||
}
|
||
.el-menu-item:hover i {
|
||
color: #ffd04b;
|
||
}
|
||
.el-menu-item.is-active {
|
||
background-color: #1890ff !important;
|
||
border-radius: 5px;
|
||
margin-right: 1px;
|
||
margin-left: 1px;
|
||
}
|
||
.el-menu-item {
|
||
font-size: 17px !important;
|
||
height: 48px;
|
||
line-height: 47px;
|
||
margin-right: 1px;
|
||
margin-left: 1px;
|
||
}
|
||
.el-menu-item i {
|
||
font-size: 20px !important;
|
||
}
|
||
</style>
|