diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index e975549..417e454 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -9,3 +9,11 @@ body,
   height: 100%;
   overflow: hidden;
 }
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/assets/css/style.less b/src/assets/css/style.less
index 926ac4e..36890a8 100644
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -9,4 +9,15 @@ body,
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
+}
+
+
+@keyframes loading {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
 }
\ No newline at end of file
diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg
new file mode 100644
index 0000000..7883d3d
--- /dev/null
+++ b/src/assets/icons/add.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="8.51147" y1="0.912351" x2="8.51147" y2="13.6853" stroke="white" stroke-width="1.8247" stroke-linecap="round"/>
+<path d="M0.912109 7.29883H15.5097" stroke="white" stroke-width="1.8247" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg
new file mode 100644
index 0000000..ef202d5
--- /dev/null
+++ b/src/assets/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.292894 13.7071C-0.0976306 13.3166 -0.0976315 12.6834 0.292892 12.2929L5.58579 6.99998L0.292894 1.70711C-0.0976306 1.31658 -0.0976315 0.683419 0.292892 0.292894C0.683416 -0.0976305 1.31658 -0.0976315 1.70711 0.292892L7.70711 6.29287C7.89464 6.48041 8 6.73476 8 6.99998C8 7.2652 7.89464 7.51955 7.70711 7.70709L1.70711 13.7071C1.31658 14.0976 0.683419 14.0976 0.292894 13.7071Z" fill="#0D0D0D"/>
+</svg>
diff --git a/src/assets/icons/back.svg b/src/assets/icons/back.svg
new file mode 100644
index 0000000..1706d37
--- /dev/null
+++ b/src/assets/icons/back.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8.00002C-3.54464e-07 7.7348 0.105356 7.48045 0.292892 7.29291L7.29289 0.292894C7.68342 -0.09763 8.31658 -0.0976319 8.70711 0.292892C9.09763 0.683416 9.09763 1.31658 8.70711 1.70711L3.41421 7.00002H17C17.5523 7.00002 18 7.44773 18 8.00002C18 8.5523 17.5523 9.00002 17 9.00002L3.41422 9.00002L8.70711 14.2929C9.09763 14.6834 9.09763 15.3166 8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071L0.292894 8.70712C0.105358 8.51959 3.54466e-07 8.26524 0 8.00002Z" fill="#0D0D0D"/>
+</svg>
diff --git a/src/assets/icons/history.svg b/src/assets/icons/history.svg
new file mode 100644
index 0000000..0c4a0d5
--- /dev/null
+++ b/src/assets/icons/history.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.66667 3.33275V2.08333C1.66667 1.6231 1.29357 1.25 0.833333 1.25C0.373096 1.25 0 1.6231 0 2.08333V5.83333C0 6.29357 0.373096 6.66667 0.833333 6.66667H4.16667C4.6269 6.66667 5 6.29357 5 5.83333C5 5.3731 4.6269 5 4.16667 5H2.55837C3.712 3.00589 5.86695 1.66667 8.33333 1.66667C12.0152 1.66667 15 4.65143 15 8.33333C15 12.0152 12.0152 15 8.33333 15C5.16166 15 2.5055 12.7843 1.83185 9.81559C1.73001 9.36677 1.2836 9.08548 0.834775 9.18733C0.385947 9.28917 0.104662 9.73558 0.206506 10.1844C1.04863 13.8956 4.36638 16.6667 8.33333 16.6667C12.9357 16.6667 16.6667 12.9357 16.6667 8.33333C16.6667 3.73096 12.9357 0 8.33333 0C5.60633 0 3.18634 1.30996 1.66667 3.33275ZM8.33333 3.33333C8.79357 3.33333 9.16667 3.70643 9.16667 4.16667V8.33333C9.16667 8.55435 9.07887 8.76631 8.92259 8.92259L6.83926 11.0059C6.51382 11.3314 5.98618 11.3314 5.66074 11.0059C5.33531 10.6805 5.33531 10.1528 5.66074 9.82741L7.5 7.98816V4.16667C7.5 3.70643 7.8731 3.33333 8.33333 3.33333Z" fill="black" fill-opacity="0.75"/>
+</svg>
diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg
new file mode 100644
index 0000000..e9f1e2a
--- /dev/null
+++ b/src/assets/icons/home.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.28201 17.6809C8.22291 17.9636 7.98547 18.1323 7.69707 18.1647C6.75151 18.1647 5.74686 18.1647 3.85573 18.1647C2.69033 18.0102 2.22571 17.5036 2.13351 16.4162C2.0697 14.6846 2.13351 11.693 2.13823 10.4893C0.195197 10.5577 0.0432399 9.51664 0.223986 8.82464C0.235472 8.78066 0.252302 8.73837 0.274416 8.69866C0.628366 8.06315 1.97604 6.47755 2.57201 5.8343C4.07545 4.21036 5.62616 2.49661 7.22889 0.979256C8.41556 -0.145283 10.1235 -0.0818107 11.2865 1.03914C12.8573 2.5517 14.3017 4.33491 15.785 5.94208C16.1933 6.38379 17.2585 7.63092 17.7678 8.18205C17.9312 8.3589 18.0878 8.58156 18.1305 8.81855C18.3365 9.96237 17.6738 10.6024 16.0817 10.4905L16.0841 16.421C16.0226 17.312 15.3006 18.0772 14.4342 18.1647C13.426 18.1671 11.5975 18.1671 10.6519 18.1647C10.2974 18.1671 10.0549 17.972 10.0549 17.6809V11.9288H8.28201V17.6809ZM3.97393 16.9072C4.21032 16.9072 5.09678 16.9072 6.69241 16.9072C6.81061 16.9072 7.1036 16.9072 7.1036 16.9072V11.5073C7.1036 11.3049 7.31874 10.8829 7.89551 10.7528C8.3151 10.6582 9.77126 10.6762 10.2393 10.7253C10.4733 10.7504 10.7464 10.839 10.9237 11.0042C11.0029 11.0785 11.2404 11.3036 11.2404 11.6271V16.9072H14.4342C14.6528 16.9072 14.9541 16.5049 14.8986 16.2438V9.65707C15.1054 8.899 17.1147 9.71929 16.8984 8.89055L10.2984 1.8044C9.57033 1.21997 8.89307 1.21997 8.16499 1.8044C7.00787 2.73373 5.52806 4.42114 4.47258 5.56005C3.48092 6.6307 2.48927 7.75284 1.56498 8.89055C1.32032 9.51929 2.67365 9.17438 3.08734 9.35043C3.23153 9.41151 3.42893 9.66666 3.43366 9.83671L3.44192 16.4162C3.43956 16.6174 3.49407 16.8534 3.85573 16.9072H3.97393Z" fill="black" fill-opacity="0.75"/>
+<path d="M7.17188 0.918457C8.39278 -0.238215 10.1516 -0.170916 11.3447 0.979004C12.9174 2.49334 14.3689 4.28409 15.8467 5.88525C16.0519 6.10723 16.4213 6.53107 16.8018 6.96631C17.183 7.40245 17.5755 7.85103 17.8291 8.12549C17.996 8.30611 18.166 8.54362 18.2129 8.8042C18.3189 9.39366 18.203 9.87433 17.834 10.189C17.4839 10.4873 16.9236 10.6176 16.165 10.5767L16.167 16.4214V16.4272C16.1026 17.3568 15.3507 18.1559 14.4424 18.2476L14.4346 18.2485V18.2476C13.4262 18.25 11.5971 18.25 10.6514 18.2476V18.2466C10.4597 18.2477 10.2908 18.1965 10.168 18.0972C10.0437 17.9966 9.97174 17.8516 9.97168 17.6812V12.0122H8.36523V17.6899L8.36328 17.6978C8.29501 18.0242 8.0206 18.2123 7.70605 18.2476L7.69727 18.2485V18.2476H3.84473C3.25321 18.1691 2.8241 17.9996 2.53223 17.6987C2.24004 17.3974 2.09769 16.9765 2.05078 16.4233L2.0498 16.4194C1.98735 14.7246 2.0466 11.8237 2.05371 10.5728C1.12426 10.5902 0.59187 10.3509 0.318359 9.99268C0.0378704 9.6253 0.0501312 9.1609 0.143555 8.80322C0.156769 8.75276 0.175617 8.7036 0.201172 8.65771C0.382407 8.33236 0.812793 7.77149 1.26758 7.21631C1.72401 6.65912 2.21138 6.10096 2.51074 5.77783C4.01312 4.15504 5.56662 2.4382 7.17188 0.918457ZM3.52539 16.4165V16.4175C3.52431 16.5119 3.53696 16.6011 3.58203 16.6714C3.62458 16.7374 3.70437 16.7992 3.86426 16.8237H7.02051V11.5073C7.02051 11.2613 7.26705 10.809 7.87695 10.6714C8.09736 10.6217 8.57611 10.6032 9.04883 10.6021C9.52461 10.6009 10.0095 10.6171 10.248 10.6421L10.4385 10.6753C10.6327 10.7209 10.8341 10.8066 10.9805 10.9429V10.9438C11.0587 11.0172 11.3242 11.2647 11.3242 11.6274V16.8237H14.4346C14.4649 16.8236 14.508 16.8093 14.5586 16.7729C14.6081 16.7373 14.6576 16.6851 14.7012 16.6245C14.7913 16.499 14.8379 16.358 14.8174 16.2612L14.8154 16.2524V9.646L14.8184 9.63525C14.8827 9.39944 15.0877 9.29722 15.3125 9.25244C15.5372 9.20769 15.8114 9.21397 16.0586 9.21729C16.3139 9.22071 16.5353 9.22062 16.6807 9.17432C16.7512 9.15178 16.7914 9.1213 16.8115 9.0874C16.8296 9.05674 16.8383 9.00904 16.8203 8.9292L10.2432 1.86768C9.88972 1.58464 9.55723 1.44971 9.23145 1.44971C8.90491 1.44978 8.57115 1.58519 8.2168 1.86963C7.06607 2.79392 5.59328 4.47387 4.53418 5.6167C3.54706 6.68244 2.55957 7.79856 1.63965 8.93018C1.61643 8.99351 1.61562 9.03462 1.62305 9.06104C1.63029 9.08673 1.64795 9.11008 1.68359 9.13135C1.76225 9.17812 1.90213 9.19931 2.08301 9.20654C2.26244 9.2137 2.45357 9.20714 2.6416 9.20947C2.82048 9.21169 2.99924 9.22248 3.12012 9.27393C3.21211 9.31301 3.30818 9.40565 3.37988 9.50342C3.45135 9.60088 3.51353 9.72411 3.5166 9.83447V9.83643L3.52539 16.4165Z" stroke="black" stroke-opacity="0.75" stroke-width="0.166667"/>
+</svg>
diff --git a/src/assets/icons/more.svg b/src/assets/icons/more.svg
new file mode 100644
index 0000000..8ed4d15
--- /dev/null
+++ b/src/assets/icons/more.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 7.99984C2 7.26346 2.59695 6.6665 3.33333 6.6665C4.06971 6.6665 4.66667 7.26346 4.66667 7.99984C4.66667 8.73622 4.06971 9.33317 3.33333 9.33317C2.59695 9.33317 2 8.73622 2 7.99984ZM6.66667 7.99984C6.66667 7.26346 7.26362 6.6665 8 6.6665C8.73638 6.6665 9.33333 7.26346 9.33333 7.99984C9.33333 8.73622 8.73638 9.33317 8 9.33317C7.26362 9.33317 6.66667 8.73622 6.66667 7.99984ZM11.3333 7.99984C11.3333 7.26346 11.9303 6.6665 12.6667 6.6665C13.403 6.6665 14 7.26346 14 7.99984C14 8.73622 13.403 9.33317 12.6667 9.33317C11.9303 9.33317 11.3333 8.73622 11.3333 7.99984Z" fill="black" fill-opacity="0.5"/>
+</svg>
diff --git a/src/assets/icons/refresh.svg b/src/assets/icons/refresh.svg
new file mode 100644
index 0000000..b794ba4
--- /dev/null
+++ b/src/assets/icons/refresh.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5112 13.3534C14.1459 14.5936 12.4865 15.2605 10.7316 15.2605C7.12197 15.2605 4.09869 12.4941 3.90323 8.96461L4.19571 9.2506C4.39117 9.44172 4.58521 9.53658 4.87912 9.53658C5.17303 9.53658 5.36707 9.44172 5.56253 9.2506C5.95346 8.86975 5.95346 8.29638 5.56253 7.91553L3.61217 6.0071C3.22267 5.62625 2.63627 5.62625 2.24677 6.0071L0.292127 7.91692C-0.0973755 8.29777 -0.0973755 8.87114 0.292127 9.25199C0.683056 9.63284 1.26802 9.63284 1.65752 9.25199L1.95001 8.966C2.14547 13.5446 6.04763 17.1689 10.7302 17.1689C12.9745 17.1689 15.1203 16.311 16.8766 14.6885C17.2661 14.3077 17.2661 13.7343 16.8766 13.3534C16.5842 12.9726 15.9008 12.9726 15.5112 13.3534ZM21.1697 7.91692C20.7802 7.53468 20.1938 7.53468 19.8043 7.91692L19.5118 8.20291C19.315 3.62435 15.4128 0 10.7302 0C8.48594 0 6.34011 0.857958 4.58379 2.4804C4.19428 2.86125 4.19428 3.43462 4.58379 3.81547C4.97329 4.19632 5.55968 4.19632 5.94918 3.81547C7.31458 2.57527 8.97389 1.90704 10.7288 1.90704C14.3385 1.90704 17.3617 4.67343 17.5572 8.20291L17.2647 7.91692C16.8752 7.53468 16.2888 7.53468 15.8993 7.91692C15.5084 8.29777 15.5084 8.87114 15.8993 9.25199L17.8497 11.159C18.0452 11.3501 18.3376 11.445 18.5331 11.445C18.7286 11.445 19.021 11.3501 19.2165 11.159L21.1669 9.25199C21.5578 8.87114 21.5578 8.29777 21.1669 7.91692H21.1697Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/shop.svg b/src/assets/icons/shop.svg
new file mode 100644
index 0000000..9b82a17
--- /dev/null
+++ b/src/assets/icons/shop.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.9811 8.48123L17.7844 2.07052C17.3567 0.828209 16.2259 0 14.9562 0L4.88612 0.00905147C3.58733 0.00905147 2.43858 0.875729 2.03999 2.15651L0.0380678 8.49933C0.0111964 8.57627 0 8.66225 0 8.75051C0.00755759 10.0864 0.580535 11.0841 1.62572 11.6258V14.7751C1.62572 16.4881 2.96929 17.8843 4.61964 17.8843H15.3839C17.0342 17.8843 18.3778 16.4881 18.3778 14.7751V11.6125C19.0762 11.2199 19.7611 10.4304 20.0259 8.86817C20.0371 8.74145 20.0282 8.60568 19.9811 8.48123ZM15.3839 16.3339H4.6286C3.80231 16.3339 3.12604 15.6325 3.12604 14.7748V12.0308C3.17111 12.0325 3.21645 12.0336 3.26264 12.0336C3.97697 12.0336 4.78311 11.7825 5.55343 11.0131C6.20282 11.649 6.97313 11.9658 7.77928 11.9658C8.38164 11.9658 9.19898 11.7734 9.94018 11.004C10.7015 11.7259 11.4786 12.0427 12.2758 11.9567C13.017 11.8798 13.7492 11.5245 14.4815 10.8886C15.2635 11.5958 16.0719 11.9641 16.8864 11.9819V14.7748C16.8864 15.6325 16.2102 16.3339 15.3839 16.3339ZM17.2738 10.3863C16.5685 10.5492 15.8273 10.1939 15.0211 9.28879C14.8823 9.13491 14.6875 9.04892 14.4837 9.03761H14.4747C14.271 9.03761 14.0761 9.1236 13.9373 9.26842C13.2879 9.96086 12.6676 10.3455 12.1011 10.4044C11.5077 10.4723 10.8762 9.84545 10.4507 9.31594C10.294 9.1236 10.0611 9.01724 9.83046 9.03761C9.58862 9.04666 9.37589 9.18243 9.24601 9.39288C8.69962 10.289 8.13308 10.3931 7.76136 10.3931H7.7524C7.15899 10.3931 6.63052 10.0559 6.14908 9.35441C6.01024 9.15301 5.77735 9.02629 5.53775 9.02629C5.29815 9.02629 5.06526 9.1417 4.92643 9.35441C4.07326 10.5854 3.29399 10.5583 2.70953 10.384C1.89443 10.1532 1.52271 9.68252 1.48465 8.843L3.45969 2.63398C3.66347 1.98906 4.23001 1.5659 4.88836 1.5659L6.1432 1.56477V3.79313C6.1432 4.26183 6.51912 4.64171 6.98293 4.64171C7.44674 4.64171 7.82266 4.26183 7.82266 3.79313V1.56336L11.8136 1.55968V3.79313C11.8136 4.26183 12.1895 4.64171 12.6534 4.64171C13.1172 4.64171 13.4931 4.26183 13.4931 3.79313V1.55827L14.9584 1.55685C15.5899 1.55685 16.1542 1.97096 16.3669 2.58646L18.4898 8.79576C18.23 10.02 17.6836 10.2893 17.2738 10.3866V10.3863Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/shouqi.svg b/src/assets/icons/shouqi.svg
new file mode 100644
index 0000000..d52b974
--- /dev/null
+++ b/src/assets/icons/shouqi.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 2.09082C6 2.0622 6.00155 2.03388 6.00391 2.00586C5.55522 2.01199 5.18036 2.02417 4.85449 2.05078C4.32513 2.09404 3.99243 2.17016 3.74121 2.27832L3.6377 2.32715C3.14381 2.57887 2.73058 2.96166 2.44238 3.43164L2.32715 3.6377C2.19296 3.90106 2.10023 4.24933 2.05078 4.85449C2.00041 5.4713 2 6.26395 2 7.40042V9.87302C2 11.0095 2.00039 11.8021 2.05078 12.4189C2.10023 13.0238 2.19298 13.3714 2.32715 13.6347L2.44238 13.8408C2.73056 14.3108 3.14377 14.6935 3.6377 14.9453L3.74121 14.9941C3.99244 15.1023 4.32506 15.1784 4.85449 15.2217C5.17941 15.2482 5.55304 15.2595 6 15.2656V2.09082ZM20 9.87302C20 10.9763 20.001 11.864 19.9424 12.581C19.8903 13.2188 19.7876 13.7891 19.5605 14.3183L19.4551 14.543C18.9758 15.4835 18.211 16.2482 17.2705 16.7275C16.6783 17.0292 16.0373 17.1553 15.3086 17.2148C14.5914 17.2734 13.7032 17.2724 12.5996 17.2724H7.40039C7.27572 17.2724 7.15341 17.2706 7.03418 17.2705C7.02282 17.2709 7.01146 17.2724 7 17.2724C6.98557 17.2724 6.97131 17.2701 6.95703 17.2695C6.05556 17.2687 5.31 17.2654 4.69141 17.2148C4.05356 17.1627 3.48347 17.0602 2.9541 16.833L2.73047 16.7275C1.84834 16.278 1.12017 15.5779 0.637701 14.7168L0.544921 14.543C0.243151 13.9506 0.117171 13.3099 0.057621 12.581C-0.000948958 11.864 9.9625e-07 10.9763 9.9625e-07 9.87302V7.40042C9.9625e-07 6.2968 -0.000968955 5.40858 0.057621 4.69141C0.117161 3.9627 0.243271 3.32267 0.544921 2.73047L0.637701 2.55567C1.12017 1.69461 1.8484 0.994351 2.73047 0.544921L2.9541 0.439461C3.48344 0.212331 4.05359 0.109731 4.69141 0.057621C5.40857 -0.000968955 6.29681 9.9625e-07 7.40039 9.9625e-07H12.5996C13.7032 9.9625e-07 14.5914 -0.000968955 15.3086 0.057621C16.0373 0.117161 16.6773 0.243281 17.2695 0.544921L17.4443 0.638671C18.3052 1.12114 19.0057 1.84856 19.4551 2.73047L19.5605 2.9541C19.7877 3.48344 19.8903 4.0536 19.9424 4.69141C20.001 5.40858 20 6.2968 20 7.40042V9.87302ZM8 15.2724H12.5996C13.7361 15.2724 14.5287 15.272 15.1455 15.2217C15.7507 15.1722 16.0989 15.0795 16.3623 14.9453L16.5684 14.8301C17.0383 14.5418 17.4211 14.1287 17.6729 13.6347L17.7217 13.5312C17.8298 13.2801 17.906 12.9479 17.9492 12.4189C17.9996 11.8021 18 11.0095 18 9.87302V7.40042C18 6.26394 17.9996 5.4713 17.9492 4.85449C17.906 4.32513 17.8299 3.99244 17.7217 3.74121L17.6729 3.6377C17.4211 3.14379 17.0383 2.73057 16.5684 2.44239L16.3623 2.32715C16.0989 2.19295 15.7507 2.10023 15.1455 2.05078C14.5287 2.00041 13.736 2 12.5996 2H7.99609C7.99879 2.02991 8 2.06021 8 2.09082V15.2724Z" fill="#0D0D0D"/>
+</svg>
diff --git a/src/assets/images/home-bg.png b/src/assets/images/home-bg.png
new file mode 100644
index 0000000..2437377
Binary files /dev/null and b/src/assets/images/home-bg.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..1df9d8b
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/pic.jpg b/src/assets/images/pic.jpg
new file mode 100644
index 0000000..e50e727
Binary files /dev/null and b/src/assets/images/pic.jpg differ
diff --git a/src/router/index.ts b/src/router/index.ts
index 2d3eb50..80a40d3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -30,9 +30,10 @@ const router = createRouter({
 			component: () => import('../views/home/index.vue'),
 			children: [
 				{
-					path: '',
+					path: 'test',
 					name: 'test',
-					component: () => import('../views/home/test.vue')
+					component: () => import('../views/home/test.vue'),
+					meta: { topNavStyle: '2' }
 				}
 			]
 		},
diff --git a/src/stores/global.ts b/src/stores/global.ts
index a82bc2d..018db4b 100644
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -2,13 +2,16 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 export const useGlobalStore = defineStore('global', () => {
 	const state = ref({
-		loading: false
+		loading: false,// 全局loading
+		homeLeftNavCollapse: false,// 首页左侧导航是否折叠
 	})
 
 	const setLoading = (v: boolean) => { state.value.loading = v }
+	const setHomeLeftNavCollapse = (v: boolean) => { state.value.homeLeftNavCollapse = v }
 
 	return {
 		state,
 		setLoading,
+		setHomeLeftNavCollapse,
 	}
 })
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 533a6cf..ef639f2 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="home">
-		<div class="left-nav"></div>
+		<left-nav />
 		<div class="right-main">
-			<div class="top-nav"></div>
+			<top-nav />
 			<div class="bottom-view"><router-view></router-view></div>
 		</div>
 	</div>
@@ -10,6 +10,8 @@
 
 <script setup lang="ts">
 	import { computed } from 'vue'
+	import LeftNav from './left-nav.vue'
+	import TopNav from './top-nav.vue'
 	import { useGlobalStore } from '@/stores'
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading)
@@ -21,22 +23,17 @@
 		height: 100%;
 		overflow: hidden;
 		display: flex;
