From 82aeb2818f930ccd12eab643da4a7b431260d8a2 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Mon, 14 Nov 2022 16:55:00 +0800
Subject: [PATCH] =?UTF-8?q?before=20update=20=E7=B3=BB=E7=BB=9F=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/UserPage/TestTree.vue | 232 ++++++++++++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 src/views/UserPage/TestTree.vue

diff --git a/src/views/UserPage/TestTree.vue b/src/views/UserPage/TestTree.vue
new file mode 100644
index 0000000..2857d30
--- /dev/null
+++ b/src/views/UserPage/TestTree.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="test-tree">
+    <section class="title-area">
+      <span class="title-icon">
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 24 24"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <title>工厂</title>
+          <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -152.000000)" fill-rule="nonzero">
+              <g id="工厂" transform="translate(376.000000, 152.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" />
+                <path
+                  id="形状"
+                  d="M12.25,6.75 L12.25,10.25 L20.75,10.25 L20.75,21.25 L3.25000001,21.25 L3.25000001,6.75 L12.25,6.75 L12.25,6.75 Z M10.75,8.25 L4.75000001,8.25 L4.75000001,19.75 L19.25,19.75 L19.25,11.75 L10.75,11.75 L10.75,8.25 Z M17.5,16.5 L17.5,18 L16,18 L16,16.5 L17.5,16.5 Z M14,16.5 L14,18 L12.5,18 L12.5,16.5 L14,16.5 Z M17.5,13.5 L17.5,15 L16,15 L16,13.5 L17.5,13.5 Z M14,13.5 L14,15 L12.5,15 L12.5,13.5 L14,13.5 Z M8.99999999,10.256 L8.99999999,11.756 L6.49999999,11.756 L6.49999999,10.256 L8.99999999,10.256 Z M9.4755,2.82499999 C10.4715,2.63649998 11.0695,2.739 12.1845,3.291 L12.581,3.49000001 L12.7945,3.58999999 C13.2545,3.79899998 13.532,3.85899998 13.887,3.82849999 L13.9855,3.81850001 L14.1545,3.79249999 L14.2455,3.77650001 C14.8380746,3.66404309 15.3698683,3.34077505 15.7425,2.8665 L15.8205,2.763 L17.0405,3.636 L16.9485,3.76000001 C16.3504031,4.53742507 15.4872916,5.06774928 14.5235,5.25 C13.5275,5.43799999 12.9285,5.3355 11.814,4.7835 L11.4175,4.58500001 C10.781,4.27450001 10.4765,4.20100001 10.024,4.25599999 L9.9315,4.26850001 L9.7545,4.299 C9.16166181,4.41148918 8.62956287,4.73472685 8.25649999,5.20900001 L8.17849999,5.31199999 L6.95899999,4.43800001 L7.0515,4.31449999 C7.64947141,3.53774907 8.51191259,3.00768671 9.47500001,2.82499999 L9.4755,2.82499999 Z"
+                  fill="#0B58FF"
+                />
+              </g>
+            </g>
+          </g>
+        </svg>
+      </span>
+      <span class="title-content">合肥新能源工厂</span>
+    </section>
+    <section class="routes-area">
+      <ul class="root-routes">
+        <li class="parent-route">
+          <div class="route-title">
+            <div>
+              <span class="menu-icon">
+                <span class="line" />
+                <span class="line" />
+                <span class="line" />
+              </span>
+              <span>制造部</span>
+            </div>
+            <span class="arrow-icon rotate-down">
+              <span class="arrow-line1" />
+              <span class="arrow-line2" />
+            </span>
+          </div>
+          <ul class="children-routes">
+            <li class="parent-route">
+              <div class="route-title" style="padding-left: 16px;">
+                <div>
+                  <span class="menu-icon">
+                    <!-- level - 2 -->
+                    <span class="circle" />
+                  </span>
+                  <span>人力资源</span>
+                </div>
+                <span class="arrow-icon">
+                  <span class="arrow-line1" />
+                  <span class="arrow-line2" />
+                </span>
+              </div>
+              <ul class="children-routes">
+                <li class="leaf-route" style="padding-left: 32px;">小组1</li>
+                <li class="leaf-route" style="padding-left: 32px;">小组2</li>
+              </ul>
+            </li>
+            <li class="leaf-route" style="padding-left: 16px;">小组2</li>
+          </ul>
+        </li>
+        <li class="leaf-route">财政部</li>
+      </ul>
+    </section>
+    <section class="footer-area" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TestTree',
+  props: {},
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+.test-tree {
+  background: lightblue;
+  height: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.title-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.routes-area {
+  flex: 1;
+  height: 1px;
+  background-color: #fff;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.title-icon {
+  height: 24px;
+  width: 24px;
+}
+
+.title-content {
+  font-size: 16px;
+  line-height: 1;
+}
+
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.parent-route div {
+  display: flex;
+  align-items: center;
+}
+
+.route-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+}
+
+span.menu-icon {
+  height: 14px;
+  width: 14px;
+  margin-right: 6px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.line {
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background-color: rgba(0, 0, 0, 0.508);
+}
+
+.arrow-icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+}
+
+.arrow-line1,
+.arrow-line2 {
+  position: absolute;
+  display: inline-block;
+  width: 1px;
+  height: 8px;
+  border-radius: 1px;
+  background-color: #000a;
+  transform-origin: top 50% left 0;
+}
+
+.arrow-line1 {
+  top: 1px;
+  left: 0;
+  transform: rotateZ(-45deg);
+}
+
+.arrow-line2 {
+  left: 0;
+  bottom: 1px;
+  transform: rotateZ(45deg);
+}
+
+.rotate-down {
+  /* transform-origin: top 50%; */
+  transform: rotateZ(90deg);
+}
+.circle {
+  width: 70%;
+  height: 70%;
+  background-color: #000c;
+  border-radius: 50%;
+  position: relative;
+}
+
+.circle::after {
+  content: '';
+  position: absolute;
+  width: 70%;
+  height: 70%;
+  border-radius: 50%;
+  top: 15%;
+  left: 15%;
+  background-color: #fff;
+}
+
+/* span.arrow-icon {
+  background: url('./right.png') 100% 100% / contain no-repeat;
+  width: 12px;
+  height: 12px;
+} */
+
+li.parent-route {
+  display: flex;
+  flex-direction: column;
+  /* background: lightpink; */
+}
+
+li.leaf-route::before {
+  content: '\25E6';
+  padding-right: 8px;
+}
+
+li.parent-route div.route-title:hover,
+li.parent-route div.route-title:hover .circle::after,
+li.leaf-route:hover {
+  background: #ccc;
+}
+</style>