From ae787d633684efbec0fed3a5c6c4f70c1b99be44 Mon Sep 17 00:00:00 2001
From: liyongle <liyongle@123>
Date: Fri, 14 Jul 2023 17:36:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E7=8C=9C=E4=BD=A0?=
 =?UTF-8?q?=E5=96=9C=E6=AC=A2=E5=8A=A0=E5=BF=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/offline/JSON/getArtWorkList.json   | 12 ++--
 public/static/offline/JSON/getColumnBtn.json  | 19 ++++++
 public/static/offline/JSON/getColumnList.json | 32 ++++++++++
 src/assets/images/art/poi.svg                 |  3 +
 src/components/Header/Header.vue              | 11 ++--
 src/components/PictureText/PictureText.vue    |  5 +-
 .../PublicComponent/PublicComponent.vue       |  4 +-
 src/components/Recommend/Recommend.vue        | 58 +++++++++++--------
 src/composables/useInitConfigAndMallInfo.ts   | 35 +++++++----
 src/http/api/base/index.ts                    |  6 ++
 src/types/featured.d.ts                       | 35 +++++------
 src/views/Art/Art.vue                         | 22 ++++---
 src/views/Art/ArtItem.vue                     | 18 ++++--
 src/views/Guide/FloorPicList.vue              |  6 +-
 14 files changed, 181 insertions(+), 85 deletions(-)
 create mode 100644 public/static/offline/JSON/getColumnBtn.json
 create mode 100644 public/static/offline/JSON/getColumnList.json
 create mode 100644 src/assets/images/art/poi.svg

diff --git a/public/static/offline/JSON/getArtWorkList.json b/public/static/offline/JSON/getArtWorkList.json
index f353aab..e65b6dd 100644
--- a/public/static/offline/JSON/getArtWorkList.json
+++ b/public/static/offline/JSON/getArtWorkList.json
@@ -9,10 +9,10 @@
         "name": "猩猩的太空漫步",
         "nameEn": "dddd",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/vwcYXFrhK1CbEB6uFy76R.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_4",
