兰代清sb
This commit is contained in:
parent
19f6259c78
commit
26136e74ea
@ -7,6 +7,7 @@
|
||||
|
||||
|
||||
:root {
|
||||
--font-bg-theme-reverse:rgb(255 255 255 / 31%);
|
||||
--font-border: rgb(213, 79, 27);
|
||||
--theme-comment-color: rgba(178, 188, 250, 0.4);
|
||||
--theme-bg-color: rgba(16 18 27 / 40%);
|
||||
@ -28,6 +29,7 @@
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
--font-bg-theme-reverse:rgba(16 18 27 / 40%);
|
||||
--font-border: rgb(108, 155, 255);
|
||||
--theme-comment-color: rgba(201, 217, 255, 0.4);
|
||||
--theme-bg-color: rgb(255 255 255 / 31%);
|
||||
|
||||
1
src/assets/img/arrowRight.svg
Normal file
1
src/assets/img/arrowRight.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703343848964" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="975" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M373.817 84.718c-27.639-27.624-72.45-27.624-100.088 0-27.639 27.625-27.639 72.413 0 100.037L601.107 512 273.73 839.245c-25.126 25.113-27.41 64.41-6.853 92.103l6.853 7.934c27.638 27.624 72.45 27.624 100.088 0L751.27 562.019c27.639-27.625 27.639-72.413 0-100.038L373.817 84.718z" fill="#2c2c2c" p-id="976" data-spm-anchor-id="a313x.collections_detail.0.i0.7a473a81OBhD0M" class="selected"></path></svg>
|
||||
|
After Width: | Height: | Size: 730 B |
1
src/assets/img/caret-right.svg
Normal file
1
src/assets/img/caret-right.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703342120572" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1552" width="32.03125" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M688.797957 504.57467l-281.139752-203.429484c-6.054814-4.336556-14.513144-0.112505-14.513145 7.425329v53.603516c0 11.659608 5.604794 22.746464 15.085897 29.599041L574.400834 512 408.230957 632.226928c-9.49133 6.852577-15.085897 17.826928-15.085897 29.599041v53.603516c0 7.42533 8.45833 11.772113 14.513145 7.425329l281.139752-203.429484c5.032042-3.651298 5.032042-11.189133 0-14.85066zM512.001473 0C229.255967 0 0.001473 229.254495 0.001473 512c0 282.745505 229.254495 512 512 512 282.745505 0 512-229.254495 512-512C1024.001473 229.254495 794.746978 0 512.001473 0z m0 937.146145c-234.746784 0-425.135917-190.399361-425.135917-425.146145S277.264917 86.864083 512.001473 86.864083c234.746784 0 425.146145 190.399361 425.146144 425.135917 0 234.736556-190.409588 425.146145-425.146144 425.146145z m0 0" fill="#707070" p-id="1553"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/assets/img/right-circle.svg
Normal file
1
src/assets/img/right-circle.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703342120572" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1552" width="16.015625" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M688.797957 504.57467l-281.139752-203.429484c-6.054814-4.336556-14.513144-0.112505-14.513145 7.425329v53.603516c0 11.659608 5.604794 22.746464 15.085897 29.599041L574.400834 512 408.230957 632.226928c-9.49133 6.852577-15.085897 17.826928-15.085897 29.599041v53.603516c0 7.42533 8.45833 11.772113 14.513145 7.425329l281.139752-203.429484c5.032042-3.651298 5.032042-11.189133 0-14.85066zM512.001473 0C229.255967 0 0.001473 229.254495 0.001473 512c0 282.745505 229.254495 512 512 512 282.745505 0 512-229.254495 512-512C1024.001473 229.254495 794.746978 0 512.001473 0z m0 937.146145c-234.746784 0-425.135917-190.399361-425.135917-425.146145S277.264917 86.864083 512.001473 86.864083c234.746784 0 425.146145 190.399361 425.146144 425.135917 0 234.736556-190.409588 425.146145-425.146144 425.146145z m0 0" fill="#707070" p-id="1553"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -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() {
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user