LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

兰代清sb

Browse Source
This commit is contained in:
Zhang HaoYang
2023-12-23 23:14:47 +08:00
parent 19f6259c78
commit 26136e74ea
5 changed files with 98 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/home/LeftSide.vue
View File

@@ -1,30 +1,66 @@
<template>
<div class="left-side">
<div class="side-wrapper">
<div class="side-title">Apps</div>
<div class="side-menu">
<a href="#">
<svg viewBox="0 0 512 512">
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path>
</g>
<path xmlns="http://www.w3.org/2000/svg" d="M192 192h128v128H192zm0 0" fill="currentColor" data-original="#82b1ff"></path>
<path xmlns="http://www.w3.org/2000/svg" d="M384 192h128v128H384zm0 0M0 384h128v128H0zm0 0M192 384h128v128H192zm0 0M384 384h128v128H384zm0 0" fill="currentColor" data-original="#bfc9d1"></path>
</svg>
All Apps
</a>
<a href="#">
<svg viewBox="0 0 488.932 488.932" fill="currentColor">
<path d="M243.158 61.361v-57.6c0-3.2 4-4.9 6.7-2.9l118.4 87c2 1.5 2 4.4 0 5.9l-118.4 87c-2.7 2-6.7.2-6.7-2.9v-57.5c-87.8 1.4-158.1 76-152.1 165.4 5.1 76.8 67.7 139.1 144.5 144 81.4 5.2 150.6-53 163-129.9 2.3-14.3 14.7-24.7 29.2-24.7 17.9 0 31.8 15.9 29 33.5-17.4 109.7-118.5 192-235.7 178.9-98-11-176.7-89.4-187.8-187.4-14.7-128.2 84.9-237.4 209.9-238.8z"></path>
</svg>
Updates
<span class="notification-number updates">3</span>
</a>
</div>
<!-- <div class="side-wrapper">-->
<!-- <div class="side-title">Apps</div>-->
<!-- <div class="side-menu">-->
<!-- <a href="#">-->
<!-- <svg viewBox="0 0 512 512">-->
<!-- <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">-->
<!-- <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path>-->
<!-- </g>-->
<!-- <path xmlns="http://www.w3.org/2000/svg" d="M192 192h128v128H192zm0 0" fill="currentColor" data-original="#82b1ff"></path>-->
<!-- <path xmlns="http://www.w3.org/2000/svg" d="M384 192h128v128H384zm0 0M0 384h128v128H0zm0 0M192 384h128v128H192zm0 0M384 384h128v128H384zm0 0" fill="currentColor" data-original="#bfc9d1"></path>-->
<!-- </svg>-->
<!-- All Apps-->
<!-- </a>-->
<!-- <a href="#">-->
<!-- <svg viewBox="0 0 488.932 488.932" fill="currentColor">-->
<!-- <path d="M243.158 61.361v-57.6c0-3.2 4-4.9 6.7-2.9l118.4 87c2 1.5 2 4.4 0 5.9l-118.4 87c-2.7 2-6.7.2-6.7-2.9v-57.5c-87.8 1.4-158.1 76-152.1 165.4 5.1 76.8 67.7 139.1 144.5 144 81.4 5.2 150.6-53 163-129.9 2.3-14.3 14.7-24.7 29.2-24.7 17.9 0 31.8 15.9 29 33.5-17.4 109.7-118.5 192-235.7 178.9-98-11-176.7-89.4-187.8-187.4-14.7-128.2 84.9-237.4 209.9-238.8z"></path>-->
<!-- </svg>-->
<!-- Updates-->
<!-- <span class="notification-number updates">3</span>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<div class="HeadLine" style="margin-top:10px;margin-left:-5px;">
<div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-home"></i>快速导航</div>
</div>
<el-tree :data="category" :props="defaultProps"></el-tree>
<el-tree :data="data" style="width:200px;margin-top:30px;" >
</el-tree>
</div>
</template>
<style scoped>
::v-deep .el-tree{
background-color: rgb(255 255 255 / 31%);
border-radius:8px;
font-family: SimHei;
font-size:15px;
font-weight:600;
color: #3d3d3d;
border-color:var(--border-color);
border-width: 5px;
}
::v-deep .el-tree-node__content{
height:50px;
border-radius:8px;
border-bottom: solid 1.5px var(--border-color);
}
::v-deep .el-tree-node__label{
margin-left:10px;
}
::v-deep .el-tree .el-icon-caret-right:before{
content: url("../../assets/img/arrowRight.svg");
}
::v-deep .el-tree-node:focus>.el-tree-node__content{
background-color: #8fd3ff !important;
}
</style>
<script>
export default {
name:"LeftSide",
@@ -33,10 +69,41 @@ export default {
},
data() {
return {
defaultProps: {
children: 'childUC',
label: 'name'
}
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}]
}},
mounted() {