-        "content": "vnasfkvl",
+        "content": "星巴克(Starbucks)是美国一家连锁咖啡公司的名称，1971年成立，为全球最大的咖啡连锁店，其总部坐落美国华盛顿州西雅图市。星巴克旗下零售产品包括30多款全球顶级的咖啡豆、手工制作的浓缩咖啡和多款咖啡冷热饮料、新鲜美味的各式糕点食品以及丰富多样的咖啡机、咖啡杯等商品。星巴克在全球范围内已经有近21300间分店，遍布北美、南美洲、欧洲、中东及太平洋区。星巴克(Starbucks)是美国一家连锁咖啡公司的名称，1971年成立，为全球最大的咖啡连锁店，其总部坐落美国华盛顿州西雅图市。星巴克旗下零售产品包括30多款全球顶级的咖啡豆、手工制作的浓缩咖啡和多款咖啡冷热饮料、新鲜美味的各式糕点食品以及丰富多样的咖啡机、咖啡杯等商品。星巴克在全球范围内已经有近21300间分店，遍布北美、南美洲、欧洲、中东及太平洋区。",
         "contentEn": "fwefwqe",
         "icon": [
           "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"
@@ -29,7 +29,7 @@
         "name": "共生",
         "nameEn": "dddd",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/CkR9FMDrKtej6Rt0GDAUR.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_129",
         "content": "1235",
@@ -49,7 +49,7 @@
         "name": "超新星",
         "nameEn": "dddd",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/6DH-CKwe8pzVt4qmP-Knm.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_129",
         "content": "1326",
@@ -69,7 +69,7 @@
         "name": "盛开的山谷",
         "nameEn": "dadd",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/fH0IKTz9Nhg7nnVhtJg_o.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_84",
         "content": "i7u",
@@ -89,7 +89,7 @@
         "name": "琥珀",
         "nameEn": "t534",
         "file_code": [
-          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/rQjWB5AzY05NM7YSmWgtT.png"
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
         ],
         "point": "0_0_84",
         "content": "213",
diff --git a/public/static/offline/JSON/getColumnBtn.json b/public/static/offline/JSON/getColumnBtn.json
new file mode 100644
index 0000000..e257e1f
--- /dev/null
+++ b/public/static/offline/JSON/getColumnBtn.json
@@ -0,0 +1,19 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 127,
+      "title": "餐饮推荐",
+      "content": {
+        "isOpen": "开启",
+        "logo_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230714/436WqGHBEswCHsCHwiZfx.png"
+        ],
+        "name": "餐饮推荐",
+        "nameEn": "DINING RECOMMENDATION",
+        "type": "好吃的"
+      }
+    }
+  ]
+}
diff --git a/public/static/offline/JSON/getColumnList.json b/public/static/offline/JSON/getColumnList.json
new file mode 100644
index 0000000..4cccea2
--- /dev/null
+++ b/public/static/offline/JSON/getColumnList.json
@@ -0,0 +1,32 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 128,
+      "title": "泽德",
+      "content": {
+        "name": "特别好的",
+        "nameEn": "24213",
+        "logo_code": [
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
+        ],
+        "point": "0_0_204",
+        "shopCode": ""
+      }
+    },
+    {
+      "id": 131,
+      "title": "VS",
+      "content": {
+        "name": "cn下周才",
+        "nameEn": "dqwd",
+        "logo_code": [
+          "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/-zGlLfxNuSkVWjOQ3tsnc.jpg"
+        ],
+        "point": "0_3_197",
+        "shopCode": ""
+      }
+    }
+  ]
+}
diff --git a/src/assets/images/art/poi.svg b/src/assets/images/art/poi.svg
new file mode 100644
index 0000000..c8b4abf
--- /dev/null
+++ b/src/assets/images/art/poi.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 13.9339L11.3 10.6339C11.9526 9.98127 12.397 9.14975 12.577 8.24452C12.7571 7.33928 12.6646 6.401 12.3114 5.5483C11.9582 4.69561 11.36 3.9668 10.5926 3.45404C9.82519 2.94129 8.92296 2.6676 8 2.6676C7.07704 2.6676 6.17481 2.94129 5.40739 3.45404C4.63997 3.9668 4.04183 4.69561 3.68861 5.5483C3.33539 6.401 3.24294 7.33928 3.42297 8.24452C3.603 9.14975 4.0474 9.98127 4.7 10.6339L8 13.9339ZM8 15.8193L3.75734 11.5766C2.91823 10.7375 2.34679 9.66838 2.11529 8.5045C1.88378 7.34061 2.0026 6.13422 2.45673 5.03787C2.91086 3.94151 3.6799 3.00445 4.66659 2.34516C5.65328 1.68588 6.81332 1.33398 8 1.33398C9.18669 1.33398 10.3467 1.68588 11.3334 2.34516C12.3201 3.00445 13.0891 3.94151 13.5433 5.03787C13.9974 6.13422 14.1162 7.34061 13.8847 8.5045C13.6532 9.66838 13.0818 10.7375 12.2427 11.5766L8 15.8193V15.8193ZM8 8.66727C8.35362 8.66727 8.69276 8.52679 8.94281 8.27674C9.19286 8.02669 9.33333 7.68755 9.33333 7.33393C9.33333 6.98031 9.19286 6.64117 8.94281 6.39112C8.69276 6.14108 8.35362 6.0006 8 6.0006C7.64638 6.0006 7.30724 6.14108 7.05719 6.39112C6.80714 6.64117 6.66667 6.98031 6.66667 7.33393C6.66667 7.68755 6.80714 8.02669 7.05719 8.27674C7.30724 8.52679 7.64638 8.66727 8 8.66727ZM8 10.0006C7.29276 10.0006 6.61448 9.71965 6.11438 9.21955C5.61429 8.71945 5.33334 8.04118 5.33334 7.33393C5.33334 6.62669 5.61429 5.94841 6.11438 5.44831C6.61448 4.94822 7.29276 4.66727 8 4.66727C8.70725 4.66727 9.38552 4.94822 9.88562 5.44831C10.3857 5.94841 10.6667 6.62669 10.6667 7.33393C10.6667 8.04118 10.3857 8.71945 9.88562 9.21955C9.38552 9.71965 8.70725 10.0006 8 10.0006Z" fill="#8E9090"/>
+</svg>
diff --git a/src/components/Header/Header.vue b/src/components/Header/Header.vue
index 81488c2..96f6221 100644
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="header-container">
-    <div class="left" @click="go">
-      <div class="search-container">
+    <div class="left">
+      <div class="search-container" @click="go">
         <img src="@/assets/images/header/search.svg" alt="" />
         <div class="line"></div>
         <div>
