From c4d001aa8ac31fd37adb1148db7320accaad36cb Mon Sep 17 00:00:00 2001
From: liyongle <liyongle@123>
Date: Wed, 12 Jul 2023 16:57:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=A7=A9=20=E8=89=BA=E6=9C=AF?=
 =?UTF-8?q?=E3=80=81=E5=81=9C=E8=BD=A6=E3=80=81=E4=BA=A4=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/art/go.svg                  |   6 +
 src/assets/images/parking/new.svg             |   3 +
 src/assets/images/parking/pate_icon.svg       |   6 +
 src/assets/images/parking/pate_icon_ac.svg    |   6 +
 src/assets/images/parking/space_icon.svg      |   4 +
 src/assets/images/parking/space_icon_ac.svg   |   4 +
 src/assets/images/traffic/mall_icon.svg       |   3 +
 src/assets/images/traffic/mall_icon_ac.svg    |   3 +
 src/assets/images/traffic/traffic_icon.svg    |   3 +
 src/assets/images/traffic/traffic_icon_ac.svg |   3 +
 src/components/CarInfo/CarInfo.vue            | 172 +++++++++++++++
 src/components/PathGroup/PathGroup.vue        |   4 +-
 src/components/PictureText/PictureText.vue    | 136 ++++++++++++
 src/components/PlateInput/PlateInput.vue      |  54 ++++-
 .../PlateKeyboard/PlateKeyboard.vue           |  28 +--
 .../PublicComponent/PublicComponent.vue       |   2 +-
 src/composables/useFindCar.ts                 |  79 +++++--
 src/composables/useParkingKeyboard.ts         |   8 +-
 src/http/api/parking/index.ts                 |   2 +
 src/router/routes.ts                          |  26 +++
 src/types/car.d.ts                            |   2 +-
 src/views/Art/Art.vue                         |  67 ++++++
 src/views/Art/ArtItem.vue                     |  97 +++++++++
 src/views/Nav/Nav.vue                         |   2 +-
 src/views/Parking/Parking.vue                 | 204 +++++++++++++++++-
 src/views/Traffic/Traffic.vue                 |  68 ++++++
 26 files changed, 934 insertions(+), 58 deletions(-)
 create mode 100644 src/assets/images/art/go.svg
 create mode 100644 src/assets/images/parking/new.svg
 create mode 100644 src/assets/images/parking/pate_icon.svg
 create mode 100644 src/assets/images/parking/pate_icon_ac.svg
 create mode 100644 src/assets/images/parking/space_icon.svg
 create mode 100644 src/assets/images/parking/space_icon_ac.svg
 create mode 100644 src/assets/images/traffic/mall_icon.svg
 create mode 100644 src/assets/images/traffic/mall_icon_ac.svg
 create mode 100644 src/assets/images/traffic/traffic_icon.svg
 create mode 100644 src/assets/images/traffic/traffic_icon_ac.svg
 create mode 100644 src/components/CarInfo/CarInfo.vue
 create mode 100644 src/components/PictureText/PictureText.vue
 create mode 100644 src/views/Art/Art.vue
 create mode 100644 src/views/Art/ArtItem.vue
 create mode 100644 src/views/Traffic/Traffic.vue

