From 8939fb1f0109a8a87d9b50e426b293014f285f6d Mon Sep 17 00:00:00 2001
From: liyongle <liyongle@123>
Date: Tue, 11 Jul 2023 16:47:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/formatDefault.svg    |   5 +
 src/assets/images/nav/back.svg         |   3 +
 src/assets/images/nav/big_down.svg     |   8 +-
 src/assets/images/nav/big_left.svg     |   8 +-
 src/assets/images/nav/big_right.svg    |   8 +-
 src/assets/images/nav/big_up.svg       |   8 +-
 src/assets/images/nav/down.svg         |   3 +
 src/assets/images/nav/down_thumb.svg   |   5 +-
 src/assets/images/nav/info_bg.svg      |   3 +
 src/assets/images/nav/left.svg         |   5 +
 src/assets/images/nav/left_thumb.svg   |   5 +-
 src/assets/images/nav/phone.svg        |   3 +
 src/assets/images/nav/position.svg     |   3 +
 src/assets/images/nav/qi.svg           |   4 +
 src/assets/images/nav/right.svg        |   5 +
 src/assets/images/nav/right_thumb.svg  |   5 +-
 src/assets/images/nav/time.svg         |   3 +
 src/assets/images/nav/up_thumb.svg     |   5 +-
 src/assets/images/nav/zhong.svg        |   3 +
 src/components/PathGroup/PathGroup.vue | 209 +++++++++++++++
 src/i18n/lang/en.json                  |   7 +-
 src/i18n/lang/zh.json                  |   7 +-
 src/views/Nav/Nav.vue                  | 339 ++++++++++++++++++++++++-
 23 files changed, 626 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/images/formatDefault.svg
 create mode 100644 src/assets/images/nav/back.svg
 create mode 100644 src/assets/images/nav/down.svg
 create mode 100644 src/assets/images/nav/info_bg.svg
 create mode 100644 src/assets/images/nav/left.svg
 create mode 100644 src/assets/images/nav/phone.svg
 create mode 100644 src/assets/images/nav/position.svg
 create mode 100644 src/assets/images/nav/qi.svg
 create mode 100644 src/assets/images/nav/right.svg
 create mode 100644 src/assets/images/nav/time.svg
 create mode 100644 src/assets/images/nav/zhong.svg
 create mode 100644 src/components/PathGroup/PathGroup.vue

diff --git a/src/assets/images/formatDefault.svg b/src/assets/images/formatDefault.svg
new file mode 100644
index 0000000..703e8ce
--- /dev/null
+++ b/src/assets/images/formatDefault.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4165 1.90722C10.1587 1.75836 9.84105 1.75836 9.58322 1.90722L6.44727 3.71776C6.18943 3.86663 6.0306 4.14173 6.0306 4.43945V8.06054C6.0306 8.35826 6.18943 8.63336 6.44727 8.78222L9.58322 10.5928C9.84105 10.7416 10.1587 10.7416 10.4165 10.5928L13.5525 8.78222C13.8103 8.63336 13.9692 8.35826 13.9692 8.06054V4.43945C13.9692 4.14173 13.8103 3.86663 13.5525 3.71776L10.4165 1.90722ZM9.99988 3.59116L7.69727 4.92058V7.57941L9.99988 8.90883L12.3025 7.57941V4.92058L9.99988 3.59116Z" fill="#E00068"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.83322 9.82389C5.57538 9.67503 5.25772 9.67503 4.99988 9.82389L1.86393 11.6344C1.6061 11.7833 1.44727 12.0584 1.44727 12.3561V15.9772C1.44727 16.2749 1.6061 16.55 1.86393 16.6989L4.99988 18.5094C5.25772 18.6583 5.57538 18.6583 5.83322 18.5094L8.96916 16.6989C9.227 16.55 9.38583 16.2749 9.38583 15.9772V12.3561C9.38583 12.0584 9.227 11.7833 8.96916 11.6344L5.83322 9.82389ZM5.41655 11.5078L3.11393 12.8372V15.4961L5.41655 16.8255L7.71917 15.4961V12.8372L5.41655 11.5078Z" fill="#E00068"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1665 10.0322C14.4244 9.88336 14.742 9.88336 14.9999 10.0322L18.1358 11.8428C18.3937 11.9916 18.5525 12.2667 18.5525 12.5645V16.1855C18.5525 16.4833 18.3937 16.7584 18.1358 16.9072L14.9999 18.7178C14.742 18.8666 14.4244 18.8666 14.1665 18.7178L11.0306 16.9072C10.7728 16.7584 10.6139 16.4833 10.6139 16.1855V12.5645C10.6139 12.2667 10.7728 11.9916 11.0306 11.8428L14.1665 10.0322ZM12.2806 13.0456L14.5832 11.7162L16.8858 13.0456V15.7044L14.5832 17.0338L12.2806 15.7044V13.0456Z" fill="#E00068"/>
+</svg>
diff --git a/src/assets/images/nav/back.svg b/src/assets/images/nav/back.svg
new file mode 100644
index 0000000..a06270b
--- /dev/null
+++ b/src/assets/images/nav/back.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.2718 24L34 36.445L30.3641 40L14 24L30.3641 8L34 11.555L21.2718 24Z" fill="#615C59"/>
+</svg>
diff --git a/src/assets/images/nav/big_down.svg b/src/assets/images/nav/big_down.svg
index 0690868..d01d09b 100644
--- a/src/assets/images/nav/big_down.svg
+++ b/src/assets/images/nav/big_down.svg
@@ -1,5 +1,5 @@
-<svg width="38" height="82" viewBox="0 0 38 82" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 50L-7.10483e-07 66.254L19 82L38 66.254L38 50L19 65.746L0 50Z" fill="#F6987F"/>
-<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M0 25L-7.10483e-07 41.254L19 57L38 41.254L38 25L19 40.746L0 25Z" fill="#F6987F"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M0 0L-7.10483e-07 16.254L19 32L38 16.254L38 1.66103e-06L19 15.746L0 0Z" fill="#F6987F"/>
+<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 79.125V105.172L66 130.404L36 105.172V79.125L66 104.358L96 79.125Z" fill="#E00068"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M96 40.0566V66.1031L66 91.3357L36 66.1031V40.0566L66 65.2892L96 40.0566Z" fill="#E00068"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M96 1V27.0465L66 52.2791L36 27.0465V1L66 26.2326L96 1Z" fill="#E00068"/>
 </svg>