@@ -9,9 +9,9 @@
           <div class="text_en">SEARCH</div>
         </div>
       </div>
-      <div v-if="columnList.length && columnList[0].moduleType" class="recommend" @click="show">
+      <div v-if="columnList.length && columnList[0].title" class="recommend" @click="show">
         <img class="rem" src="@/assets/images/header/zan.svg" alt="" />
-        <div>{{ $t('header.recommend') }}</div>
+        <div>{{ switchLanguage(columnList[0].content, 'name') }}</div>
       </div>
     </div>
     <div class="right">
@@ -22,10 +22,11 @@
 </template>
 
 <script setup lang="ts">
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
 import { useRootStore } from '@/store/root'
 import { toRefs } from 'vue'
 import WeaAndTime from './WeaAndTime.vue'
-
+const { switchLanguage } = useSwitchLanguage()
 const store = useRootStore()
 const { columnList } = toRefs(store)
 
diff --git a/src/components/PictureText/PictureText.vue b/src/components/PictureText/PictureText.vue
index e3644d0..eb1ca46 100644
--- a/src/components/PictureText/PictureText.vue
+++ b/src/components/PictureText/PictureText.vue
@@ -114,12 +114,15 @@ defineProps<Props>()
     }
     .qr-container {
       @include fl();
+
+      overflow: hidden;
+      width: 708px;
       .item {
         width: 80px;
         height: 102px;
         margin-right: 24px;
         text-align: center;
-        .img {
+        img {
           width: 80px;
           height: 80px;
           margin-bottom: 8px;
diff --git a/src/components/PublicComponent/PublicComponent.vue b/src/components/PublicComponent/PublicComponent.vue
index 97abe3f..05b24b5 100644
--- a/src/components/PublicComponent/PublicComponent.vue
+++ b/src/components/PublicComponent/PublicComponent.vue
@@ -10,7 +10,7 @@
 
   <Search v-if="showSearch"></Search>
   <!-- 推荐弹窗 -->
-  <RecommendDialog v-if="showColumnList" />
+  <RecommendDialog />
 
   <shopdetail v-if="showDetail"></shopdetail>
 
@@ -38,7 +38,7 @@ const RecommendDialog = defineAsyncComponent(() => import('@/components/Recommen
 const router = useRouter()
 const route = useRoute()
 const store = useRootStore()
-const { language, showSearch, showDetail, shopList, showColumnList } = storeToRefs(store)
+const { language, showSearch, showDetail, shopList } = storeToRefs(store)
 const { checkHandleScreen, showCountDownDialog, title, toIndexTime, toWallpaperTime, isWallpaper } = useHandleScreen(handleScreen)
 
 //指定时间返回首页时做的操作
diff --git a/src/components/Recommend/Recommend.vue b/src/components/Recommend/Recommend.vue
index 8129afb..27977a3 100644
--- a/src/components/Recommend/Recommend.vue
+++ b/src/components/Recommend/Recommend.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="recommend-container">
+  <div v-if="showColumnList" class="recommend-container">
     <div class="masker" @click="close"></div>
     <div class="close-icon" @click="close">
       <img src="@/assets/images/shopDetail/close.svg" alt="" />
@@ -7,21 +7,21 @@
 
     <div class="content">
       <div class="name-container">
-        <div class="name">餐饮推荐</div>
+        <div class="name">{{ columnList[0].content.name }}</div>
         <div class="line">/</div>
-        <div class="nameEn">DINING RECOMMENDATION</div>
+        <div class="nameEn">{{ columnList[0].content.nameEn }}</div>
       </div>
       <ScrollView v-if="list?.length" :pull-up="false" observe-image :list="list" class="shop-scroll" scrollbar>
         <div v-masonry transition-duration="0.5s" :gutter="24" class="item" item-selector=".card">
           <div v-for="(item, index) in list" :key="index" v-masonry-tile class="card" @click="clickShop(item)">
-            <img :src="item.fileUrl" alt="" class="imgs" />
+            <img :src="item.content.logo_code[0]" alt="" class="imgs" />
             <div class="bottom">
-              <div class="name">{{ switchLanguage(item, 'name') }}</div>
-              <div v-if="item.shopCode" class="pos">
-                <div class="shopName">{{ switchLanguage(item, 'shopName') }}</div>
+              <div class="name">{{ switchLanguage(item.content, 'name') }}</div>
+              <div v-if="item.content.shopCode" class="pos">
+                <div class="shopName">{{ switchLanguage(shopMap[item.content.shopCode], 'shopName') }}</div>
                 <div class="number">
-                  <img src="" alt="" />
-                  <div>{{ item.houseNumber }}</div>
+                  <img src="@/assets/images/art/poi.svg" alt="" />
+                  <div>{{ shopMap[item.content.shopCode].houseNumber }}</div>
                 </div>
               </div>
             </div>
@@ -33,42 +33,48 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { toRefs, ref } from 'vue'
 import { useRootStore } from '@/store/root'
 import { useRouter } from 'vue-router'
 import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
+import { getColumnList } from '@/http/api/base'
 import Brand from '@/utils/Class/Brand'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
 const store = useRootStore()
-const { shopList } = toRefs(store)
-const list: any = []
+const { columnList, showColumnList, shopMap } = toRefs(store)
 const router = useRouter()
 const { switchLanguage } = useSwitchLanguage()
 
-const emits = defineEmits(['close'])
 function close() {
-  emits('close')
+  showColumnList.value = false
 }
 function clickShop(item: FeaturedList) {
-  if (item.shopCode) {
-    const arr = shopList.value.filter(shop => shop.shopCode === item.shopCode)
-    store.SET_SHOP(arr[0])
+  if (item.content.shopCode) {
+    store.SET_SHOP(shopMap[item.content.shopCode])
     store.SET_SHOW_DETAIL(true)
-  } else {
+  } else if (item.content.point) {
+    // 点位信息
+    const poi = item.content.point.split('_')
+    const floors = store.currentBuildingFloorsList.filter(item => item.floorOrder === Number(poi[1]))
     store.SET_SHOP(
       new Brand({
-        shopName: item.name,
-        floorOrder: item.floorOrder,
-        floor: item.floor,
-        logoUrl: item.fileUrl,
-        yaxis: item.point,
-        shopCode: item.shopCode,
-        shopNameEn: item.nameEn
+        shopName: item.content.name,
+        floorOrder: floors[0].floorOrder,
+        floor: floors[0].floor,
+        logoUrl: item.content.logo_code[0],
+        yaxis: poi[2],
+        shopCode: '',
+        shopNameEn: item.content.nameEn
       })
     )
     router.push('/nav')
   }
 }
+
+const list = ref<FeaturedList[]>([])
+getColumnList().then(({ data }) => {
+  list.value = data
+})
 </script>
 
 <style lang="scss" scoped>
@@ -150,9 +156,11 @@ function clickShop(item: FeaturedList) {
     }
     .shop-scroll {
       overflow: hidden;
+      width: 1482px;
       height: 712px;
       .item {
         display: block;
+        width: 1452px;
         .card {
           width: 354px;
           margin-bottom: 12px;
diff --git a/src/composables/useInitConfigAndMallInfo.ts b/src/composables/useInitConfigAndMallInfo.ts
index c75bfdd..8337677 100644
--- a/src/composables/useInitConfigAndMallInfo.ts
+++ b/src/composables/useInitConfigAndMallInfo.ts
@@ -1,5 +1,5 @@
 import { useRootStore } from '@/store/root'
-import { getConfig, getFacilitiesList, getWeather } from '@/http/api/base'
+import { getConfig, getFacilitiesList, getWeather, getColumnBtn } from '@/http/api/base'
 import { getShopAndBuildingList } from '@/http/api/shop'
 import { getDeviceInfo } from '@/http/api/building'
 import { getArtWorkList } from '@/http/api/art'
@@ -12,17 +12,27 @@ export const useInitConfigAndMallInfo = async () => {
     const store = useRootStore()
     store.SET_CONFIG(_config.data)
 
-    const [_DeviceInfo, _shopAndBuilding, _facilityList, _weather, _shopListByFloor, _shopListByIndustry, _brandInfo, _artWorkList] =
-      await Promise.all([
-        getDeviceInfo(),
-        getShopAndBuildingList(),
-        getFacilitiesList(),
-        getWeather(),
-        getShopListByFloor(),
-        getShopListByIndustry(),
-        getBrandInfo(),
-        getArtWorkList()
-      ])
+    const [
+      _DeviceInfo,
+      _shopAndBuilding,
+      _facilityList,
+      _weather,
+      _shopListByFloor,
+      _shopListByIndustry,
+      _brandInfo,
+      _artWorkList,
+      _colomList
+    ] = await Promise.all([
+      getDeviceInfo(),
+      getShopAndBuildingList(),
+      getFacilitiesList(),
+      getWeather(),
+      getShopListByFloor(),
+      getShopListByIndustry(),
+      getBrandInfo(),
+      getArtWorkList(),
+      getColumnBtn()
+    ])
 
     const { shopList, buildingList } = _shopAndBuilding.data
     store.SET_DEVICE(_DeviceInfo.data)
@@ -34,6 +44,7 @@ export const useInitConfigAndMallInfo = async () => {
     store.SET_FACILITY_LIST(_facilityList.data)
     store.SET_WEATHER(_weather.data)
     store.SET_ART_PLACE_LIST(_artWorkList.data)
+    store.SET_COLUMN_LIST(_colomList.data)
   } catch (error) {
     Message({ text: '初始化数据失败', type: 'success' })
   }
diff --git a/src/http/api/base/index.ts b/src/http/api/base/index.ts
index 8c9cb27..add5052 100644
--- a/src/http/api/base/index.ts
+++ b/src/http/api/base/index.ts
@@ -29,3 +29,9 @@ export const getFloorPicList = () => request<FloorPic[]>({ url: `${PREFIX.STATIC
 
 // 获取区域缩略图
 export const getAreaPicList = () => request<AreaPic[]>({ url: `${PREFIX.STATIC_URL}/JSON/getAreaPicList.json` })
+
+// 获取专栏按钮列表
+export const getColumnBtn = () => request<Featured[]>({ url: `${PREFIX.STATIC_URL}/JSON/getColumnBtn.json` })
+
+// 获取专栏列表
+export const getColumnList = () => request<FeaturedList[]>({ url: `${PREFIX.STATIC_URL}/JSON/getColumnList.json` })
diff --git a/src/types/featured.d.ts b/src/types/featured.d.ts
index 4385dd3..34754e0 100644
--- a/src/types/featured.d.ts
+++ b/src/types/featured.d.ts
@@ -1,22 +1,23 @@
 declare interface Featured {
-  moduleType: string
-  name: string //名称
-  nameEn: string //英文名称
-  introduce: string
-  introduceEn: string
-  crossFileCode: string //横屏图片
-  verticalFileCode: string //竖屏图片
+  id: number
+  title: string
+  content: {
+    isOpen: '开启' | '关闭'
+    logo_code: string[]
+    name: string
+    nameEn: string
+    type: '好吃的' | '好玩的' | '值得买'
+  }
 }
 
 declare interface FeaturedList {
-  nameEn: string
-  shopNameEn: string
-  point: number
-  floorOrder: number
-  floor: string
-  shopCode: stirng
-  shopName: string
-  name: string
-  houseNumber: string
-  fileUrl: string
+  id: number
+  title: string
+  content: {
+    name: string
+    nameEn: string
+    logo_code: string[]
+    point: string
+    shopCode: string
+  }
 }
diff --git a/src/views/Art/Art.vue b/src/views/Art/Art.vue
index 3c28f41..89d118e 100644
--- a/src/views/Art/Art.vue
+++ b/src/views/Art/Art.vue
@@ -2,10 +2,10 @@
   <div class="art-container">
     <div class="name">艺术装置</div>
     <div class="nameEn">ARTWORK</div>
-    <ScrollView class="myScroll" :list="[]" scroll-x>
+    <ScrollView class="myScroll" :list="artPlaceList" scroll-x scrollbar>
       <div style="display: inline-block">
         <div class="lists">
-          <ArtItem />
+          <ArtItem v-for="item in artPlaceList" :key="item.id" :art-info="item" />
         </div>
       </div>
     </ScrollView>
@@ -13,22 +13,26 @@
 </template>
 
 <script setup lang="ts">
-import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import { toRefs } from 'vue'
+import { useRootStore } from '@/store/root'
 import ArtItem from './ArtItem.vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+
+const store = useRootStore()
+const { artPlaceList } = toRefs(store)
 </script>
 
 <style lang="scss" scoped>
-:deep(.bscroll-vertical-scrollbar) {
-  width: 500px;
-  height: 1px !important;
+:deep(.bscroll-horizontal-scrollbar) {
+  z-index: 3 !important;
+  width: 500px !important;
   background: rgb(0 0 0 / 10%);
-  border-radius: 1px;
+  border-radius: 6px;
   opacity: 1 !important;
   .bscroll-indicator {
-    height: 2px !important;
     background: #e00068 !important;
     border: none !important;
-    border-radius: 1px !important;
+    border-radius: 6px !important;
   }
 }
 .art-container {
diff --git a/src/views/Art/ArtItem.vue b/src/views/Art/ArtItem.vue
index 7ba6d38..29aed31 100644
--- a/src/views/Art/ArtItem.vue
+++ b/src/views/Art/ArtItem.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="art-item">
-    <img class="pic" src="" alt="" />
+    <img class="pic" :src="artInfo.content.file_code[0]" alt="" />
     <div class="info">
       <div class="top">
         <div>
-          <div class="title"></div>
-          <div class="titleEn"></div>
+          <div class="title">{{ artInfo.content.name }}</div>
+          <div class="titleEn">{{ artInfo.content.nameEn }}</div>
         </div>
         <img src="@/assets/images/art/go.svg" alt="" />
       </div>
-      <ScrollView :list="[]" class="intro-scroll">
-        <div class="intro"></div>
+      <ScrollView :list="switchLanguage(artInfo.content, 'content')" class="intro-scroll" scrollbar>
+        <div class="intro">{{ switchLanguage(artInfo.content, 'content') }}</div>
       </ScrollView>
     </div>
   </div>
@@ -18,6 +18,12 @@
 
 <script setup lang="ts">
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
+const { switchLanguage } = useSwitchLanguage()
+type Prop = {
+  artInfo: ArtPlace
+}
+defineProps<Prop>()
 </script>
 
 <style lang="scss" scoped>
@@ -80,10 +86,12 @@ import ScrollView from '@/base/ScrollView/ScrollView.vue'
       }
     }
     .intro-scroll {
+      position: relative;
       overflow: hidden;
       width: 296px;
       height: 166px;
       .intro {
+        width: 274px;
         font-size: 12px;
         font-family: 'font_regular';
         color: #8e9090;
diff --git a/src/views/Guide/FloorPicList.vue b/src/views/Guide/FloorPicList.vue
index d204fdf..176efd9 100644
--- a/src/views/Guide/FloorPicList.vue
+++ b/src/views/Guide/FloorPicList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="floor-pic-list">
+  <div class="floor-pic-lists">
     <div
       v-for="(item, index) in picList"
       :key="item.id"
@@ -32,9 +32,9 @@ getFloorPicList().then(({ data }) => {
 </script>
 
 <style lang="scss" scoped>
-.floor-pic-list {
+.floor-pic-lists {
   position: fixed;
-  top: 232px;
+  top: 246px;
   right: 50px;
   z-index: 998;
   .floor {