From 55617bf3f15c60618575aebfa4ce846240227e97 Mon Sep 17 00:00:00 2001 From: deepblues <452698686@qq.com> Date: Fri, 28 Apr 2023 18:40:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=89=BA=E6=9C=AF?= =?UTF-8?q?=E7=82=B9=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/offline/JSON/getActivityList2.json | 59 +- src/assets/images/art/go_bg.svg | 9 + src/assets/images/nav/down_thumb.svg | 2 +- src/assets/images/nav/left_thumb.svg | 2 +- src/assets/images/nav/right_thumb.svg | 2 +- src/assets/images/nav/up_thumb.svg | 2 +- src/components/PathGroup/PathGroup.vue | 46 +- .../PublicComponent/PublicComponent.vue | 2 +- src/i18n/lang/en.json | 3 + src/i18n/lang/tw.json | 3 + src/i18n/lang/zh.json | 3 + src/router/routes.ts | 5 + src/utils/Class/Brand.ts | 32 +- src/views/Art/Art.vue | 516 ++++++++++++++++++ src/views/Art/ArtMapItem.vue | 123 +++++ src/views/Art/ArtRightItem.vue | 104 ++++ src/views/Nav/Nav.vue | 111 +++- 17 files changed, 984 insertions(+), 40 deletions(-) create mode 100644 src/assets/images/art/go_bg.svg create mode 100644 src/views/Art/Art.vue create mode 100644 src/views/Art/ArtMapItem.vue create mode 100644 src/views/Art/ArtRightItem.vue diff --git a/public/static/offline/JSON/getActivityList2.json b/public/static/offline/JSON/getActivityList2.json index 9bb7406..f7da2e0 100644 --- a/public/static/offline/JSON/getActivityList2.json +++ b/public/static/offline/JSON/getActivityList2.json @@ -1 +1,58 @@ -{"code":200,"msg":"操作成功","data":{"activityList":[{"activityId":69,"activityName":"店铺精选活动信息","activityNameEn":"shop","activityContent":"商场品牌活动","activityContentEn":"shop","activityAddress":"商场活动2地址","activityAddressEn":"Chinese Address","activityType":2,"shopCode":"sq_NP5tCbI9nNHkP0ZBOp","shopName":"蛙三疯","shopNameEn":"","houseNumber":"L202","fileUrl":"/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png","startDate":"2023-04-17","endDate":"2023-04-30","building":"A","buildingCode":"suG1YjUhWnvRBJm3ULnCo","buildingOrder":0,"floor":"L2","floorCode":"vVq2ZOi0H7-tpjZHRdZyE","floorOrder":5,"point":-1,"industryFatherName":"餐饮","industryName":"美食","industryUrl":"/iotFile/2023/04/19/T25A8zEygrRp9WxBOlXj_.png"},{"activityId":70,"activityName":"NIKE优惠活动","activityNameEn":"nike","activityContent":"NIKE优惠活动","activityContentEn":"NIKE","activityAddress":"商场活动2地址","activityAddressEn":"Chinese Address","activityType":2,"shopCode":"IQlqEHyMD7-AfdGclgbwL","shopName":"优衣库","shopNameEn":"","houseNumber":"L201","fileUrl":"/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png","startDate":"2023-04-03","endDate":"2023-04-30","building":"A","buildingCode":"suG1YjUhWnvRBJm3ULnCo","buildingOrder":0,"floor":"L2","floorCode":"vVq2ZOi0H7-tpjZHRdZyE","floorOrder":5,"point":-1,"industryFatherName":"餐饮1","industryUrl":"/iotFile/2023/04/19/0QbPfyN2cvDiy1te5odlp.png"}]}} \ No newline at end of file +{ + "code": 200, + "msg": "操作成功", + "data": { + "activityList": [{ + "activityId": 69, + "activityName": "店铺精选活动信息", + "activityNameEn": "shop", + "activityContent": "商场品牌活动", + "activityContentEn": "shop", + "activityAddress": "商场活动2地址", + "activityAddressEn": "Chinese Address", + "activityType": 2, + "shopCode": "sq_NP5tCbI9nNHkP0ZBOp", + "shopName": "蛙三疯", + "shopNameEn": "", + "houseNumber": "L202", + "fileUrl": "/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png", + "startDate": "2023-04-17", + "endDate": "2023-04-30", + "building": "A", + "buildingCode": "suG1YjUhWnvRBJm3ULnCo", + "buildingOrder": 0, + "floor": "L2", + "floorCode": "vVq2ZOi0H7-tpjZHRdZyE", + "floorOrder": 5, + "point": -1, + "industryFatherName": "餐饮", + "industryName": "美食", + "industryUrl": "/iotFile/2023/04/19/T25A8zEygrRp9WxBOlXj_.png" + }, { + "activityId": 70, + "activityName": "NIKE优惠活动", + "activityNameEn": "nike", + "activityContent": "NIKE优惠活动", + "activityContentEn": "NIKE", + "activityAddress": "商场活动2地址", + "activityAddressEn": "Chinese Address", + "activityType": 2, + "shopCode": "IQlqEHyMD7-AfdGclgbwL", + "shopName": "优衣库", + "shopNameEn": "", + "houseNumber": "L201", + "fileUrl": "/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png", + "startDate": "2023-04-03", + "endDate": "2023-04-30", + "building": "A", + "buildingCode": "suG1YjUhWnvRBJm3ULnCo", + "buildingOrder": 0, + "floor": "L2", + "floorCode": "vVq2ZOi0H7-tpjZHRdZyE", + "floorOrder": 5, + "point": -1, + "industryFatherName": "餐饮1", + "industryUrl": "/iotFile/2023/04/19/0QbPfyN2cvDiy1te5odlp.png" + }] + } +} diff --git a/src/assets/images/art/go_bg.svg b/src/assets/images/art/go_bg.svg new file mode 100644 index 0000000..8bd7202 --- /dev/null +++ b/src/assets/images/art/go_bg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/nav/down_thumb.svg b/src/assets/images/nav/down_thumb.svg index 731e13c..80383cc 100644 --- a/src/assets/images/nav/down_thumb.svg +++ b/src/assets/images/nav/down_thumb.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/nav/left_thumb.svg b/src/assets/images/nav/left_thumb.svg index fc34f62..b10cacc 100644 --- a/src/assets/images/nav/left_thumb.svg +++ b/src/assets/images/nav/left_thumb.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/nav/right_thumb.svg b/src/assets/images/nav/right_thumb.svg index 9eca66c..0d3229e 100644 --- a/src/assets/images/nav/right_thumb.svg +++ b/src/assets/images/nav/right_thumb.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/nav/up_thumb.svg b/src/assets/images/nav/up_thumb.svg index 77d52ec..aa4222a 100644 --- a/src/assets/images/nav/up_thumb.svg +++ b/src/assets/images/nav/up_thumb.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/PathGroup/PathGroup.vue b/src/components/PathGroup/PathGroup.vue index a3511d0..6bc4384 100644 --- a/src/components/PathGroup/PathGroup.vue +++ b/src/components/PathGroup/PathGroup.vue @@ -9,22 +9,22 @@ @@ -113,8 +113,8 @@ defineExpose({ top: 495px; left: 64px; z-index: 1; - width: 650px; - height: 267px; + width: 653px; + height: 348px; animation-duration: 0.3s; animation-delay: 0.9s; .line { @@ -124,7 +124,7 @@ defineExpose({ width: 2px; height: 100%; background-repeat: repeat-y; - background-size: 2px 11px; + background-size: 2px 12px; opacity: 1; content: ''; background-image: linear-gradient(to bottom, #84754e 0%, #84754e 50%, transparent 0%); @@ -145,36 +145,34 @@ defineExpose({ display: flex; align-items: center; width: fit-content; - max-width: 100%; + max-width: 347px; height: 40px; padding: 4px; padding-right: 16px; margin-bottom: 4px; margin-left: 26px; - background: rgb(0 0 0 / 0%); + background: rgb(0 0 0 / 3%); border-radius: 8px; opacity: 1; &::before { position: absolute; - left: -24px; - width: 12px; - height: 12px; - background: #ecebe9; - border: 2px solid #84754e; + left: -22px; + width: 9px; + height: 9px; + background: #fff; + border: 1px solid #a6976f; border-radius: 50%; content: ''; } &.last { - // background: #eaa700; - // border: 3px solid #eaa700; + background: #fff; + border: 1px solid #84754e; .pass-name { - font-size: 24px; + font-family: 'font_bold'; } &::before { - left: -26px; - background: #eaa700; - border: 3px solid #eaa700; + background: #84754e; } } @@ -195,9 +193,9 @@ defineExpose({ } } .pass-name { - font-size: 18px; + font-size: 12px; font-family: 'font_regular'; - color: #84754e; + color: #a6976f; @include no-wrap(); } diff --git a/src/components/PublicComponent/PublicComponent.vue b/src/components/PublicComponent/PublicComponent.vue index 56c8e29..5221965 100644 --- a/src/components/PublicComponent/PublicComponent.vue +++ b/src/components/PublicComponent/PublicComponent.vue @@ -59,7 +59,7 @@ onBeforeUnmount(() => { }) watch(route, to => { - if (to.fullPath === '/' || to.fullPath === '/nav') { + if (to.fullPath === '/' || to.fullPath === '/nav' || to.fullPath === '/nav?type=art') { window?.Map_QM?.startRender() } else { window?.Map_QM?.cancelRender() diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json index e1afe7a..0dec1ae 100644 --- a/src/i18n/lang/en.json +++ b/src/i18n/lang/en.json @@ -12,6 +12,9 @@ "goBtn": "GO", "like": "like" }, + "art": { + "go": "GO" + }, "go": { "start": "start", "end": "end", diff --git a/src/i18n/lang/tw.json b/src/i18n/lang/tw.json index 6ba183c..821d345 100644 --- a/src/i18n/lang/tw.json +++ b/src/i18n/lang/tw.json @@ -12,6 +12,9 @@ "goBtn": "導航到店", "like": "喜歡" }, + "art": { + "go": "導航" + }, "go": { "start": "开始", "end": "结束", diff --git a/src/i18n/lang/zh.json b/src/i18n/lang/zh.json index 3c7bd2c..eb224a7 100644 --- a/src/i18n/lang/zh.json +++ b/src/i18n/lang/zh.json @@ -12,6 +12,9 @@ "goBtn": "导航到店", "like": "喜欢" }, + "art": { + "go": "导航" + }, "go": { "start": "开始", "end": "结束", diff --git a/src/router/routes.ts b/src/router/routes.ts index 8665c9d..6fbb70f 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -67,6 +67,11 @@ export const routes: RouteRecordRaw[] = [ name: 'Parking', component: () => import(/* webpackChunkName: "parking" */ '@/views/Parking/Parking.vue') }, + { + path: '/art', + name: 'Art', + component: () => import(/* webpackChunkName: "parking" */ '@/views/Art/Art.vue') + }, { path: '/transfer', name: 'Transfer', diff --git a/src/utils/Class/Brand.ts b/src/utils/Class/Brand.ts index a6dbc8e..4977f7e 100644 --- a/src/utils/Class/Brand.ts +++ b/src/utils/Class/Brand.ts @@ -1,6 +1,16 @@ type PickShop = Pick< Shop, - 'shopName' | 'floorOrder' | 'floor' | 'logoUrl' | 'yaxis' | 'shopCode' | 'shopNameEn' | 'artAuthor' | 'doorMaterialList' + | 'shopName' + | 'floorOrder' + | 'floor' + | 'logoUrl' + | 'yaxis' + | 'shopCode' + | 'shopNameEn' + | 'intro' + | 'introEn' + | 'artAuthor' + | 'doorMaterialList' > /** @@ -17,7 +27,22 @@ export default class Brand { shopCode: string | number shopNameEn?: string artAuthor?: string //艺术点位的作者 - constructor({ shopName, floorOrder, floor, logoUrl, yaxis, shopCode, shopNameEn = '', artAuthor = '' }: PickShop) { + intro?: string //介绍 + introEn?: string //介绍英文 + doorMaterialList?: string[] //门头图 + constructor({ + shopName, + floorOrder, + floor, + logoUrl, + yaxis, + shopCode, + shopNameEn = '', + artAuthor = '', + intro = '', + introEn = '', + doorMaterialList = [] + }: PickShop) { this.shopName = shopName this.floorOrder = floorOrder this.floor = floor @@ -26,5 +51,8 @@ export default class Brand { this.shopCode = shopCode this.shopNameEn = shopNameEn this.artAuthor = artAuthor + this.intro = intro + this.introEn = introEn + this.doorMaterialList = doorMaterialList } } diff --git a/src/views/Art/Art.vue b/src/views/Art/Art.vue new file mode 100644 index 0000000..94cb484 --- /dev/null +++ b/src/views/Art/Art.vue @@ -0,0 +1,516 @@ + + + + + diff --git a/src/views/Art/ArtMapItem.vue b/src/views/Art/ArtMapItem.vue new file mode 100644 index 0000000..08e21e9 --- /dev/null +++ b/src/views/Art/ArtMapItem.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/src/views/Art/ArtRightItem.vue b/src/views/Art/ArtRightItem.vue new file mode 100644 index 0000000..e912c21 --- /dev/null +++ b/src/views/Art/ArtRightItem.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/views/Nav/Nav.vue b/src/views/Nav/Nav.vue index 6d1fb1b..560cf57 100644 --- a/src/views/Nav/Nav.vue +++ b/src/views/Nav/Nav.vue @@ -38,7 +38,7 @@ >{{ switchLanguage(shop, 'shopName') }} -

{{ shop.artAuthor }}

+

{{ shop.artAuthor }}

-
-

{{ directionInfo ? switchLanguage(directionInfo, 'text') : '' }}

- -
+
+

{{ directionInfo ? switchLanguage(directionInfo, 'text') : '' }}

+ +
- + + + +
@@ -105,7 +108,7 @@ @@ -166,6 +169,7 @@ import { useRouter, useRoute } from 'vue-router' import marquees from '@/base/Marquees/Marquees.vue' import pathGroup from '@/components/PathGroup/PathGroup.vue' import effectFade from '@/components/EffectFade/EffectFade.vue' +import ScrollView from '@/base/ScrollView/ScrollView.vue' const store = useRootStore() const { shop, device, language, config } = storeToRefs(store) @@ -309,6 +313,97 @@ watch(shop, newVal => { margin-bottom: 32px; } } + .nav-art { + position: absolute; + top: 0; + right: 0; + z-index: 1; + width: 824px; + height: 1078px; + background: linear-gradient(171.17deg, rgb(217 214 205 / 40%) 7.32%, #ecebe7 89.2%); + .marquee-wrapper { + overflow: hidden; + width: 340px; + margin-top: 196px; + margin-bottom: 12px; + margin-left: 39px; + white-space: nowrap; + .name { + display: inline-block; + height: 44px; + font-size: 36px; + font-family: 'font_bold'; + color: #84754e; + font-weight: 700; + } + } + .author { + max-width: 336px; + margin-left: 39px; + font-size: 16px; + font-family: 'font_regular'; + color: rgb(0 0 0 / 60%); + line-height: 24px; + + @include no-wrap(); + } + .intro-scroll { + position: absolute; + top: 196px; + left: 406px; + z-index: 1; + overflow: hidden; + width: 370px; + height: 318px; + padding: 0; + padding-right: 20px; + border-radius: 0; + .intro { + font-size: 14px; + font-family: 'font_regular'; + text-align: justify; + white-space: pre-wrap; + color: rgb(0 0 0 / 60%); + line-height: 200%; + :deep(img) { + width: 100%; + } + } + } + .machine { + position: absolute; + top: 299px; + left: 48px; + z-index: 1; + .di-icon { + max-width: 180px; + } + .go-container { + font-size: 36px; + font-family: 'font_bold'; + color: rgb(0 0 0 / 60%); + font-style: normal; + font-weight: 700; + } + } + .art-images { + position: absolute; + bottom: 106.5px; + left: 48px; + z-index: 1; + width: 728px; + height: 410px; + img { + width: 100%; + object-fit: scale-down; + border-radius: 13.2364px; + } + &.stay-tuned { + top: 750px; + left: 417px; + } + } + } .nav-normal { position: absolute; right: 0;