diff --git a/src/assets/images/nav/big_left.svg b/src/assets/images/nav/big_left.svg
index 91de5fd..ae03039 100644
--- a/src/assets/images/nav/big_left.svg
+++ b/src/assets/images/nav/big_left.svg
@@ -1,5 +1,5 @@
-<svg width="82" height="38" viewBox="0 0 82 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M32 0L15.746 -1.42097e-06L-1.66103e-06 19L15.746 38L32 38L16.254 19L32 0Z" fill="#F6987F"/>
-<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M57 0L40.746 -1.42097e-06L25 19L40.746 38L57 38L41.254 19L57 0Z" fill="#F6987F"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M82 0L65.746 -1.42097e-06L50 19L65.746 38L82 38L66.254 19L82 0Z" fill="#F6987F"/>
+<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.875 96H26.8285L1.59593 66L26.8285 36H52.875L27.6424 66L52.875 96Z" fill="#E00068"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M91.9434 96H65.8969L40.6643 66L65.8969 36H91.9434L66.7108 66L91.9434 96Z" fill="#E00068"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M131 96H104.953L79.7209 66L104.953 36H131L105.767 66L131 96Z" fill="#E00068"/>
 </svg>
diff --git a/src/assets/images/nav/big_right.svg b/src/assets/images/nav/big_right.svg
index 598149f..43fd9f3 100644
--- a/src/assets/images/nav/big_right.svg
+++ b/src/assets/images/nav/big_right.svg
@@ -1,5 +1,5 @@
-<svg width="82" height="38" viewBox="0 0 82 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M50 0L66.254 -1.42097e-06L82 19L66.254 38L50 38L65.746 19L50 0Z" fill="#F6987F"/>
-<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M25 0L41.254 -1.42097e-06L57 19L41.254 38L25 38L40.746 19L25 0Z" fill="#F6987F"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M0 0L16.254 -1.42097e-06L32 19L16.254 38L3.32207e-06 38L15.746 19L0 0Z" fill="#F6987F"/>
+<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M79.125 36L105.172 36L130.404 66L105.172 96H79.125L104.358 66L79.125 36Z" fill="#E00068"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M40.0566 36L66.1031 36L91.3357 66L66.1031 96H40.0566L65.2892 66L40.0566 36Z" fill="#E00068"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M1 36L27.0465 36L52.2791 66L27.0465 96H1L26.2326 66L1 36Z" fill="#E00068"/>
 </svg>
diff --git a/src/assets/images/nav/big_up.svg b/src/assets/images/nav/big_up.svg
index d55b9ed..71b4f35 100644
--- a/src/assets/images/nav/big_up.svg
+++ b/src/assets/images/nav/big_up.svg
@@ -1,5 +1,5 @@
-<svg width="38" height="82" viewBox="0 0 38 82" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 32L-2.13145e-06 15.746L19 -2.49155e-06L38 15.746L38 32L19 16.254L0 32Z" fill="#F6987F"/>
-<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M0 57L-2.13145e-06 40.746L19 25L38 40.746L38 57L19 41.254L0 57Z" fill="#F6987F"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M0 82L-2.13145e-06 65.746L19 50L38 65.746L38 82L19 66.254L0 82Z" fill="#F6987F"/>
+<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36 52.875V26.8285L66 1.59593L96 26.8285V52.875L66 27.6424L36 52.875Z" fill="#E00068"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36 91.9434V65.8969L66 40.6643L96 65.8969V91.9434L66 66.7108L36 91.9434Z" fill="#E00068"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M36 131V104.953L66 79.7209L96 104.953V131L66 105.767L36 131Z" fill="#E00068"/>
 </svg>
diff --git a/src/assets/images/nav/down.svg b/src/assets/images/nav/down.svg
new file mode 100644
index 0000000..db62cf3
--- /dev/null
+++ b/src/assets/images/nav/down.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.41083 7.41075C4.73626 7.08531 5.2639 7.08531 5.58934 7.41075L10.0001 11.8215L14.4108 7.41075C14.7363 7.08531 15.2639 7.08531 15.5893 7.41075C15.9148 7.73619 15.9148 8.26382 15.5893 8.58926L10.5893 13.5893C10.2639 13.9147 9.73626 13.9147 9.41083 13.5893L4.41083 8.58926C4.08539 8.26382 4.08539 7.73619 4.41083 7.41075Z" fill="#534F46"/>
+</svg>
diff --git a/src/assets/images/nav/down_thumb.svg b/src/assets/images/nav/down_thumb.svg
index 731e13c..029b45d 100644
--- a/src/assets/images/nav/down_thumb.svg
+++ b/src/assets/images/nav/down_thumb.svg
@@ -1,3 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.00017 12.172L1.63617 6.808L0.222168 8.222L8.00017 16L15.7782 8.222L14.3642 6.808L9.00017 12.172L9.00017 3.83699e-07L7.00017 2.96276e-07L7.00017 12.172Z" fill="#6879B0"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" transform="matrix(0 1 -1 0 24 0)" fill="white"/>
+<path d="M12 20.25L4.3125 12.5625V9.38052L10.875 15.943V4.03173L13.125 4.03173L13.125 15.943L19.6875 9.38052L19.6875 12.5625L12 20.25Z" fill="#8A766A"/>
 </svg>
