<template> <div class="app-container" :class="[pageMode === 'pageMode2560' ? 'pageMode2560' : '']" > <div class="tag—title"> 物联感知 </div> <div class="swiper-detail" @click="detailClick"> <img class="detail-img" :src=" `https://zhld.wlcszhld.com:8443/qjzh-fs/preview/permanent/iot/icon/${deviceDetail.iconClass}_detail.png` " /> <div class="detail-content"> <div class="content-item-2"> <span class="label">设备名称:</span> <span class="value">{{ deviceDetail.productGroupName }}</span> </div> <div class="content-item-2"> <span class="label">设备数量:</span> <span class="value">{{ deviceDetail.totalNum + 100 }}个</span> </div> </div> </div> <div class="swiper-box"> <swiper v-if="deviceList.length > 0" ref="mySwiper" :options="swiperOptions" > <swiper-slide v-for="(item, index) in deviceList" :key="index"> <img class="swiper-img" :src=" `https://zhld.wlcszhld.com:8443/qjzh-fs/preview/permanent/iot/icon/${item.iconClass}_pressed.svg` " @click="clickImg(item)" /> </swiper-slide> </swiper> </div> </div> </template> <script> import { getPerceptionDevice } from '@/api/cockpit'; export default { name: 'PerceptionDevice', props: { pageMode: { type: String, default: 'pageMode3480' } }, data() { const that = this; return { imgIndex: 0, deviceList: [], deviceDetail: { productGroupCode: '', productGroupName: '', totalNum: 0, iconClass: 'map_AI' }, swiperOptions: { slidesPerView: 5, autoplay: { stopOnLastSlide: false, disableOnInteraction: false }, delay: 1000, loop: true, spaceBetween: 15, // 间隔30 on: { slideChangeTransitionStart() { that.imgIndex = this.realIndex; } } } }; }, watch: { imgIndex(newVal) { this.deviceDetail = this.deviceList[newVal]; } }, mounted() { this.queryDeviceList(); }, methods: { detailClick() { this.$emit('deviceClick', this.deviceDetail.productGroupCode); }, clickImg(item) { this.deviceDetail = item; }, async queryDeviceList() { const form = new FormData(); form.append('token', this.$store.getters.token); getPerceptionDevice(form).then(ret => { const res = ret.data.body; this.deviceList = res; this.deviceDetail = res[0]; }); } } }; </script> <style lang="scss" scoped> .app-container { width: 100%; height: 100%; padding: 0px 14px; .tag—title { width: 100%; height: 47px; font-size: 20px; color: #1af1e9; line-height: 47px; background: url('~@/assets/images/bigScreen/top-figure2.png') no-repeat; background-size: 100% 100%; } &.pageMode2560 { padding: 0 60px 0 55px; .tag—title { height: 34px; padding-left: 38px; line-height: 34px; text-align: left; color: #fff; background: url('~@/assets/images/bigScreen/title-bg2560.png') no-repeat; background-size: 100% 100%; } } .swiper-detail { width: 100%; height: 150px; display: flex; padding: 10px 20px; margin-bottom: 20px; cursor: pointer; .detail-img { width: 240px; height: 140px; border: 1px solid #fff; } .detail-content { height: 150px; padding: 24px 0 0 10px; .content-item-2 { line-height: 40px; margin-bottom: 10px; font-size: 22px; .label { margin-right: 10px; color: #faf889; } .value { color: #16fdfe; } } } } .swiper-box { width: 100%; height: 80px; .swiper-container { width: 500px; height: 70px; .swiper-slide { width: 100%; height: 100%; } .swiper-img { width: 98%; height: 100%; object-fit: fill; border: 1px solid #fff; cursor: pointer; } } } } </style>
标签:vue,awesome,height,padding,width,deviceDetail,100%,swiper From: https://www.cnblogs.com/guwufeiyang/p/18258279