Commit f024996e authored by youjie's avatar youjie

首页

parent cdb8ab9b
...@@ -31,9 +31,11 @@ ...@@ -31,9 +31,11 @@
<swiper-slide :key="index" :index="index" <swiper-slide :key="index" :index="index"
class="cursor-pointer"> class="cursor-pointer">
<div class="relative"> <div class="relative" :style="{'background':`url(${item.FileUrl})no-repeat`,'background-size':'cover'}"
<template v-if="item.FileType==1"> style="border-radius:10px;">
<q-img :src="item.FileUrl" alt="image" :ratio="16/9" fill="cover" <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)" v-if="index==0||index==(plugData.NavList.length-1)"
@click.stop="OpenNewUrl(item.LinkUrl)"> @click.stop="OpenNewUrl(item.LinkUrl)">
<template v-slot:error> <template v-slot:error>
...@@ -49,7 +51,7 @@ ...@@ -49,7 +51,7 @@
<q-img v-else alt="" :ratio="16/9" fill="cover"> <q-img v-else alt="" :ratio="16/9" fill="cover">
<q-video class="cursor-pointer" :src="item.FileUrl" frameborder="0" <q-video class="cursor-pointer" :src="item.FileUrl" frameborder="0"
allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/> allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
</q-img> </q-img> -->
<div class="swipercomSubEnLen absolute bg-white row items-center justify-center"> <div class="swipercomSubEnLen absolute bg-white row items-center justify-center">
<div class="swipercomSubEnNum row" v-if="windowWidth>=992"> <div class="swipercomSubEnNum row" v-if="windowWidth>=992">
<span class="swipercomSubEnN relative block font-serifEn">{{index>9?index+1:'0'+(index+1)}}</span> <span class="swipercomSubEnN relative block font-serifEn">{{index>9?index+1:'0'+(index+1)}}</span>
...@@ -85,28 +87,6 @@ ...@@ -85,28 +87,6 @@
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
</swiper> </swiper>
</div> </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" <div v-if="windowWidth<768"
class="col inSliSubDescribeToggle row justify-center items-center"> class="col inSliSubDescribeToggle row justify-center items-center">
...@@ -123,34 +103,16 @@ ...@@ -123,34 +103,16 @@
</template> </template>
<script> <script>
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from "vue-awesome-swiper";
import { slider, slideritem } from "vue-concise-slider";
import "swiper/dist/css/swiper.css"; import "swiper/dist/css/swiper.css";
import mouse from "./mouse"; import mouse from "./mouse";
export default { export default {
components: { components: {
swiper, swiper,
swiperSlide, swiperSlide,
slider,
slideritem,
mouse }, mouse },
props: ['plugData','windowWidth'], props: ['plugData','windowWidth'],
data() { data() {
return { 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, X: 0,
Y: 0, Y: 0,
Current: 'left', Current: 'left',
...@@ -173,15 +135,17 @@ ...@@ -173,15 +135,17 @@
}, },
//显示分页 //显示分页
loop: true, loop: true,
//loopFillGroupWithBlank: true,
spaceBetween: 50, spaceBetween: 50,
initialSlide: 1, initialSlide: 1,
centeredSlides: true, centeredSlides: true,
loopedSlides: 1,//开启循环 loopedSlides: 6,//开启循环
slidesPerView: 1.5,//设置平滑 slidesPerView: 1.5,//设置平滑
slidesPerGroup: 1,
//设置能够同时显示的数量(可设置 auto) //设置能够同时显示的数量(可设置 auto)
speed: 1000, speed: 1000,
autoplay: { autoplay: {
delay: 4000, delay: 4000000,
stopOnLastSlide: false, stopOnLastSlide: false,
disableOnInteraction: false disableOnInteraction: false
}, },
...@@ -209,37 +173,6 @@ ...@@ -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, swiper: null,
swiper2: null, swiper2: null,
...@@ -264,7 +197,10 @@ ...@@ -264,7 +197,10 @@
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.swiper = this.$refs.mySwiper.swiper 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); }, 500);
}, },
methods: { methods: {
...@@ -282,10 +218,8 @@ ...@@ -282,10 +218,8 @@
if(this.windowWidth<768) return if(this.windowWidth<768) return
if(text=='left'){ if(text=='left'){
this.swiper.slidePrev(); this.swiper.slidePrev();
// this.swiper2.pre()
}else if(text=='right'){ }else if(text=='right'){
this.swiper.slideNext() this.swiper.slideNext()
// this.swiper2.next()
} }
}, },
......
...@@ -400,7 +400,7 @@ ...@@ -400,7 +400,7 @@
border-radius: 10px; border-radius: 10px;
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
transition: all 0.5s; transition: all .3s;
} }
.swipercomTvR2{ .swipercomTvR2{
top: 100%; top: 100%;
...@@ -411,7 +411,7 @@ ...@@ -411,7 +411,7 @@
z-index: 2; z-index: 2;
padding: 0 20px 40px 20px; padding: 0 20px 40px 20px;
opacity: 0; opacity: 0;
transition: all 0.5s; transition: all .3s;
} }
.swipercomTitleLR2{ .swipercomTitleLR2{
font-size: 1.5rem; font-size: 1.5rem;
......
...@@ -237,7 +237,6 @@ ...@@ -237,7 +237,6 @@
}, },
created() { created() {
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
console.log(this.dataList,'--------222')
}, },
mounted() { mounted() {
//获取当前年 //获取当前年
...@@ -246,7 +245,6 @@ ...@@ -246,7 +245,6 @@
var jObj = JSON.parse(window.localStorage.getItem('HomeData')); var jObj = JSON.parse(window.localStorage.getItem('HomeData'));
this.HomeData = jObj.filter(x=>{ return x.Id == 'index_nav' }) this.HomeData = jObj.filter(x=>{ return x.Id == 'index_nav' })
if(this.HomeData.length>0) this.plugData = this.HomeData[0].plugData if(this.HomeData.length>0) this.plugData = this.HomeData[0].plugData
console.log(this.HomeData,'====')
}, },
computed: { computed: {
handleResize() { 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