Merge branch 'dev' of https://git.1000my.com/project-shenyangk11/sy_k11_H_base_daoshi_vue_ts into dev

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"}]}}
+{
+  "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"
+    }]
+  }
+}

src/assets/images/art/go_bg.svg

@@ -0,0 +1,9 @@
+<svg width="65" height="36" viewBox="0 0 65 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53 36H0C4.83219 36 9.17803 33.0594 10.975 28.5737L16.254 15.3964C19.1207 8.24046 26.0536 3.5493 33.7624 3.5493H58.926C61.4429 3.5493 63.7644 2.19274 65 0V24C65 30.6274 59.6274 36 53 36Z" fill="url(#paint0_linear_279_5498)"/>
+<defs>
+<linearGradient id="paint0_linear_279_5498" x1="37" y1="0.507045" x2="47.7745" y2="37.441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C4B280"/>
+<stop offset="1" stop-color="#A89866"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/images/nav/down_thumb.svg

@@ -1,3 +1,3 @@
 <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"/>
+<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="#84754E"/>
 </svg>

src/assets/images/nav/left_thumb.svg

@@ -1,3 +1,3 @@
 <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"/>
+<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="#84754E"/>
 </svg>

src/assets/images/nav/right_thumb.svg

@@ -1,3 +1,3 @@
 <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"/>
+<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="#84754E"/>
 </svg>

src/assets/images/nav/up_thumb.svg

@@ -1,3 +1,3 @@
 <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"/>
+<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="#84754E"/>
 </svg>

src/components/PathGroup/PathGroup.vue

@@ -9,22 +9,22 @@
         <ul class="pass-items">
           <div class="line"></div>
           <li class="pass-item first" :class="{ last: playIdx === -1 }">
-            <!-- <div class="lefts">
+            <div class="lefts">
               <img :src="direction.passIcon" class="way-icon" alt="" />
-            </div> -->
+            </div>
             <span class="pass-name">{{ yourpos }} </span>
           </li>
           <li v-for="(item, idx) of pathshop" :key="item.code" class="pass-item" :class="{ last: playIdx === idx }">
-            <!-- <div class="lefts">
+            <div class="lefts">
               <img :src="item.isAddPrefix ? item.logoPath : config.sourceUrl + item.logoUrl" class="way-icon" alt="" />
-            </div> -->
+            </div>
             <span class="pass-name">{{ switchLanguage(item, 'name') }}</span
             ><!--process(item)-->
           </li>
           <li class="pass-item" :class="{ last: playIdx === pathshop.length }">
-            <!-- <div class="lefts">
+            <div class="lefts">
               <img :src="lastImage" class="way-icon" alt="" />
-            </div> -->
+            </div>
             <span class="pass-name">{{ switchLanguage(endName, 'name') }}</span>
           </li>
         </ul>
@@ -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();
         }

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()

src/i18n/lang/en.json

@@ -12,6 +12,9 @@
     "goBtn": "GO",
     "like": "like"
   },
+  "art": {
+    "go": "GO"
+  },
   "go": {
     "start": "start",
     "end": "end",

src/i18n/lang/tw.json

@@ -12,6 +12,9 @@
     "goBtn": "導航到店",
     "like": "喜歡"
   },
+  "art": {
+    "go": "導航"
+  },
   "go": {
     "start": "开始",
     "end": "结束",

src/i18n/lang/zh.json

@@ -12,6 +12,9 @@
     "goBtn": "导航到店",
     "like": "喜欢"
   },
+  "art": {
+    "go": "导航"
+  },
   "go": {
     "start": "开始",
     "end": "结束",

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',

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
   }
 }

