|
|
@@ -483,7 +483,7 @@
|
|
|
|
|
|
<!-- 专家名师 -->
|
|
|
<div class="index-expert">
|
|
|
- <div class="i-expert-content w1200">
|
|
|
+ <div class="i-expert-content">
|
|
|
<div class="e-top title-content wow animate__animated animate__fadeInDown">
|
|
|
<div class="title-zh">
|
|
|
<div class="title-en">
|
|
|
@@ -494,13 +494,11 @@
|
|
|
</div>
|
|
|
<div class="e-content-box">
|
|
|
<div class="w-innner">
|
|
|
- <div id="certify" class="w1200">
|
|
|
+ <div id="certify">
|
|
|
<div
|
|
|
class="swiper-container"
|
|
|
v-swiper:expertSwiper="expertSwiperOption"
|
|
|
ref="swiperExpertBox"
|
|
|
- @mouseenter="stopExpertSwiper"
|
|
|
- @mouseleave="startExpertSwiper"
|
|
|
>
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide">
|
|
|
@@ -893,23 +891,48 @@ export default {
|
|
|
delay: 2000,
|
|
|
disableOnInteraction: false,
|
|
|
},
|
|
|
- speed: 500, //自动滑动开始到结束的时间（单位ms）
|
|
|
+ watchSlidesProgress: true,
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ centeredSlides: true,
|
|
|
loop: true, //开启循环
|
|
|
- loopedSlides: 3, //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
|
|
|
- slidesPerView: "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
|
|
|
- // effect: "coverflow", //可以实现3D效果的轮播,
|
|
|
- centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。
|
|
|
- coverflow: {
|
|
|
- rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
|
|
|
- stretch: 100, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
|
|
|
- depth: 150, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
|
|
|
- modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
|
|
|
- slideShadows: false, //开启slide阴影。默认 true。
|
|
|
- },
|
|
|
+ initialSlide: 0,
|
|
|
+ loopedSlides: 2,
|
|
|
+ preventLinksPropagation: true,
|
|
|
+ slideToClickedSlide: true,
|
|
|
pagination: {
|
|
|
el: ".swiper-pagination",
|
|
|
clickable: true,
|
|
|
},
|
|
|
+ on: {
|
|
|
+ progress() {
|
|
|
+ for (let i = 0; i < this.slides.length; i++) {
|
|
|
+ const slide = this.slides.eq(i) // 指定匹配元素集缩减值
|
|
|
+ const slideProgress = this.slides[i].progress // 当前元素集的progress值
|
|
|
+ let modify = 1 // 偏移权重
|
|
|
+
|
|
|
+ Math.abs(slideProgress) > 1 && (modify = Math.abs(slideProgress) - 1 + 1);
|
|
|
+
|
|
|
+ // if (parseInt(Math.abs(slideProgress)) > 0) {
|
|
|
+ // modify = Math.abs(slideProgress) * 0.2 // 不一定要0.2，可自行调整
|
|
|
+ // }
|
|
|
+ const translate = slideProgress * modify * 315 + 'px' // 500是swiper-slide的宽度
|
|
|
+ const scale = 1 - Math.abs(slideProgress) / 6 // 缩放权重值，随着progress由中向两边依次递减，可自行调整
|
|
|
+ const zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
|
|
|
+
|
|
|
+ slide.transform(`translateX(${translate}) scale(${scale})`)
|
|
|
+ slide.css('zIndex', zIndex)
|
|
|
+ slide.css('opacity', 1) // 是否可见
|
|
|
+ Math.abs(slideProgress) > 3 && slide.css("opacity", 0);
|
|
|
+ // if (parseInt(Math.abs(slideProgress)) > 1) { // 设置了只有选中的元素以及他两遍的显示，其他隐藏
|
|
|
+ // slide.css('opacity', 0)
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setTransition: function (e) {
|
|
|
+ for (var t = 0; t < this.slides.length; t++)
|
|
|
+ this.slides.eq(t).transition(e);
|
|
|
+ },
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
@@ -998,12 +1021,6 @@ export default {
|
|
|
// 移出继续播放
|
|
|
// this.swiper.autoplay.start();
|
|
|
},
|
|
|
- stopExpertSwiper() {
|
|
|
- // console.log(this.expertSwiper);
|
|
|
- },
|
|
|
- startExpertSwiper() {
|
|
|
- // console.log(this.expertSwiper);
|
|
|
- },
|
|
|
prev() {
|
|
|
this.swiper.slidePrev();
|
|
|
},
|
|
|
@@ -2108,6 +2125,9 @@ ul.cate-nav {
|
|
|
margin-top: 46px;
|
|
|
}
|
|
|
.swiper-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
.swiper-wrapper {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
@@ -2115,20 +2135,6 @@ ul.cate-nav {
|
|
|
width: 630px !important;
|
|
|
height: 396px;
|
|
|
background: none;
|
|
|
- transition: 300ms;
|
|
|
- &.swiper-slide-prev {
|
|
|
- // transform: translateX(315px) scale(0.833333);
|
|
|
- // z-index: 989;
|
|
|
- }
|
|
|
- &.swiper-slide-next {
|
|
|
- // transform: translateX(-315px) scale(0.833333);
|
|
|
- // z-index: 989;
|
|
|
- }
|
|
|
- &.swiper-slide-active,
|
|
|
- .swiper-slide-duplicate-active {
|
|
|
- // transform: scale(1);
|
|
|
- // z-index: 999;
|
|
|
- }
|
|
|
img {
|
|
|
width: 630px;
|
|
|
height: 396px;
|
chending1994