6 changed files with 356 additions and 1 deletions
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<div class="examples"> |
|||
<div class="bannerBox"> |
|||
<div class="swiper-container"> |
|||
<div class="swiper-wrapper"> |
|||
<div class="swiper-slide" v-for="(item,index) in ImgNews" :key="index"> |
|||
<img :src="item.titleUrl" alt=""> |
|||
<!-- <div class="rotation-div one-text"> |
|||
{{ item.title }} |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="bannerIndex"> |
|||
<span>{{bannerIndex}}</span>/4 |
|||
</div> |
|||
<div class="tips"> |
|||
<!-- <img src="./imgs/icon_tz.png" alt="" class="tipsImg"> --> |
|||
<p>请尽量保证上传的处方文字清晰可见，并保证红框内的信息完整不缺失</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Swiper from 'swiper'; |
|||
import 'swiper/swiper.min.css'; |
|||
export default { |
|||
props: { |
|||
ImgNews: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
bannerIndex: 0, |
|||
banner: [ |
|||
{ |
|||
picture_txt: '手写的处方', |
|||
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/NEXw6KmWH5.png', |
|||
}, |
|||
{ |
|||
picture_txt: '机打的处方', |
|||
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/ZdXbcS77SK.png', |
|||
}, |
|||
{ |
|||
picture_txt: '机打的处方', |
|||
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/BKfxNfcHpH.png', |
|||
}, |
|||
{ |
|||
picture_txt: '机打的处方', |
|||
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png' |
|||
}, |
|||
{ |
|||
picture_txt: '机打的处方', |
|||
picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png' |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
let that = this; |
|||
/* eslint-disable */ |
|||
let mySwiper = new Swiper('.swiper-container', { |
|||
direction: 'horizontal', //滑动方向，可设置水平(horizontal)或垂直(vertical)。 |
|||
loop: true, // 设置为true 则开启loop模式 |
|||
autoplay: 3000, // 自动切换时间 |
|||
slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。类型：number or auto |
|||
centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。 |
|||
spaceBetween: 10, // 在slide之间设置距离（单位px）。 |
|||
loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。 |
|||
on: { |
|||
slideChangeTransitionEnd: function(){ |
|||
if(this.activeIndex === 8 || this.activeIndex === 4 ) { |
|||
that.bannerIndex = 1; |
|||
} else { |
|||
that.bannerIndex = this.activeIndex-3; |
|||
} |
|||
}, |
|||
}, |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.box{ |
|||
position: relative; |
|||
width: 100%; |
|||
height: 500px; |
|||
|
|||
} |
|||
.examples{ |
|||
position: absolute; |
|||
top: 44px; |
|||
left: 0px; |
|||
right: 0px; |
|||
bottom: 0px; |
|||
overflow: auto; |
|||
// background-color: #f5f0f0; |
|||
font-size: 14px; |
|||
.tips{ |
|||
position: absolute; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
height: 46px; |
|||
background-color: #b5654d; |
|||
text-align: center; |
|||
img{ |
|||
width: 12px; |
|||
height: 14px; |
|||
position: absolute; |
|||
top: 7.5px; |
|||
left: 12vw; |
|||
color: #fff; |
|||
} |
|||
p{ |
|||
width: 240px; |
|||
text-align: left; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
position: absolute; |
|||
left: 18vw; |
|||
top: 7px; |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
} |
|||
.bannerIndex{ |
|||
line-height: 40px; |
|||
text-align: center; |
|||
color: #666666; |
|||
font-size: 15px; |
|||
text-align: center; |
|||
span{ |
|||
color: #b5654d; |
|||
} |
|||
} |
|||
.bannerBox{ |
|||
position: relative; |
|||
height: 380px; |
|||
} |
|||
.swiper-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.swiper-container .swiper-wrapper .swiper-slide { |
|||
width: 80% !important; |
|||
overflow: hidden; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.swiper-container .swiper-wrapper .swiper-slide img { |
|||
width: 100%; |
|||
height: 380px; |
|||
border-radius: 5px; |
|||
} |
|||
.swiper-container .swiper-wrapper .swiper-slide-prev,.swiper-container .swiper-wrapper .swiper-slide-next{ |
|||
height: 340px !important; |
|||
margin-top: 20px; |
|||
} |
|||
.swiper-container .swiper-wrapper .swiper-slide-prev img,.swiper-container .swiper-wrapper .swiper-slide-next img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<div class="swiper-container"> |
|||
<div class="swiper-wrapper"> |
|||
<div class="swiper-slide" v-for="(item,index) in ImgNews" :key="index"> |
|||
<div class="rotation-box"> |
|||
<img :src="item.titleUrl" style="height: 340px;width: 100%" alt="" /> |
|||
<div class="rotation-div one-text"> |
|||
{{ item.title }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Add Pagination --> |
|||
<div class="swiper-pagination"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Swiper from 'swiper'; |
|||
import 'swiper/swiper.min.css'; |
|||
export default { |
|||
props: { |
|||
ImgNews: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
bannerIndex: 2, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
let that = this; |
|||
/* eslint-disable */ |
|||
let mySwiper = new Swiper('.swiper-container', { |
|||
slidesPerView: 5, |
|||
spaceBetween: -100, |
|||
centeredSlides: true, |
|||
loop: true, |
|||
pagination: { |
|||
el: '.swiper-pagination', |
|||
clickable: true, |
|||
}, |
|||
autoplay: { |
|||
stopOnLastSlide: true, |
|||
delay: 1000 |
|||
}, |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.swiper-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
.swiper-slide { |
|||
text-align: center; |
|||
font-size: 18px; |
|||
background: #fff; |
|||
|
|||
/* Center slide text vertically */ |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
-webkit-justify-content: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
-webkit-align-items: center; |
|||
align-items: center; |
|||
transition: 300ms; |
|||
transform: scale(0.8); |
|||
} |
|||
.swiper-slide-active,.swiper-slide-duplicate-active{ |
|||
transform: scale(1); |
|||
} |
|||
|
|||
.rotation-box { |
|||
position: relative; |
|||
width: 520px; |
|||
height: 340px; |
|||
} |
|||
|
|||
.rotation-div { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
background-color: #b61412; |
|||
color: #fff; |
|||
font-size: 1.1em; |
|||
padding: 0 16px; |
|||
z-index: 10; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue