From 26136e74ea53feddfdbfd108da43ae879da2b1e3 Mon Sep 17 00:00:00 2001
From: Zhang HaoYang <1304907854@qq.com>
Date: Sat, 23 Dec 2023 23:14:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B0=E4=BB=A3=E6=B8=85sb?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/home-style.css    |   2 +
 src/assets/img/arrowRight.svg    |   1 +
 src/assets/img/caret-right.svg   |   1 +
 src/assets/img/right-circle.svg  |   1 +
 src/components/home/LeftSide.vue | 119 ++++++++++++++++++++++++-------
 5 files changed, 98 insertions(+), 26 deletions(-)
 create mode 100644 src/assets/img/arrowRight.svg
 create mode 100644 src/assets/img/caret-right.svg
 create mode 100644 src/assets/img/right-circle.svg

diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css
index 71854d1..653e5eb 100644
--- a/src/assets/css/home-style.css
+++ b/src/assets/css/home-style.css
@@ -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%);
diff --git a/src/assets/img/arrowRight.svg b/src/assets/img/arrowRight.svg
new file mode 100644
index 0000000..4832018
--- /dev/null
+++ b/src/assets/img/arrowRight.svg
@@ -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>
\ No newline at end of file
diff --git a/src/assets/img/caret-right.svg b/src/assets/img/caret-right.svg
new file mode 100644
index 0000000..4dfe664
--- /dev/null
+++ b/src/assets/img/caret-right.svg
@@ -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>
\ No newline at end of file
diff --git a/src/assets/img/right-circle.svg b/src/assets/img/right-circle.svg
new file mode 100644
index 0000000..0f0220a
--- /dev/null
+++ b/src/assets/img/right-circle.svg
@@ -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>
\ No newline at end of file
diff --git a/src/components/home/LeftSide.vue b/src/components/home/LeftSide.vue
index a72831a..771b06a 100644
--- a/src/components/home/LeftSide.vue
+++ b/src/components/home/LeftSide.vue
@@ -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() {