|
|
@@ -180,9 +180,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div class="expert-swiper-pagination" slot="pagination"></div> -->
|
|
|
<div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
|
|
|
<div class="swiper-button-next" slot="button-next" @click="next"></div>
|
|
|
+ <div class="swiper-pagination" slot="pagination"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -548,8 +548,6 @@
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div class="swiper-button-prev" slot="button-prev" @click="prev"></div> -->
|
|
|
- <!-- <div class="swiper-button-next" slot="button-next" @click="next"></div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -645,7 +643,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <countTo :startVal='0' :endVal='420' :duration='3000'></countTo>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -895,7 +892,7 @@ export default {
|
|
|
notNextTick: true,
|
|
|
// centeredSlides: true,
|
|
|
pagination: {
|
|
|
- el: ".expert-swiper-pagination",
|
|
|
+ el: "swiper-pagination",
|
|
|
clickable: true,
|
|
|
},
|
|
|
navigation: {
|
|
|
@@ -903,47 +900,42 @@ export default {
|
|
|
prevEl: ".swiper-button-prev",
|
|
|
},
|
|
|
},
|
|
|
- honorSwiperOption: {
|
|
|
- // 配置说明直接看官网
|
|
|
- slidesPerView: "auto",
|
|
|
- paginationClickable: true,
|
|
|
- spaceBetween: 30, //轮播图左右之间的间距，配合css样式中的width实现效果
|
|
|
- // slidesOffsetBefore: 100,
|
|
|
- // slidesOffsetAfter: 100,
|
|
|
- autoplay: {
|
|
|
- delay: 3000,
|
|
|
- stopOnLastSlide: false,
|
|
|
- disableOnInteraction: false,
|
|
|
- },
|
|
|
- speed: 1000,
|
|
|
- loop: true,
|
|
|
- observer: true,
|
|
|
- observeParents: true,
|
|
|
- autoplayDisableOnInteraction: false,
|
|
|
- notNextTick: true,
|
|
|
- centeredSlides: true,
|
|
|
- },
|
|
|
- expertSwiperOption: {
|
|
|
- autoplay: 2000, //自动滑动
|
|
|
- speed: 500, //自动滑动开始到结束的时间（单位ms）
|
|
|
- loop: true, //开启循环
|
|
|
- loopedSlides: 3, //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
|
|
|
- slidesPerView: "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
|
|
|
- effect: "coverflow", //可以实现3D效果的轮播,
|
|
|
- pagination: {
|
|
|
- el: "swiper-pagination",
|
|
|
- type: "bullets",
|
|
|
- clickable: true,
|
|
|
- }, //分页器
|
|
|
- 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。
|
|
|
- },
|
|
|
- },
|
|
|
+ // honorSwiperOption: {
|
|
|
+ // // 配置说明直接看官网
|
|
|
+ // slidesPerView: "auto",
|
|
|
+ // paginationClickable: true,
|
|
|
+ // spaceBetween: 30, //轮播图左右之间的间距，配合css样式中的width实现效果
|
|
|
+ // // slidesOffsetBefore: 100,
|
|
|
+ // // slidesOffsetAfter: 100,
|
|
|
+ // autoplay: {
|
|
|
+ // delay: 3000,
|
|
|
+ // stopOnLastSlide: false,
|
|
|
+ // disableOnInteraction: false,
|
|
|
+ // },
|
|
|
+ // speed: 1000,
|
|
|
+ // loop: true,
|
|
|
+ // observer: true,
|
|
|
+ // observeParents: true,
|
|
|
+ // autoplayDisableOnInteraction: false,
|
|
|
+ // notNextTick: true,
|
|
|
+ // centeredSlides: true,
|
|
|
+ // },
|
|
|
+ // expertSwiperOption: {
|
|
|
+ // autoplay: 2000, //自动滑动
|
|
|
+ // speed: 500, //自动滑动开始到结束的时间（单位ms）
|
|
|
+ // 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。
|
|
|
+ // },
|
|
|
+ // },
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
@@ -990,7 +982,7 @@ export default {
|
|
|
return this.$refs.swiperHonorBox.swiper;
|
|
|
},
|
|
|
expertSwiper() {
|
|
|
- console.log(this.$refs.swiperExpertBox.swiper);
|
|
|
+ // console.log(this.$refs.swiperExpertBox.swiper);
|
|
|
return this.$refs.swiperExpertBox.swiper;
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -1029,8 +1021,7 @@ export default {
|
|
|
// this.swiper.autoplay.start();
|
|
|
},
|
|
|
stopExpertSwiper() {
|
|
|
- console.log(this.expertSwiper);
|
|
|
- console.log(111);
|
|
|
+ // console.log(this.expertSwiper);
|
|
|
},
|
|
|
startExpertSwiper() {
|
|
|
// console.log(this.expertSwiper);
|
|
|
@@ -1425,6 +1416,13 @@ ul.cate-nav {
|
|
|
.thinking-product-item-img {
|
|
|
width: 374px;
|
|
|
font-size: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ &:hover {
|
|
|
+ img {
|
|
|
+ transform: scale(1.2);
|
|
|
+ transition: transform 1s;
|
|
|
+ }
|
|
|
+ }
|
|
|
img {
|
|
|
border-radius: 18px 18px 0px 0px;
|
|
|
width: 100%;
|
|
|
@@ -1970,31 +1968,38 @@ ul.cate-nav {
|
|
|
.article-content-top-left {
|
|
|
width: 844px;
|
|
|
margin-right: 10px;
|
|
|
- }
|
|
|
- .article-content-info {
|
|
|
- height: 352px;
|
|
|
- position: relative;
|
|
|
- img {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- border-radius: 8px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- .info-title {
|
|
|
- width: 100%;
|
|
|
- padding: 8px 50px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 22px;
|
|
|
- position: absolute;
|
|
|
- overflow: hidden; //超出的文本隐藏
|
|
|
- text-overflow: ellipsis; //溢出用省略号显示
|
|
|
- white-space: nowrap; //溢出不换行,只能显示一行
|
|
|
- bottom: 0;
|
|
|
- background: rgba(92, 94, 93, 0.31);
|
|
|
- border-radius: 0px 0px 7px 7px;
|
|
|
+ .article-content-info {
|
|
|
+ height: 352px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ &:hover {
|
|
|
+ img {
|
|
|
+ transform: scale(1.2);
|
|
|
+ transition: transform 1s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .info-title {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 22px;
|
|
|
+ position: absolute;
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行,只能显示一行
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(92, 94, 93, 0.31);
|
|
|
+ border-radius: 0px 0px 7px 7px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.article-content-top-right {
|
|
|
@@ -2011,10 +2016,17 @@ ul.cate-nav {
|
|
|
position: relative;
|
|
|
width: 170px;
|
|
|
height: 170px;
|
|
|
+ overflow: hidden;
|
|
|
// margin-right: 6px;
|
|
|
&:nth-child(2n) {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
+ &:hover {
|
|
|
+ img {
|
|
|
+ transform: scale(1.2);
|
|
|
+ transition: transform 1s;
|
|
|
+ }
|
|
|
+ }
|
|
|
img {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
@@ -2049,6 +2061,13 @@ ul.cate-nav {
|
|
|
height: 270px;
|
|
|
border-radius: 8px;
|
|
|
margin-right: 55px;
|
|
|
+ overflow: hidden;
|
|
|
+ &:hover {
|
|
|
+ img {
|
|
|
+ transform: scale(1.2);
|
|
|
+ transition: transform 1s;
|
|
|
+ }
|
|
|
+ }
|
|
|
img {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
chending1994