rotation.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.05.26
  4. *@info:图片轮播
  5. */
  6. <template>
  7. <div :class='[type==1?"rotationFull":(type==3?"rotationFullYlt":"rotation")]'>
  8. <div v-if='rotationImg.length==1' class='rotationCon'>
  9. <!-- <img
  10. 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'
  11. alt
  12. />-->
  13. <img :src='rotationImg[0].url' alt />
  14. <!-- <img src='./3440.jpg' alt /> -->
  15. </div>
  16. <el-carousel v-else trigger='click' style='height:100%;width:100%' :interval='5000' arrow='always' @change='changePic'>
  17. <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
  18. <img :src='item.url' alt />
  19. </el-carousel-item>
  20. </el-carousel>
  21. </div>
  22. </template>s
  23. <script>
  24. export default {
  25. name: 'Rotation',
  26. props: ['rotationImg', 'type'],
  27. data() {
  28. return {
  29. rotationImgs: [{ url: require('@/assets/images/login_back.png') }]
  30. }
  31. },
  32. methods: {
  33. changePic(val) {
  34. this.rotationImg.forEach((el, i) => {
  35. if (val === i) {
  36. this.$store.commit('SETPIC', el.url)
  37. } else {
  38. this.$store.commit('SETPIC', '')
  39. }
  40. this.$emit('scan', el.url || '')
  41. })
  42. }
  43. },
  44. mounted() {}
  45. }
  46. </script>
  47. <style lang="less" scoped>
  48. .rotation {
  49. width: 100%;
  50. height: 100%;
  51. overflow: hidden;
  52. display: flex;
  53. justify-content: center;
  54. align-items: center;
  55. .rotationCon {
  56. height: 100%;
  57. width: 100%;
  58. // display: flex;
  59. }
  60. img {
  61. // max-width: 100%;
  62. // max-height: 100%;
  63. // display: block;
  64. // margin: auto;
  65. width: 100%;
  66. height: 100%;
  67. object-fit: cover;
  68. }
  69. }
  70. .rotationFull {
  71. width: 100%;
  72. height: 100%;
  73. overflow: auto;
  74. display: flex;
  75. justify-content: center;
  76. align-items: center;
  77. .rotationCon {
  78. height: 100%;
  79. width: 100%;
  80. // display: flex;
  81. }
  82. img {
  83. // max-width: 100%;
  84. // max-height: 100%;
  85. // display: block;
  86. // margin: auto;
  87. min-width: 100%;
  88. }
  89. }
  90. .rotationFullYlt {
  91. width: 100%;
  92. height: 100%;
  93. overflow: hidden;
  94. display: flex;
  95. justify-content: center;
  96. align-items: center;
  97. .rotationCon {
  98. height: 100%;
  99. width: 100%;
  100. // display: flex;
  101. }
  102. img {
  103. // max-width: 100%;
  104. // max-height: 100%;
  105. // display: block;
  106. // margin: auto;
  107. width: 100%;
  108. height: 100%;
  109. object-fit: fill;
  110. }
  111. }
  112. </style>
  113. <style lang="less">
  114. .rotation,
  115. .rotationFull {
  116. .el-carousel__item h3 {
  117. color: #475669;
  118. font-size: 14px;
  119. opacity: 0.75;
  120. margin: 0;
  121. }
  122. .el-carousel__item:nth-child(2n) {
  123. background-color: #99a9bf;
  124. }
  125. .el-carousel__item:nth-child(2n + 1) {
  126. background-color: #d3dce6;
  127. }
  128. .el-carousel__container {
  129. height: 100% !important;
  130. }
  131. .el-carousel__button {
  132. height: 3px;
  133. width: 16px;
  134. border-radius: 2px;
  135. opacity: 0.5;
  136. }
  137. }
  138. </style>