quickOperation.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <!-- 快捷运营 -->
  3. <view class="quick-oprea">
  4. <swiper class="swiper" :autoplay="false" @change="swiperChange" :circular="true">
  5. <swiper-item v-for="(item, index) in footList" :key="index" class="swiper-item">
  6. <view class="content" v-for="(i, o) in item" :key="i" @click="NavToDetailPage(i)">
  7. <view class="list">
  8. <div class="list-icon">
  9. <image :src="i.icon" style="width: 100%;height: 100%;" mode=""></image>
  10. </div>
  11. <div class="list-title">
  12. <div class="title-1">
  13. <div class="title-1-item">
  14. <view style="display: inline-block;">{{ i.name }}</view>
  15. <text class="title-2-item">GO></text>
  16. </div>
  17. </div>
  18. <div class="title-2">{{i.remark || ''}}</div>
  19. </div>
  20. </view>
  21. </view>
  22. </swiper-item>
  23. </swiper>
  24. <view class="swiper__dots-box">
  25. <view
  26. v-for="(item, idx) in footList"
  27. :key="idx"
  28. :class="[idx === current ? 'swiper__dots-long' : 'none']"
  29. :data-index="current"
  30. class="swiper__dots-item"
  31. ></view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. import cmsMixins from '@/mixins/cmsMixins.js'
  37. import { mapState } from 'vuex'
  38. export default {
  39. mixins: [cmsMixins],
  40. props: {
  41. list: {
  42. type: Array,
  43. default: () => []
  44. }
  45. },
  46. data() {
  47. return {
  48. current: 0 // 切换轮播
  49. }
  50. },
  51. computed: {
  52. ...mapState(['hasLogin']),
  53. // 快捷运营列表
  54. footList() {
  55. let newArr = [],
  56. a = []
  57. this.list.map((item, index) => {
  58. if (index !== 0 && index % 4 === 0) {
  59. newArr.push(a)
  60. a = []
  61. a.push(item)
  62. } else a.push(item)
  63. if (this.list.length === index + 1) {
  64. newArr.push(a)
  65. }
  66. })
  67. return newArr
  68. }
  69. },
  70. watch: {},
  71. mounted() {},
  72. methods: {
  73. // 链接跳转
  74. NavToDetailPage(pros) {
  75. // 采美快捷运营点击量统计
  76. this.cmsMoudleHits(4, pros.id)
  77. this.$api.FlooryNavigateTo(pros)
  78. },
  79. swiperChange(e) {
  80. //轮播图切换
  81. this.current = e.detail.current
  82. }
  83. }
  84. }
  85. </script>
  86. <style lang="scss" scoped>
  87. .quick-oprea {
  88. background-color: #f7f7f7;
  89. padding: 20rpx;
  90. position: relative;
  91. height: 400rpx;
  92. .swiper__dots-box {
  93. position: absolute;
  94. left: 0;
  95. right: 0;
  96. bottom: 32rpx;
  97. display: flex;
  98. flex: 1;
  99. flex-direction: row;
  100. justify-content: center;
  101. align-items: center;
  102. .swiper__dots-item {
  103. width: 14rpx;
  104. height: 5rpx;
  105. border-radius: 100%;
  106. margin-left: 6px;
  107. background-color: #e15621;
  108. opacity: 0.2;
  109. }
  110. .swiper__dots-long {
  111. width: 26rpx;
  112. height: 5rpx;
  113. border-radius: 4rpx;
  114. background-color: #e15621;
  115. transition: all 0.4s;
  116. opacity: 1;
  117. }
  118. }
  119. }
  120. .swiper {
  121. height: 340rpx;
  122. .swiper-item {
  123. display: grid;
  124. grid-template-columns: repeat(2, 1fr);
  125. grid-template-rows: repeat(2, 1fr);
  126. grid-gap: 18rpx;
  127. .content {
  128. box-sizing: border-box;
  129. border-radius: 16rpx;
  130. background-color: #fff;
  131. display: flex;
  132. align-items: center;
  133. background: linear-gradient(180deg, #FFF1EB 0%, #FFFFFF 100%);
  134. .list {
  135. width: 100%;
  136. display: flex;
  137. height: 80rpx;
  138. .list-icon {
  139. width: 80rpx;
  140. height: 100%;
  141. border-radius: 50%;
  142. margin-left: 24rpx;
  143. overflow: hidden;
  144. }
  145. .list-title {
  146. margin-left: 16rpx;
  147. display: flex;
  148. flex-direction: column;
  149. justify-content: space-between;
  150. .title-1 {
  151. .title-1-item {
  152. color: #333333;
  153. font-size: 28rpx;
  154. width: 222rpx;
  155. display: flex;
  156. align-items: center;
  157. .title-2-item {
  158. width: 62rpx;
  159. height: 32rpx;
  160. background: #ff5b00;
  161. border-radius: 14rpx;
  162. font-size: 22rpx;
  163. text-align: center;
  164. height: 32rpx;
  165. color: white;
  166. margin-left: 6rpx;
  167. }
  168. }
  169. }
  170. .title-2 {
  171. color: #999999;
  172. font-size: 22rpx;
  173. }
  174. }
  175. }
  176. }
  177. }
  178. }
  179. </style>