From 4826d95bd0412315bda7065b37f43b1e5d771037 Mon Sep 17 00:00:00 2001 From: jiannibang <271381693@qq.com> Date: Thu, 12 Jan 2023 17:21:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E8=A7=88=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../offline/JSON/getDevCoordinateByIP.json | 2 +- 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/floor_down.svg | 10 +- src/assets/images/nav/floor_up.svg | 10 +- src/views/Nav/children/PassShop.vue | 351 +++++++----------- 8 files changed, 162 insertions(+), 243 deletions(-) diff --git a/public/static/offline/JSON/getDevCoordinateByIP.json b/public/static/offline/JSON/getDevCoordinateByIP.json index d83d29f..64ab3a3 100644 --- a/public/static/offline/JSON/getDevCoordinateByIP.json +++ b/public/static/offline/JSON/getDevCoordinateByIP.json @@ -15,7 +15,7 @@ "floorCode": "XqodUNp_NzIoQPdXeEgjQ", "ip": "192.168.1.134", "mac": "Excepteur", - "location": "0", + "location": "15", "angle": 0 } } diff --git a/src/assets/images/nav/big_down.svg b/src/assets/images/nav/big_down.svg index d2aecaa..310946c 100644 --- a/src/assets/images/nav/big_down.svg +++ b/src/assets/images/nav/big_down.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/assets/images/nav/big_left.svg b/src/assets/images/nav/big_left.svg index d8a432e..d2da936 100644 --- a/src/assets/images/nav/big_left.svg +++ b/src/assets/images/nav/big_left.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/assets/images/nav/big_right.svg b/src/assets/images/nav/big_right.svg index 91c6d82..23b3412 100644 --- a/src/assets/images/nav/big_right.svg +++ b/src/assets/images/nav/big_right.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/assets/images/nav/big_up.svg b/src/assets/images/nav/big_up.svg index 79f870f..aeb4239 100644 --- a/src/assets/images/nav/big_up.svg +++ b/src/assets/images/nav/big_up.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/assets/images/nav/floor_down.svg b/src/assets/images/nav/floor_down.svg index 9a25ce4..7331912 100644 --- a/src/assets/images/nav/floor_down.svg +++ b/src/assets/images/nav/floor_down.svg @@ -1,9 +1,3 @@ - - - - - - - - + + diff --git a/src/assets/images/nav/floor_up.svg b/src/assets/images/nav/floor_up.svg index 7b5e2c0..0d80c2e 100644 --- a/src/assets/images/nav/floor_up.svg +++ b/src/assets/images/nav/floor_up.svg @@ -1,9 +1,3 @@ - - - - - - - - + + diff --git a/src/views/Nav/children/PassShop.vue b/src/views/Nav/children/PassShop.vue index 615ef76..01538e9 100644 --- a/src/views/Nav/children/PassShop.vue +++ b/src/views/Nav/children/PassShop.vue @@ -1,118 +1,59 @@
-
- +
+ +

+ {{ direction.text }} + 请您面向屏幕 +

-
-
-
-
{{ switchLanguage(shop, 'shopName') }}
-

您在{{ currentFloor.floor }}，{{ direction.text }}

-

{{ switchLanguage(item, 'shopName') }}

-

{{ switchLanguage(shop, 'shopName') }}

 -
- -

- 请您面向屏幕{{ direction.text }} -

