From 657cfcc85575ce28432718cf5738628448a18078 Mon Sep 17 00:00:00 2001
From: xuhongjie <1943105267@qq.com>
Date: Tue, 27 May 2025 10:52:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95-=E9=97=A8=E6=88=B7UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/svg/Logout.svg        |   5 +
 src/assets/icons/svg/park-logo.svg     |  11 ++
 src/assets/icons/svg/right-arrows.svg  |   5 +
 src/assets/icons/svg/type-bug.svg      |  19 +++
 src/assets/icons/svg/type-dp.svg       |   5 +
 src/assets/icons/svg/type-ht.svg       |  19 +++
 src/assets/icons/svg/type-lh.svg       |  19 +++
 src/assets/icons/svg/type-park.svg     |  19 +++
 src/assets/icons/svg/type-yj.svg       |  19 +++
 src/assets/icons/svg/type-zy.svg       |  19 +++
 src/assets/styles/index.scss           |   6 +
 src/components/navigationBar/index.vue |  90 ++++++++++++++
 src/views/index.vue                    | 165 +++++++++++++++++++++++--
 13 files changed, 391 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/svg/Logout.svg
 create mode 100644 src/assets/icons/svg/park-logo.svg
 create mode 100644 src/assets/icons/svg/right-arrows.svg
 create mode 100644 src/assets/icons/svg/type-bug.svg
 create mode 100644 src/assets/icons/svg/type-dp.svg
 create mode 100644 src/assets/icons/svg/type-ht.svg
 create mode 100644 src/assets/icons/svg/type-lh.svg
 create mode 100644 src/assets/icons/svg/type-park.svg
 create mode 100644 src/assets/icons/svg/type-yj.svg
 create mode 100644 src/assets/icons/svg/type-zy.svg
 create mode 100644 src/components/navigationBar/index.vue

