123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.05.26
- *@info:图片轮播
- */
- <template>
- <div :class='[type==1?"rotationFull":(type==3?"rotationFullYlt":"rotation")]'>
- <div v-if='rotationImg.length==1' class='rotationCon'>
- <!-- <img
- src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
- alt
- />-->
- <img :src='rotationImg[0].url' alt />
- <!-- <img src='./3440.jpg' alt /> -->
- </div>
- <el-carousel v-else trigger='click' style='height:100%;width:100%' :interval='5000' arrow='always' @change='changePic'>
- <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
- <img :src='item.url' alt />
- </el-carousel-item>
- </el-carousel>
- </div>
- </template>s
- <script>
- export default {
- name: 'Rotation',
- props: ['rotationImg', 'type'],
- data() {
- return {
- rotationImgs: [{ url: require('@/assets/images/login_back.png') }]
- }
- },
- methods: {
- changePic(val) {
- this.rotationImg.forEach((el, i) => {
- if (val === i) {
- this.$store.commit('SETPIC', el.url)
- } else {
- this.$store.commit('SETPIC', '')
- }
- this.$emit('scan', el.url || '')
- })
- }
- },
- mounted() {}
- }
- </script>
- <style lang="less" scoped>
- .rotation {
- width: 100%;
- height: 100%;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- .rotationCon {
- height: 100%;
- width: 100%;
- // display: flex;
- }
- img {
- // max-width: 100%;
- // max-height: 100%;
- // display: block;
- // margin: auto;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- }
- .rotationFull {
- width: 100%;
- height: 100%;
- overflow: auto;
- display: flex;
- justify-content: center;
- align-items: center;
- .rotationCon {
- height: 100%;
- width: 100%;
- // display: flex;
- }
- img {
- // max-width: 100%;
- // max-height: 100%;
- // display: block;
- // margin: auto;
- min-width: 100%;
- }
- }
- .rotationFullYlt {
- width: 100%;
- height: 100%;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- .rotationCon {
- height: 100%;
- width: 100%;
- // display: flex;
- }
- img {
- // max-width: 100%;
- // max-height: 100%;
- // display: block;
- // margin: auto;
- width: 100%;
- height: 100%;
- object-fit: fill;
- }
- }
- </style>
- <style lang="less">
- .rotation,
- .rotationFull {
- .el-carousel__item h3 {
- color: #475669;
- font-size: 14px;
- opacity: 0.75;
- margin: 0;
- }
- .el-carousel__item:nth-child(2n) {
- background-color: #99a9bf;
- }
- .el-carousel__item:nth-child(2n + 1) {
- background-color: #d3dce6;
- }
- .el-carousel__container {
- height: 100% !important;
- }
- .el-carousel__button {
- height: 3px;
- width: 16px;
- border-radius: 2px;
- opacity: 0.5;
- }
- }
- </style>
|