liyongle
3 years ago
62 changed files with 19416 additions and 19400 deletions
File diff suppressed because it is too large
@ -1 +1,25 @@ |
|||||
{"code":200,"msg":"success","data":{"machineCode":"orZRFkOwWYOpbLImEwpjg","machineName":"CS","machineTypeName":"导视","label":"windows","screenAttribute":"1080*1920竖屏","building":"A栋","buildingCode":"DLvmtzN2qodUq_oYr7vyM","buildingOrder":0,"floor":"L1","floorCode":"nL3E-j25zxxkag_HMSGsR","floorOrder":2,"ip":"192.168.1.100","mac":"E0D55E1B2B17","location":"61","angle":"0","projectCode":"project-zert3dski8fqmgr4zhusea","regionCode":"","lensCoordinate":"","orientationCoordinate":""}} |
|
||||
|
{ |
||||
|
"code": 200, |
||||
|
"msg": "success", |
||||
|
"data": { |
||||
|
"machineCode": "orZRFkOwWYOpbLImEwpjg", |
||||
|
"machineName": "CS", |
||||
|
"machineTypeName": "导视", |
||||
|
"label": "windows", |
||||
|
"screenAttribute": "1080*1920竖屏", |
||||
|
"building": "A栋", |
||||
|
"buildingCode": "DLvmtzN2qodUq_oYr7vyM", |
||||
|
"buildingOrder": 0, |
||||
|
"floor": "L1", |
||||
|
"floorCode": "nL3E-j25zxxkag_HMSGsR", |
||||
|
"floorOrder": 2, |
||||
|
"ip": "192.168.1.100", |
||||
|
"mac": "E0D55E1B2B17", |
||||
|
"location": "61", |
||||
|
"angle": "0", |
||||
|
"projectCode": "project-zert3dski8fqmgr4zhusea", |
||||
|
"regionCode": "", |
||||
|
"lensCoordinate": "", |
||||
|
"orientationCoordinate": "" |
||||
|
} |
||||
|
} |
||||
|
|||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 920 B After Width: | Height: | Size: 858 B |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 196 KiB |
|
After Width: | Height: | Size: 918 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 953 B |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 619 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 616 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 587 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 778 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 212 B |
|
After Width: | Height: | Size: 791 B |
@ -0,0 +1,118 @@ |
|||||
|
<template> |
||||
|
<div class="header-container"> |
||||
|
<div class="left" @click="go"> |
||||
|
<div class="search-container"> |
||||
|
<img src="@/assets/images/header/search.svg" alt="" /> |
||||
|
<div class="line"></div> |
||||
|
<div> |
||||
|
<div class="text_zh">搜索</div> |
||||
|
<div class="text_en">SEARCH</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="recommend" @click="show"> |
||||
|
<img class="rem" src="@/assets/images/header/zan.svg" alt="" /> |
||||
|
<div>{{ $t('header.recommend') }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<WeaAndTime /> |
||||
|
<img class="logo" src="@/assets/images/header/logo.svg" alt="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { useRootStore } from '@/store/root' |
||||
|
import WeaAndTime from './WeaAndTime.vue' |
||||
|
|
||||
|
const store = useRootStore() |
||||
|
|
||||
|
function go() { |
||||
|
store.SET_SHOW_SEARCH(true) |
||||
|
} |
||||
|
|
||||
|
// 展示推荐弹窗 |
||||
|
function show() { |
||||
|
store.SET_SHOW_COLUMNLIST(true) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.header-container { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
z-index: 999; |
||||
|
|
||||
|
@include fl(space-between); |
||||
|
|
||||
|
width: 1920px; |
||||
|
height: 120px; |
||||
|
padding: 44px 56px 4px; |
||||
|
.left { |
||||
|
@include fl(); |
||||
|
.search-container { |
||||
|
@include fl(); |
||||
|
|
||||
|
width: 332px; |
||||
|
height: 72px; |
||||
|
padding: 16px 0 16px 32px; |
||||
|
margin-right: 12px; |
||||
|
background: rgb(255 255 255 / 40%); |
||||
|
border: 2px solid #fff; |
||||
|
border-radius: 24px; |
||||
|
img { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
.line { |
||||
|
width: 1px; |
||||
|
height: 24px; |
||||
|
margin: 0 16px; |
||||
|
background: rgb(0 0 0 / 20%); |
||||
|
} |
||||
|
.text_zh { |
||||
|
font-size: 20px; |
||||
|
font-family: 'font_regular'; |
||||
|
color: #534f46; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 28px; |
||||
|
} |
||||
|
.text_en { |
||||
|
font-size: 12px; |
||||
|
font-family: 'font_regular'; |
||||
|
color: #615c59; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 14px; |
||||
|
} |
||||
|
} |
||||
|
.recommend { |
||||
|
height: 72px; |
||||
|
padding: 13px 24px; |
||||
|
font-size: 10px; |
||||
|
font-family: 'font_regular'; |
||||
|
text-align: center; |
||||
|
color: #615c59; |
||||
|
background: rgb(255 255 255 / 30%); |
||||
|
border: 2px solid #fff; |
||||
|
border-radius: 24px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 10px; |
||||
|
.rem { |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.right { |
||||
|
@include fl(); |
||||
|
.logo { |
||||
|
width: 188px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,77 @@ |
|||||
|
<template> |
||||
|
<div class="header-right"> |
||||
|
<div class="weather"> |
||||
|
<div :class="icon.icon" class="iconfont size"></div> |
||||
|
<div>{{ weather.temperatureNow }}°</div> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
<div class="time"> |
||||
|
<p class="current">{{ currentTime }}</p> |
||||
|
<div class="year"> |
||||
|
<div>{{ formatDay(date) }}</div> |
||||
|
<div style="line-height: 12px">{{ whichWeek }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { useTime } from '@/composables/useTime' |
||||
|
import { useDay } from '@/composables/useDay' |
||||
|
import { useWeather } from '@/composables/useWeather' |
||||
|
import { formatDay } from '@/utils/utils' |
||||
|
|
||||
|
const { weather, icon } = useWeather() |
||||
|
const { currentTime } = useTime() |
||||
|
const { date, whichWeek } = useDay() |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.header-right { |
||||
|
@include fl(); |
||||
|
|
||||
|
height: 36px; |
||||
|
margin-right: 56px; |
||||
|
.weather { |
||||
|
@include fl(); |
||||
|
|
||||
|
font-size: 24px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #534f46; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 34px; |
||||
|
.size { |
||||
|
margin-right: 8px; |
||||
|
font-size: 32px; |
||||
|
color: #8e9090; |
||||
|
} |
||||
|
} |
||||
|
.line { |
||||
|
width: 1px; |
||||
|
height: 20px; |
||||
|
margin: 0 24px; |
||||
|
background: rgb(0 0 0 / 20%); |
||||
|
} |
||||
|
.time { |
||||
|
@include fl(); |
||||
|
|
||||
|
.current { |
||||
|
margin-right: 12px; |
||||
|
font-size: 24px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #534f46; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 34px; |
||||
|
} |
||||
|
.year { |
||||
|
font-size: 10px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #615c59; |
||||
|
font-weight: 700; |
||||
|
line-height: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,182 @@ |
|||||
|
<template> |
||||
|
<div class="menu-container"> |
||||
|
<div class="language-items"> |
||||
|
<div class="language-item" :class="{ active: language === 'zh' }" @click="changeLang('zh')">中</div> |
||||
|
<div class="language-item" :class="{ active: language === 'en' }" @click="changeLang('en')">EN</div> |
||||
|
</div> |
||||
|
<div class="menus"> |
||||
|
<div v-for="item in list" :key="item.title" class="menu" :class="route.fullPath === item.path && 'ac'" @click="go(item)"> |
||||
|
<img :src="item.icon" alt="" /> |
||||
|
<div> |
||||
|
<div class="title" :class="route.fullPath === item.path && 'act'">{{ item.title }}</div> |
||||
|
<div class="titleEn">{{ item.titleEn }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { storeToRefs } from 'pinia' |
||||
|
import { useRoute, useRouter } from 'vue-router' |
||||
|
import { useRootStore } from '@/store/root' |
||||
|
import { useStatisticsModel } from '@/composables/useStatistics' |
||||
|
const store = useRootStore() |
||||
|
const { language } = storeToRefs(store) |
||||
|
|
||||
|
function changeLang(lang: Language) { |
||||
|
if (lang === language.value) { |
||||
|
return |
||||
|
} |
||||
|
store.SET_LANGUAGE(lang) |
||||
|
} |
||||
|
|
||||
|
type MenuList = { |
||||
|
title: string |
||||
|
titleEn: string |
||||
|
icon: string |
||||
|
path: string |
||||
|
} |
||||
|
const list: MenuList[] = [ |
||||
|
{ |
||||
|
title: '地图导览', |
||||
|
titleEn: 'MAP', |
||||
|
icon: require('@/assets/images/menu/map.svg'), |
||||
|
path: '/' |
||||
|
}, |
||||
|
{ |
||||
|
title: '品牌列表', |
||||
|
titleEn: 'BRAND', |
||||
|
icon: require('@/assets/images/menu/brand.svg'), |
||||
|
path: '/brand' |
||||
|
}, |
||||
|
{ |
||||
|
title: '活动精选', |
||||
|
titleEn: 'SELECTION', |
||||
|
icon: require('@/assets/images/menu/activity.svg'), |
||||
|
path: '/activity' |
||||
|
}, |
||||
|
{ |
||||
|
title: '会员专享', |
||||
|
titleEn: 'MEMBER', |
||||
|
icon: require('@/assets/images/menu/member.svg'), |
||||
|
path: '/member' |
||||
|
}, |
||||
|
{ |
||||
|
title: '自主寻车', |
||||
|
titleEn: 'PARKING', |
||||
|
icon: require('@/assets/images/menu/parking.svg'), |
||||
|
path: '/parking' |
||||
|
}, |
||||
|
{ |
||||
|
title: '贴心服务', |
||||
|
titleEn: 'SERVICE', |
||||
|
icon: require('@/assets/images/menu/service.svg'), |
||||
|
path: '/service' |
||||
|
}, |
||||
|
{ |
||||
|
title: '交通信息', |
||||
|
titleEn: 'TRAFFIC', |
||||
|
icon: require('@/assets/images/menu/traffic.svg'), |
||||
|
path: '/traffic' |
||||
|
}, |
||||
|
{ |
||||
|
title: '艺术装置', |
||||
|
titleEn: 'ARTWORK', |
||||
|
icon: require('@/assets/images/menu/art.svg'), |
||||
|
path: '/art' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
const router = useRouter() |
||||
|
const route = useRoute() |
||||
|
|
||||
|
function go(item: MenuList) { |
||||
|
router.push(item.path) |
||||
|
useStatisticsModel({ recordType: 1, moduleName: item.title }) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.menu-container { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: 999; |
||||
|
width: 1920px; |
||||
|
height: 132px; |
||||
|
background: url('@/assets/images/menu/bg.svg') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
pointer-events: none; |
||||
|
& > * { |
||||
|
pointer-events: all; |
||||
|
} |
||||
|
.language-items { |
||||
|
@include fl(); |
||||
|
|
||||
|
position: absolute; |
||||
|
top: 82px; |
||||
|
left: 60px; |
||||
|
.language-item { |
||||
|
@include fl(center); |
||||
|
|
||||
|
width: 40px; |
||||
|
height: 36px; |
||||
|
font-size: 16px; |
||||
|
font-family: 'font_regular'; |
||||
|
color: #615c59; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
&.active { |
||||
|
color: #e00068; |
||||
|
background: #fff; |
||||
|
border-radius: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.menus { |
||||
|
@include fl(); |
||||
|
|
||||
|
position: absolute; |
||||
|
top: 16px; |
||||
|
left: 508px; |
||||
|
.menu { |
||||
|
@include fl(center); |
||||
|
|
||||
|
width: 168px; |
||||
|
height: 96px; |
||||
|
margin-right: 4px; |
||||
|
color: #534f46; |
||||
|
img { |
||||
|
width: 44px; |
||||
|
height: 44px; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
.title { |
||||
|
font-size: 16px; |
||||
|
font-family: 'font_regular'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
.titleEn { |
||||
|
margin-top: 2px; |
||||
|
font-size: 12px; |
||||
|
font-family: 'font_regular'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 14px; |
||||
|
} |
||||
|
} |
||||
|
.ac { |
||||
|
color: #fff; |
||||
|
background: #e00068; |
||||
|
border-radius: 40px 8px; |
||||
|
img { |
||||
|
filter: grayscale(1) brightness(800%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,90 @@ |
|||||
|
<template> |
||||
|
<div class="shop-container" @click="showDetail(shop)"> |
||||
|
<div class="top"> |
||||
|
<img :src="shop.logoUrl ? shop.logoUrl : require('@/assets/images/header/logo.svg')" class="logo" alt="" /> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<div class="shop-name">{{ switchLanguage(shop, 'shopName') }}</div> |
||||
|
<div class="right"> |
||||
|
<img v-if="shop.industryUrl" :src="shop.industryUrl" alt="" /> |
||||
|
<div class="ins">{{ shop.floor }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { useRootStore } from '@/store/root' |
||||
|
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
||||
|
interface Prop { |
||||
|
shop: Shop |
||||
|
} |
||||
|
|
||||
|
defineProps<Prop>() |
||||
|
const { switchLanguage } = useSwitchLanguage() |
||||
|
const store = useRootStore() |
||||
|
function showDetail(shop: Shop) { |
||||
|
store.SET_SHOP(shop) |
||||
|
store.SET_SHOW_DETAIL(true) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.shop-container { |
||||
|
width: 212px; |
||||
|
height: 176px; |
||||
|
background: #fff; |
||||
|
border-radius: 16px; |
||||
|
.top { |
||||
|
@include fl(center); |
||||
|
|
||||
|
position: relative; |
||||
|
width: 212px; |
||||
|
height: 136px; |
||||
|
border-radius: 16px 16px 0 0; |
||||
|
.logo { |
||||
|
width: 150px; |
||||
|
height: 150px; |
||||
|
object-fit: scale-down; |
||||
|
} |
||||
|
} |
||||
|
.bottom { |
||||
|
@include fl(space-between); |
||||
|
|
||||
|
width: 212px; |
||||
|
height: 40px; |
||||
|
padding: 9px 16px; |
||||
|
background: rgb(255 255 255 / 60%); |
||||
|
border-radius: 0 0 16px 16px; |
||||
|
.shop-name { |
||||
|
@include no-wrap; |
||||
|
|
||||
|
max-width: 120px; |
||||
|
font-size: 14px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #534f46; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
.right { |
||||
|
@include fl; |
||||
|
|
||||
|
img { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.ins { |
||||
|
font-size: 14px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #615c59; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,19 @@ |
|||||
|
import { ref, shallowRef, toRefs } from 'vue' |
||||
|
import { useRootStore } from '@/store/root' |
||||
|
import { hideMapDialog } from '@/composables/useInitMap' |
||||
|
export const useArea = () => { |
||||
|
const store = useRootStore() |
||||
|
const { shopList, device } = toRefs(store) |
||||
|
|
||||
|
const areaName = ref('全部区域') //楼层选中索引
|
||||
|
const selectedShopListA = shallowRef<Shop[]>(shopList.value.filter(item => item.floor === device.value.floor)) //选中楼层的店铺列表
|
||||
|
|
||||
|
// 切换楼层
|
||||
|
function changeArea(name: string) { |
||||
|
areaName.value = name |
||||
|
selectedShopListA.value = shopList.value.filter(item => item.floor === name) |
||||
|
hideMapDialog() |
||||
|
} |
||||
|
|
||||
|
return { areaName, selectedShopListA, changeArea } |
||||
|
} |
||||
@ -1,22 +1,20 @@ |
|||||
import { ref, shallowRef, toRefs } from 'vue' |
import { ref, shallowRef, toRefs } from 'vue' |
||||
import { useRootStore } from '@/store/root' |
import { useRootStore } from '@/store/root' |
||||
|
|
||||
|
import { hideMapDialog } from '@/composables/useInitMap' |
||||
export const useGuideFilterShop = () => { |
export const useGuideFilterShop = () => { |
||||
const store = useRootStore() |
const store = useRootStore() |
||||
const { shopList, currentBuildingFloorsList, device } = toRefs(store) |
|
||||
|
|
||||
const floorIdx = ref(-1) //楼层选中索引
|
|
||||
const selectedShopList = shallowRef<Shop[]>([]) //选中楼层的店铺列表
|
|
||||
|
const { shopList, device } = toRefs(store) |
||||
|
|
||||
function filterShopByFloorName(floorName: string) { |
|
||||
selectedShopList.value = shopList.value.filter(item => item.floor === floorName) |
|
||||
} |
|
||||
|
const floorIdx = ref(device.value.floorOrder) //楼层选中索引
|
||||
|
const selectedShopList = shallowRef<Shop[]>(shopList.value.filter(item => item.floor === device.value.floor)) //选中楼层的店铺列表
|
||||
|
|
||||
// //筛选当前楼层所需数据
|
|
||||
function filterAboutCurrentInfo() { |
|
||||
floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floor === device.value.floor) |
|
||||
selectedShopList.value = shopList.value.filter(item => item.floor === device.value.floor) |
|
||||
|
// 切换楼层
|
||||
|
function changeFloor(floorOrder: number) { |
||||
|
floorIdx.value = floorOrder |
||||
|
selectedShopList.value = shopList.value.filter(item => item.floorOrder === floorOrder) |
||||
|
hideMapDialog() |
||||
|
window.Map_QM.showFloor(floorOrder) |
||||
} |
} |
||||
|
|
||||
return { floorIdx, selectedShopList, filterShopByFloorName, filterAboutCurrentInfo } |
|
||||
|
return { floorIdx, selectedShopList, changeFloor } |
||||
} |
} |
||||
|
|||||
@ -1,7 +1,7 @@ |
|||||
import { request } from '../../http' |
import { request } from '../../http' |
||||
import type { Query } from './types' |
|
||||
import { getPrefixUrl } from '../../http' |
|
||||
|
|
||||
|
import type { Query, Clickquery } from './types' |
||||
//数据统计
|
//数据统计
|
||||
export const getStatistics = (data: Query) => |
|
||||
request({ url: `${getPrefixUrl().interfaceUrl}/analysis/v1/web/deviceUseClickDataUpload`, data, method: 'post' }) |
|
||||
|
export const getStatistics = (data: Query) => request({ url: `/analysis/v1/web/deviceUseClickDataUpload`, data, method: 'post' }) |
||||
|
|
||||
|
//数据统计(模块点击、活动点击、使用人次点击)
|
||||
|
export const getGuideClickDataUpload = (data: Clickquery) => request({ url: '/analysis/v1/web/guideClickDataUpload', data, method: 'post' }) |
||||
|
|||||
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<div class="area-container"> |
||||
|
<div |
||||
|
v-for="(item, index) in areaList" |
||||
|
:key="item" |
||||
|
class="area" |
||||
|
:class="{ ac: item === areaName, area1: index === 0 }" |
||||
|
@click="changeArea(item)" |
||||
|
> |
||||
|
<div :class="{ w1: index === 0 }">{{ item }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
const areaList = ['全部区域', 'SKP', 'K大道', '美食大道', 'SKP-S'] |
||||
|
|
||||
|
interface Prop { |
||||
|
areaName: string |
||||
|
} |
||||
|
|
||||
|
defineProps<Prop>() |
||||
|
const emit = defineEmits(['changeArea']) |
||||
|
function changeArea(name: string) { |
||||
|
emit('changeArea', name) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.area-container { |
||||
|
position: fixed; |
||||
|
top: 252px; |
||||
|
left: 536px; |
||||
|
z-index: 999; |
||||
|
width: 74px; |
||||
|
height: 400px; |
||||
|
background: rgb(255 255 255 / 30%); |
||||
|
border: 2px solid #fff; |
||||
|
border-radius: 24px; |
||||
|
backdrop-filter: blur(11px); |
||||
|
.area { |
||||
|
@include fl(center); |
||||
|
|
||||
|
width: 72px; |
||||
|
height: 80px; |
||||
|
font-size: 14px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #534f46; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: 22px; |
||||
|
.w1 { |
||||
|
width: 28px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.area1 { |
||||
|
margin: -1px; |
||||
|
background: rgb(255 255 255 / 50%); |
||||
|
border: 2px solid #fff; |
||||
|
border-radius: 24px; |
||||
|
backdrop-filter: blur(11px); |
||||
|
} |
||||
|
.ac { |
||||
|
color: #e00068; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,120 @@ |
|||||
|
<template> |
||||
|
<div class="art-list"> |
||||
|
<Transition |
||||
|
mode="out-in" |
||||
|
appear |
||||
|
enter-active-class="animate__animated animate__fadeIn" |
||||
|
leave-active-class="animate__animated animate__fadeOut" |
||||
|
> |
||||
|
<ScrollView v-if="artList.length !== 0" class="myScroll" :list="artList" :pull-up="false"> |
||||
|
<div class="lists"> |
||||
|
<div v-for="(item, index) in artList" :key="item.name" class="item"> |
||||
|
<div class="order">{{ index + 1 }}</div> |
||||
|
<div> |
||||
|
<div class="name">{{ item.name }}</div> |
||||
|
<div class="nameEn">{{ item.nameEn }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ScrollView> |
||||
|
<img v-else src="@/assets/images/stay_tuned.svg" alt="" /> |
||||
|
</Transition> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
||||
|
const artList = [ |
||||
|
{ |
||||
|
name: '花之泉广场', |
||||
|
nameEn: 'NORTH ENTRANCE FOUNTAIN SQUARE' |
||||
|
}, |
||||
|
{ |
||||
|
name: '花之泉广场', |
||||
|
nameEn: 'NORTH ENTRANCE FOUNTAIN SQUARE' |
||||
|
}, |
||||
|
{ |
||||
|
name: '花之泉广场', |
||||
|
nameEn: 'NORTH ENTRANCE FOUNTAIN SQUARE' |
||||
|
}, |
||||
|
{ |
||||
|
name: '花之泉广场', |
||||
|
nameEn: 'NORTH ENTRANCE FOUNTAIN SQUARE' |
||||
|
}, |
||||
|
{ |
||||
|
name: '花之泉广场', |
||||
|
nameEn: 'NORTH ENTRANCE FOUNTAIN SQUARE' |
||||
|
}, |
||||
|
{ |
||||
|
name: '花之泉广场', |
||||
|
nameEn: 'NORTH ENTRANCE FOUNTAIN SQUARE' |
||||
|
}, |
||||
|
{ |
||||
|
name: '花之泉广场', |
||||
|
nameEn: 'NORTH ENTRANCE FOUNTAIN SQUARE' |
||||
|
} |
||||
|
] |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.art-list { |
||||
|
@include fl(center); |
||||
|
|
||||
|
position: fixed; |
||||
|
top: 232px; |
||||
|
left: 56px; |
||||
|
z-index: 998; |
||||
|
width: 396px; |
||||
|
height: 783px; |
||||
|
.myScroll { |
||||
|
overflow: hidden; |
||||
|
height: 783px; |
||||
|
.lists { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
gap: 24px; |
||||
|
grid-auto-flow: row; |
||||
|
.item { |
||||
|
@include fl(flex-start, flex-start); |
||||
|
|
||||
|
width: 186px; |
||||
|
height: 28px; |
||||
|
.order { |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
padding: 1px 8px; |
||||
|
margin-right: 10px; |
||||
|
font-size: 14px; |
||||
|
font-family: 'font_regular'; |
||||
|
text-align: center; |
||||
|
color: var(--unnamed, #534f46); |
||||
|
background: #ceb9ab; |
||||
|
border-radius: 18px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
margin-bottom: 2px; |
||||
|
font-size: 12px; |
||||
|
font-family: 'font_regular'; |
||||
|
color: #534f46; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 14px; |
||||
|
} |
||||
|
|
||||
|
.nameEn { |
||||
|
font-size: 8px; |
||||
|
font-family: 'font_regular'; |
||||
|
color: #615c59; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,77 @@ |
|||||
|
<template> |
||||
|
<div class="floor-list"> |
||||
|
<div class="floor all" :class="floorIdx === -1 && 'ac'" @click="changeFloor(-1)"> |
||||
|
<div class="name">ALL</div> |
||||
|
</div> |
||||
|
<div |
||||
|
v-for="item in currentBuildingFloorsList" |
||||
|
:key="item.floorCode" |
||||
|
class="floor" |
||||
|
:class="floorIdx === item.floorOrder && 'ac'" |
||||
|
@click="changeFloor(item.floorOrder)" |
||||
|
> |
||||
|
<div class="name">{{ item.floor }}</div> |
||||
|
<img v-if="item.floorOrder === device.floorOrder" src="@/assets/images/guide/point.svg" alt="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { useRootStore } from '@/store/root' |
||||
|
import { toRefs } from 'vue' |
||||
|
|
||||
|
interface Prop { |
||||
|
floorIdx: number |
||||
|
} |
||||
|
|
||||
|
defineProps<Prop>() |
||||
|
const emit = defineEmits(['changeFloor']) |
||||
|
const store = useRootStore() |
||||
|
const { currentBuildingFloorsList, device } = toRefs(store) |
||||
|
function changeFloor(floorOrder: number) { |
||||
|
emit('changeFloor', floorOrder) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.floor-list { |
||||
|
position: fixed; |
||||
|
top: 152px; |
||||
|
right: 50px; |
||||
|
z-index: 999; |
||||
|
.floor { |
||||
|
@include fl(center); |
||||
|
|
||||
|
position: relative; |
||||
|
width: 72px; |
||||
|
height: 86px; |
||||
|
margin-bottom: 8px; |
||||
|
color: #534f46; |
||||
|
background: rgb(255 255 255 / 50%); |
||||
|
border: 2px solid #fff; |
||||
|
border-radius: 24px; |
||||
|
backdrop-filter: blur(11px); |
||||
|
.name { |
||||
|
font-size: 18px; |
||||
|
font-family: 'font_bold'; |
||||
|
text-align: center; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
img { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
right: 10px; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
} |
||||
|
.all { |
||||
|
height: 72px; |
||||
|
} |
||||
|
.ac { |
||||
|
color: #fff; |
||||
|
background: #e00068; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,36 @@ |
|||||
|
<template> |
||||
|
<div class="floor-pic-list"> |
||||
|
<div v-for="item in currentBuildingFloorsList" :key="item.floorCode" class="floor"> |
||||
|
<img :src="item.floorMapUrl" alt="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { useRootStore } from '@/store/root' |
||||
|
import { toRefs } from 'vue' |
||||
|
const store = useRootStore() |
||||
|
const { currentBuildingFloorsList } = toRefs(store) |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.floor-pic-list { |
||||
|
position: fixed; |
||||
|
top: 232px; |
||||
|
right: 50px; |
||||
|
z-index: 998; |
||||
|
.floor { |
||||
|
width: 296px; |
||||
|
height: 86px; |
||||
|
padding: 3px 0; |
||||
|
margin-bottom: 8px; |
||||
|
background: linear-gradient(270deg, rgb(138 118 106 / 10%) 0%, rgb(138 118 106 / 0%) 100%); |
||||
|
border: 2px solid #fff; |
||||
|
border-radius: 0 24px 24px 0; |
||||
|
img { |
||||
|
width: 200px; |
||||
|
height: 80px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,13 +1,359 @@ |
|||||
<template> |
<template> |
||||
<div class="guide-container"></div> |
|
||||
|
<div class="guide-container"> |
||||
|
<!-- 楼层列表 --> |
||||
|
<Transition appear enter-active-class="animate__animated animate__fadeInRight"> |
||||
|
<Floor :floor-idx="floorIdx" @change-floor="changeFloor" /> |
||||
|
</Transition> |
||||
|
|
||||
|
<!-- 区域列表 --> |
||||
|
<Transition appear enter-active-class="animate__animated animate__fadeIn"> |
||||
|
<Area v-if="floorIdx !== -1" :area-name="areaName" @change-area="changeArea" /> |
||||
|
</Transition> |
||||
|
|
||||
|
<!-- 店铺列表 --> |
||||
|
<ShopList v-if="floorIdx !== -1" :list="selectedShopList" /> |
||||
|
|
||||
|
<!-- 设备 --> |
||||
|
<Transition appear enter-active-class="animate__animated animate__fadeIn"> |
||||
|
<div v-if="floorIdx !== -1" class="fac"> |
||||
|
<ScrollView :list="facilityList" :scroll-x="true" class="art-myScroll"> |
||||
|
<div style="display: inline-block"> |
||||
|
<div class="artList"> |
||||
|
<div v-for="item in artPlaceList" :key="item.name" class="art-item"> |
||||
|
<img class="logo" :src="item.icon" alt="" /> |
||||
|
<div class="name">{{ switchLanguage(item, 'name') }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ScrollView> |
||||
|
<div class="faclists"> |
||||
|
<div v-for="(item, index) in list" :key="item.name" class="reset-dir" @click="handleMapIcon(item, index)"> |
||||
|
<div class="top" :class="mapIdx === index && 'ac'"> |
||||
|
<img :src="item.icon" alt="" /> |
||||
|
</div> |
||||
|
<div class="txt">{{ switchLanguage(item, 'name') }}</div> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
<ScrollView :list="facilityList" :scroll-x="true" class="myScroll"> |
||||
|
<div style="display: inline-block"> |
||||
|
<div class="faclist"> |
||||
|
<div v-for="item in facilityList" :key="item.code" class="fac-item" @click="handleFacility(item)"> |
||||
|
<img class="logo" :src="item.filePath" alt="" /> |
||||
|
<div class="name">{{ switchLanguage(item, 'name') }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ScrollView> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else class="art-fac"> |
||||
|
<ScrollView :list="facilityList" :scroll-x="true" class="myScroll"> |
||||
|
<div style="display: inline-block"> |
||||
|
<div class="art-faclist"> |
||||
|
<div v-for="item in facilityList" :key="item.code" class="art-fac-item" @click="handleFacility(item)"> |
||||
|
<img class="logo" :src="item.filePath" alt="" /> |
||||
|
<div> |
||||
|
<div class="name">{{ item.name }}</div> |
||||
|
<div class="nameEn">{{ item.nameEn }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ScrollView> |
||||
|
</div> |
||||
|
</Transition> |
||||
|
|
||||
|
<!-- 手势 --> |
||||
|
<Transition appear enter-active-class="animate__animated animate__fadeIn"> |
||||
|
<img v-if="language === 'zh'" class="point" src="@/assets/images/guide/tip_zh.svg" alt="" /> |
||||
|
<img v-else class="point" src="@/assets/images/guide/tip_en.svg" alt="" /> |
||||
|
</Transition> |
||||
|
|
||||
|
<!-- 区域缩略图 --> |
||||
|
<Transition appear enter-active-class="animate__animated animate__fadeIn"> |
||||
|
<img v-if="floorIdx !== -1" class="area" src="@/assets/images/guide/area_emp.svg" alt="" /> |
||||
|
</Transition> |
||||
|
|
||||
|
<!-- 人行道等 --> |
||||
|
<Transition appear enter-active-class="animate__animated animate__fadeIn"> |
||||
|
<Place v-if="floorIdx === -1" /> |
||||
|
</Transition> |
||||
|
|
||||
|
<!-- 艺术品列表 --> |
||||
|
<ArtList v-if="floorIdx === -1" /> |
||||
|
|
||||
|
<!-- 楼层缩略图 --> |
||||
|
<div v-if="floorIdx === -1" class="floor-pic-list"> |
||||
|
<div |
||||
|
v-for="(item, index) in floorlist" |
||||
|
:key="index" |
||||
|
class="floor animate__animated animate__fadeIn" |
||||
|
:style="{ animationDelay: index / 5 + 's' }" |
||||
|
> |
||||
|
<img :src="item" alt="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
|
import { toRefs } from 'vue' |
||||
|
import { useRootStore } from '@/store/root' |
||||
import { useGuideMapOperation } from '@/composables/useGuideMapOperation' |
import { useGuideMapOperation } from '@/composables/useGuideMapOperation' |
||||
import { useFacilityNav } from '@/composables/useFacilityNav' |
import { useFacilityNav } from '@/composables/useFacilityNav' |
||||
import { useGuideFilterShop } from '@/composables/useGuideFilterShop' |
import { useGuideFilterShop } from '@/composables/useGuideFilterShop' |
||||
|
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
||||
|
import { useArea } from '@/composables/useArea' |
||||
|
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
||||
|
import Floor from './Floor.vue' |
||||
|
import Area from './Area.vue' |
||||
|
import ShopList from './ShopList.vue' |
||||
|
import Place from './Place.vue' |
||||
|
import ArtList from './ArtList.vue' |
||||
|
|
||||
const { floorIdx, selectedShopList, filterShopByFloorName, filterAboutCurrentInfo } = useGuideFilterShop() //筛选楼层 |
|
||||
const { switchFloor, handleMapIcon, list, mapIdx } = useGuideMapOperation() //复位 位置等操作 |
|
||||
|
const store = useRootStore() |
||||
|
const { switchLanguage } = useSwitchLanguage() |
||||
|
const { language, facilityList } = toRefs(store) |
||||
|
const { floorIdx, selectedShopList, changeFloor } = useGuideFilterShop() //筛选楼层 |
||||
|
const { areaName, selectedShopListA, changeArea } = useArea() //筛选楼层 |
||||
|
const { handleMapIcon, list, mapIdx } = useGuideMapOperation() //复位 位置等操作 |
||||
const { handleFacility } = useFacilityNav() //公共设施导航 |
const { handleFacility } = useFacilityNav() //公共设施导航 |
||||
|
// handleMapIcon(list[1], 1) |
||||
|
const floorlist = [ |
||||
|
require('@/assets/images/guide/minMap.svg'), |
||||
|
require('@/assets/images/guide/minMap.svg'), |
||||
|
require('@/assets/images/guide/minMap.svg'), |
||||
|
require('@/assets/images/guide/minMap.svg'), |
||||
|
require('@/assets/images/guide/minMap.svg'), |
||||
|
require('@/assets/images/guide/minMap.svg') |
||||
|
] |
||||
|
|
||||
|
const artPlaceList = [ |
||||
|
{ |
||||
|
name: '猩猩的太空漫步', |
||||
|
nameEn: 'dddd', |
||||
|
icon: '' |
||||
|
}, |
||||
|
{ |
||||
|
name: '共生', |
||||
|
nameEn: 'dddd', |
||||
|
icon: '' |
||||
|
}, |
||||
|
{ |
||||
|
name: '超新星', |
||||
|
nameEn: 'dddd', |
||||
|
icon: '' |
||||
|
}, |
||||
|
{ |
||||
|
name: '盛开的山谷', |
||||
|
nameEn: 'dddd', |
||||
|
icon: '' |
||||
|
}, |
||||
|
{ |
||||
|
name: '琥珀', |
||||
|
nameEn: 'dddd', |
||||
|
icon: '' |
||||
|
} |
||||
|
] |
||||
</script> |
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.guide-container { |
||||
|
.fac { |
||||
|
@include fl(space-between); |
||||
|
|
||||
|
position: fixed; |
||||
|
bottom: 132px; |
||||
|
left: 488px; |
||||
|
z-index: 999; |
||||
|
width: 1432px; |
||||
|
height: 120px; |
||||
|
padding: 26px 56px 0 48px; |
||||
|
background: linear-gradient(275deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 8%) 80.56%, rgb(255 255 255 / 0%) 100%); |
||||
|
.art-myScroll { |
||||
|
overflow: hidden; |
||||
|
max-width: 340px; |
||||
|
.artList { |
||||
|
@include fl(flex-start, flex-start); |
||||
|
.art-item { |
||||
|
margin-right: 16px; |
||||
|
text-align: center; |
||||
|
.logo { |
||||
|
width: 44px; |
||||
|
height: 44px; |
||||
|
margin-bottom: 6px; |
||||
|
border-radius: 14px; |
||||
|
} |
||||
|
.name { |
||||
|
width: 48px; |
||||
|
font-size: 12px; |
||||
|
font-family: 'font_regular'; |
||||
|
text-align: center; |
||||
|
color: #8e9090; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.faclists { |
||||
|
@include fl(flex-start, flex-start); |
||||
|
.reset-dir { |
||||
|
width: 48px; |
||||
|
height: 64px; |
||||
|
margin-right: 16px; |
||||
|
text-align: center; |
||||
|
.top { |
||||
|
@include fl(center); |
||||
|
|
||||
|
width: 44px; |
||||
|
height: 44px; |
||||
|
margin-bottom: 6px; |
||||
|
background: #fff; |
||||
|
border-radius: 12px; |
||||
|
img { |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
} |
||||
|
} |
||||
|
.ac { |
||||
|
background: #e00068; |
||||
|
img { |
||||
|
filter: grayscale(1) brightness(500%); |
||||
|
} |
||||
|
} |
||||
|
.txt { |
||||
|
width: 48px; |
||||
|
font-size: 12px; |
||||
|
font-family: 'font_regular'; |
||||
|
text-align: center; |
||||
|
color: #8e9090; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 12px; |
||||
|
} |
||||
|
} |
||||
|
.line { |
||||
|
width: 1px; |
||||
|
height: 32px; |
||||
|
margin: 0 32px 0 16px; |
||||
|
background: rgb(0 0 0 / 10%); |
||||
|
} |
||||
|
.myScroll { |
||||
|
overflow: hidden; |
||||
|
width: 592px; |
||||
|
.faclist { |
||||
|
@include fl(flex-start, flex-start); |
||||
|
.fac-item { |
||||
|
margin-right: 16px; |
||||
|
text-align: center; |
||||
|
.logo { |
||||
|
width: 44px; |
||||
|
height: 44px; |
||||
|
margin-bottom: 6px; |
||||
|
border-radius: 14px; |
||||
|
} |
||||
|
.name { |
||||
|
width: 48px; |
||||
|
font-size: 12px; |
||||
|
font-family: 'font_regular'; |
||||
|
text-align: center; |
||||
|
color: #8e9090; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.art-fac { |
||||
|
@include fl(center); |
||||
|
|
||||
|
position: fixed; |
||||
|
bottom: 132px; |
||||
|
left: 488px; |
||||
|
z-index: 999; |
||||
|
width: 1432px; |
||||
|
height: 120px; |
||||
|
background: linear-gradient(275deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 8%) 80.56%, rgb(255 255 255 / 0%) 100%); |
||||
|
.myScroll { |
||||
|
overflow: hidden; |
||||
|
max-width: 1343px; |
||||
|
.art-faclist { |
||||
|
@include fl(flex-start, flex-start); |
||||
|
.art-fac-item { |
||||
|
@include fl(); |
||||
|
|
||||
|
margin-right: 40px; |
||||
|
.logo { |
||||
|
width: 28px; |
||||
|
height: 28px; |
||||
|
margin-right: 8px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.name { |
||||
|
font-size: 12px; |
||||
|
font-family: 'font_regular'; |
||||
|
white-space: nowrap; |
||||
|
color: #8e9090; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 14px; |
||||
|
} |
||||
|
.nameEn { |
||||
|
font-size: 8px; |
||||
|
font-family: 'font_regular'; |
||||
|
white-space: nowrap; |
||||
|
color: #615c59; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 12px; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.point { |
||||
|
position: fixed; |
||||
|
top: 40px; |
||||
|
left: 528px; |
||||
|
z-index: 999; |
||||
|
width: 246px; |
||||
|
height: 80px; |
||||
|
} |
||||
|
|
||||
|
.area { |
||||
|
position: fixed; |
||||
|
top: 152px; |
||||
|
right: 170px; |
||||
|
z-index: 999; |
||||
|
width: 256px; |
||||
|
height: 100px; |
||||
|
} |
||||
|
|
||||
|
.floor-pic-list { |
||||
|
position: fixed; |
||||
|
top: 232px; |
||||
|
right: 50px; |
||||
|
z-index: 998; |
||||
|
.floor { |
||||
|
width: 296px; |
||||
|
height: 86px; |
||||
|
padding: 3px 0; |
||||
|
margin-bottom: 8px; |
||||
|
background: linear-gradient(270deg, rgb(138 118 106 / 10%) 0%, rgb(138 118 106 / 0%) 100%); |
||||
|
border-radius: 0 24px 24px 0; |
||||
|
img { |
||||
|
width: 200px; |
||||
|
height: 80px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -0,0 +1,75 @@ |
|||||
|
<template> |
||||
|
<div class="place-container"> |
||||
|
<div v-for="item in placeList" :key="item.name" class="item"> |
||||
|
<div |
||||
|
class="bar" |
||||
|
:style="{ backgroundColor: item.backgroundColor, borderColor: item.borderColor ? item.borderColor : item.backgroundColor }" |
||||
|
></div> |
||||
|
<div> |
||||
|
<div class="text">{{ item.name }}</div> |
||||
|
<div class="textEn">{{ item.nameEn }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
const placeList = [ |
||||
|
{ |
||||
|
name: '车行通道', |
||||
|
nameEn: 'TRAVEL LANE', |
||||
|
backgroundColor: '#615C59', |
||||
|
borderColor: '#615C59' |
||||
|
}, |
||||
|
{ |
||||
|
name: '人行通道', |
||||
|
nameEn: 'PEDESTRIAN LANE', |
||||
|
backgroundColor: '#FFF', |
||||
|
borderColor: '#615C59' |
||||
|
}, |
||||
|
{ |
||||
|
name: '水景', |
||||
|
nameEn: 'WATERSCAPE', |
||||
|
backgroundColor: '#61B5D0', |
||||
|
borderColor: '#61B5D0' |
||||
|
} |
||||
|
] |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.place-container { |
||||
|
@include fl(); |
||||
|
|
||||
|
position: fixed; |
||||
|
top: 152px; |
||||
|
left: 56px; |
||||
|
z-index: 999; |
||||
|
.item { |
||||
|
@include fl(); |
||||
|
|
||||
|
margin-right: 28px; |
||||
|
.bar { |
||||
|
width: 45px; |
||||
|
height: 12px; |
||||
|
margin-right: 10px; |
||||
|
border: 1px solid; |
||||
|
} |
||||
|
.text { |
||||
|
font-size: 12px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #615c59; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 14px; |
||||
|
} |
||||
|
.textEn { |
||||
|
font-size: 8px; |
||||
|
font-family: 'font_regular'; |
||||
|
color: #8e9090; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,49 @@ |
|||||
|
<template> |
||||
|
<div class="shop-list"> |
||||
|
<Transition |
||||
|
mode="out-in" |
||||
|
appear |
||||
|
enter-active-class="animate__animated animate__fadeIn" |
||||
|
leave-active-class="animate__animated animate__fadeOut" |
||||
|
> |
||||
|
<ScrollView v-if="list.length !== 0" class="myScroll" :list="list" :pull-up="false"> |
||||
|
<div class="lists"> |
||||
|
<ShopItem v-for="item in list" :key="item.shopCode" :shop="item" :type="false" /> |
||||
|
</div> |
||||
|
</ScrollView> |
||||
|
<img v-else src="@/assets/images/stay_tuned.svg" alt="" /> |
||||
|
</Transition> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
||||
|
import ShopItem from '@/components/ShopItem/ShopItem.vue' |
||||
|
interface Prop { |
||||
|
list: Shop[] |
||||
|
} |
||||
|
defineProps<Prop>() |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.shop-list { |
||||
|
@include fl(center); |
||||
|
|
||||
|
position: fixed; |
||||
|
top: 152px; |
||||
|
left: 56px; |
||||
|
z-index: 998; |
||||
|
width: 432px; |
||||
|
height: 864px; |
||||
|
.myScroll { |
||||
|
overflow: hidden; |
||||
|
height: 864px; |
||||
|
.lists { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
gap: 8px; |
||||
|
grid-auto-flow: row; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue