picViewRotation.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.05.26
  4. *@info:图片轮播
  5. */
  6. <template>
  7. <div class='wanda-rotation rotationFullYlt'>
  8. <div v-if='rotationImg.length==1&&size=="height"' class='rotationConType'>
  9. <img :src='rotationImg[0].url' alt />
  10. </div>
  11. <div v-else-if='rotationImg.length==1&&size=="width"' class='rotationCon'>
  12. <img :src='rotationImg[0].url' alt />
  13. </div>
  14. <el-carousel
  15. v-else
  16. style='height:100%;width:100%'
  17. :interval='5000'
  18. indicator-position='none'
  19. :arrow='rotationImg.length == 1 ? "never":"always"'
  20. >
  21. <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
  22. <img :src='item.url' alt style=' width: 100%; height: 100%;object-fit: container;' />
  23. </el-carousel-item>
  24. </el-carousel>
  25. </div>
  26. </template>s
  27. <script>
  28. export default {
  29. name: 'Rotation',
  30. props: ['rotationImg', 'picType', 'size'],
  31. data() {
  32. return {}
  33. },
  34. methods: {},
  35. // 解决两张图片时,轮播顺序反向
  36. created() {
  37. if (this.rotationImg && this.rotationImg.length === 2) {
  38. this.rotationImg = [...this.rotationImg, ...this.rotationImg]
  39. }
  40. },
  41. mounted() {},
  42. }
  43. </script>
  44. <style lang="less" scoped>
  45. .wanda-rotation {
  46. height: 100%;
  47. /deep/ .el-carousel__button {
  48. background-color: rgba(2, 91, 170, 1);
  49. }
  50. /deep/ .el-carousel__arrow {
  51. background-color: #00000050;
  52. }
  53. /deep/ .el-carousel__container {
  54. height: 100%;
  55. }
  56. /deep/ .el-carousel__item {
  57. text-align: center;
  58. background: #fff;
  59. }
  60. img {
  61. width: 100%;
  62. }
  63. }
  64. .rotationFullYlt {
  65. width: 100%;
  66. height: 100%;
  67. overflow: hidden;
  68. display: flex;
  69. justify-content: center;
  70. align-items: center;
  71. /deep/ .el-carousel__container {
  72. height: 100% !important;
  73. }
  74. .rotationConType {
  75. height: 100%;
  76. width: 100%;
  77. overflow: auto;
  78. /deep/ .el-carousel__item {
  79. text-align: center;
  80. background: #fff;
  81. }
  82. img {
  83. height: 100%;
  84. object-fit: contain;
  85. }
  86. }
  87. .rotationCon {
  88. width: 100%;
  89. height: 100%;
  90. /deep/ .el-carousel__item {
  91. text-align: center;
  92. background: #fff;
  93. }
  94. img {
  95. width: 100%;
  96. height: 100%;
  97. object-fit: contain;
  98. }
  99. }
  100. }
  101. </style>