diff --git a/src/assets/images/nav/info_bg.svg b/src/assets/images/nav/info_bg.svg
new file mode 100644
index 0000000..fcc67d1
--- /dev/null
+++ b/src/assets/images/nav/info_bg.svg
@@ -0,0 +1,3 @@
+<svg width="600" height="200" viewBox="0 0 600 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16C0 7.16344 7.16344 0 16 0H313.561C325.264 0 336.383 5.11407 344 14V14C351.617 22.8859 362.736 28 374.439 28H584C592.837 28 600 35.1634 600 44V200H0V16Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/nav/left.svg b/src/assets/images/nav/left.svg
new file mode 100644
index 0000000..22a9f55
--- /dev/null
+++ b/src/assets/images/nav/left.svg
@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 37.3333L11.5186 37.3333L2.33337 28L11.5186 18.6667L21 18.6667L11.5186 28L21 37.3333Z" fill="#8E9090"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M37.3334 37.3333L27.8519 37.3333L18.6667 28L27.8519 18.6667L37.3334 18.6667L27.8519 28L37.3334 37.3333Z" fill="#8E9090"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M53.6667 37.3333L44.1852 37.3333L35 28L44.1852 18.6667L53.6667 18.6667L44.1852 28L53.6667 37.3333Z" fill="#8E9090"/>
+</svg>
diff --git a/src/assets/images/nav/left_thumb.svg b/src/assets/images/nav/left_thumb.svg
index fc34f62..f5118f2 100644
--- a/src/assets/images/nav/left_thumb.svg
+++ b/src/assets/images/nav/left_thumb.svg
@@ -1,3 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.828 6.99998L9.192 1.63598L7.778 0.221985L0 7.99998L7.778 15.778L9.192 14.364L3.828 8.99998H16V6.99998H3.828Z" fill="#6879B0"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" transform="matrix(-1 0 0 -1 24 24)" fill="white"/>
+<path d="M3.74999 12L11.4375 4.3125L14.6195 4.3125L8.05697 10.875L19.9683 10.875L19.9683 13.125L8.05697 13.125L14.6195 19.6875L11.4375 19.6875L3.74999 12Z" fill="#8A766A"/>
 </svg>