src/views/Art/Art.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="art-container">
+    <!-- 地图 -->
+    <ul class="map-group">
+      <li
+        v-for="(item, index) in mapList"
+        :key="index"
+        :style="{ 'animation-delay': (mapList.length - index) * delaytime + 's' }"
+        class="animate__animated animate__fadeInDown"
+      >
+        <img :src="item" alt="" />
+      </li>
+    </ul>
+    <!-- 地图左侧的列表 -->
+    <scroll-view class="map-left-scroll" :list="artListLeft" :scrollbar="true" :observe-image="true" :refresh-delay="500" :pull-up="false">
+      <ul>
+        <artMapItem
+          v-for="(item, index) in artListLeft"
+          :key="index"
+          :style="{ 'animation-delay': (mapList.length - index) * delaytime + 's' }"
+          class="animate__animated animate__fadeInDown"
+          :art-info="item"
+          @go="clickGo"
+        ></artMapItem>
+      </ul>
+    </scroll-view>
+    <!-- 地图右侧的列表 -->
+
+    <scroll-view class="map-right-scroll" :list="artListLeft" :scrollbar="true" :observe-image="true" :refresh-delay="500" :pull-up="false">
+      <ul>
+        <artMapItem
+          v-for="(item, index) in artListRight"
+          :key="index"
+          :style="{ 'animation-delay': (mapList.length - index) * delaytime + 's' }"
+          class="animate__animated animate__fadeInDown"
+          :art-info="item"
+          @go="clickGo"
+        ></artMapItem>
+      </ul>
+    </scroll-view>
+    <!-- 右侧的列表 -->
+    <div class="right-bg"></div>
+    <swiper
+      :autoplay="{
+        delay: 0,
+        disableOnInteraction: true
+      }"
+      :speed="5000"
+      :loop="true"
+      :loop-prevents-sliding="false"
+      :loop-additional-slides="3"
+      :looped-slides="8"
+      :long-swipes-ms="0"
+      :free-mode="true"
+      :height="90.4"
+      :modules="[Autoplay]"
+      :space-between="12"
+      direction="vertical"
+      class="right-scroll"
+    >
+      <swiper-slide v-for="(item, index) in artListAll" :key="index">
+        <artRightItem :art-info="item" @go="clickGo"></artRightItem>
+      </swiper-slide>
+    </swiper>
+
+    <!-- <scroll-view class="right-scroll" :list="artListLeft" :scrollbar="true" :observe-image="true" :refresh-delay="500" :pull-up="false"> -->
+    <!-- </scroll-view> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import 'swiper/css'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay } from 'swiper'
+
+import { ref } from 'vue'
+import artMapItem from './ArtMapItem.vue'
+import artRightItem from './ArtRightItem.vue'
+import scrollView from '@/base/ScrollView/ScrollView.vue'
+import Brand from '@/utils/Class/Brand'
+
+// import { storeToRefs } from 'pinia'
+import { useRootStore } from '@/store/root'
+import { useRouter } from 'vue-router'
+const store = useRootStore()
+// const {} = storeToRefs(store)
+const router = useRouter()
+
+const delaytime = 0.5 //延迟时间
+const mapList = ref([
+  '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+  '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png',
+  '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+  '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png',
+  '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+  '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png'
+])
+
+const artListLeft = ref([
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  }
+])
+const artListRight = ref([
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  }
+])
+
+const artListAll = ref([
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  },
+  {
+    fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
+    title: '啥的了开发就阿索拉卡的就飞拉萨的发',
+    titleEn: '1111啥的了开发就阿索拉卡的就飞拉萨的发',
+    author: 'aslfdjlsdf发卢萨卡的积分卢萨卡的积分了萨迪克就飞拉萨的发',
+    intro:
+      '联发科的撒解放路撒娇联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    introEn: '联发科的撒解放路撒娇的弗兰克萨的积分卢萨卡的积分了看的撒就弗兰克萨大积分',
+    artNum: 2,
+    floor: 'L2',
+    floorOrder: 5,
+    point: 5
+  }
+])
+function clickGo(item: any) {
+  const shop = new Brand({
+    shopName: item.title,
+    floorOrder: item.floorOrder,
+    floor: item.floor,
+    logoUrl: item.fileUrl,
+    yaxis: item.point,
+    shopCode: '-11',
+    intro: item.intro,
+    introEn: item.introEn,
+    artAuthor: item.author,
+    doorMaterialList: item.doorMaterialList
+  })
+  store.SET_SHOP(shop)
+  router.push('/nav?type=art')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.swiper-wrapper) {
+  transition-timing-function: linear;
+}
+.art-container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  .map-group {
+    position: absolute;
+    top: 85px;
+    left: 510px;
+    li {
+      img {
+        height: 205px;
+      }
+    }
+  }
+  .map-left-scroll {
+    position: absolute;
+    top: 210px;
+    left: 32px;
+    overflow: hidden;
+    width: 476px;
+    height: 806px;
+    padding-right: 20px;
+  }
+  .map-right-scroll {
+    position: absolute;
+    top: 210px;
+    left: 1006px;
+    overflow: hidden;
+    width: 476px;
+    height: 806px;
+    padding-right: 20px;
+  }
+  .right-bg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 0;
+    width: 426px;
+    height: 1078px;
+    background: linear-gradient(171.17deg, rgb(217 214 205 / 40%) 7.32%, #ecebe7 89.2%);
+  }
+  .right-scroll {
+    position: absolute;
+    top: 188px;
+    left: 1520px;
+    z-index: 1;
+    overflow: hidden;
+    width: 400px;
+    height: 808px;
+  }
+}
+</style>

