Commit f024996e authored by youjie's avatar youjie

首页

parent cdb8ab9b
......@@ -31,9 +31,11 @@
<swiper-slide :key="index" :index="index"
class="cursor-pointer">
<div class="relative">
<template v-if="item.FileType==1">
<q-img :src="item.FileUrl" alt="image" :ratio="16/9" fill="cover"
<div class="relative" :style="{'background':`url(${item.FileUrl})no-repeat`,'background-size':'cover'}"
style="border-radius:10px;">
<q-img alt="image" :ratio="16/9" fill="cover"/>
<!-- <template v-if="item.FileType==1">
<q-img :src="item.FileUrl" no-default-spinner alt="image" :ratio="16/9" fill="cover"
v-if="index==0||index==(plugData.NavList.length-1)"
@click.stop="OpenNewUrl(item.LinkUrl)">
<template v-slot:error>
......@@ -49,7 +51,7 @@
<q-img v-else alt="" :ratio="16/9" fill="cover">
<q-video class="cursor-pointer" :src="item.FileUrl" frameborder="0"
allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
</q-img>
</q-img> -->
<div class="swipercomSubEnLen absolute bg-white row items-center justify-center">
<div class="swipercomSubEnNum row" v-if="windowWidth>=992">
<span class="swipercomSubEnN relative block font-serifEn">{{index>9?index+1:'0'+(index+1)}}</span>
......@@ -85,28 +87,6 @@
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- <div>
<slider
ref="mySwiper2"
:options="options2"
style="height: 100%"
>
<template slot-scope="coverflow">
<slideritem
v-for="(item, index) in plugData.NavList"
:key="index"
class="q-mx-sm">
<div class="relative">
<q-img v-if="item.FileType==1"
:ratio="16/9" fill="cover"
:src="item.FileUrl"
/>
</div>
</slideritem>
</template>
<div slot="loading">loading...</div>
</slider>
</div> -->
<div v-if="windowWidth<768"
class="col inSliSubDescribeToggle row justify-center items-center">
......@@ -123,34 +103,16 @@
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { slider, slideritem } from "vue-concise-slider";
import "swiper/dist/css/swiper.css";
import mouse from "./mouse";
export default {
components: {
swiper,
swiperSlide,
slider,
slideritem,
mouse },
props: ['plugData','windowWidth'],
data() {
return {
options2: {
currentPage: 0,
speed: 300,//滑动持续时间
itemAnimation: false,//第一个到最后一个)特效结束后才能继续滑动
centeredSlides: true,//是否居中滑动
thresholdDistance: 100,//滑动判定距离
thresholdTime: 300,//滑动判定时间
loopedSlides: 2,//无限滚动前后遍历数
slidesToScroll: 1,//每次滑动项数
loop: true,//循环滚动
autoplay: '400000',//自动滚动
pagination: false,//分页是否显示
effect:'slide',
},
X: 0,
Y: 0,
Current: 'left',
......@@ -173,15 +135,17 @@
},
//显示分页
loop: true,
//loopFillGroupWithBlank: true,
spaceBetween: 50,
initialSlide: 1,
centeredSlides: true,
loopedSlides: 1,//开启循环
loopedSlides: 6,//开启循环
slidesPerView: 1.5,//设置平滑
slidesPerGroup: 1,
//设置能够同时显示的数量(可设置 auto)
speed: 1000,
autoplay: {
delay: 4000,
delay: 4000000,
stopOnLastSlide: false,
disableOnInteraction: false
},
......@@ -209,37 +173,6 @@
}
},
},
// notNextTick: true,
// direction : 'horizontal',
// init:false,
// grabCursor: true,
// effect: 'coverflow',
// slidesPerGroup: 1,//复制若干个slid
// autoplay: false,
//是否开启自动轮播
//切换速度
// navigation: {
// prevEl: ".swiper-button-next",
// nextEl: ".swiper-button-prev"
// },
//左右箭头按钮(可自定义)
// cubeEffect: {
// slideShadows: false, //开启slide阴影。默认 true。
// shadow: false, //开启投影。默认 true。
// shadowOffset: 0, //投影距离。默认 20,单位px。
// shadowScale: 0//投影缩放比例。默认0.94。
// },
// flipEffect: {
// slideShadows: false, //slides的阴影。默认true。
// limitRotation: false, //限制最大旋转角度为180度,默认true。
// },
// coverflowEffect: {
// rotate: 0,
// stretch: 10,
// depth: 60,
// modifier: 4.7,
// slideShadows : false
// },
},
swiper: null,
swiper2: null,
......@@ -264,7 +197,10 @@
mounted() {
setTimeout(() => {
this.swiper = this.$refs.mySwiper.swiper
// this.swiper2 = this.$refs.mySwiper2;
let swiperInstance = this.$refs.mySwiper.swiper
swiperInstance.loopedSlides = this.FileUrlList.length
swiperInstance.update()
console.log(this.$refs.mySwiper.swiper.loopedSlides,'----')
}, 500);
},
methods: {
......@@ -282,10 +218,8 @@
if(this.windowWidth<768) return
if(text=='left'){
this.swiper.slidePrev();
// this.swiper2.pre()
}else if(text=='right'){
this.swiper.slideNext()
// this.swiper2.next()
}
},
......
......@@ -400,7 +400,7 @@
border-radius: 10px;
z-index: 1;
opacity: 0;
transition: all 0.5s;
transition: all .3s;
}
.swipercomTvR2{
top: 100%;
......@@ -411,7 +411,7 @@
z-index: 2;
padding: 0 20px 40px 20px;
opacity: 0;
transition: all 0.5s;
transition: all .3s;
}
.swipercomTitleLR2{
font-size: 1.5rem;
......
......@@ -237,7 +237,6 @@
},
created() {
window.addEventListener('resize', this.handleResize);
console.log(this.dataList,'--------222')
},
mounted() {
//获取当前年
......@@ -246,7 +245,6 @@
var jObj = JSON.parse(window.localStorage.getItem('HomeData'));
this.HomeData = jObj.filter(x=>{ return x.Id == 'index_nav' })
if(this.HomeData.length>0) this.plugData = this.HomeData[0].plugData
console.log(this.HomeData,'====')
},
computed: {
handleResize() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment