123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.05.26
- *@info:图片轮播
- */
- <template>
- <div class='wanda-rotation rotationFullYlt'>
- <div v-if='rotationImg.length==1&&size=="height"' class='rotationConType'>
- <img :src='rotationImg[0].url' alt />
- </div>
- <div v-else-if='rotationImg.length==1&&size=="width"' class='rotationCon'>
- <img :src='rotationImg[0].url' alt />
- </div>
- <el-carousel
- v-else
- style='height:100%;width:100%'
- :interval='5000'
- indicator-position='none'
- :arrow='rotationImg.length == 1 ? "never":"always"'
- >
- <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
- <img :src='item.url' alt style=' width: 100%; height: 100%;object-fit: container;' />
- </el-carousel-item>
- </el-carousel>
- </div>
- </template>s
- <script>
- export default {
- name: 'Rotation',
- props: ['rotationImg', 'picType', 'size'],
- data() {
- return {}
- },
- methods: {},
- // 解决两张图片时,轮播顺序反向
- created() {
- if (this.rotationImg && this.rotationImg.length === 2) {
- this.rotationImg = [...this.rotationImg, ...this.rotationImg]
- }
- },
- mounted() {},
- }
- </script>
- <style lang="less" scoped>
- .wanda-rotation {
- height: 100%;
- /deep/ .el-carousel__button {
- background-color: rgba(2, 91, 170, 1);
- }
- /deep/ .el-carousel__arrow {
- background-color: #00000050;
- }
- /deep/ .el-carousel__container {
- height: 100%;
- }
- /deep/ .el-carousel__item {
- text-align: center;
- background: #fff;
- }
- img {
- width: 100%;
- }
- }
- .rotationFullYlt {
- width: 100%;
- height: 100%;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- /deep/ .el-carousel__container {
- height: 100% !important;
- }
- .rotationConType {
- height: 100%;
- width: 100%;
- overflow: auto;
- /deep/ .el-carousel__item {
- text-align: center;
- background: #fff;
- }
- img {
- height: 100%;
- object-fit: contain;
- }
- }
- .rotationCon {
- width: 100%;
- height: 100%;
- /deep/ .el-carousel__item {
- text-align: center;
- background: #fff;
- }
- img {
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
- }
- }
- </style>
|