src/views/Art/ArtMapItem.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="art-item">
+    <!-- 图 -->
+    <img class="banner" :src="artInfo.fileUrl" alt="" />
+    <div class="intro-container">
+      <!-- 标题 -->
+      <h3 class="art-title">{{ switchLanguage(artInfo, 'title') }}</h3>
+      <!-- 作者 -->
+      <h5 class="art-author">{{ artInfo.author }}</h5>
+      <!-- 介绍 -->
+      <p class="art-intro">{{ switchLanguage(artInfo, 'intro') }}</p>
+    </div>
+    <!-- 编号 -->
+    <p class="art-number">{{ artInfo.artNum }}</p>
+    <!-- 导航按钮 -->
+    <div class="go-container" @click="clickGo">GO</div>
+  </div>
+</template>
+
+<script setup>
+// import { ref } from 'vue'
+
+const emits = defineEmits(['go'])
+const props = defineProps({
+  artInfo: {
+    type: Object,
+    default: () => {}
+  }
+})
+function clickGo() {
+  emits('go', props.artInfo)
+}
+</script>
+
+<style scoped lang="scss">
+.art-item {
+  position: relative;
+  width: 456px;
+  height: 150px;
+  padding: 8px;
+  margin-bottom: 14px;
+  background: rgb(255 255 255 / 80%);
+  border-radius: 12px;
+  backdrop-filter: blur(2px);
+  .banner {
+    display: inline-block;
+    width: 240px;
+    height: 135px;
+    border-radius: 8px;
+  }
+  .intro-container {
+    display: inline-block;
+    padding-top: 16px;
+    padding-left: 6px;
+
+    .art-title {
+      max-width: 170px;
+      font-size: 14px;
+      font-family: 'font_bold';
+      color: #736661;
+      font-style: normal;
+      font-weight: 700;
+
+      @include no-wrap();
+    }
+    .art-author {
+      max-width: 170px;
+      margin-top: 6px;
+      font-size: 10px;
+      font-family: 'font_bold';
+      color: #9b8c85;
+      font-style: normal;
+      font-weight: 700;
+
+      @include no-wrap();
+    }
+    .art-intro {
+      max-width: 148px;
+      height: 48px;
+      margin-top: 40px;
+      font-size: 10px;
+      font-family: 'font_regular';
+      color: #9b8c85;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 150%;
+
+      @include more-wrap(3);
+    }
+  }
+  .art-number {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    font-family: 'font_bold';
+    text-align: center;
+    color: #84754e;
+    background: rgb(0 0 0 / 6%);
+    border-radius: 50px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+  }
+  .go-container {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 65px;
+    height: 36px;
+    padding-top: 8px;
+    padding-left: 29px;
+    font-size: 16px;
+    font-family: 'font_bold';
+    color: #fff;
+    background: url('@/assets/images/art/go_bg.svg') no-repeat;
+    font-style: normal;
+    font-weight: 700;
+  }
+}
+</style>