diff --git a/src/assets/images/nav/phone.svg b/src/assets/images/nav/phone.svg
new file mode 100644
index 0000000..2f71dfb
--- /dev/null
+++ b/src/assets/images/nav/phone.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.805 8.90167C8.58695 10.2754 9.7246 11.4131 11.0983 12.195L11.835 11.1633C11.9535 10.9974 12.1286 10.8807 12.3273 10.8353C12.526 10.7898 12.7345 10.8188 12.9133 10.9167C14.0919 11.5608 15.3935 11.9481 16.7325 12.0533C16.9415 12.0699 17.1365 12.1646 17.2788 12.3186C17.421 12.4726 17.5 12.6745 17.5 12.8842V16.6025C17.5 16.8088 17.4235 17.0078 17.2853 17.161C17.1471 17.3142 16.9569 17.4106 16.7517 17.4317C16.31 17.4775 15.865 17.5 15.4167 17.5C8.28333 17.5 2.5 11.7167 2.5 4.58333C2.5 4.135 2.5225 3.69 2.56833 3.24833C2.58938 3.04308 2.68582 2.85293 2.83899 2.71469C2.99216 2.57646 3.19117 2.49996 3.3975 2.5H7.11583C7.32547 2.49997 7.52741 2.57896 7.6814 2.72121C7.83539 2.86346 7.93011 3.05852 7.94667 3.2675C8.05185 4.60649 8.43923 5.90807 9.08333 7.08667C9.18122 7.26547 9.21018 7.47395 9.16472 7.67266C9.11927 7.87137 9.00255 8.04653 8.83667 8.165L7.805 8.90167V8.90167ZM5.70333 8.35417L7.28667 7.22333C6.83732 6.25341 6.52946 5.22403 6.3725 4.16667H4.175C4.17 4.305 4.1675 4.44417 4.1675 4.58333C4.16667 10.7967 9.20333 15.8333 15.4167 15.8333C15.5558 15.8333 15.695 15.8308 15.8333 15.825V13.6275C14.776 13.4705 13.7466 13.1627 12.7767 12.7133L11.6458 14.2967C11.1906 14.1198 10.7483 13.9109 10.3225 13.6717L10.2742 13.6442C8.63965 12.7139 7.28607 11.3604 6.35583 9.72583L6.32833 9.6775C6.08909 9.25166 5.88024 8.80945 5.70333 8.35417V8.35417Z" fill="#E00068"/>
+</svg>
diff --git a/src/assets/images/nav/position.svg b/src/assets/images/nav/position.svg
new file mode 100644
index 0000000..0234e0a
--- /dev/null
+++ b/src/assets/images/nav/position.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 16.9999L14.125 12.8749C14.9408 12.0591 15.4963 11.0197 15.7213 9.88816C15.9463 8.75662 15.8308 7.58377 15.3892 6.5179C14.9477 5.45203 14.2 4.54102 13.2408 3.90008C12.2815 3.25913 11.1537 2.91702 10 2.91702C8.8463 2.91702 7.71851 3.25913 6.75924 3.90008C5.79997 4.54102 5.05229 5.45203 4.61076 6.5179C4.16923 7.58377 4.05368 8.75662 4.27871 9.88816C4.50374 11.0197 5.05926 12.0591 5.875 12.8749L10 16.9999ZM10 19.3566L4.69667 14.0533C3.64779 13.0044 2.93349 11.668 2.64411 10.2131C2.35473 8.75829 2.50326 7.25029 3.07092 5.87985C3.63858 4.50941 4.59987 3.33808 5.83324 2.51397C7.0666 1.68986 8.51665 1.25 10 1.25C11.4834 1.25 12.9334 1.68986 14.1668 2.51397C15.4001 3.33808 16.3614 4.50941 16.9291 5.87985C17.4968 7.25029 17.6453 8.75829 17.3559 10.2131C17.0665 11.668 16.3522 13.0044 15.3033 14.0533L10 19.3566V19.3566ZM10 10.4166C10.442 10.4166 10.866 10.241 11.1785 9.92845C11.4911 9.61588 11.6667 9.19196 11.6667 8.74993C11.6667 8.30791 11.4911 7.88398 11.1785 7.57142C10.866 7.25886 10.442 7.08327 10 7.08327C9.55798 7.08327 9.13405 7.25886 8.82149 7.57142C8.50893 7.88398 8.33334 8.30791 8.33334 8.74993C8.33334 9.19196 8.50893 9.61588 8.82149 9.92845C9.13405 10.241 9.55798 10.4166 10 10.4166ZM10 12.0833C9.11595 12.0833 8.2681 11.7321 7.64298 11.107C7.01786 10.4818 6.66667 9.63399 6.66667 8.74993C6.66667 7.86588 7.01786 7.01803 7.64298 6.39291C8.2681 5.76779 9.11595 5.4166 10 5.4166C10.8841 5.4166 11.7319 5.76779 12.357 6.39291C12.9821 7.01803 13.3333 7.86588 13.3333 8.74993C13.3333 9.63399 12.9821 10.4818 12.357 11.107C11.7319 11.7321 10.8841 12.0833 10 12.0833Z" fill="#E00068"/>
+</svg>
diff --git a/src/assets/images/nav/qi.svg b/src/assets/images/nav/qi.svg
new file mode 100644
index 0000000..3fde501
--- /dev/null
+++ b/src/assets/images/nav/qi.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6666 8C10.6666 9.47276 9.47268 10.6667 7.99992 10.6667C6.52716 10.6667 5.33325 9.47276 5.33325 8C5.33325 6.52724 6.52716 5.33333 7.99992 5.33333C9.47268 5.33333 10.6666 6.52724 10.6666 8ZM9.33325 8C9.33325 8.73638 8.7363 9.33333 7.99992 9.33333C7.26354 9.33333 6.66659 8.73638 6.66659 8C6.66659 7.26362 7.26354 6.66667 7.99992 6.66667C8.7363 6.66667 9.33325 7.26362 9.33325 8Z" fill="#615C59"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33325 8C1.33325 11.682 4.31792 14.6667 7.99992 14.6667C11.6819 14.6667 14.6666 11.682 14.6666 8C14.6666 4.318 11.6819 1.33333 7.99992 1.33333C4.31792 1.33333 1.33325 4.318 1.33325 8ZM11.7712 11.7712C10.771 12.7714 9.41441 13.3333 7.99992 13.3333C6.58543 13.3333 5.22888 12.7714 4.22868 11.7712C3.22849 10.771 2.66659 9.41449 2.66659 8C2.66659 6.58551 3.22849 5.22896 4.22868 4.22876C5.22888 3.22857 6.58543 2.66667 7.99992 2.66667C9.41441 2.66667 10.771 3.22857 11.7712 4.22876C12.7713 5.22896 13.3333 6.58551 13.3333 8C13.3333 9.41449 12.7713 10.771 11.7712 11.7712Z" fill="#615C59"/>
+</svg>
diff --git a/src/assets/images/nav/right.svg b/src/assets/images/nav/right.svg
new file mode 100644
index 0000000..0bbd5ac
--- /dev/null
+++ b/src/assets/images/nav/right.svg
@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35 18.6667L44.4814 18.6667L53.6666 28L44.4814 37.3333L35 37.3333L44.4814 28L35 18.6667Z" fill="#8E9090"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M18.6667 18.6667L28.1482 18.6667L37.3334 28L28.1482 37.3333L18.6667 37.3333L28.1482 28L18.6667 18.6667Z" fill="#8E9090"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M2.33322 18.6667L11.8147 18.6667L20.9999 28L11.8147 37.3333L2.33322 37.3333L11.8147 28L2.33322 18.6667Z" fill="#8E9090"/>
+</svg>
diff --git a/src/assets/images/nav/right_thumb.svg b/src/assets/images/nav/right_thumb.svg
index 9eca66c..338640b 100644
--- a/src/assets/images/nav/right_thumb.svg
+++ b/src/assets/images/nav/right_thumb.svg
@@ -1,3 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.172 6.99998L6.808 1.63598L8.222 0.221985L16 7.99998L8.222 15.778L6.808 14.364L12.172 8.99998H0V6.99998H12.172Z" fill="#6879B0"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="white"/>
+<path d="M20.25 12L12.5625 19.6875H9.38054L15.943 13.125H4.03174L4.03174 10.875L15.943 10.875L9.38053 4.3125L12.5625 4.3125L20.25 12Z" fill="#8A766A"/>
 </svg>
diff --git a/src/assets/images/nav/time.svg b/src/assets/images/nav/time.svg
new file mode 100644
index 0000000..051b2de
--- /dev/null
+++ b/src/assets/images/nav/time.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 18.3333C5.39758 18.3333 1.66675 14.6025 1.66675 10C1.66675 5.3975 5.39758 1.66666 10.0001 1.66666C14.6026 1.66666 18.3334 5.3975 18.3334 10C18.3334 14.6025 14.6026 18.3333 10.0001 18.3333ZM10.0001 16.6667C11.7682 16.6667 13.4639 15.9643 14.7141 14.714C15.9644 13.4638 16.6667 11.7681 16.6667 10C16.6667 8.23189 15.9644 6.5362 14.7141 5.28595C13.4639 4.03571 11.7682 3.33333 10.0001 3.33333C8.23197 3.33333 6.53628 4.03571 5.28604 5.28595C4.03579 6.5362 3.33341 8.23189 3.33341 10C3.33341 11.7681 4.03579 13.4638 5.28604 14.714C6.53628 15.9643 8.23197 16.6667 10.0001 16.6667V16.6667ZM10.8334 10H14.1667V11.6667H9.16675V5.83333H10.8334V10Z" fill="#E00068"/>
+</svg>
diff --git a/src/assets/images/nav/up_thumb.svg b/src/assets/images/nav/up_thumb.svg
index 77d52ec..eb3c797 100644
--- a/src/assets/images/nav/up_thumb.svg
+++ b/src/assets/images/nav/up_thumb.svg
@@ -1,3 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.00017 3.828L1.63617 9.192L0.222168 7.778L8.00017 -3.39987e-07L15.7782 7.778L14.3642 9.192L9.00017 3.828L9.00017 16L7.00017 16L7.00017 3.828Z" fill="#6879B0"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" transform="matrix(0 -1 1 0 0 24)" fill="white"/>
+<path d="M12 3.75L19.6875 11.4375V14.6195L13.125 8.05698V19.9683L10.875 19.9683L10.875 8.05698L4.3125 14.6195L4.3125 11.4375L12 3.75Z" fill="#8A766A"/>
 </svg>