diff --git a/src/assets/icons/svg/Logout.svg b/src/assets/icons/svg/Logout.svg
new file mode 100644
index 0000000..4bc9b22
--- /dev/null
+++ b/src/assets/icons/svg/Logout.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#233;&#128;&#128;&#229;&#135;&#186;icon">
+<path id="Vector" d="M1.00212 0C0.934722 0 0.870259 0.00585937 0.805795 0.0205078C0.741332 0.0322266 0.679798 0.0498047 0.618265 0.0761719C0.559661 0.102539 0.501058 0.131836 0.445385 0.169922C0.389712 0.205078 0.339899 0.246094 0.293016 0.292969C0.246134 0.339844 0.205112 0.389648 0.167019 0.445312C0.131857 0.498047 0.102556 0.556641 0.0761843 0.618164C0.0498128 0.679687 0.0322318 0.741211 0.0205112 0.805664C0.00586033 0.870117 0 0.93457 0 0.999023V16.998C0 17.0654 0.00586033 17.1299 0.0205112 17.1943C0.035162 17.2588 0.052743 17.3203 0.0761843 17.3818C0.102556 17.4404 0.131857 17.499 0.167019 17.5547C0.205112 17.6074 0.246134 17.6602 0.293016 17.707C0.339899 17.7539 0.389712 17.7949 0.445385 17.8301C0.501058 17.8682 0.556731 17.8975 0.618265 17.9238C0.679798 17.9502 0.741332 17.9678 0.805795 17.9795C0.870259 17.9912 0.934722 17.9971 1.00212 17.9971H10.0036C10.068 17.9971 10.1325 17.9912 10.1999 17.9766C10.2644 17.9648 10.3259 17.9473 10.3874 17.9209C10.449 17.8945 10.5046 17.8652 10.5603 17.8271C10.616 17.792 10.6658 17.751 10.7127 17.7041C10.7596 17.6572 10.8006 17.6074 10.8357 17.5518C10.8738 17.4961 10.9031 17.4404 10.9295 17.3789C10.953 17.3174 10.9735 17.2559 10.9852 17.1914C10.9969 17.127 11.0028 17.0625 11.0028 16.9951C11.0028 16.9277 10.9969 16.8633 10.9823 16.7988C10.9705 16.7344 10.95 16.6728 10.9266 16.6113C10.9002 16.5527 10.8709 16.4941 10.8328 16.4385C10.7977 16.3857 10.7537 16.333 10.7098 16.2861C10.6629 16.2393 10.6131 16.1982 10.5574 16.1631C10.5017 16.125 10.446 16.0957 10.3845 16.0693C10.3259 16.043 10.2614 16.0254 10.197 16.0137C10.1325 16.002 10.068 15.9961 10.0007 15.9961H2.0013V2.00098H10.0036C10.068 2.00098 10.1325 1.99512 10.1999 1.98047C10.2644 1.96875 10.3259 1.95117 10.3874 1.9248C10.449 1.89844 10.5046 1.86914 10.5603 1.83105C10.616 1.7959 10.6658 1.75488 10.7127 1.70801C10.7596 1.66113 10.8006 1.61133 10.8357 1.55566C10.8738 1.5 10.9031 1.44434 10.9295 1.38281C10.953 1.32129 10.9735 1.25977 10.9852 1.19531C10.9969 1.13086 11.0028 1.06641 11.0028 0.999023C11.0028 0.93457 10.9969 0.870117 10.9823 0.802734C10.9705 0.738281 10.95 0.676758 10.9266 0.615234C10.9002 0.556641 10.8709 0.498047 10.8328 0.442383C10.7977 0.389648 10.7537 0.336914 10.7098 0.290039C10.6629 0.243164 10.6131 0.202148 10.5574 0.166992C10.5017 0.128906 10.446 0.0996094 10.3845 0.0732422C10.3259 0.046875 10.2614 0.0292969 10.197 0.0175781C10.1325 0.00585938 10.068 0 10.0007 0L1.00212 0ZM13.0275 3.6123C12.9806 3.56543 12.9308 3.52441 12.8751 3.48926C12.8195 3.45117 12.7638 3.42187 12.7023 3.39551C12.6407 3.37207 12.5792 3.35156 12.5147 3.33984C12.4503 3.32812 12.3858 3.32227 12.3184 3.32227C12.2539 3.32227 12.1895 3.32812 12.1221 3.34277C12.0576 3.35449 11.9961 3.375 11.9346 3.39844C11.873 3.4248 11.8174 3.4541 11.7617 3.49219C11.706 3.53027 11.6562 3.57129 11.6093 3.61523C11.5624 3.66211 11.5214 3.71191 11.4862 3.76758C11.4482 3.82324 11.4189 3.87891 11.3925 3.94043C11.369 3.99902 11.3485 4.06348 11.3368 4.12793C11.3251 4.19238 11.3192 4.25684 11.3192 4.32422C11.3192 4.3916 11.3251 4.45605 11.3397 4.52051C11.3515 4.58496 11.372 4.64648 11.3954 4.70801C11.4218 4.76953 11.4511 4.8252 11.4892 4.88086C11.5243 4.93652 11.5654 4.98633 11.6122 5.0332L14.5864 8.00683H5.88084C5.81638 8.00683 5.75191 8.01269 5.68452 8.02734C5.62006 8.03906 5.55852 8.05664 5.49699 8.08301C5.43546 8.10937 5.37978 8.13867 5.32411 8.17676C5.26844 8.21191 5.21862 8.25293 5.17174 8.2998C5.12486 8.34668 5.08384 8.39648 5.04867 8.45215C5.01058 8.50781 4.98128 8.56348 4.95491 8.625C4.93147 8.68652 4.91096 8.74805 4.89923 8.8125C4.88751 8.87695 4.88165 8.94141 4.88165 9.00879C4.88165 9.07324 4.88751 9.1377 4.90217 9.20508C4.91389 9.26953 4.9344 9.33105 4.95784 9.39258C4.98421 9.45117 5.01351 9.50976 5.0516 9.56543C5.08677 9.61816 5.12779 9.6709 5.17467 9.71777C5.22155 9.76465 5.27137 9.80566 5.32704 9.84082C5.38271 9.87891 5.43839 9.9082 5.49992 9.93457C5.55852 9.96094 5.62299 9.97851 5.68745 9.99023C5.75191 10.002 5.81638 10.0078 5.88377 10.0078H14.5981L11.621 12.9727C11.5273 13.0664 11.454 13.1748 11.4042 13.2979C11.3544 13.4209 11.328 13.5469 11.328 13.6816C11.328 13.8135 11.3544 13.9424 11.4042 14.0625C11.454 14.1855 11.5273 14.2939 11.621 14.3877C11.6679 14.4346 11.7177 14.4756 11.7734 14.5107C11.8291 14.5488 11.8847 14.5781 11.9463 14.6045C12.0049 14.6279 12.0693 14.6484 12.1338 14.6602C12.1983 14.6748 12.2627 14.6807 12.3301 14.6807C12.3975 14.6807 12.462 14.6748 12.5265 14.6602C12.5909 14.6484 12.6525 14.6279 12.714 14.6045C12.7755 14.5781 12.8312 14.5488 12.8869 14.5107C12.9425 14.4727 12.9923 14.4316 13.0392 14.3877L17.7099 9.71777C17.8037 9.62402 17.874 9.51562 17.9238 9.39551C17.9766 9.27246 18 9.14648 18 9.01465V9C18 8.86816 17.9736 8.73926 17.9238 8.61914C17.874 8.49609 17.8007 8.3877 17.707 8.29395L13.0275 3.6123Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icons/svg/park-logo.svg b/src/assets/icons/svg/park-logo.svg
new file mode 100644
index 0000000..97719ab
--- /dev/null
+++ b/src/assets/icons/svg/park-logo.svg
@@ -0,0 +1,11 @@
+<svg width="73" height="70" viewBox="0 0 73 70" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="&#229;&#190;&#174;&#228;&#191;&#161;&#229;&#155;&#190;&#231;&#137;&#135;_20250526135848 1">
+<rect id="&#229;&#190;&#174;&#228;&#191;&#161;&#229;&#155;&#190;&#231;&#137;&#135;_20250526135848 1_2" y="-10" width="73" height="90" fill="url(#pattern0_54_222)"/>
+</g>
+<defs>
+<pattern id="pattern0_54_222" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_54_222" transform="scale(0.0136986 0.0111111)"/>
+</pattern>
+<image id="image0_54_222" data-name="&#229;&#190;&#174;&#228;&#191;&#161;&#229;&#155;&#190;&#231;&#137;&#135;_20250526135848(edit).png" width="73" height="90" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/src/assets/icons/svg/right-arrows.svg b/src/assets/icons/svg/right-arrows.svg
new file mode 100644
index 0000000..b6742a5
--- /dev/null
+++ b/src/assets/icons/svg/right-arrows.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="12" viewBox="0 0 25 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#191;&#155;&#229;&#142;&#187;&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Arrow 2" d="M25 6L15 0.226497V11.7735L25 6ZM0 6V7H16V6V5H0V6Z" fill="#898FA5"/>
+</g>
+</svg>
diff --git a/src/assets/icons/svg/type-bug.svg b/src/assets/icons/svg/type-bug.svg
new file mode 100644
index 0000000..2d7ecc8
--- /dev/null
+++ b/src/assets/icons/svg/type-bug.svg
@@ -0,0 +1,19 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#174;&#179;&#232;&#153;&#171;&#231;&#151;&#133;icon">
+<g id="Group 48097119" filter="url(#filter0_d_54_238)">
+<path id="Union" d="M23.3018 27.7412C23.3018 30.125 23.8984 31.9382 25.0771 33.1133C26.5841 34.597 28.8811 34.5977 28.8945 34.5977H37.8486V49.8398H41.1514V34.5977H50.0791C50.6297 34.5976 55.6982 34.3879 55.6982 27.7412H59C59 31.0517 58.0695 33.6508 56.2344 35.4639C54.6605 36.968 52.5839 37.8409 50.4072 37.9014V42.2119H58.833V45.5225H50.4072V48.8398C50.4072 49.1687 50.3871 49.5042 50.3604 49.833H50.4072C52.5837 49.8935 54.6665 50.7666 56.2471 52.2705C58.0755 54.0768 59.0068 56.6895 59.0068 60H55.6982C55.6982 53.3464 50.9441 53.1436 50.4072 53.1436H49.5225C47.8079 57.1657 43.8637 59.7782 39.4971 59.7783C35.1302 59.7783 31.1853 57.1658 29.4707 53.1436H28.5928C28.0358 53.1436 23.3018 53.3531 23.3018 60H20C20 56.6828 20.9313 54.0844 22.7598 52.2646C24.3404 50.7538 26.43 49.8809 28.6201 49.8271H28.6396C28.5928 49.4981 28.5928 49.162 28.5928 48.833V45.5156H20.167V42.2051H28.5928V37.8945C26.4161 37.834 24.3403 36.9671 22.7598 35.4697C20.9313 33.6634 20 31.0584 20 27.7412H23.3018ZM39.8311 22C44.5796 22 48.4248 25.8544 48.4248 30.6152V32.6025H30.5752V30.6152C30.5752 25.8545 34.4196 22.0003 39.168 22H39.8311Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_54_238" x="16" y="22" width="47.0068" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0408654 0 0 0 0 0.201562 0 0 0 0 0.5 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_54_238"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_54_238" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/svg/type-dp.svg b/src/assets/icons/svg/type-dp.svg
new file mode 100644
index 0000000..0014de7
--- /dev/null
+++ b/src/assets/icons/svg/type-dp.svg
@@ -0,0 +1,5 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#143;&#175;&#232;&#167;&#134;&#229;&#140;&#150;icon">
+<path id="Union" d="M52.5312 55.0293C49.3285 57.8933 45.1774 59.7199 40.6035 59.9688C40.2436 59.9899 39.8837 60 39.5186 60C39.1534 60 38.7935 59.9846 38.4336 59.9688C33.8597 59.7199 29.7087 57.8933 26.5059 55.0293L32.1338 49.3965C33.923 50.8787 36.1145 51.7839 38.4277 52.001C38.7877 52.038 39.1484 52.0537 39.5137 52.0537C42.2028 52.0536 44.8126 51.1169 46.8877 49.3965L52.5312 55.0293ZM38.4277 28.9775C36.1145 29.1946 33.923 30.1 32.1338 31.582C31.5779 32.0426 31.0641 32.5564 30.6035 33.1123C29.1636 34.8593 28.2214 37.0303 27.999 39.4072C27.962 39.7671 27.9463 40.127 27.9463 40.4922C27.9463 43.1814 28.8831 45.7911 30.6035 47.8662L24.9707 53.499C22.1069 50.2963 20.2811 46.146 20.0322 41.5723C20.0111 41.2123 20 40.8516 20 40.4863C20 40.1212 20.0164 39.7612 20.0322 39.4014C20.2811 34.8328 22.1073 30.6774 24.9766 27.4746C25.4583 26.94 25.9659 26.426 26.5059 25.9443C29.7033 23.0804 33.8539 21.2542 38.4277 21V28.9775ZM58.9951 41.5723C58.7463 46.1461 56.9195 50.2963 54.0557 53.499L48.4229 47.8662C49.905 46.0769 50.8103 43.8856 51.0273 41.5723H58.9951ZM40.5986 21.0049C45.1672 21.2537 49.3173 23.0804 52.5254 25.9443C53.06 26.426 53.574 26.9337 54.0557 27.4736C56.9197 30.6764 58.7459 34.8275 59 39.4014H51.0273C50.8103 37.0879 49.9051 34.8958 48.4229 33.1064C47.9623 32.5506 47.4484 32.0377 46.8926 31.5771C45.1456 30.1373 42.9755 29.195 40.5986 28.9727V21.0049Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icons/svg/type-ht.svg b/src/assets/icons/svg/type-ht.svg
new file mode 100644
index 0000000..03c6668
--- /dev/null
+++ b/src/assets/icons/svg/type-ht.svg
@@ -0,0 +1,19 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#144;&#142;&#229;&#143;&#176;&#231;&#174;&#161;&#231;&#144;&#134;icon">
+<g id="Group 48097119" filter="url(#filter0_d_54_252)">
+<path id="Union" d="M37.9082 42.2627C37.9082 46.0314 37.9165 49.8045 37.8994 53.5732C37.8951 54.2526 37.6649 54.8937 37.3359 55.4961C37.0711 55.9788 36.7378 56.4015 36.332 56.7646C35.6997 57.3286 34.9688 57.7136 34.1357 57.876C33.8879 57.923 33.631 57.931 33.3789 57.9609C33.349 57.9652 33.3235 57.9872 33.2979 58H26.6152C26.5768 57.9872 26.5336 57.9609 26.4951 57.9609C25.8414 57.9524 25.2256 57.773 24.6445 57.4824C24.0593 57.1876 23.542 56.7948 23.1191 56.2822C22.6705 55.7396 22.3416 55.1367 22.1621 54.4531C22.0938 54.1926 22.0555 53.9278 22 53.6631V46.3477C22.0512 46.1042 22.0984 45.8606 22.1582 45.6172C22.3248 44.9549 22.6329 44.3603 23.0645 43.8262C23.6669 43.0872 24.4185 42.5741 25.3242 42.2793C25.79 42.1255 26.2733 42.0531 26.7646 42.0488H37.9082V42.2627ZM41.3008 42.0488C44.9841 42.0488 48.6722 42.0363 52.3555 42.0576C53.3595 42.0619 54.2741 42.3988 55.0859 43.0098C55.6926 43.4669 56.1624 44.0354 56.5 44.7061C56.7735 45.2487 56.9487 45.8261 56.9658 46.4414C56.9658 46.4756 56.9911 46.5101 57.0039 46.54V53.4619C56.9911 53.5002 56.9744 53.5428 56.9658 53.5811C56.9018 53.9313 56.8677 54.2905 56.7695 54.6279C56.4875 55.585 55.9231 56.3544 55.1455 56.9697C54.496 57.4825 53.7608 57.8036 52.9404 57.9189C52.7568 57.9446 52.5729 57.9695 52.3936 57.9951H45.668V58C45.4844 57.9744 45.3008 57.9442 45.1172 57.9229C44.2882 57.8075 43.5526 57.4789 42.8945 56.9619C42.117 56.351 41.5919 55.5772 41.2842 54.6416C41.1304 54.1716 41.0576 53.6883 41.0576 53.2012C41.0533 49.5692 41.0537 45.9367 41.0537 42.3047V42.0488H41.3008ZM33.6523 23C33.9044 23.0513 34.1568 23.0937 34.4004 23.1621C35.0797 23.3459 35.6869 23.6711 36.2295 24.124C36.8061 24.6025 37.2244 25.1922 37.5234 25.8672C37.7541 26.3799 37.9042 26.9181 37.9043 27.4863V38.9121H37.6904C33.9345 38.9121 30.1739 38.9214 26.418 38.9043C25.6874 38.9 24.9949 38.6605 24.3711 38.2803C24.0294 38.071 23.6921 37.8359 23.4102 37.5498C22.9401 37.067 22.5514 36.5108 22.3164 35.8613C22.1712 35.4683 22.0555 35.0753 22.0342 34.6523C22.0341 34.6396 22.0128 34.6264 22 34.6094V27.2939C22.0128 27.2684 22.0338 27.2427 22.0381 27.2129C22.1107 26.8712 22.1455 26.517 22.2607 26.1924C22.5641 25.2993 23.111 24.5681 23.8545 23.9912C24.3288 23.6238 24.8459 23.3334 25.4355 23.1924C25.709 23.1283 25.9824 23.0641 26.2559 23H33.6523ZM52.8252 23.042C53.2525 23.1616 53.6969 23.239 54.1113 23.4014C54.9188 23.7175 55.5687 24.2599 56.0771 24.9648C56.5215 25.5801 56.8117 26.2555 56.9229 27.0117C56.9485 27.174 56.9744 27.3364 57 27.5029V34.417C56.9744 34.5793 56.9446 34.7416 56.9189 34.9082C56.7908 35.7372 56.4614 36.4722 55.9443 37.126C55.5256 37.6515 55.0213 38.0752 54.4316 38.3828C53.9448 38.639 53.4194 38.8263 52.8643 38.8691C52.4114 38.9033 51.9538 38.9121 51.501 38.9121H41.0488V38.6816C41.0488 35.0156 41.0363 31.3536 41.0576 27.6875C41.0619 26.6065 41.4293 25.6276 42.1172 24.7773C42.882 23.8288 43.8862 23.2862 45.0654 23.0469C45.1466 23.0298 45.2236 23.0167 45.3047 23.0039H52.7441C52.7697 23.0167 52.7954 23.0334 52.8252 23.042Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_54_252" x="18" y="23" width="43.0039" height="43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0408654 0 0 0 0 0.201562 0 0 0 0 0.5 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_54_252"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_54_252" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/svg/type-lh.svg b/src/assets/icons/svg/type-lh.svg
new file mode 100644
index 0000000..793faeb
--- /dev/null
+++ b/src/assets/icons/svg/type-lh.svg
@@ -0,0 +1,19 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#187;&#191;&#229;&#140;&#150;&#229;&#133;&#187;&#230;&#138;&#164;icon">
+<g id="Group 48097119" filter="url(#filter0_d_54_240)">
+<path id="Vector" d="M46.219 53.0475V60H42.2701V50.0762C47.2044 49.3004 53.2701 45.3119 54.0511 40.3646H58C57.4015 46.0876 51.365 51.0349 46.219 53.0475ZM31.9927 53.0475C26.6642 51.0642 20.8102 46.1169 20 40.3646H23.9489C24.7299 45.3119 30.7956 49.3004 35.7299 50.0762V60H31.9927V53.0475ZM36.562 43.8409C29.2701 42.7065 23.854 36.3468 23.854 28.8527C23.854 26.0351 24.5985 23.4297 26.0949 21.1756L33.5766 28.6771L39.1971 22.6832L44.8175 28.6771L52.292 21C53.6058 23.2468 54.5328 25.8887 54.5328 28.6771C54.5328 36.1711 49.1241 42.7358 41.8248 43.8775L36.562 43.8409Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_54_240" x="16" y="21" width="46" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0408654 0 0 0 0 0.201562 0 0 0 0 0.5 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_54_240"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_54_240" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/svg/type-park.svg b/src/assets/icons/svg/type-park.svg
new file mode 100644
index 0000000..0351a90
--- /dev/null
+++ b/src/assets/icons/svg/type-park.svg
@@ -0,0 +1,19 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#133;&#172;&#229;&#155;&#173;&#229;&#133;&#187;&#230;&#138;&#164;icon">
+<g id="Group 48097119" filter="url(#filter0_d_54_248)">
+<path id="Vector" d="M23.5716 35.5041L23.5716 32.8553C23.7814 32.6443 23.7814 32.3279 23.7814 32.1169C24.096 30.8452 24.5155 29.6849 25.2554 28.7297C26.4149 27.247 26.8344 25.8699 27.3588 24.3872C27.889 22.1662 29.2582 21 31.6762 21C34.3097 21 35.4634 21.9552 36.2033 24.3872C36.4131 26.0808 37.153 27.3525 38.3067 28.5128C39.0408 29.2512 39.571 30.7339 39.7807 31.6891C39.9905 32.111 39.9905 32.8553 39.9905 33.5937L39.9905 35.2873L40.7305 37.4087C41.0451 37.6197 41.0451 38.1471 41.2548 38.3639L41.989 39.5301C42.4085 40.2685 42.9387 41.2237 42.9387 42.179C42.9387 43.8726 42.624 45.2497 41.4646 46.7324C40.5149 47.8986 39.0466 48.637 37.1472 48.8479L33.6746 48.8479L33.6746 57.1226L48.4738 57.1226L48.4971 51.6198L46.7725 51.6198C45.479 51.6198 44.3312 51.6198 43.329 50.4654C41.8957 48.6604 41.8957 46.2108 43.329 44.4059C43.7602 43.9019 43.9758 43.1107 44.1214 42.4603L44.1214 40.6553C44.2671 40.5088 44.2671 40.292 44.2671 40.1513C44.4827 39.284 44.7682 38.4929 45.2751 37.8424C46.0675 36.8344 46.353 35.8968 46.7084 34.8888C47.0696 33.3769 48.0018 32.5799 49.6507 32.5799C51.4453 32.5799 52.2318 33.2304 52.7387 34.8888C52.8844 36.0433 53.3855 36.9047 54.172 37.7017C54.6731 38.2057 55.0343 39.2137 55.18 39.8642C55.3257 40.1513 55.3257 40.6553 55.3257 41.1651L55.3257 42.3196L55.8267 43.7612C56.0423 43.9077 56.0423 44.2652 56.188 44.4117L56.6891 45.2029C56.9745 45.7068 57.3358 46.3573 57.3358 47.0078C57.3358 48.1623 57.1202 49.0999 56.3336 50.1079C55.6811 50.8873 54.6789 51.3971 53.3855 51.5378L51.0199 51.5378L51.0199 57.1168L58 57.1168L58 60L20 60L20 57.1167L29.9574 57.1168L29.9923 48.9476L27.4695 48.9476C25.5759 48.9476 23.8921 48.9476 22.418 47.2539C20.3146 44.6051 20.3146 41.0069 22.418 38.3639C23.0472 37.6197 23.3618 36.4535 23.5716 35.5041Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_54_248" x="16" y="21" width="46" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0408654 0 0 0 0 0.201562 0 0 0 0 0.5 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_54_248"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_54_248" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/svg/type-yj.svg b/src/assets/icons/svg/type-yj.svg
new file mode 100644
index 0000000..476cf98
--- /dev/null
+++ b/src/assets/icons/svg/type-yj.svg
@@ -0,0 +1,19 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#186;&#148;&#230;&#128;&#165;&#230;&#138;&#162;&#233;&#153;&#169;icon">
+<g id="Group 48097119" filter="url(#filter0_d_54_232)">
+<path id="Vector" d="M58.2839 36.4534L56.1136 37.1311C55.571 37.357 54.8174 37.0182 54.6003 36.4534C54.3833 35.8887 54.7088 35.1043 55.2514 34.8784L57.4158 34.2006C57.9584 33.9747 58.712 34.3136 58.935 34.8784C59.146 35.6628 58.8205 36.3342 58.2839 36.4534ZM23.7509 34.6462C24.2935 34.8721 24.619 35.4368 24.402 36.2275C24.185 36.673 23.6424 37.0182 22.8888 36.9052L20.7244 36.2275C20.1818 36.0016 19.8502 35.4368 20.0673 34.6462C20.2843 34.0814 20.8269 33.7488 21.5865 33.9685L23.7509 34.6462ZM49.94 24.3863C50.2656 23.9345 50.9167 23.8216 51.5618 24.1604C51.9959 24.4993 52.1044 25.2899 51.7788 25.8547L50.3681 27.7686C50.0425 28.2204 49.3914 28.3334 48.7403 27.9945C48.3062 27.6557 48.1977 26.7521 48.6318 26.3002L49.94 24.3863ZM28.7247 27.6619L27.4285 25.6351C27.1029 25.1833 27.2114 24.3926 27.6455 23.9471C28.1881 23.6082 28.9417 23.7212 29.2733 24.2859L30.672 26.1936C30.889 26.6454 30.7805 27.5427 30.3464 27.8879C29.8098 28.2204 29.0502 28.1138 28.7247 27.6619ZM38.4672 23.6019V21.2425C38.4672 20.5648 38.9013 20 39.5464 20C40.1975 20 40.6316 20.4518 40.6316 21.2425V23.6082C40.6316 24.2859 40.1975 24.8507 39.5464 24.8507C39.0098 24.7315 38.4672 24.2796 38.4672 23.6019ZM51.0252 39.9549V51.8965H28.2906V39.9549C28.2906 33.4163 33.3789 28.0134 39.6609 28.0134C45.9429 28.0134 51.0252 33.3096 51.0252 39.9549ZM39.7634 46.2866C40.1673 46.2928 40.5411 46.0607 40.7341 45.6967L42.8984 41.4171C43.0672 41.0845 43.0491 40.6891 42.8502 40.3754C42.6452 40.0554 42.3015 39.8608 41.9278 39.8671H39.3474L40.728 37.1374C40.9812 36.6228 40.7883 35.9953 40.3 35.7318L40.2397 35.7004C39.7092 35.4368 39.0701 35.6439 38.7867 36.1773L36.6164 40.457C36.4476 40.7895 36.4657 41.1849 36.6646 41.4986C36.8575 41.8124 37.2072 42.0069 37.587 42.0069H40.1673L38.7867 44.7366C38.5335 45.2512 38.7265 45.8787 39.2148 46.1422L39.2751 46.1736C39.4318 46.2489 39.5946 46.2866 39.7634 46.2866ZM26.0177 56.6343V54.2685H53.1896V56.6343C53.1896 57.9834 52.2129 59 50.9167 59H28.2906C27.1029 59 26.0177 57.8705 26.0177 56.6343Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_54_232" x="16" y="20" width="47" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0408654 0 0 0 0 0.201562 0 0 0 0 0.5 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_54_232"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_54_232" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/svg/type-zy.svg b/src/assets/icons/svg/type-zy.svg
new file mode 100644
index 0000000..6ce26c5
--- /dev/null
+++ b/src/assets/icons/svg/type-zy.svg
@@ -0,0 +1,19 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#135;&#170;&#230;&#156;&#137;&#228;&#186;&#167;icon">
+<g id="Group 48097119" filter="url(#filter0_d_54_244)">
+<path id="Union" d="M58.1946 34.1455C58.7796 34.1455 59.3374 34.4295 59.6741 34.9102C60.0108 35.391 60.0935 36.003 59.8948 36.5439L52.4495 56.8145C52.1901 57.5246 51.5108 57.994 50.7493 57.9941H27.6272C26.8489 57.9941 26.1588 57.5026 25.9104 56.7705L19.094 36.5C18.912 35.9537 18.9999 35.353 19.342 34.8887C19.6843 34.4243 20.2312 34.1455 20.8108 34.1455H58.1946ZM30.1389 40.9043C29.1067 40.9043 28.5872 41.4177 28.5872 42.4395C28.5872 43.4611 29.1068 43.9746 30.1389 43.9746H39.5608C40.5928 43.9746 41.1057 43.461 41.1057 42.4395C41.1057 41.4177 40.5871 40.9043 39.5549 40.9043H30.1389ZM37.6946 22C37.8655 22 38.0312 22.0656 38.1526 22.1855C38.274 22.3057 38.3411 22.4703 38.3411 22.6396V31.5664L46.8684 23.126C47.1223 22.8746 47.5305 22.8746 47.7844 23.126L55.8157 31.0752C56.0696 31.3265 56.0696 31.7311 55.8157 31.9824L54.4251 33.3594H50.0364L51.886 31.5283L47.3264 27.0156L40.9241 33.3594H35.2444V25.0703H29.8186V33.3594H26.7161V22.6396C26.7161 22.2845 27.0038 22 27.3626 22H37.6946Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_54_244" x="15.0013" y="22" width="48.9999" height="43.9941" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0408654 0 0 0 0 0.201562 0 0 0 0 0.5 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_54_244"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_54_244" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 890e524..33f505b 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -180,3 +180,9 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+
+.div-flex-center{
+  display: flex;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/navigationBar/index.vue b/src/components/navigationBar/index.vue
new file mode 100644
index 0000000..d77bdbe
--- /dev/null
+++ b/src/components/navigationBar/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="navigation-bar">
+    <div class="model-name">
+      <svg-icon icon-class="park-logo" class="park-logo" />
+      <div class="name-text">徐汇园林智慧系统</div>
+    </div>
+    <div class="user-data div-flex-center">
+      <div class="user-model div-flex-center">
+        <img :src="userStore.avatar" class="user-avatar" />
+        <span>{{ userStore.name }}</span>
+      </div>
+      <div class="Logout" @click="logout()">
+        退出
+        <svg-icon icon-class="Logout" style="font-size: 18px" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useUserStore from "@/store/modules/user";
+const userStore = useUserStore();
+import { ElMessageBox } from 'element-plus'
+const logout = () => {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+};
+</script>
+
+<style lang="scss" scoped>
+.navigation-bar {
+  height: 70px;
+  background: linear-gradient(90deg, #537cf7 0%, #566cff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 52px;
+}
+
+.model-name {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+  .park-logo {
+    font-size: 60px;
+  }
+  .name-text {
+    font-size: 24px;
+    color: #ffffff;
+    font-weight: bold;
+  }
+}
+.user-data {
+  gap: 16px;
+}
+.user-model {
+  gap: 10px;
+  font-size: 24px;
+  color: #ffffff;
+  font-weight: 400;
+  .user-avatar {
+    width: 54px;
+    height: 54px;
+    border-radius: 50%;
+    border: 1px solid white;
+  }
+}
+
+.Logout {
+  cursor: pointer;
+  width: 133px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 20px;
+  font-size: 20px;
+  color: #ffffff;
+  font-weight: 400;
+  text-align: center;
+  line-height: 40px;
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index f1e840b..934cf81 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,6 +1,27 @@
 <template>
   <div class="portal-container">
+    <navigationBar></navigationBar>
+    <div class="welcome-box">
+      <div class="name-english">Welcome!</div>
+      <div class="name-sub">欢迎来到徐汇园林智慧系统</div>
+    </div>
+
     <div class="portal-menu">
+      <div class="menu-item screen" @click="handlerVisualization()">
+        <div class="system-type div-flex-center">
+          <div class="type-box div-flex-center">
+            <div class="type-icon">
+              <svg-icon icon-class="type-dp" style="font-size: 60px" />
+            </div>
+            <div class="type-name">可视化驾驶舱</div>
+          </div>
+          <div class="bg"></div>
+        </div>
+        <div class="entrance">
+          <span>进入</span>
+          <svg-icon icon-class="right-arrows" style="font-size: 18px" />
+        </div>
+      </div>
       <div class="middle-view">
         <div
           class="menu-item"
@@ -8,10 +29,22 @@
           :key="index"
           @click="handleSelect(item.path)"
         >
-          {{ item.meta.title }}
-        </div>
-        <div class="menu-item" @click="handlerVisualization()">
-          可视化驾驶舱
+          <div class="system-type div-flex-center">
+            <div class="type-box div-flex-center">
+              <div class="type-icon">
+                <svg-icon
+                  :icon-class="item.meta.icon"
+                  style="font-size: 60px"
+                />
+              </div>
+              <div class="type-name">{{ item.meta.title }}</div>
+            </div>
+            <div class="bg" :class="item.meta.icon"></div>
+          </div>
+          <div class="entrance">
+            <span>进入</span>
+            <svg-icon icon-class="right-arrows" style="font-size: 18px" />
+          </div>
         </div>
       </div>
     </div>
@@ -21,6 +54,7 @@
 <script setup>
 import { constantRoutes } from "@/router";
 import { isHttp } from "@/utils/validate";
+import navigationBar from "@/components/navigationBar";
 
 const { proxy } = getCurrentInstance();
 import useAppStore from "@/store/modules/app";
@@ -135,21 +169,132 @@ const topMenus = computed(() => {
 
 <style lang="scss" scoped>
 .portal-container {
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f8fd;
   height: 100%;
   .portal-menu {
+    flex: 1;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .middle-view {
-    width: 50%;
+    // width: 50%;
     display: grid;
-    grid-template-columns: repeat(4, 1fr); /* 关键属性：一行三列 */
-    gap: 20px; /* 网格间距 */
-    .menu-item {
-      height: 200px;
-      border: 1px solid red;
+    grid-template-columns: repeat(3, 1fr); /* 关键属性：一行三列 */
+    gap: 25px; /* 网格间距 */
+  }
+  .menu-item {
+    cursor: pointer;
+    width: 386px;
+    height: 233px;
+    box-shadow: 0px 4px 20px 0px rgba(121, 156, 221, 0.25);
+    background: #ffffff;
+    border-radius: 16px;
+    overflow: hidden;
+    .system-type {
+      position: relative;
+      height: calc(100% - 60px);
+      padding-left: 46px;
+      .type-box {
+        font-size: 24px;
+        color: #0f2944;
+        font-weight: 500;
+        font-family: "MiSans-Medium";
+        gap: 19px;
+        .type-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 70px;
+          width: 70px;
+          background: linear-gradient(180deg, #a7c8fe 0%, #287aff 100%);
+          box-shadow: 0px 4px 10px 0px #a5c6fa;
+          border-radius: 16px;
+        }
+      }
+      .bg {
+        position: absolute;
+        width: 80px;
+        height: 123px;
+        right: 0;
+        top: 0;
+        background-size: cover;
+      }
+      .type-yj{
+        background-image: url("@/assets/images/type-yj-bg.png");
+       
+      }
+      .type-lh{
+        background-image: url("@/assets/images/type-lh-bg.png");
+   
+      }
+      .type-park{
+        background-image: url("@/assets/images/type-park-bg.png");
+   
+      }
+      .type-bug{
+        background-image: url("@/assets/images/type-bug-bg.png");
+      
+      }
+      .type-zy{
+        background-image: url("@/assets/images/type-zy-bg.png");
+       
+      }
+      .type-ht{
+        background-image: url("@/assets/images/type-ht-bg.png");
+        background-size: 100% 100%;
+      }
+    }
+    .entrance {
+      height: 60px;
+      border-top: 1px solid #e5eaee;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 40px;
+      font-size: 16px;
+      color: #898fa5;
+      font-weight: 500;
+ 
+    }
+
+  }
+ 
+  .screen {
+    height: calc(233px * 2 + 25px);
+    margin-right: 25px;
+    .bg {
+        position: absolute;
+        top: 50% !important;
+        left: 0 !important;
+        transform: translateY(-50%);
+        width: 100% !important;
+        height: 264px !important;
+        background-image: url("@/assets/images/type-dp-bg.png");
+        background-size: 100% 100%;
+      }
+  }
+  .welcome-box {
+    height: 282px;
+    background: url("@/assets/images/Mask_group.png");
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 157px;
+    .name-english {
+      font-size: 64px;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .name-sub {
+      margin-top: 13px;
+      font-size: 24px;
+      color: #ffffff;
+      font-weight: 400;
     }
   }
 }