You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.7 KiB
130 lines
3.7 KiB
<template>
|
|
<swiper
|
|
id="screen"
|
|
:virtual="true"
|
|
:direction="'vertical'"
|
|
:slidesPerView="1"
|
|
:spaceBetween="0"
|
|
:mousewheel="true"
|
|
:speed="800"
|
|
:pagination="pagination"
|
|
:keyboard="{
|
|
enabled: true,
|
|
onlyInViewport: false,
|
|
pageUpDown: true,
|
|
}"
|
|
@swiper="onSwiper"
|
|
@slideChange="onSlideChange"
|
|
:modules="modules"
|
|
class="home_swiper"
|
|
>
|
|
<swiper-slide :key="0" :virtualIndex="0">
|
|
<HeaderSwiper />
|
|
</swiper-slide>
|
|
<swiper-slide :key="1" :virtualIndex="1">
|
|
<Service />
|
|
</swiper-slide>
|
|
<swiper-slide :key="2" :virtualIndex="2">
|
|
<Cooperation />
|
|
</swiper-slide>
|
|
<swiper-slide :key="3" :virtualIndex="3">
|
|
<CasePictureList />
|
|
</swiper-slide>
|
|
<swiper-slide :key="4" :virtualIndex="4">
|
|
<SoftHardwareSummary />
|
|
</swiper-slide>
|
|
<swiper-slide :key="5" :virtualIndex="5">
|
|
<SoftHardwareDetail />
|
|
</swiper-slide>
|
|
<swiper-slide :key="6" :virtualIndex="6">
|
|
<Culture />
|
|
</swiper-slide>
|
|
<swiper-slide :key="7" :virtualIndex="7">
|
|
<Culture />
|
|
</swiper-slide>
|
|
<swiper-slide :key="8" :virtualIndex="8">
|
|
<CorporateCulture />
|
|
</swiper-slide>
|
|
<swiper-slide :key="9" :virtualIndex="9">
|
|
<VideoPlayer />
|
|
</swiper-slide>
|
|
<swiper-slide :key="10" :virtualIndex="10">
|
|
<ContactUs />
|
|
</swiper-slide>
|
|
</swiper>
|
|
</template>
|
|
<script>
|
|
import { onMounted } from 'vue'
|
|
import { useSwiperStore } from '@/store'
|
|
// Import Swiper Vue.js components
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
// import required modules
|
|
import { Mousewheel, Pagination, Virtual, Keyboard } from 'swiper'
|
|
// import views to swiper
|
|
import Service from '@/views/Index/components/Service'
|
|
import HeaderSwiper from '@/views/Index/components/HeaderSwiper'
|
|
import VideoPlayer from '@/views/Index/components/VideoPlayer'
|
|
import CaseSummary from '@/views/Index/components/CaseSummary'
|
|
import CasePictureList from '@/views/Index/components/CasePictureList'
|
|
import CaseDetails from '@/views/Index/components/CaseDetails'
|
|
import ContactUs from '@/views/Index/components/ContactUs'
|
|
import CircuitBoard from '@/views/Index/components/CircuitBoard'
|
|
import Culture from '@/views/Index/components/Culture'
|
|
import SoftHardwareSummary from '@/views/Index/components/SoftHardwareSummary'
|
|
import CorporateCulture from '@/views/Index/components/CorporateCulture'
|
|
import SoftHardwarePictureList from '@/views/Index/components/SoftHardwarePictureList'
|
|
import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
|
|
import Cooperation from '@/views/Index/components/Cooperation'
|
|
import { totalPageAni } from '@/common/utils'
|
|
// Import Swiper styles
|
|
import 'swiper/css'
|
|
import 'swiper/css/pagination'
|
|
|
|
export default {
|
|
components: {
|
|
Swiper,
|
|
SwiperSlide,
|
|
ContactUs,
|
|
VideoPlayer,
|
|
CircuitBoard,
|
|
CorporateCulture,
|
|
Culture,
|
|
Cooperation,
|
|
CaseDetails,
|
|
HeaderSwiper,
|
|
Service,
|
|
CaseSummary,
|
|
SoftHardwarePictureList,
|
|
SoftHardwareDetail,
|
|
SoftHardwareSummary,
|
|
CasePictureList,
|
|
},
|
|
setup() {
|
|
const onSwiper = swiper => {
|
|
const swiperStore = useSwiperStore()
|
|
swiperStore.initSwiper(swiper)
|
|
}
|
|
const onSlideChange = swiper => {
|
|
const { activeIndex } = swiper
|
|
const swiperStore = useSwiperStore()
|
|
swiperStore.initSwiper(swiper)
|
|
swiperStore.updateActiveIndex(activeIndex)
|
|
// add animate to some ele
|
|
totalPageAni()
|
|
}
|
|
return {
|
|
onSwiper,
|
|
onSlideChange,
|
|
pagination: {
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
return '<div class="' + className + '"></div>'
|
|
},
|
|
},
|
|
modules: [Mousewheel, Pagination, Virtual, Keyboard],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|