xiuos_IoT/xiuosiot-frontend/src/views/overview/index.vue

101 lines
2.6 KiB
Vue

<!--
* @Author: 龚祖望 573413756@qq.com
* @Date: 2022-05-16 09:16:41
* @LastEditors: 龚祖望 573413756@qq.com
* @LastEditTime: 2023-04-18 17:02:58
* @FilePath: \dashengda\src\views\dashboard\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="dashboard-container">
<swiper ref="mySwiper" :options="swiperOption" style="width:100%">
<swiper-slide>
<img class="slide-img" :src="slide1">
</swiper-slide>
<swiper-slide>
<img class="slide-img" :src="slide2">
</swiper-slide>
<swiper-slide>
<img class="slide-img" src="@/assets/images/slide3.png">
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import "swiper/css";
import { mapGetters } from 'vuex'
export default {
name: 'Overview',
components: { swiper, swiperSlide },
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
}
},
slide1: null,
slide2: null
}
},
computed: {
...mapGetters(['abbrCorpName'])
},
created() {
switch (this.abbrCorpName) {
case '大胜达':
this.slide1 = require('@/assets/images/dashengda-slide1.png')
this.slide2 = require('@/assets/images/dashengda-slide2.png')
break
case '杭萧钢构':
this.slide1 = require('@/assets/images/hangxiao-slide1.png')
this.slide2 = require('@/assets/images/hangxiao-slide2.png')
break
case '江西师大':
this.slide1 = require('@/assets/images/jxsd-slide1.png')
this.slide2 = require('@/assets/images/jxsd-slide2.png')
break
case '钱江电气':
this.slide1 = require('@/assets/images/qianjiang-slide1.png')
this.slide2 = require('@/assets/images/qianjiang-slide2.png')
break
case '泛在':
this.slide1 = require('@/assets/images/dashengda-slide1.png')
this.slide2 = require('@/assets/images/dashengda-slide2.png')
break
}
},
mounted() {
const imgs = document.getElementsByClassName('slide-img')
imgs.forEach(item => {
item.style.height = (window.innerHeight - 115) + 'px'
})
}
}
</script>
<style lang="scss" scoped>
// @import "swiper/css/swiper.css";
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
.swiper-slide-active{
width: 100% !important;
}
img{
width: 100%;
height: 100%;
}
</style>