src/views/Art/ArtRightItem.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="art-item">
+    <!-- 图 -->
+    <img class="banner" :src="artInfo.fileUrl" alt="" />
+    <div class="intro-container">
+      <!-- 标题 -->
+      <h3 class="art-title">{{ switchLanguage(artInfo, 'title') }}</h3>
+      <!-- 作者 -->
+      <h5 class="art-author">{{ artInfo.author }}</h5>
+      <!-- 导航按钮 -->
+      <div class="go-container" @click="clickGo">{{ $t('art.go') }}</div>
+      <!-- 介绍
+      <p class="art-intro">{{ switchLanguage(artInfo, 'intro') }}</p> -->
+    </div>
+    <!-- 编号 -->
+    <!-- <p class="art-number">{{ artInfo.artNum }}</p> -->
+  </div>
+</template>
+
+<script setup>
+// import { ref } from 'vue'
+
+const emits = defineEmits(['go'])
+const props = defineProps({
+  artInfo: {
+    type: Object,
+    default: () => {}
+  }
+})
+function clickGo() {
+  emits('go', props.artInfo)
+}
+</script>
+
+<style scoped lang="scss">
+.art-item {
+  position: relative;
+  display: flex;
+  width: 380px;
+  height: 90.4px;
+  padding: 0;
+  margin-bottom: 12px;
+  .banner {
+    display: inline-block;
+    width: 160px;
+    height: 90.4px;
+    border-radius: 8px;
+  }
+  .intro-container {
+    display: inline-block;
+    padding-top: 5px;
+    padding-left: 16px;
+
+    .art-title {
+      max-width: 200px;
+      font-size: 16px;
+      font-family: 'font_bold';
+      color: #736661;
+      font-style: normal;
+      font-weight: 700;
+
+      @include no-wrap();
+    }
+    .art-author {
+      max-width: 150px;
+      margin-top: 4px;
+      font-size: 12px;
+      font-family: 'font_regular';
+      color: #9b8c85;
+      font-style: normal;
+      font-weight: 700;
+
+      @include no-wrap();
+    }
+    .art-intro {
+      max-width: 148px;
+      height: 48px;
+      margin-top: 40px;
+      font-size: 10px;
+      font-family: 'font_regular';
+      color: #9b8c85;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 150%;
+
+      @include more-wrap(3);
+    }
+  }
+  .go-container {
+    width: 80px;
+    height: 32px;
+    margin-top: 15px;
+    font-size: 14px;
+    font-family: 'font_bold';
+    text-align: center;
+    color: #a6976f;
+    background-color: #fff;
+    border-radius: 40px;
+    line-height: 32px;
+    font-style: normal;
+    font-weight: 700;
+  }
+}
+</style>

src/views/Nav/Nav.vue

@@ -38,7 +38,7 @@
           >{{ switchLanguage(shop, 'shopName') }}
         </marquees>
       </div>
-      <h3>{{ shop.artAuthor }}</h3>
+      <h3 class="author">{{ shop.artAuthor }}</h3>
       <!-- 介绍 -->
       <scroll-view
         class="intro-scroll"
@@ -53,21 +53,24 @@
       <!-- 方向 -->
       <div class="machine">
         <div class="dir-container">
-          <div class="go-container">
-            <p class="go-text">{{ directionInfo ? switchLanguage(directionInfo, 'text') : '' }}</p>
-            <!-- <p class="go-tip">{{ $t('go.please') }}</p> -->
-          </div>
           <img
             :src="directionInfo?.icon"
             :class="directionInfo?.class"
-            class="di-icon animate__animated"
+            class="di-icon animate__infinite animate__animated"
             alt=""
             :data-key="directionInfo?.text"
           />
+          <div class="go-container">
+            <p class="go-text">{{ directionInfo ? switchLanguage(directionInfo, 'text') : '' }}</p>
+            <!-- <p class="go-tip">{{ $t('go.please') }}</p> -->
+          </div>
         </div>
       </div>
       <!-- 图片 -->
-      <effect-fade class="art-images" :list="shop.doorMaterialList"></effect-fade>
+      <!-- <effect-fade class="art-images" :list="shop.doorMaterialList"></effect-fade> -->
+      <effect-fade v-slot="{ item }" class="art-images" :list="shop.doorMaterialList" :pagination="false">
+        <img :src="item" alt="" />
+      </effect-fade>
     </div>
     <div v-else class="nav-normal">
       <!-- 背景 -->
@@ -105,7 +108,7 @@
           <img
             :src="directionInfo?.icon"
             :class="directionInfo?.class"
-            class="di-icon animate__animated"
+            class="di-icon animate__infinite animate__animated"
             alt=""
             :data-key="directionInfo?.text"
           />
@@ -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;