liyongle
3 years ago
17 changed files with 984 additions and 40 deletions
@ -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" |
|||
}] |
|||
} |
|||
} |
|||
|
|||
|
After Width: | Height: | Size: 563 B |
|
Before Width: | Height: | Size: 285 B After Width: | Height: | Size: 285 B |
|
Before Width: | Height: | Size: 242 B After Width: | Height: | Size: 242 B |
|
Before Width: | Height: | Size: 245 B After Width: | Height: | Size: 245 B |
|
Before Width: | Height: | Size: 274 B After Width: | Height: | Size: 274 B |
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue