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