diff --git a/src/assets/images/art/go.svg b/src/assets/images/art/go.svg
new file mode 100644
index 0000000..d9190f3
--- /dev/null
+++ b/src/assets/images/art/go.svg
@@ -0,0 +1,6 @@
+<svg width="80" height="36" viewBox="0 0 80 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.8235 11.0964L22.2775 23.5064L19.2375 17.4264L13.6005 15.1714L25.8235 11.0964ZM27.8895 8.30041L9.08353 14.5684C8.9862 14.6007 8.90114 14.6621 8.83988 14.7443C8.77862 14.8265 8.74412 14.9256 8.74107 15.0281C8.73801 15.1306 8.76654 15.2316 8.82279 15.3173C8.87904 15.403 8.9603 15.4694 9.05553 15.5074L17.7885 19.0004L22.2135 27.8504C22.2586 27.9405 22.3298 28.0149 22.4178 28.0639C22.5059 28.1129 22.6066 28.1341 22.7069 28.1248C22.8073 28.1155 22.9024 28.0761 22.98 28.0118C23.0575 27.9475 23.1138 27.8613 23.1415 27.7644L28.5285 8.91141C28.5535 8.82383 28.554 8.73109 28.5301 8.64321C28.5063 8.55533 28.4588 8.47565 28.3929 8.41276C28.3271 8.34987 28.2453 8.30617 28.1564 8.28637C28.0675 8.26657 27.9749 8.27143 27.8885 8.30041H27.8895Z" fill="#E00068"/>
+<line opacity="0.5" x1="37" y1="12" x2="37" y2="24" stroke="#E00068"/>
+<path d="M50.9512 19.38V16.88H56.5512V22.84C56.0978 23.5733 55.3712 24.16 54.3712 24.6C53.3845 25.0267 52.2912 25.24 51.0912 25.24C49.6645 25.24 48.3978 24.92 47.2912 24.28C46.1845 23.64 45.3245 22.7467 44.7112 21.6C44.0978 20.4533 43.7912 19.14 43.7912 17.66C43.7912 16.1667 44.1045 14.8467 44.7312 13.7C45.3712 12.5533 46.2445 11.6667 47.3512 11.04C48.4578 10.4133 49.6845 10.1 51.0312 10.1C52.3778 10.1 53.5445 10.4067 54.5312 11.02C55.5312 11.62 56.2045 12.3933 56.5512 13.34L54.1512 14.72C53.8578 14.1067 53.4378 13.6267 52.8912 13.28C52.3445 12.92 51.6978 12.74 50.9512 12.74C50.1645 12.74 49.4578 12.94 48.8312 13.34C48.2045 13.74 47.7112 14.3133 47.3512 15.06C46.9912 15.8067 46.8112 16.6733 46.8112 17.66C46.8112 18.6733 46.9912 19.5533 47.3512 20.3C47.7245 21.0467 48.2445 21.62 48.9112 22.02C49.5912 22.42 50.3778 22.62 51.2712 22.62C52.3112 22.62 53.1245 22.3333 53.7112 21.76V19.38H50.9512ZM58.2248 17.66C58.2248 16.1267 58.5314 14.7867 59.1448 13.64C59.7581 12.4933 60.5914 11.62 61.6448 11.02C62.7114 10.4067 63.8981 10.1 65.2048 10.1C66.5114 10.1 67.6914 10.4067 68.7448 11.02C69.8114 11.62 70.6514 12.4933 71.2648 13.64C71.8914 14.7867 72.2048 16.1267 72.2048 17.66C72.2048 19.2067 71.8914 20.5533 71.2648 21.7C70.6514 22.8467 69.8114 23.7267 68.7448 24.34C67.6914 24.94 66.5114 25.24 65.2048 25.24C63.8981 25.24 62.7114 24.94 61.6448 24.34C60.5914 23.7267 59.7581 22.8467 59.1448 21.7C58.5314 20.5533 58.2248 19.2067 58.2248 17.66ZM61.2848 17.66C61.2848 18.6333 61.4448 19.4933 61.7648 20.24C62.0981 20.9867 62.5581 21.5667 63.1448 21.98C63.7448 22.38 64.4314 22.58 65.2048 22.58C65.9781 22.58 66.6581 22.38 67.2448 21.98C67.8448 21.5667 68.3048 20.9867 68.6248 20.24C68.9581 19.4933 69.1248 18.6333 69.1248 17.66C69.1248 16.6867 68.9581 15.8333 68.6248 15.1C68.3048 14.3533 67.8448 13.78 67.2448 13.38C66.6581 12.9667 65.9781 12.76 65.2048 12.76C64.4314 12.76 63.7448 12.9667 63.1448 13.38C62.5581 13.78 62.0981 14.3533 61.7648 15.1C61.4448 15.8333 61.2848 16.6867 61.2848 17.66Z" fill="#E00068"/>
+<rect x="0.5" y="0.5" width="79" height="35" rx="17.5" stroke="#E00068"/>
+</svg>
diff --git a/src/assets/images/parking/new.svg b/src/assets/images/parking/new.svg
new file mode 100644
index 0000000..519e8dd
--- /dev/null
+++ b/src/assets/images/parking/new.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00016 3.5C11.0718 3.5 14.447 6.47967 15.0653 10.3775C16.4362 9.01133 18.3285 8.16667 20.4168 8.16667H25.6668V11.0833C25.6668 15.2717 22.2718 18.6667 18.0835 18.6667H15.1668V24.5H12.8335V15.1667H10.5002C5.98983 15.1667 2.3335 11.5103 2.3335 7V3.5H7.00016ZM23.3335 10.5H20.4168C17.5177 10.5 15.1668 12.8508 15.1668 15.75V16.3333H18.0835C20.9827 16.3333 23.3335 13.9825 23.3335 11.0833V10.5ZM7.00016 5.83333H4.66683V7C4.66683 10.2212 7.279 12.8333 10.5002 12.8333H12.8335V11.6667C12.8335 8.4455 10.2213 5.83333 7.00016 5.83333Z" fill="#7BB756"/>
+</svg>
diff --git a/src/assets/images/parking/pate_icon.svg b/src/assets/images/parking/pate_icon.svg
new file mode 100644
index 0000000..677e79f
--- /dev/null
+++ b/src/assets/images/parking/pate_icon.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6567 15.8001C14.6567 18.4039 16.6187 20.5201 19.4367 20.5201C22.2547 20.5201 24.2167 18.4039 24.2167 15.8001C24.2167 13.1963 22.2547 11.0801 19.4367 11.0801C16.6187 11.0801 14.6567 13.1963 14.6567 15.8001ZM17.0767 15.8001C17.0767 14.4144 18.0956 13.3201 19.4367 13.3201C20.7778 13.3201 21.7967 14.4144 21.7967 15.8001C21.7967 17.1858 20.7778 18.2801 19.4367 18.2801C18.0956 18.2801 17.0767 17.1858 17.0767 15.8001Z" fill="#8E9090"/>
+<path d="M5.89339 11.2001V20.4001H8.31339V15.6112L12.4092 20.4001H14.1334V11.2001H11.7134V15.989L7.61763 11.2001H5.89339Z" fill="#8E9090"/>
+<path d="M25.2078 20.5201C24.3989 20.5201 23.7638 19.885 23.7638 19.0761C23.7638 18.2732 24.3929 17.6201 25.2078 17.6201C26.0167 17.6201 26.6638 18.2672 26.6638 19.0761C26.6638 19.891 26.0107 20.5201 25.2078 20.5201Z" fill="#8E9090"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.3335 4H2.66683C2.31321 4 1.97407 4.14048 1.72402 4.39052C1.47397 4.64057 1.3335 4.97971 1.3335 5.33333V26.6667C1.3335 27.0203 1.47397 27.3594 1.72402 27.6095C1.97407 27.8595 2.31321 28 2.66683 28H29.3335C29.6871 28 30.0263 27.8595 30.2763 27.6095C30.5264 27.3594 30.6668 27.0203 30.6668 26.6667V5.33333C30.6668 4.97971 30.5264 4.64057 30.2763 4.39052C30.0263 4.14048 29.6871 4 29.3335 4ZM4.00016 25.3333V6.66667H28.0002V25.3333H4.00016Z" fill="#8E9090"/>
+</svg>
diff --git a/src/assets/images/parking/pate_icon_ac.svg b/src/assets/images/parking/pate_icon_ac.svg
new file mode 100644
index 0000000..1e4fdd0
--- /dev/null
+++ b/src/assets/images/parking/pate_icon_ac.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6565 15.8001C14.6565 18.4039 16.6185 20.5201 19.4365 20.5201C22.2545 20.5201 24.2165 18.4039 24.2165 15.8001C24.2165 13.1963 22.2545 11.0801 19.4365 11.0801C16.6185 11.0801 14.6565 13.1963 14.6565 15.8001ZM17.0765 15.8001C17.0765 14.4144 18.0954 13.3201 19.4365 13.3201C20.7776 13.3201 21.7965 14.4144 21.7965 15.8001C21.7965 17.1858 20.7776 18.2801 19.4365 18.2801C18.0954 18.2801 17.0765 17.1858 17.0765 15.8001Z" fill="#E00068"/>
+<path d="M5.89322 11.2001V20.4001H8.31322V15.6112L12.409 20.4001H14.1332V11.2001H11.7132V15.989L7.61746 11.2001H5.89322Z" fill="#E00068"/>
+<path d="M25.2076 20.5201C24.3987 20.5201 23.7636 19.885 23.7636 19.0761C23.7636 18.2732 24.3928 17.6201 25.2076 17.6201C26.0166 17.6201 26.6636 18.2672 26.6636 19.0761C26.6636 19.891 26.0105 20.5201 25.2076 20.5201Z" fill="#E00068"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.3333 4H2.66666C2.31304 4 1.9739 4.14048 1.72385 4.39052C1.4738 4.64057 1.33333 4.97971 1.33333 5.33333V26.6667C1.33333 27.0203 1.4738 27.3594 1.72385 27.6095C1.9739 27.8595 2.31304 28 2.66666 28H29.3333C29.6869 28 30.0261 27.8595 30.2761 27.6095C30.5262 27.3594 30.6667 27.0203 30.6667 26.6667V5.33333C30.6667 4.97971 30.5262 4.64057 30.2761 4.39052C30.0261 4.14048 29.6869 4 29.3333 4ZM3.99999 25.3333V6.66667H28V25.3333H3.99999Z" fill="#E00068"/>
+</svg>
diff --git a/src/assets/images/parking/space_icon.svg b/src/assets/images/parking/space_icon.svg
new file mode 100644
index 0000000..2ee7650
--- /dev/null
+++ b/src/assets/images/parking/space_icon.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.04 22.2667V17.7067H16.8213C18.3072 17.7067 19.2517 17.3416 19.9256 16.6328C20.5399 16.0003 20.88 15.0669 20.88 14.128C20.88 13.1891 20.5398 12.2557 19.9256 11.6232C19.2369 10.8998 18.3097 10.5334 16.8213 10.5334H12.3467V22.2667H15.04ZM15.04 15.2534V12.9867H16.7253C17.4131 12.9867 17.7006 13.1483 17.8911 13.3507C18.0817 13.5542 18.1867 13.8236 18.1867 14.128C18.1867 14.4292 18.0838 14.6837 17.8909 14.8895C17.7004 15.0918 17.413 15.2534 16.7253 15.2534H15.04Z" fill="#8E9090"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.3333 4H2.66665C2.31302 4 1.97389 4.14048 1.72384 4.39052C1.47379 4.64057 1.33331 4.97971 1.33331 5.33333V26.6667C1.33331 27.0203 1.47379 27.3594 1.72384 27.6095C1.97389 27.8595 2.31302 28 2.66665 28H29.3333C29.6869 28 30.0261 27.8595 30.2761 27.6095C30.5262 27.3594 30.6666 27.0203 30.6666 26.6667V5.33333C30.6666 4.97971 30.5262 4.64057 30.2761 4.39052C30.0261 4.14048 29.6869 4 29.3333 4ZM3.99998 25.3333V6.66667H28V25.3333H3.99998Z" fill="#8E9090"/>
+</svg>
diff --git a/src/assets/images/parking/space_icon_ac.svg b/src/assets/images/parking/space_icon_ac.svg
new file mode 100644
index 0000000..176b3b5
--- /dev/null
+++ b/src/assets/images/parking/space_icon_ac.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0402 22.2667V17.7067H16.8215C18.3074 17.7067 19.2518 17.3416 19.9258 16.6328C20.54 16.0003 20.8802 15.0669 20.8802 14.128C20.8802 13.1891 20.54 12.2557 19.9257 11.6232C19.2371 10.8998 18.3098 10.5334 16.8215 10.5334H12.3468V22.2667H15.0402ZM15.0402 15.2534V12.9867H16.7255C17.4133 12.9867 17.7007 13.1483 17.8912 13.3507C18.0819 13.5542 18.1868 13.8236 18.1868 14.128C18.1868 14.4292 18.084 14.6837 17.8911 14.8895C17.7006 15.0918 17.4131 15.2534 16.7255 15.2534H15.0402Z" fill="#E00068"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.3335 4H2.66683C2.31321 4 1.97407 4.14048 1.72402 4.39052C1.47397 4.64057 1.3335 4.97971 1.3335 5.33333V26.6667C1.3335 27.0203 1.47397 27.3594 1.72402 27.6095C1.97407 27.8595 2.31321 28 2.66683 28H29.3335C29.6871 28 30.0263 27.8595 30.2763 27.6095C30.5264 27.3594 30.6668 27.0203 30.6668 26.6667V5.33333C30.6668 4.97971 30.5264 4.64057 30.2763 4.39052C30.0263 4.14048 29.6871 4 29.3335 4ZM4.00016 25.3333V6.66667H28.0002V25.3333H4.00016Z" fill="#E00068"/>
+</svg>
diff --git a/src/assets/images/traffic/mall_icon.svg b/src/assets/images/traffic/mall_icon.svg
new file mode 100644
index 0000000..69d65fc
--- /dev/null
+++ b/src/assets/images/traffic/mall_icon.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.99992 25.3335V7.60019C3.99984 7.32649 4.08399 7.05939 4.24094 6.83517C4.3979 6.61095 4.62006 6.44046 4.87725 6.34685L17.7719 1.65885C17.8726 1.62219 17.9807 1.61036 18.087 1.62436C18.1933 1.63836 18.2946 1.67778 18.3824 1.73928C18.4702 1.80077 18.5419 1.88253 18.5913 1.97762C18.6408 2.07271 18.6666 2.17833 18.6666 2.28552V8.88952L27.0879 11.6962C27.3535 11.7847 27.5845 11.9545 27.7482 12.1816C27.9119 12.4087 28 12.6816 27.9999 12.9615V25.3335H30.6666V28.0002H1.33325V25.3335H3.99992ZM6.66658 25.3335H15.9999V5.14019L6.66658 8.53485V25.3335ZM25.3333 25.3335V13.9229L18.6666 11.7002V25.3335H25.3333Z" fill="#8E9090"/>
+</svg>
diff --git a/src/assets/images/traffic/mall_icon_ac.svg b/src/assets/images/traffic/mall_icon_ac.svg
new file mode 100644
index 0000000..df24488
--- /dev/null
+++ b/src/assets/images/traffic/mall_icon_ac.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.99999 25.3335V7.60019C3.99991 7.32649 4.08406 7.05939 4.24102 6.83517C4.39797 6.61095 4.62013 6.44046 4.87733 6.34685L17.772 1.65885C17.8727 1.62219 17.9808 1.61036 18.0871 1.62436C18.1933 1.63836 18.2947 1.67778 18.3825 1.73928C18.4703 1.80077 18.5419 1.88253 18.5914 1.97762C18.6409 2.07271 18.6667 2.17833 18.6667 2.28552V8.88952L27.088 11.6962C27.3536 11.7847 27.5846 11.9545 27.7483 12.1816C27.912 12.4087 28.0001 12.6816 28 12.9615V25.3335H30.6667V28.0002H1.33333V25.3335H3.99999ZM6.66666 25.3335H16V5.14019L6.66666 8.53485V25.3335ZM25.3333 25.3335V13.9229L18.6667 11.7002V25.3335H25.3333Z" fill="#E00068"/>
+</svg>
diff --git a/src/assets/images/traffic/traffic_icon.svg b/src/assets/images/traffic/traffic_icon.svg
new file mode 100644
index 0000000..8a40cc3
--- /dev/null
+++ b/src/assets/images/traffic/traffic_icon.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.1667 4C27.9027 4 28.5 4.59733 28.5 5.33333V26.6667C28.5 27.4027 27.9027 28 27.1667 28H5.83333C5.09733 28 4.5 27.4027 4.5 26.6667V5.33333C4.5 4.59733 5.09733 4 5.83333 4H27.1667ZM15.4187 17.544L7.16667 19V25.3333H16.7907L15.4173 17.544H15.4187ZM25.8333 6.66667H16.208L19.4987 25.3333H25.8333V6.66667ZM13.5 6.66667H7.16667V16.2907L14.956 14.9173L13.5 6.66667Z" fill="#8E9090"/>
+</svg>
diff --git a/src/assets/images/traffic/traffic_icon_ac.svg b/src/assets/images/traffic/traffic_icon_ac.svg
new file mode 100644
index 0000000..c1dd090
--- /dev/null
+++ b/src/assets/images/traffic/traffic_icon_ac.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.1667 4C27.9027 4 28.5 4.59733 28.5 5.33333V26.6667C28.5 27.4027 27.9027 28 27.1667 28H5.83333C5.09733 28 4.5 27.4027 4.5 26.6667V5.33333C4.5 4.59733 5.09733 4 5.83333 4H27.1667ZM15.4187 17.544L7.16667 19V25.3333H16.7907L15.4173 17.544H15.4187ZM25.8333 6.66667H16.208L19.4987 25.3333H25.8333V6.66667ZM13.5 6.66667H7.16667V16.2907L14.956 14.9173L13.5 6.66667Z" fill="#E00068"/>
+</svg>
diff --git a/src/components/CarInfo/CarInfo.vue b/src/components/CarInfo/CarInfo.vue
new file mode 100644
index 0000000..fd4b107
--- /dev/null
+++ b/src/components/CarInfo/CarInfo.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="car-info-wrapper">
+    <div class="masker" @click="close"></div>
+    <div class="car-content">
+      <img :src="carInfo.carImage" class="car-img" alt="" />
+      <div class="car">
+        <div class="car-group mr120">
+          <span class="tip">车牌号</span>
+          <span class="text">{{ carInfo.carCode }}</span>
+        </div>
+        <div class="car-group mr120">
+          <span class="tip">车位号</span>
+          <span class="text">{{ carInfo.spaceNo }}</span>
+        </div>
+        <div v-if="carInfo.parkingTime" class="car-group">
+          <span class="tip">停车时长</span>
+          <span class="text">{{ carInfo.parkingTime }}</span>
+        </div>
+      </div>
+      <div class="go" @click="go">
+        <svg class="go-icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M28.9853 7.64401L23.6663 26.259L19.1063 17.139L10.6508 13.7565L28.9853 7.64401ZM32.0843 3.45001L3.87533 12.852C3.72933 12.9004 3.60174 12.9925 3.50985 13.1159C3.41796 13.2392 3.36621 13.3878 3.36163 13.5416C3.35705 13.6953 3.39984 13.8467 3.48422 13.9754C3.5686 14.104 3.69047 14.2035 3.83333 14.2605L16.9328 19.5L23.5703 32.775C23.6379 32.9102 23.7447 33.0218 23.8767 33.0953C24.0088 33.1687 24.16 33.2005 24.3104 33.1866C24.4609 33.1726 24.6037 33.1136 24.72 33.0171C24.8363 32.9206 24.9208 32.7913 24.9623 32.646L33.0428 4.36651C33.0803 4.23513 33.0811 4.09603 33.0453 3.96421C33.0094 3.83239 32.9382 3.71286 32.8394 3.61853C32.7406 3.5242 32.6179 3.45865 32.4846 3.42895C32.3513 3.39925 32.2123 3.40653 32.0828 3.45001H32.0843Z"
+            fill="white"
+          />
+        </svg>
+        <div class="line"></div>
+        GO
+      </div>
+      <svg class="close-icon" width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" @click="close">
+        <rect width="100" height="100" rx="50" fill="#C7C2B7" />
+        <path
+          d="M50 47.172L59.9 37.272L62.728 40.1L52.828 50L62.728 59.9L59.9 62.728L50 52.828L40.1 62.728L37.272 59.9L47.172 50L37.272 40.1L40.1 37.272L50 47.172Z"
+          fill="white"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Message from '@/base/Message/Message'
+import { useRootStore } from '@/store/root'
+import { useRouter } from 'vue-router'
+const store = useRootStore()
+const router = useRouter()
+const props = defineProps({
+  carInfo: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emits = defineEmits(['close'])
+function close() {
+  emits('close')
+}
+function go() {
+  const info = window.Map_QM.pathPark({ shopNum: props.carInfo.spaceNo })
+
+  if (info?.node) {
+    const floor: any = store.buildingList[0].floorList.find(item => item.floorOrder === info.floor)?.floor
+    const shop = {
+      shopCode: '',
+      shopName: props.carInfo.spaceNo,
+      floorOrder: info.floor,
+      floor,
+      logoUrl: props.carInfo.carImage,
+      yaxis: info.node
+    }
+    store.SET_SHOP(shop)
+    router.push('/nav')
+  } else {
+    Message({ text: `暂未查到相关信息`, type: 'success' })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.car-info-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  width: 1920px;
+  height: 1080px;
+  background: rgb(142 144 145 / 50%);
+
+  .masker {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 1920px;
+    height: 1080px;
+  }
+  .car-content {
+    position: absolute;
+    top: 112px;
+    left: 528px;
+    z-index: 3;
+    width: 564px;
+    height: 856px;
+    background: #fff;
+    border-radius: 16px;
+  }
+  .close-icon {
+    position: absolute;
+    top: -50px;
+    right: -50px;
+    width: 100px;
+    height: 100px;
+  }
+  .car-img {
+    width: 717px;
+    height: 403px;
+    border-radius: 16px 16px 0 0;
+  }
+  .car {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 48px 56px;
+    margin-top: -3px;
+    background: #efeeea;
+  }
+  .car-group {
+    display: flex;
+    flex-direction: column;
+    &.mr120 {
+      margin-right: 120px;
+    }
+    .tip {
+      padding-bottom: 16px;
+      font-size: 20px;
+      font-family: 'font_regulars';
+      color: #736661;
+      line-height: 28px;
+    }
+    .text {
+      font-size: 28px;
+      font-family: 'font_bold';
+      color: #595447;
+      font-weight: 700;
+      line-height: 36px;
+    }
+  }
+  .go {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    font-size: 36px;
+    text-align: center;
+    color: #faeba9;
+    background: linear-gradient(159.19deg, #c4b280 13.77%, #a89866 96.7%);
+    border-radius: 0 0 16px 16px;
+    font-weight: 700;
+    line-height: 44px;
+    .go-icon {
+      width: 36px;
+      height: 36px;
+    }
+    .line {
+      width: 1px;
+      height: 20px;
+      margin: 0 24px;
+      border: 1px solid rgb(255 255 255 / 50%);
+    }
+  }
+}
+</style>
diff --git a/src/components/PathGroup/PathGroup.vue b/src/components/PathGroup/PathGroup.vue
index 7d19640..23941f9 100644
--- a/src/components/PathGroup/PathGroup.vue
+++ b/src/components/PathGroup/PathGroup.vue
@@ -16,7 +16,7 @@
         <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')"
+              :src="item.logoUrl ? item.logoUrl : item.logoPath ? item.logoPath : require('@/assets/images/empty_small.svg')"
               width="24"
               height="24"
               alt=""
@@ -31,7 +31,7 @@
         <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="" />
+            <img :src="shop.logoUrl ? shop.logoUrl : require('@/assets/images/empty_small.svg')" alt="" />
           </p>
           <p class="way-name">{{ lastStr }}</p>
         </div>
diff --git a/src/components/PictureText/PictureText.vue b/src/components/PictureText/PictureText.vue
new file mode 100644
index 0000000..c7dbcbe
--- /dev/null
+++ b/src/components/PictureText/PictureText.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="picture-container">
+    <div>
+      <swiper
+        v-if="acList.length"
+        :modules="[Autoplay]"
+        :observer="true"
+        :loop="acList.length > 1"
+        :autoplay="acList.length !== 1 ? { delay: 5000, disableOnInteraction: false } : false"
+        class="myswiper"
+      >
+        <swiper-slide v-for="item in acList" :key="item.activityId">
+          <img :src="item.fileUrl" />
+        </swiper-slide>
+      </swiper>
+      <img v-else class="empty" src="@/assets/images/empty_big.svg" alt="" />
+    </div>
+    <div class="info">
+      <div class="name"></div>
+      <ScrollView :list="[]" class="myscroll">
+        <div class="intro"></div>
+      </ScrollView>
+      <div v-if="qrList && qrList.length" class="qr-container">
+        <div class="item">
+          <img src="" alt="" />
+          <div class="name"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay } from 'swiper'
+import 'swiper/css'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+
+interface Props {
+  acList: Activity[]
+  qrList: Activity[]
+}
+
+defineProps<Props>()
+</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;
+  }
+}
+.picture-container {
+  @include fl();
+
+  position: fixed;
+  top: 268px;
+  left: 56px;
+  width: 1808px;
+  height: 576px;
+  background: #fff;
+  border-radius: 16px;
+  .myswiper {
+    width: 1024px;
+    height: 576px;
+    margin-right: 48px;
+    border-radius: 16px;
+    img {
+      width: 1024px;
+      height: 576px;
+      border-radius: 16px;
+    }
+  }
+  .empty {
+    width: 1024px;
+    height: 576px;
+    border-radius: 16px;
+  }
+  .info {
+    margin: 40px 0;
+    .name {
+      margin-bottom: 24px;
+      font-size: 24px;
+      font-family: 'font_bold';
+      color: #534f46;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+    }
+    .myscroll {
+      overflow: hidden;
+      width: 708px;
+      height: 308px;
+      .intro {
+        width: 688px;
+        font-size: 14px;
+        font-family: 'font_regular';
+        white-space: pre-wrap;
+        color: #615c59;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 28px;
+      }
+    }
+    .qr-container {
+      @include fl();
+      .item {
+        width: 80px;
+        height: 102px;
+        margin-right: 24px;
+        text-align: center;
+        .img {
+          width: 80px;
+          height: 80px;
+          margin-bottom: 8px;
+        }
+        .name {
+          font-size: 12px;
+          font-family: 'font_regular';
+          color: #615c59;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 14px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/PlateInput/PlateInput.vue b/src/components/PlateInput/PlateInput.vue
index c685e78..1ec43f4 100644
--- a/src/components/PlateInput/PlateInput.vue
+++ b/src/components/PlateInput/PlateInput.vue
@@ -5,13 +5,14 @@
         v-for="(item, index) of renderInputLength"
         :key="item"
         :class="{ active: index === list.length && list.length <= 7 }"
+        :style="index === 1 ? 'margin-right: 82px' : ''"
         class="input"
         @click="handleEnergy"
       >
         <div class="text">{{ list[index] }}</div>
         <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut">
           <div v-if="!isEnergy && index === PLATE_LENGTH - 1" class="text energy">
-            <i>+</i>
+            <img src="@/assets/images/parking/new.svg" alt="" />
             <b>{{ $t('energy') }}</b>
           </div>
         </transition>
@@ -41,7 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
 const PLATE_LENGTH = 8 //车牌长度
 
 const renderInputLength = computed(() => (props.searchMethod === '车牌' ? PLATE_LENGTH : props.spaceLength))
-const btnText = computed(() => (props.searchMethod === '车牌' ? '寻车缴费' : '寻车导航'))
+const btnText = computed(() => (props.searchMethod === '车牌' ? '自主寻车' : '寻车导航'))
 
 const emits = defineEmits(['handle-energy', 'confirm'])
 const isEnergy = ref(false)
@@ -61,21 +62,34 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-$height: 90px;
-$width: 90px;
+$height: 80px;
+$width: 64px;
 $font-color: rgb(0 0 0 / 80%);
-$input-bg: rgb(0 0 0 / 10%);
+$input-bg: #fff;
 $input-radius: 8px;
 $font-size: 32px;
 $font-energy-size: 12px;
-$btn-bg: #535d75;
+$btn-bg: #e00068;
 $btn-color: #fff;
-$btn-font-size: 20px;
+$btn-font-size: 24px;
 $btn-width: 197px;
 
 .plate-container {
   position: relative;
   display: flex;
+  margin-bottom: 40px;
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 158px;
+    width: 2px;
+    height: 24px;
+    background: rgb(0 0 0 / 20%);
+    border-radius: 1px;
+    transition: all 0.3s;
+    content: '';
+    transform: translateY(-50%);
+  }
   .input-wrapper {
     display: flex;
   }
@@ -86,6 +100,7 @@ $btn-width: 197px;
     align-items: center;
     width: $width;
     height: $height;
+    margin-right: 10px;
     font-size: $font-size;
     font-family: 'font_bold';
     text-align: center;
@@ -94,7 +109,7 @@ $btn-width: 197px;
     border-radius: $input-radius;
     font-weight: 700;
     &.active {
-      border: 1px solid orange;
+      border: 1px solid #e00068;
     }
     .text {
       display: flex;
@@ -103,12 +118,29 @@ $btn-width: 197px;
       align-items: center;
       height: 100%;
       &.energy {
+        font-size: 12px;
+        font-family: 'font_regular';
+        color: #7bb756;
         animation-duration: 0.3s;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 14px;
+        img {
+          width: 28px;
+          height: 28px;
+          margin-bottom: 4px;
+        }
       }
       b {
         font-size: $font-energy-size;
       }
     }
+    .line {
+      width: 2px;
+      height: 24px;
+      background: rgb(0 0 0 / 20%);
+      border-radius: 1px;
+    }
   }
   .btn {
     display: flex;
@@ -117,10 +149,14 @@ $btn-width: 197px;
     width: $btn-width;
     height: $height;
     padding: 0 58px;
+    margin-left: 38px;
     font-size: $btn-font-size;
+    font-family: 'font_bold';
     color: $btn-color;
     background: $btn-bg;
-    box-shadow: 1px 16px 32px rgb(96 94 116 / 20%);
+    border-radius: 12px;
+    line-height: 32px;
+    font-weight: 700;
     span {
       white-space: nowrap;
       transition: all 0.3s;
diff --git a/src/components/PlateKeyboard/PlateKeyboard.vue b/src/components/PlateKeyboard/PlateKeyboard.vue
index 2a1413e..25b49a2 100644
--- a/src/components/PlateKeyboard/PlateKeyboard.vue
+++ b/src/components/PlateKeyboard/PlateKeyboard.vue
@@ -70,28 +70,30 @@ onBeforeUnmount(() => {
 .keyboard-wrapper {
   display: flex;
   flex-wrap: wrap;
-  width: 1010px;
+  width: 872px;
   .keyboard-item {
-    width: 48px;
-    height: 48px;
+    @include fl(center);
+
+    width: 40px;
+    height: 44px;
     margin-right: 8px;
     margin-bottom: 8px;
-    font-size: 18px;
+    font-size: 16px;
     font-family: 'font_medium';
     text-align: center;
     color: rgb(0 0 0 / 80%);
-    background: rgb(255 255 255 / 60%);
+    background: #fff;
     border-radius: 6px;
     box-shadow: 0 4px 8px rgb(0 0 0 / 3%), inset 0 -1px 0 rgb(177 189 220 / 10%);
-    line-height: 48px;
+    line-height: 24px;
     .parking-keyboard-del {
-      width: 22px;
-      height: 18px;
+      width: 24px;
+      height: 24px;
     }
     &.space {
-      width: 104px;
+      width: 88px;
       &.del {
-        width: 216px;
+        width: 184px;
       }
     }
     &.uppercase {
@@ -101,13 +103,13 @@ onBeforeUnmount(() => {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 104px;
-      background: rgb(0 0 0 / 5%);
+      width: 88px;
+      background: #fff;
       line-height: initial;
     }
     &.active {
       color: #fff;
-      background: #f1b33e;
+      background: #e00068;
       box-shadow: 0 4px 8px rgb(0 0 0 / 3%), inset 0 -1px 0 rgb(177 189 220 / 10%);
     }
   }
diff --git a/src/components/PublicComponent/PublicComponent.vue b/src/components/PublicComponent/PublicComponent.vue
index 769532d..a8e4468 100644
--- a/src/components/PublicComponent/PublicComponent.vue
+++ b/src/components/PublicComponent/PublicComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 地图容器 -->
-  <Map @handle-go="handleGO" @handle-detail="handleDetail" />
+  <Map v-show="$route.meta.showMap" @handle-go="handleGO" @handle-detail="handleDetail" />
   <!-- 头部 -->
   <Header />
 
diff --git a/src/composables/useFindCar.ts b/src/composables/useFindCar.ts
index b5b6d5b..ea52549 100644
--- a/src/composables/useFindCar.ts
+++ b/src/composables/useFindCar.ts
@@ -1,36 +1,71 @@
-import { ref, shallowRef } from 'vue'
+import { ref } from 'vue'
 import { getFindCar } from '@/http/api/parking'
-import { HTTP_CODE } from '@/enums'
 import { isLicensePlate } from '@/utils/utils'
+import { useRootStore } from '@/store/root'
+import { useRouter } from 'vue-router'
+import { HTTP_CODE } from '@/enums'
 import Message from '@/base/Message/Message'
 
 export const useFindCar = () => {
   const showCarDetail = ref(false)
   const loading = ref(false)
-  const result = shallowRef<CarInfo>()
-  async function confirm(plate: string) {
-    if (!isLicensePlate(plate)) {
-      Message({ text: '车牌错误,请重新输入', type: 'success' })
-      return
-    }
-    if (loading.value) {
-      return
-    }
-    try {
-      loading.value = true
-      const { code, msg, data } = await getFindCar(plate)
-      if (code === HTTP_CODE.ERR_OK) {
-        result.value = data
-        showCarDetail.value = true
-      } else {
+  const result = ref<CarInfo>()
+  const store = useRootStore()
+  const router = useRouter()
+  async function confirm(plate: string, type: number) {
+    if (!type) {
+      if (!isLicensePlate(plate)) {
+        Message({ text: '车牌错误,请重新输入', type: 'success' })
+        return
+      }
+      if (loading.value) {
+        return
+      }
+      try {
+        loading.value = true
+        const { code, msg, data } = await getFindCar(plate)
+        if (code === HTTP_CODE.ERR_OK) {
+          if (data) {
+            result.value = { ...data, carCode: plate, parkingTime: toHoursAndMinutes(Number(data.parkingTime)) }
+            showCarDetail.value = true
+          }
+          return
+        }
         Message({ text: msg, type: 'success' })
+      } catch (error) {
+        Message({ text: error as string, type: 'success' })
+      } finally {
+        loading.value = false
+      }
+    } else {
+      if (!plate.length) {
+        Message({ type: 'success', text: '请输入正确的车位号' })
+        return
+      }
+      const info = window.Map_QM.pathPark({ shopNum: plate })
+      if (info?.node) {
+        const floor: any = store.buildingList[0].floorList.find(item => item.floorOrder === info.floor)?.floor
+        const shop = {
+          shopCode: '',
+          shopName: plate,
+          floorOrder: info.floor,
+          floor,
+          logoUrl: '/static/img/tcjf.png',
+          yaxis: info.node
+        }
+        store.SET_SHOP(shop)
+        router.push('/nav')
+      } else {
+        Message({ text: `暂未查到相关信息`, type: 'success' })
       }
-    } catch (error) {
-      Message({ text: error as string, type: 'success' })
-    } finally {
-      loading.value = false
     }
   }
 
+  // 格式化停车时间
+  function toHoursAndMinutes(totalMinutes: number) {
+    const hours = Math.floor(totalMinutes / 60)
+    const minutes = totalMinutes % 60
+    return `${hours > 0 ? `${hours}小时` : ''}${minutes > 0 ? ` ${minutes}分钟` : ''}`
+  }
   return { loading, result, showCarDetail, confirm }
 }
diff --git a/src/composables/useParkingKeyboard.ts b/src/composables/useParkingKeyboard.ts
index d65efc3..3c0280e 100644
--- a/src/composables/useParkingKeyboard.ts
+++ b/src/composables/useParkingKeyboard.ts
@@ -5,7 +5,7 @@ export const useParkingKeyboard = () => {
   const NOT_ENERGY_PLATE = 7 //非能源车牌长度
   const ENERGY_PLATE = 8 //能源车牌长度
   const SPACE_MAX_LENGTH = 6 //车位最大允许长度
-  const LICENSE = ['苏', 'A'] //默认车牌前缀
+  const LICENSE = ['川', 'A'] //默认车牌前缀
 
   const plate = ref(LICENSE.slice())
   const plateToString = computed(() => plate.value.join(''))
@@ -43,5 +43,9 @@ export const useParkingKeyboard = () => {
     plate.value.pop()
   }
 
-  return { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, LICENSE, searchMethod }
+  function changeSearchMethod(method: '车牌' | '车位') {
+    searchMethod.value = method
+  }
+
+  return { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, LICENSE, searchMethod, changeSearchMethod }
 }
diff --git a/src/http/api/parking/index.ts b/src/http/api/parking/index.ts
index bdef6ef..24667ab 100644
--- a/src/http/api/parking/index.ts
+++ b/src/http/api/parking/index.ts
@@ -3,3 +3,5 @@ import { getPrefixUrl } from '../../http'
 //找车
 export const getFindCar = (license: string) =>
   request<CarInfo>({ url: `${getPrefixUrl().interfaceUrl}/ThirdPark/GetPlaceInfo?carCode=${license}` })
+
+export const getParkingInfo = () => request<ParkingInfo>({ url: `/JSON/getParkingInfo.json` })
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 6e7ecd0..e0d3afb 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -3,11 +3,19 @@ import type { RouteRecordRaw } from 'vue-router'
 export const routes: RouteRecordRaw[] = [
   {
     path: '/',
+    meta: {
+      showMap: true,
+      showMenu: true
+    },
     component: () => import(/* webpackChunkName: "guide" */ '@/views/Guide/Guide.vue')
   },
   {
     path: '/nav',
     name: 'Nav',
+    meta: {
+      showMap: true,
+      showMenu: true
+    },
     component: () => import(/* webpackChunkName: "nav" */ '@/views/Nav/Nav.vue')
   },
   {
@@ -28,6 +36,24 @@ export const routes: RouteRecordRaw[] = [
     },
     component: () => import(/* webpackChunkName: "brand" */ '@/views/Brand/Brand.vue')
   },
+  {
+    path: '/traffic',
+    name: 'traffic',
+    meta: {
+      showMap: false,
+      showMenu: true
+    },
+    component: () => import(/* webpackChunkName: "traffic" */ '@/views/Traffic/Traffic.vue')
+  },
+  {
+    path: '/art',
+    name: 'art',
+    meta: {
+      showMap: false,
+      showMenu: true
+    },
+    component: () => import(/* webpackChunkName: "art" */ '@/views/Art/Art.vue')
+  },
   {
     path: '/transfer',
     name: 'Transfer',
diff --git a/src/types/car.d.ts b/src/types/car.d.ts
index d975ce4..cbd30cc 100644
--- a/src/types/car.d.ts
+++ b/src/types/car.d.ts
@@ -6,6 +6,6 @@ declare interface CarInfo {
   cost: number //费用
   enterTime: string //入场时间
   floor: string //楼层
-  parkingTime: number // 停车时长
+  parkingTime: string // 停车时长
   placeCode: string //车位号
 }
diff --git a/src/views/Art/Art.vue b/src/views/Art/Art.vue
new file mode 100644
index 0000000..3c28f41
--- /dev/null
+++ b/src/views/Art/Art.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="art-container">
+    <div class="name">艺术装置</div>
+    <div class="nameEn">ARTWORK</div>
+    <ScrollView class="myScroll" :list="[]" scroll-x>
+      <div style="display: inline-block">
+        <div class="lists">
+          <ArtItem />
+        </div>
+      </div>
+    </ScrollView>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import ArtItem from './ArtItem.vue'
+</script>
+
+<style lang="scss" scoped>
+:deep(.bscroll-vertical-scrollbar) {
+  width: 500px;
+  height: 1px !important;
+  background: rgb(0 0 0 / 10%);
+  border-radius: 1px;
+  opacity: 1 !important;
+  .bscroll-indicator {
+    height: 2px !important;
+    background: #e00068 !important;
+    border: none !important;
+    border-radius: 1px !important;
+  }
+}
+.art-container {
+  position: fixed;
+  top: 172px;
+  left: 60px;
+  .name {
+    font-size: 24px;
+    font-family: 'font_bold';
+    color: #534f46;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 32px;
+  }
+  .nameEn {
+    margin-bottom: 40px;
+    font-size: 14px;
+    font-family: 'font_bold';
+    color: #534f46;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 22px;
+  }
+  .myScroll {
+    overflow: hidden;
+    width: 1864px;
+    height: 610px;
+    .lists {
+      display: grid;
+      grid-template-rows: 1fr 1fr;
+      gap: 24px 24px;
+      grid-auto-flow: column;
+    }
+  }
+}
+</style>
diff --git a/src/views/Art/ArtItem.vue b/src/views/Art/ArtItem.vue
new file mode 100644
index 0000000..7ba6d38
--- /dev/null
+++ b/src/views/Art/ArtItem.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="art-item">
+    <img class="pic" src="" alt="" />
+    <div class="info">
+      <div class="top">
+        <div>
+          <div class="title"></div>
+          <div class="titleEn"></div>
+        </div>
+        <img src="@/assets/images/art/go.svg" alt="" />
+      </div>
+      <ScrollView :list="[]" class="intro-scroll">
+        <div class="intro"></div>
+      </ScrollView>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+</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;
+  }
+}
+.art-item {
+  @include fl();
+
+  width: 834px;
+  height: 270px;
+  background: #fff;
+  border-radius: 16px;
+  .pic {
+    width: 480px;
+    height: 270px;
+    margin-right: 40px;
+    border-radius: 16px;
+  }
+  .info {
+    width: 296px;
+    .top {
+      @include fl(space-between);
+
+      margin-bottom: 16px;
+      .title {
+        @include no-wrap;
+
+        width: 190px;
+        font-size: 20px;
+        font-family: 'font_bold';
+        color: #534f46;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 28px;
+      }
+      .titleEn {
+        @include no-wrap;
+
+        width: 190px;
+        font-size: 14px;
+        font-family: 'font_bold';
+        color: #615c59;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 22px;
+      }
+      img {
+        width: 88px;
+        height: 36px;
+      }
+    }
+    .intro-scroll {
+      overflow: hidden;
+      width: 296px;
+      height: 166px;
+      .intro {
+        font-size: 12px;
+        font-family: 'font_regular';
+        color: #8e9090;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Nav/Nav.vue b/src/views/Nav/Nav.vue
index f4d4830..0d3ce33 100644
--- a/src/views/Nav/Nav.vue
+++ b/src/views/Nav/Nav.vue
@@ -55,7 +55,7 @@
     <div class="tops">
       <div class="info">
         <div class="logo">
-          <img :src="shop.logoUrl ? shop.logoUrl : require('@/assets/images/header/logo.svg')" alt="" />
+          <img :src="shop.logoUrl ? shop.logoUrl : require('@/assets/images/empty_small.svg')" alt="" />
         </div>
         <div class="right">
           <div class="nav-label">
diff --git a/src/views/Parking/Parking.vue b/src/views/Parking/Parking.vue
index 4838796..795eccb 100644
--- a/src/views/Parking/Parking.vue
+++ b/src/views/Parking/Parking.vue
@@ -1,22 +1,212 @@
 <template>
-  <PlateInput :list="plate" :search-method="searchMethod" :space-length="inputLength" @confirm="onConfirm" @handle-energy="handleEnergy">
-    <Loading v-if="loading" fill="#fff" :size="20" />
-  </PlateInput>
-  <PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" />
+  <div class="parking-container">
+    <switchtab
+      class="switch-btn"
+      :width="436"
+      :height="68"
+      :wrapper-width="872"
+      :wrapper-height="68"
+      direction="row"
+      :list="list"
+      @click="handleSwitch"
+    />
+    <div class="content">
+      <div class="content-left">
+        <PlateInput
+          :list="plate"
+          :search-method="searchMethod"
+          :space-length="inputLength"
+          @confirm="onConfirm"
+          @handle-energy="handleEnergy"
+        >
+          <Loading v-if="loading" fill="#fff" :size="20" />
+        </PlateInput>
+        <PlateKeyboard :search-methods="searchMethod" @del="del" @handle-keyboard="handleKeyboard" />
+      </div>
+      <div class="content-right">
+        <div class="parking-carousel">
+          <EffectFade v-slot="{ item }" :list="parkingInfo.fileList">
+            <img class="img" :src="item" alt="" />
+          </EffectFade>
+        </div>
+        <div class="info">
+          <h1 class="title">{{ switchLanguage(parkingInfo, 'title') }}</h1>
+          <ScrollView class="parking-scroll" scrollbar :list="switchLanguage(parkingInfo, 'content')" :pull-up="false">
+            <div class="intro">{{ switchLanguage(parkingInfo, 'content') }}</div>
+          </ScrollView>
+        </div>
+        <div class="qr-container">
+          <img src="" alt="" />
+          <div class="name">寻车扫码</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <CarInfo v-if="showCarDetail" :car-info="result" @close="showCarDetail = false" />
 </template>
 
 <script setup lang="ts">
+import { ref, shallowRef, defineAsyncComponent } from 'vue'
 import { useFindCar } from '@/composables/useFindCar'
 import { useParkingKeyboard } from '@/composables/useParkingKeyboard'
+import { getParkingInfo } from '@/http/api/parking'
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
 import PlateInput from '@/components/PlateInput/PlateInput.vue'
 import PlateKeyboard from '@/components/PlateKeyboard/PlateKeyboard.vue'
 import Loading from '@/base/Loading/Loading.vue'
+import EffectFade from '@/components/EffectFade/EffectFade.vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import switchtab from '@/components/SwitchTab/SwitchTab.vue'
+const CarInfo = defineAsyncComponent(() => import('@/components/CarInfo/CarInfo.vue'))
+const { switchLanguage } = useSwitchLanguage()
+const list = [
+  {
+    name: '车牌号寻车',
+    en: 'LICENSE PLATE',
+    icon: require('../../assets/images/parking/pate_icon.svg'),
+    iconSel: require('../../assets/images/parking/pate_icon_ac.svg')
+  },
+  {
+    name: '车位号找车',
+    en: 'PARKING SPACE',
+    icon: require('../../assets/images/parking/space_icon.svg'),
+    iconSel: require('../../assets/images/parking/space_icon_ac.svg')
+  }
+]
+const tabIdx = ref(0)
+function handleSwitch(index: number) {
+  tabIdx.value = index
+  if (index === 0) {
+    plate.value = LICENSE.slice()
+    changeSearchMethod('车牌')
+  } else if (index === 1) {
+    plate.value = []
+    changeSearchMethod('车位')
+  }
+}
 
-const { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, searchMethod, LICENSE } = useParkingKeyboard()
+const { del, handleKeyboard, handleEnergy, inputLength, plate, plateToString, searchMethod, LICENSE, changeSearchMethod } =
+  useParkingKeyboard()
 const { confirm, loading, showCarDetail, result } = useFindCar()
 
 function onConfirm() {
-  plate.value = LICENSE
-  confirm(plateToString.value)
+  confirm(plateToString.value, tabIdx.value)
+  if (tabIdx.value === 0) {
+    plate.value = LICENSE
+  } else {
+    plate.value = []
+  }
 }
+
+const parkingInfo = shallowRef<ParkingInfo>({} as ParkingInfo)
+getParkingInfo().then(({ data }) => {
+  parkingInfo.value = data ?? {}
+})
 </script>
+
+<style lang="scss" scoped>
+.parking-container {
+  position: fixed;
+  top: 180px;
+  left: 96px;
+  z-index: 20;
+  .switch-btn {
+    position: fixed;
+    top: 220px;
+    left: 96px;
+  }
+  .content {
+    @include fl(flex-start, flex-start);
+    .content-left {
+      margin-top: 228px;
+      margin-right: 136px;
+    }
+    .content-right {
+      position: relative;
+      width: 720px;
+      background: rgb(255 255 255 / 40%);
+      border-radius: 16px;
+      .parking-carousel {
+        position: relative;
+        width: 720px;
+        height: 405px;
+        background-color: #fff;
+        border-radius: 16px;
+        :deep(.stay-tuned) {
+          height: 200px;
+        }
+        .img {
+          width: 540px;
+          height: 405px;
+          border-radius: 16px;
+        }
+      }
+      .info {
+        width: 560px;
+        height: 300px;
+        padding-top: 32px;
+        background: rgb(255 255 255 / 60%);
+        border-radius: 0 0 0 16px;
+        .title {
+          margin: 0 48px 12px;
+          font-size: 24px;
+          font-family: 'font_bold';
+          color: #595447;
+          font-weight: 700;
+          line-height: 32px;
+        }
+
+        .parking-scroll {
+          position: relative;
+          overflow: hidden;
+          height: 182px;
+          margin: 0 18px 40px 48px;
+          :deep(.bscroll-vertical-scrollbar) {
+            width: 6px !important;
+            height: 120px !important;
+            background: rgb(0 0 0 / 3%) !important;
+            opacity: 1 !important;
+            .bscroll-indicator {
+              height: 40px !important;
+              background: #fff !important;
+              border: none !important;
+              box-shadow: 0 8px 20px rgb(0 0 0 / 10%) !important;
+            }
+          }
+          .intro {
+            padding-right: 24px;
+            font-size: 14px;
+            font-family: 'font_regular';
+            text-align: justify;
+            white-space: pre-wrap;
+            color: #736661;
+            line-height: 28px;
+          }
+        }
+      }
+
+      .qr-container {
+        position: absolute;
+        right: 32px;
+        bottom: 104px;
+        width: 96px;
+        height: 120px;
+        text-align: center;
+        img {
+          width: 96px;
+          height: 96px;
+          margin-bottom: 10px;
+        }
+        .name {
+          font-size: 12px;
+          font-family: 'font_regular';
+          color: #615c59;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 14px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Traffic/Traffic.vue b/src/views/Traffic/Traffic.vue
new file mode 100644
index 0000000..91f82d3
--- /dev/null
+++ b/src/views/Traffic/Traffic.vue
@@ -0,0 +1,68 @@
+<template>
+  <switchtab
+    class="switch-btn"
+    :width="364"
+    :height="68"
+    :wrapper-width="728"
+    :wrapper-height="68"
+    direction="row"
+    :list="list"
+    @click="handleSwitch"
+  />
+  <PictureText v-if="isCurrent" :ac-list="[]" :qr-list="[]" />
+  <img v-else class="tra" src="" alt="" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import switchtab from '@/components/SwitchTab/SwitchTab.vue'
+import PictureText from '@/components/PictureText/PictureText.vue'
+
+const list = [
+  {
+    name: '商场介绍',
+    en: 'INTRODUCE',
+    icon: require('../../assets/images/traffic/mall_icon.svg'),
+    iconSel: require('../../assets/images/traffic/mall_icon_ac.svg')
+  },
+  {
+    name: '交通信息',
+    en: 'TRAFFIC INFORMATION',
+    icon: require('../../assets/images/traffic/traffic_icon.svg'),
+    iconSel: require('../../assets/images/traffic/traffic_icon_ac.svg')
+  }
+]
+
+const isCurrent = ref(false)
+//切换控制
+function handleSwitch() {
+  isCurrent.value = !isCurrent.value
+}
+</script>
+
+<style lang="scss" scoped>
+.switch-btn {
+  position: fixed;
+  top: 152px;
+  left: 56px;
+}
+
+.mall-service-container {
+  position: fixed;
+  top: 268px;
+  left: 56px;
+  width: 1808px;
+  height: 576px;
+  background: #fff;
+  border-radius: 16px;
+}
+
+.tra {
+  position: fixed;
+  top: 268px;
+  left: 56px;
+  width: 1808px;
+  height: 576px;
+  border-radius: 16px;
+}
+</style>