-
@@ -150,38 +91,42 @@ defineProps({ display: flex; align-items: stretch; position: absolute; - width: 1000px; - height: 740px; - left: 40px; - top: 1140px; - background: #ffffff; - box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03); - border-radius: 12px; + width: 100vw; + height: 688px; + left: 0; + bottom: 0; + .left { - width: 225px; - padding-left: 32px; - .pt { - padding-top: 89px; - } - .logo-wrapper { - margin-top: 32px; - width: 160px; - height: 160px; - margin-bottom: 56px; - background: #ffffff; - box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05); - border-radius: 16px; - padding: 20px; - .logo { - width: 100%; - height: 100%; - object-fit: contain; - } - } - .floor-box { + display: flex; + flex-direction: column; + width: 360px; + background: rgba(255, 255, 255, 0.4); + .dir { + overflow: hidden; display: flex; + flex-direction: column; align-items: center; + justify-content: center; + height: 320px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + .content { + padding-top: 25px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: rgba(0, 0, 0, 0.6); + text-align: center; + i { + display: block; + font-weight: 700; + font-size: 34px; + line-height: 50px; + color: rgba(0, 0, 0, 0.8); + margin-bottom: 6px; + } + } } + .floor { font-weight: 700; font-family: 'font_bold'; @@ -257,109 +202,118 @@ defineProps({ flex-direction: column; align-items: stretch; flex: 1; - background: rgba(0, 0, 0, 0.02); + background: rgba(255, 255, 255, 0.6); .flex { display: flex; flex: 1; align-items: stretch; } .top { - height: 140px; + display: flex; + height: 152px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); - padding-left: 32px; - font-weight: 700; - font-size: 32px; - text-align: justify; - padding-top: 57px; - color: rgba(0, 0, 0, 0.8); + padding: 0 68px; + flex: 0 0 152px; + align-items: center; + justify-content: space-between; + .floor-box { + width: 231px; + height: 96px; + background: #ffffff; + border-radius: 8px; + padding-top: 17px; + padding-left: 26px; + border: 2px solid rgba(0, 0, 0, 0.1); + font-weight: 700; + font-size: 32px; + line-height: 38px; + color: rgba(0, 0, 0, 0.8); + .meta { + font-weight: 700; + font-size: 14px; + line-height: 18px; + color: rgba(0, 0, 0, 0.6); + margin-bottom: 6px; + } + &.start { + border: 2px solid rgba(67, 90, 205, 1); + } + } } .middle-scroll { position: relative; flex: 1; overflow: hidden; - height: 640px; + height: 415px; + padding-top: 21px; :deep(.bscroll-vertical-scrollbar) { - right: 50px !important; - top: 16px !important; - width: 6px !important; - background: rgba(0, 0, 0, 0.02) !important; - border-radius: 6px !important; + top: 102px !important; + width: 48px !important; + background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png); + border-radius: 6px; opacity: 1 !important; - height: 200px !important; + height: 250px !important; + &::after { + position: absolute; + content: ''; + left: 0; + + top: 120px; + margin: auto; + width: 48px; + height: 61px; + background: center / cover no-repeat url(@/assets/images/scrollHand.png); + } .bscroll-indicator { height: 95px !important; width: 6px !important; - background: rgba(0, 0, 0, 0.1) !important; + left: 0; + right: 0; + margin: auto; + background: #ffffff !important; border-radius: 6px !important; border: none !important; } } .pass-content { - padding-top: 16px; - padding-left: 24px; + position: relative; + padding-left: 68px; + &::before { + content: ''; + position: absolute; + left: 34px; + height: 100%; + border-left: 1px dashed rgba(0, 0, 0, 0.1); + transform: translateY(-25px); + } } .pass-item { position: relative; display: flex; align-items: center; - height: 44px; + height: 50px; width: max-content; - border-radius: 8px; - padding: 0 20px; + border-radius: 4px; + padding: 0 16px; background: #ffffff; - margin-bottom: 8px; + margin-bottom: 12px; + &::after { + content: ''; + position: absolute; + left: -37px; + width: 5px; + height: 5px; + border-radius: 50%; + border: 1px solid rgba(0, 0, 0, 0.4); + background: #ffffff; + } &.active { - .shop-logo { - &::before { - content: ''; - position: absolute; - width: 2px; - height: 20px; - top: 4px; - left: -43px; - background: #f1b33e; - } - } - &::before, &::after { - position: absolute; - content: ''; - border-radius: 8px; - } - &::before { - top: 0; - right: 0; - bottom: 0; - left: 0; - background: #ffffff; - z-index: 2; - } - &:after { - position: absolute; - content: ''; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - background: var(--color-linear-lightgoldenyellow); - z-index: 1; + background: #516dd8; + border: 1px solid #516dd8; } } } - .shop-logo { - position: relative; - z-index: 4; - flex-shrink: 0; - width: 24px; - height: 24px; - margin-right: 12px; - - .logo-icon { - width: 100%; - height: 100%; - object-fit: contain; - } - } .pass { position: relative; z-index: 4; @@ -370,29 +324,6 @@ defineProps({ color: rgba(0, 0, 0, 0.6); } } - .bottom { - width: 264px; - background: rgba(0, 0, 0, 0.02); - overflow: hidden; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - border-radius: 0 0 12px 0; - - .content { - padding-top: 25px; - font-size: 14px; - color: rgba(0, 0, 0, 0.4); - i { - font-weight: 700; - font-family: 'font_bold'; - font-size: 14px; - color: rgba(0, 0, 0, 0.6); - padding-left: 8px; - } - } - } } }