diff --git a/src/assets/images/nav/zhong.svg b/src/assets/images/nav/zhong.svg
new file mode 100644
index 0000000..883a1ac
--- /dev/null
+++ b/src/assets/images/nav/zhong.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="M8 13.5999L11.3 10.2999C11.9526 9.64728 12.397 8.81576 12.577 7.91053C12.7571 7.0053 12.6646 6.06701 12.3114 5.21432C11.9582 4.36162 11.36 3.63282 10.5926 3.12006C9.82519 2.6073 8.92296 2.33362 8 2.33362C7.07704 2.33362 6.17481 2.6073 5.40739 3.12006C4.63997 3.63282 4.04183 4.36162 3.68861 5.21432C3.33539 6.06701 3.24294 7.0053 3.42297 7.91053C3.603 8.81576 4.04741 9.64728 4.7 10.2999L8 13.5999ZM8 15.4853L3.75734 11.2426C2.91823 10.4035 2.34679 9.3344 2.11529 8.17051C1.88378 7.00663 2.0026 5.80023 2.45673 4.70388C2.91086 3.60753 3.6799 2.67046 4.66659 2.01118C5.65328 1.35189 6.81332 1 8 1C9.18669 1 10.3467 1.35189 11.3334 2.01118C12.3201 2.67046 13.0891 3.60753 13.5433 4.70388C13.9974 5.80023 14.1162 7.00663 13.8847 8.17051C13.6532 9.3344 13.0818 10.4035 12.2427 11.2426L8 15.4853V15.4853ZM8 8.33328C8.35362 8.33328 8.69276 8.19281 8.94281 7.94276C9.19286 7.69271 9.33334 7.35357 9.33334 6.99995C9.33334 6.64633 9.19286 6.30719 8.94281 6.05714C8.69276 5.80709 8.35362 5.66661 8 5.66661C7.64638 5.66661 7.30724 5.80709 7.05719 6.05714C6.80714 6.30719 6.66667 6.64633 6.66667 6.99995C6.66667 7.35357 6.80714 7.69271 7.05719 7.94276C7.30724 8.19281 7.64638 8.33328 8 8.33328ZM8 9.66661C7.29276 9.66661 6.61448 9.38566 6.11438 8.88557C5.61429 8.38547 5.33334 7.70719 5.33334 6.99995C5.33334 6.2927 5.61429 5.61443 6.11438 5.11433C6.61448 4.61423 7.29276 4.33328 8 4.33328C8.70725 4.33328 9.38552 4.61423 9.88562 5.11433C10.3857 5.61443 10.6667 6.2927 10.6667 6.99995C10.6667 7.70719 10.3857 8.38547 9.88562 8.88557C9.38552 9.38566 8.70725 9.66661 8 9.66661Z" fill="#615C59"/>
+</svg>
diff --git a/src/components/PathGroup/PathGroup.vue b/src/components/PathGroup/PathGroup.vue
new file mode 100644
index 0000000..7d19640
--- /dev/null
+++ b/src/components/PathGroup/PathGroup.vue
@@ -0,0 +1,209 @@
+<template>
+  <ScrollView v-if="directionInfo" ref="myScroll" scrollbar :pull-up="false" class="way-scroll" :list="pathShopList">
+    <div class="way-list">
+      <div class="line"></div>
+      <div class="way-li">
+        <div class="tab" :class="{ tab_ac: playIdx === -1 }"></div>
+        <div class="way-right" :class="{ 'way-right-end': playIdx === -1 }">
+          <p class="way-logo">
+            <img :src="directionInfo.thumbIcon" alt="" />
+          </p>
+          <p class="way-name">{{ positionStr }}</p>
+        </div>
+      </div>
+      <div v-for="(item, idx) of pathShopList" :id="item.shopNum" :key="item.shopCode" class="way-li">
+        <div class="tab" :class="{ tab_ac: playIdx === idx }"></div>
+        <div class="way-right" :class="{ 'way-right-end': playIdx === idx }">
+          <p class="way-logo">
+            <img
+              :src="item.logoUrl ? item.logoUrl : item.logoPath ? item.logoPath : require('@/assets/images/header/logo.svg')"
+              width="24"
+              height="24"
+              alt=""
+            />
+          </p>
+          <p class="way-name">
+            {{ item.shopName ? switchLanguage(item, 'shopName') : switchLanguage(item, 'name') }}
+          </p>
+        </div>
+      </div>
+      <div class="way-li">
+        <div class="tab" :class="{ tab_ac: playIdx === pathShopList.length }"></div>
+        <div class="way-right" :class="{ 'way-right-end': playIdx === pathShopList.length }">
+          <p class="way-logo">
+            <img :src="shop.logoUrl ? shop.logoUrl : require('@/assets/images/header/logo.svg')" alt="" />
+          </p>
+          <p class="way-name">{{ lastStr }}</p>
+        </div>
+      </div>
+    </div>
+  </ScrollView>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, onBeforeUnmount, shallowRef, computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRootStore } from '@/store/root'
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
+import ScrollView from '@/base/ScrollView/ScrollView'
+
+const store = useRootStore()
+const { switchLanguage } = useSwitchLanguage()
+const { shop, device, language } = storeToRefs(store)
+const myScroll = shallowRef()
+const props = defineProps({
+  directionInfo: {
+    type: Object,
+    default: () => ({})
+  },
+  pathShopList: {
+    type: Array,
+    default: () => []
+  }
+})
+const positionStr = computed(() => {
+  if (language.value === 'zh') {
+    return `您在${device.value.floor}层，${switchLanguage(props.directionInfo, 'text')}`
+  } else if (language.value === 'en') {
+    return `You are on ${device.value.floor}，${switchLanguage(props.directionInfo, 'text')}`
+  }
+  return `您在${device.value.floor}層，${switchLanguage(props.directionInfo, 'text')}`
+})
+const lastStr = computed(() => {
+  if (language.value === 'zh') {
+    return `到达${shop.value.shopName}`
+  } else if (language.value === 'en') {
+    return `arrive ${shop.value.shopNameEn}`
+  }
+  return `到達${switchLanguage(shop.value, 'shopName')}`
+})
+const playIdx = ref(-1)
+onBeforeMount(() => {
+  window.Map_QM && window.Map_QM.addEventListener('PathPlaying', onPathPlaying, false)
+  window.Map_QM && window.Map_QM.addEventListener('PathPlayOver', onPathPlayOver, false)
+})
+onBeforeUnmount(() => {
+  window.Map_QM.removeEventListener('PathPlaying', onPathPlaying)
+  window.Map_QM.removeEventListener('PathPlayOver', onPathPlayOver)
+})
+
+function onPathPlayOver() {
+  playIdx.value = props.pathShopList.length
+}
+
+function onPathPlaying(e) {
+  // console.log(e.data) //返回小人位置  {"pathArrIn": 0, "pathIndex": 1, "shopNum":"" }
+  const { shopNum } = e.data
+  if (shopNum) {
+    const idx2 = props.pathShopList.findIndex(val => val.shopNum === shopNum)
+    playIdx.value = idx2
+    myScroll.value.scrollToElement(document.getElementById(e.data.shopNum))
+  }
+}
+//重置playIdx
+function resetPlayIdx() {
+  playIdx.value = -1
+}
+defineExpose({
+  resetPlayIdx,
+  myScroll
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.bscroll-vertical-scrollbar) {
+  width: 6px;
+  height: 120px !important;
+  background: rgb(0 0 0 / 3%);
+  border-radius: 6px;
+  opacity: 1 !important;
+  .bscroll-indicator {
+    background: rgb(0 0 0 / 6%) !important;
+    border: none !important;
+    border-radius: 6px !important;
+  }
+}
+.way-scroll {
+  overflow: hidden;
+  width: 296px;
+  height: 348px;
+  .way-list {
+    position: relative;
+    .line {
+      position: absolute;
+      top: 0;
+      left: 4px;
+      width: 1px;
+      height: 100%;
+      border: 1px dashed #8a766a;
+    }
+    .way-li {
+      @include fl();
+
+      position: relative;
+      margin-bottom: 8px;
+      .tab {
+        position: absolute;
+        top: 16px;
+        left: 0;
+        width: 10px;
+        height: 10px;
+        background-color: #fff;
+        border: 1px solid #8a766a;
+        border-radius: 50%;
+      }
+      .tab_ac {
+        background: #e00068;
+        border-color: #e00068;
+      }
+      .way-right {
+        @include fl();
+
+        max-width: 250px;
+        height: 40px;
+        padding: 4px 16px 4px 4px;
+        margin-left: 15px;
+        background: #fff;
+        background: rgb(255 255 255 / 30%);
+        border: 1px solid #fff;
+        border-radius: 8px;
+        .way-logo {
+          @include fl(center);
+
+          padding: 4px;
+          margin-right: 16px;
+          background: #fff;
+          border-radius: 6px;
+          img {
+            width: 24px;
+            height: 24px;
+            object-fit: scale-down;
+          }
+        }
+        .way-name {
+          @include no-wrap;
+
+          max-width: 180px;
+          padding-left: 12px;
+          font-size: 12px;
+          font-family: 'font_regular';
+          color: #615c59;
+          font-weight: 400;
+          line-height: 14px;
+        }
+      }
+      .way-right-end {
+        background: #fff;
+        border: 1px solid #e00068;
+        .way-name {
+          font-size: 12px;
+          font-family: font-bold;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 14px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index caff81e..cf24f5e 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -12,6 +12,11 @@
   },
   "navs": {
     "3D": "Change to 3D",
-    "2D": "Change to 2D"
+    "2D": "Change to 2D",
+    "label": "Navigation Destination",
+    "phone": "PHone Nav",
+    "tip": "Please face the screen",
+    "start": "Start",
+    "end": "End"
   }
 }
diff --git a/src/i18n/lang/zh.json b/src/i18n/lang/zh.json
index 9722d58..75e01ac 100644
--- a/src/i18n/lang/zh.json
+++ b/src/i18n/lang/zh.json
@@ -12,6 +12,11 @@
   },
   "navs": {
     "3D": "切换到3D模式",
-    "2D": "切换到2D模式"
+    "2D": "切换到2D模式",
+    "label": "导航目的地",
+    "phone": "扫码手机导航",
+    "tip": "请您面向屏幕",
+    "start": "起点",
+    "end": "终点"
   }
 }
diff --git a/src/views/Nav/Nav.vue b/src/views/Nav/Nav.vue
index e761cf9..f4d4830 100644
--- a/src/views/Nav/Nav.vue
+++ b/src/views/Nav/Nav.vue
@@ -1,4 +1,9 @@
 <template>
+  <!-- 返回 -->
+  <div class="back animate__animated animate__fadeInRight" @click="back">
+    <img src="@/assets/images/nav/back.svg" alt="" />
+  </div>
+
   <div class="bottom animate__animated animate__fadeIn">
     <!-- 3d/2d -->
     <div class="d2-d3" @click="change3D">
@@ -45,10 +50,104 @@
       </div>
     </div>
   </div>
+
+  <div class="info-container animate__animated animate__fadeInLeft">
+    <div class="tops">
+      <div class="info">
+        <div class="logo">
+          <img :src="shop.logoUrl ? shop.logoUrl : require('@/assets/images/header/logo.svg')" alt="" />
+        </div>
+        <div class="right">
+          <div class="nav-label">
+            <div>{{ $t('navs.label') }}</div>
+            <img src="@/assets/images/nav/down.svg" alt="" />
+          </div>
+          <div class="shop-name">
+            <Marquees :delay="0.8" :speed="40" :content="shop.shopName">{{ switchLanguage(shop, 'shopName') }}</Marquees>
+          </div>
+        </div>
+      </div>
+      <div class="list">
+        <div v-if="shop.industryFatherName" class="item">
+          <img :src="shop.industryUrl ? shop.industryUrl : require('@/assets/images/formatDefault.svg')" alt="" />
+          <div class="text">{{ switchLanguage(shop, 'industryFatherName') }}</div>
+        </div>
+        <div v-if="shop.houseNumber" class="item">
+          <img src="@/assets/images/nav/position.svg" alt="" />
+          <div class="text">{{ shop.houseNumber }}</div>
+        </div>
+        <div v-if="shop.businessHours" class="item">
+          <img src="@/assets/images/nav/time.svg" alt="" />
+          <div class="text">{{ shop.businessHours }}</div>
+        </div>
+        <div v-if="shop.contact" class="item">
+          <img src="@/assets/images/nav/phone.svg" alt="" />
+          <div class="text">{{ shop.contact }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 起点-终点 -->
+    <div class="start-container">
+      <div v-if="device.floorOrder >= shop.floorOrder" class="floor-container">
+        <div class="floor ac">
+          <div class="floor-name">{{ device.floor }}</div>
+          <div class="right1">
+            <img src="@/assets/images/nav/qi.svg" alt="" />
+            <div class="txt">{{ $t('navs.start') }}</div>
+          </div>
+        </div>
+        <img class="gif" src="@/assets/images/nav/right.svg" alt="" />
+        <div class="floor">
+          <div class="floor-name">{{ shop.floor }}</div>
+          <div class="right1">
+            <img src="@/assets/images/nav/zhong.svg" alt="" />
+            <div class="txt">{{ $t('navs.end') }}</div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="floor-container">
+        <div class="floor">
+          <div class="floor-name">{{ shop.floor }}</div>
+          <div class="right1">
+            <img src="@/assets/images/nav/qi.svg" alt="" />
+            <div class="txt">{{ $t('navs.end') }}</div>
+          </div>
+        </div>
+        <img class="gif" src="@/assets/images/nav/left.svg" alt="" />
+        <div class="floor ac">
+          <div class="floor-name">{{ device.floor }}</div>
+          <div class="right1">
+            <img src="@/assets/images/nav/zhong.svg" alt="" />
+            <div class="txt">{{ $t('navs.start') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottoms">
+      <div class="direction-container">
+        <div class="ma-top">
+          <div class="dir-img">
+            <img class="animate__animated animate__infinite" :class="directionInfo.class" :src="directionInfo.icon" alt="" />
+          </div>
+          <div class="direc-text" :class="{ 'd-en': language === 'en' }">{{ switchLanguage(directionInfo, 'text') }}</div>
+          <div class="label">{{ $t('navs.tip') }}</div>
+        </div>
+        <div class="ma-bottom">
+          <img :src="qr" alt="" />
+          <div class="text">{{ $t('navs.phone') }}</div>
+        </div>
+      </div>
+      <div class="path">
+        <PathGroup ref="pathGroupRef" :direction-info="directionInfo" :path-shop-list="pathShopList" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRootStore } from '@/store/root'
 import { useMapNavControl } from '@/composables/useMapNavControl'
@@ -56,12 +155,15 @@ import { useChangeNavMethod } from '@/composables/useChangeNavMethod'
 import { useStartNavi } from '@/composables/useStartNavi'
 import { useSetCameraViews } from '@/composables/useSetCameraViews'
 import { useStatistics } from '@/composables/useStatistics'
+import { useQRCode } from '@/composables/useQRCode'
 import { useRouter } from 'vue-router'
 import { NavMethods } from './methodsList'
 import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
+import Marquees from '@/base/Marquees/Marquees.vue'
+import PathGroup from '@/components/PathGroup/PathGroup.vue'
 const { switchLanguage } = useSwitchLanguage()
 const store = useRootStore()
-const { shop, device, showSearch } = storeToRefs(store)
+const { shop, device, showSearch, config, language } = storeToRefs(store)
 const router = useRouter()
 const pathGroupRef = ref()
 useStatistics({ tag: 'navigation', shopCode: shop.value.shopCode })
@@ -70,6 +172,11 @@ const { replay, pause, speedUp, handleReplay, togglePause, handleSpeedUp, resetP
 const { directionInfo, pathShopList, backPathArray, startNavi } = useStartNavi(shop, device, resetPause)
 const { methodIdx, methodsList, handleControl } = useChangeNavMethod(backPathArray)
 const { cameraViews, setCameraViews } = useSetCameraViews(resetPause)
+const { qr } = useQRCode(
+  ref(
+    `${config.value.mobileNav}?s=${device.value.floorOrder}_${device.value.location}_起点&e=${shop.value.floorOrder}_${shop.value.yaxis}_${shop.value.shopName}`
+  )
+)
 
 // 返回
 function back() {
@@ -101,9 +208,30 @@ function changeReplay() {
 if (showSearch.value) {
   store.SET_SHOW_SEARCH(false)
 }
+
+watch(shop, newVal => {
+  startNavi({ ...newVal })
+})
 </script>
 
 <style lang="scss" scoped>
+.back {
+  @include fl(center);
+
+  position: fixed;
+  top: 152px;
+  right: 56px;
+  z-index: 999;
+  width: 100px;
+  height: 100px;
+  background: #fff;
+  border-radius: 12px;
+  img {
+    width: 48px;
+    height: 48px;
+  }
+}
+
 .bottom {
   @include fl();
 
@@ -223,4 +351,211 @@ if (showSearch.value) {
     }
   }
 }
+
+.info-container {
+  position: fixed;
+  top: 152px;
+  left: 56px;
+  z-index: 999;
+  .tops {
+    width: 600px;
+    height: 200px;
+    padding: 24px 40px;
+    background: url('@/assets/images/nav/info_bg.svg') no-repeat;
+    background-size: 100% 100%;
+    .info {
+      @include fl();
+
+      margin-bottom: 20px;
+      .logo {
+        width: 110px;
+        height: 110px;
+        padding: 12px;
+        margin-right: 32px;
+        img {
+          width: 86px;
+          height: 86px;
+          object-fit: scale-down;
+        }
+      }
+      .right {
+        .nav-label {
+          @include fl();
+
+          margin-right: 8px;
+          margin-bottom: 11px;
+          font-size: 16px;
+          font-family: 'font_bold';
+          color: #615c59;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 24px;
+          img {
+            width: 20px;
+            height: 20px;
+            margin-left: 8px;
+          }
+        }
+        .shop-name {
+          width: 380px;
+          height: 36px;
+          font-size: 28px;
+          font-family: 'font_bold';
+          color: #534f46;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 36px;
+          :deep(.content) {
+            line-height: inherit;
+          }
+        }
+      }
+    }
+    .list {
+      @include fl();
+      .item {
+        @include fl();
+
+        height: 22px;
+        margin-right: 40px;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 8px;
+        }
+        .text {
+          @include no-wrap;
+
+          max-width: 90px;
+          font-size: 14px;
+          font-family: 'font_bold';
+          font-style: normal;
+          font-weight: 700;
+          line-height: 22px;
+          color: #615c59;
+        }
+      }
+    }
+  }
+  .start-container {
+    @include fl(center);
+
+    width: 600px;
+    height: 144px;
+    margin-bottom: 2px;
+    background: #fff;
+    .floor-container {
+      @include fl(center);
+
+      .floor {
+        @include fl(center);
+
+        width: 200px;
+        height: 96px;
+        border: 1px solid #8e9090;
+        border-radius: 16px;
+
+        .floor-name {
+          margin-right: 8px;
+          font-size: 40px;
+          font-family: 'font_bold';
+          color: #534f46;
+          font-style: 48px;
+          font-weight: 700;
+        }
+        .right1 {
+          text-align: center;
+          img {
+            width: 16px;
+            height: 16px;
+          }
+          .txt {
+            font-size: 14px;
+            font-family: 'font_regular';
+            color: #534f46;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 22px;
+          }
+        }
+      }
+      .gif {
+        width: 56px;
+        height: 56px;
+        margin: 0 32px;
+      }
+      .ac {
+        border: 1px solid #e00068;
+      }
+    }
+  }
+
+  .bottoms {
+    @include fl();
+    .direction-container {
+      width: 240px;
+      height: 582px;
+      padding: 40px 54px 142px;
+      text-align: center;
+      background: rgb(255 255 255 / 60%);
+
+      .ma-top {
+        overflow: hidden;
+        width: 132px;
+        height: 206px;
+
+        img {
+          width: 132px;
+          height: 132px;
+        }
+        .direc-text {
+          margin-top: 20px;
+          font-size: 24px;
+          font-family: 'font_bold';
+          color: #534f46;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 32px;
+          &.d-en {
+            font-size: 16px;
+            line-height: 16px;
+          }
+        }
+        .label {
+          font-size: 14px;
+          font-family: 'font_regular';
+          color: #8e9090;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px;
+        }
+      }
+
+      .ma-bottom {
+        margin-top: 64px;
+        img {
+          width: 100px;
+          height: 100px;
+        }
+        .text {
+          margin-top: 8px;
+          font-size: 12px;
+          font-family: 'font_bold';
+          font-style: normal;
+          font-weight: 700;
+          line-height: 14px;
+          color: #8e9090;
+        }
+      }
+    }
+
+    .path {
+      width: 360px;
+      height: 582px;
+      padding-top: 40px;
+      padding-left: 40px;
+      background: rgb(255 255 255 / 30%);
+    }
+  }
+}
 </style>