-		> .left-nav {
-			width: 29.5rem;
-			height: 100%;
-			background-color: #a12828;
-		}
+		background-color: rgba(248, 247, 245, 1);
+		background-image: url('@/assets/images/home-bg.png');
+		background-size: 100% 100%;
+		user-select: none;
 		> .right-main {
 			flex: 1;
 			display: flex;
 			flex-direction: column;
-			> .top-nav {
-				height: 8rem;
-				background-color: #ea5050;
-			}
 			> .bottom-view {
 				flex: 1;
-				background-color: #fff;
+				// background-color: #fff;
 				overflow: hidden;
 				display: flex;
 			}
diff --git a/src/views/home/left-nav.vue b/src/views/home/left-nav.vue
new file mode 100644
index 0000000..8bedd54
--- /dev/null
+++ b/src/views/home/left-nav.vue
@@ -0,0 +1,217 @@
+<template>
+	<div class="left-nav" :class="{ collapse: isCollapse }">
+		<div class="top">
+			<img class="logo-img" src="@/assets/images/logo.png" alt="FiDA" v-show="!isCollapse" />
+			<span class="logo-text" v-show="!isCollapse">FiDA</span>
+			<div class="close" @click="onCollapse">
+				<svg-icon name="shouqi" size="24" />
+			</div>
+		</div>
+		<button class="create-btn">
+			<span class="icon"><svg-icon name="add" size="16" /></span>
+			<span v-show="!isCollapse" class="text">New Project</span>
+		</button>
+		<div class="menu-item" @click="onHome">
+			<span class="icon"><svg-icon name="home" size="24" /></span>
+			<span class="title" v-show="!isCollapse">Home</span>
+		</div>
+		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
+			<span class="icon"><svg-icon name="history" size="24" /></span>
+			<span class="title" v-show="!isCollapse">History</span>
+			<span class="icon jiantou" v-show="!isCollapse"
+				><svg-icon name="arrow-right" size="14" />
+			</span>
+		</div>
+		<div class="history-list" v-show="!isCollapse && showHistory">
+			<div v-for="item in historyList" :key="item.name" class="history-item">
+				<div v-if="item.title" class="title">{{ item.name }}</div>
+				<div v-else class="box">
+					<span>{{ item.name }}</span>
+					<el-popover placement="right" trigger="click">
+						<template #reference>
+							<span class="icon"><svg-icon name="more" size="16" /></span>
+						</template>
+						<div class="button-box">
+							<div class="rename-btn">Rename</div>
+							<div class="delete-btn">Delete</div>
+						</div>
+					</el-popover>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import { useRoute, useRouter } from 'vue-router'
+	const route = useRoute()
+	const router = useRouter()
+	import { useGlobalStore } from '@/stores'
+	const globalStore = useGlobalStore()
+	const isCollapse = computed(() => globalStore.state.homeLeftNavCollapse)
+	const onCollapse = () => {
+		globalStore.setHomeLeftNavCollapse(!isCollapse.value)
+	}
+	const showHistory = ref(true)
+	const historyList = ref([
+		{
+			title: true,
+			name: 'Today'
+		},
+		{
+			name: 'Conversation Item 1'
+		},
+		{
+			name: 'Conversation Item 2'
+		},
+		{
+			title: true,
+			name: 'Yesterday'
+		},
+		{
+			name: 'Conversation Item 3'
+		},
+		{
+			title: true,
+			name: 'Earlier Chat'
+		},
+		{
+			name: 'Conversation Item 4'
+		},
+		{
+			name: 'Conversation Item 5'
+		}
+	])
+	const onHome = () => {
+		console.log('onHome')
+	}
+	const onHistory = () => {
+		showHistory.value = !showHistory.value
+	}
+</script>
+
+<style lang="less" scoped>
+	.left-nav {
+		width: var(--left-nav-collapse-width, 30rem);
+		height: 100%;
+		background-color: #fff;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		&,
+		& * {
+			transition: width 0.2s ease-in-out;
+		}
+		&.collapse {
+			--left-nav-collapse-width: 9.4rem;
+			--collapse-top-padding: 4.6rem 0 0 0;
+			--collapse-create-btn-width: 5.1rem;
+			--collapse-menu-item-width: 50%;
+		}
+		> .top {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: var(--collapse-top-padding, 2.6rem 1.6rem 0 3.6rem);
+			> .logo-img {
+				width: 3.4rem;
+				height: auto;
+				margin-right: 1rem;
+			}
+			> .logo-text {
+				font-family: Mazzard;
+				font-weight: 600;
+				font-size: 3rem;
+				margin-right: auto;
+			}
+		}
+		> .create-btn {
+			margin: 4.5rem auto 2.5rem;
+			width: var(--collapse-create-btn-width, 23rem);
+			height: 5.1rem;
+			border-radius: 5rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #fff;
+			background-color: rgba(255, 122, 81, 1);
+			border: none;
+			outline: none;
+			&:active {
+				background-color: rgba(255, 122, 81, 0.8);
+			}
+
+			> .text {
+				font-weight: 500;
+				font-size: 1.8rem;
+				margin-left: 1rem;
+			}
+		}
+		> .menu-item {
+			width: var(--collapse-menu-item-width, 23rem);
+			margin: 2.5rem auto 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			border-radius: 8px;
+			padding: 0.9rem 0.8rem;
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.06);
+			}
+			> .title {
+				flex: 1;
+				font-weight: 500;
+				font-size: 2rem;
+				margin: 0 1.6rem;
+			}
+			> .icon {
+				transition: transform 0.2s ease-in-out;
+			}
+			&.active > .jiantou {
+				transform: rotate(90deg);
+			}
+		}
+		> .history-list {
+			flex: 1;
+			overflow-y: auto;
+			width: 23.2rem;
+			margin: 1rem auto 0;
+			> .history-item {
+				width: 100%;
+				height: 4rem;
+				margin-bottom: 0.4rem;
+				> div {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 0 0.8rem;
+					box-sizing: border-box;
+				}
+				> .title {
+					font-weight: 600;
+					font-size: 1.6rem;
+				}
+				> .box {
+					border-radius: 0.8rem;
+					cursor: pointer;
+					&.active,
+					&:hover {
+						background-color: rgba(0, 0, 0, 0.06);
+					}
+					> .label {
+						flex: 1;
+						font-weight: 400;
+						font-size: 1.6rem;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/home/test.vue b/src/views/home/test.vue
index 1bf45da..bd0663b 100644
--- a/src/views/home/test.vue
+++ b/src/views/home/test.vue
@@ -13,7 +13,7 @@
 		flex: 1;
 		margin: 10px;
 		border-radius: 10px;
-		background-color: rgb(242, 130, 90);
+		// background-color: rgb(242, 130, 90);
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/src/views/home/top-nav.vue b/src/views/home/top-nav.vue
new file mode 100644
index 0000000..5330cac
--- /dev/null
+++ b/src/views/home/top-nav.vue
@@ -0,0 +1,97 @@
+<template>
+	<div class="top-nav" :style_="topNavStyle">
+		<span class="icon" v-show="topNavStyle === '2'" @click="onBack">
+			<svg-icon name="back" size="18" />
+		</span>
+		<p class="division"></p>
+		<div class="credits-box">
+			<span class="credits">Credits: 6000</span>
+			<span class="icon" @click="onRefresh" :class="{ loading }">
+				<svg-icon name="refresh" size="21" />
+			</span>
+			<span class="link"></span>
+			<span class="icon" @click="onShop"><svg-icon name="shop" size="21" /></span>
+		</div>
+		<img class="pic" src="@/assets/images/pic.jpg" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import { useRoute, useRouter } from 'vue-router'
+	const route = useRoute()
+	const topNavStyle = computed(() => route.meta.topNavStyle)
+	const router = useRouter()
+	const loading = ref(false)
+	const onBack = () => {
+		router.back()
+	}
+	const onShop = () => {
+		console.log('onShop')
+		// router.push({ name: 'shop' })
+	}
+	const onRefresh = () => {
+		console.log('onRefresh')
+		loading.value = true
+		setTimeout(() => {
+			loading.value = false
+		}, 1500)
+	}
+</script>
+
+<style lang="less" scoped>
+	.top-nav {
+		height: 8rem;
+		display: flex;
+		align-items: center;
+		padding: 0 2rem 0 3rem;
+		&[style_='1'] {
+			border-bottom: 1px solid rgba(201, 201, 201, 1);
+		}
+		&[style_='2'] {
+			border-bottom: 1px solid rgba(201, 201, 201, 1);
+			background-color: #fff;
+		}
+		> .division {
+			margin: auto;
+		}
+		> .icon {
+			cursor: pointer;
+			width: 2.4rem;
+			height: 2.4rem;
+		}
+		> .credits-box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-width: 18rem;
+			height: 4.3rem;
+			margin-right: 1rem;
+			background-color: rgba(255, 252, 244, 1);
+			border: 1px solid rgba(233, 121, 60, 1);
+			border-radius: 0.8rem;
+			> .credits {
+				flex: 1;
+				font-size: 1.3rem;
+				margin-left: 1rem;
+			}
+			> .link {
+				height: 100%;
+				width: 0;
+				border-right: 1px solid rgba(233, 121, 60, 1);
+			}
+			> .icon {
+				cursor: pointer;
+				margin: 0 1rem;
+			}
+			> .loading {
+				animation: loading 0.6s linear infinite;
+			}
+		}
+		> .pic {
+			width: 4.65rem;
+			height: 4.65rem;
+			border-radius: 50%;
+		}
+	}
+</style>