duo.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. <template>
  2. <div class="module-item-duo" :style="!module.base.m?'margin-top:0' : ''">
  3. <moduleTitle :title="module.title" v-if="module.title.t.s" />
  4. <view class="item-duo-con" :style="style">
  5. <moduleBg :base="module.base" />
  6. <!--样式一-->
  7. <view class="item-duo-style1" :class="'col' + module.base.c" v-if="module.base.s == 0">
  8. <view @click="$util.openAttr(module.list,index)" class="item" :url="item.link.n"
  9. v-for="(item,index) of module.list" :key="index" :data-url="item.link.n" :data-islink="item.link.g">
  10. <view class="c">
  11. <p class="pic">
  12. <image :src="item.icon.img" v-if="item.icon.img" mode="widthFix"></image>
  13. <image v-else :src="$util.icon('img')" mode="aspectFit"></image>
  14. </p>
  15. <view class="txt" v-if="item.text.s">
  16. <moduleText :text="item.text" :colorf="module.base.fc" />
  17. </view>
  18. </view>
  19. </view>
  20. </view>
  21. <!--样式二-->
  22. <view class="item-duo-style2" v-if="module.base.s == 1">
  23. <scroll-view v-if="module.list.length>0" scroll-x="true" class="scroll-view" style="width: 100%;">
  24. <view v-for="(item,index) of module.list" :key='index' @click="$util.openAttr(module.list,index)"
  25. :data-url="item.link.p" :data-is_link="item.link.g" class="swiper-slide item">
  26. <p>
  27. <image :src="item.icon.img" v-if="item.icon.img" mode="aspectFit"></image>
  28. <image v-else :src="$util.icon('img')"></image>
  29. </p>
  30. <view class="txt" v-if="item.text.s">
  31. <moduleText :text="item.text" :colorf="module.base.fc" />
  32. </view>
  33. </view>
  34. </scroll-view>
  35. </view>
  36. <!--样式三-->
  37. <view class="item-duo-style3" v-if="module.base.s == 2">
  38. <swiper v-if="module.list.length>0" class="screen-swiper card-swiper" interval="5000" duration="300"
  39. circular="true">
  40. <block v-for=" (item,index) of module.list" :key='index'>
  41. <swiper-item>
  42. <view @click="$util.openAttr(module.list,index)" class="swiper-item" :url="item.link.n"
  43. :data-url="item.link.p" :data-islink="item.link.g">
  44. <p class="pic">
  45. <image :src="item.icon.img" v-if="item.icon.img" mode="aspectFit"></image>
  46. <image v-else :src="$util.icon('img')" mode="aspectFit"></image>
  47. </p>
  48. <p class="txt" v-if="item.text.s">
  49. <moduleText :text="item.text" :colorf="module.base.fc" />
  50. </p>
  51. </view>
  52. </swiper-item>
  53. </block>
  54. </swiper>
  55. </view>
  56. <!--样式四-->
  57. <view class="item-duo-style4" v-if="module.base.s == 3">
  58. <swiper v-if="module.list.length>0" class="item" autoplay="true" interval="5000" duration="300"
  59. indicator-color="#999" indicator-active-color="#007aff" indicator-dots="true" circular="true">
  60. <block v-for="(item,index) of module.list" :key='index'>
  61. <swiper-item>
  62. <view @click="$util.openAttr(module.list,index)" class="swiper-item" :url="item.link.n"
  63. :data-url="item.link.p" :data-islink="item.link.g">
  64. <p class="pic">
  65. <image :src="item.icon.img" v-if="item.icon.img" mode="aspectFit"></image>
  66. <image v-else :src="$util.icon('img')" mode="aspectFit"></image>
  67. </p>
  68. <p class="txt" v-if="item.text.s">
  69. <moduleText :text="item.text" :colorf="module.base.fc" />
  70. </p>
  71. </view>
  72. </swiper-item>
  73. </block>
  74. </swiper>
  75. </view>
  76. </view>
  77. </div>
  78. </template>
  79. <script>
  80. import moduleBg from './bg.vue';
  81. import moduleText from './text.vue';
  82. import moduleTitle from './title.vue';
  83. // import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
  84. // import Swiper2, { Pagination } from 'swiper';
  85. // Swiper2.use([Pagination]);
  86. // import 'swiper/swiper-bundle.css';
  87. let that = null;
  88. export default {
  89. props: ['module'],
  90. components: {
  91. moduleBg,
  92. moduleText,
  93. moduleTitle
  94. },
  95. // directives: { swiper: directive },
  96. data() {
  97. return {
  98. nav: [],
  99. swiperOption1: {
  100. slidesPerView: 4,
  101. spaceBetween: 10,
  102. observer: true,
  103. observeParents: true,
  104. loop: false,
  105. on: {
  106. click: function(e) {
  107. that.$util.openAttr(that.module.list, e.clickedIndex);
  108. }
  109. }
  110. },
  111. swiperOption2: {
  112. slidesPerView: 'auto',
  113. spaceBetween: 10,
  114. observer: true,
  115. observeParents: true,
  116. loop: false,
  117. on: {
  118. click: function(e) {
  119. that.$util.openAttr(that.module.list, e.clickedIndex);
  120. }
  121. }
  122. },
  123. swiperOption3: {
  124. loop: true,
  125. autoplay: 3000,
  126. observer: true,
  127. observeParents: true,
  128. pagination: {
  129. el: '.swiper-pagination'
  130. },
  131. on: {
  132. click: function(e) {
  133. that.$util.openAttr(that.module.list, e.clickedIndex);
  134. }
  135. }
  136. }
  137. };
  138. },
  139. created() {
  140. that = this;
  141. },
  142. computed: {
  143. style() {
  144. if (this.module.base.fc != '') {
  145. return `color:${this.module.base.fc}`;
  146. }
  147. },
  148. },
  149. mounted() {},
  150. methods: {}
  151. };
  152. </script>
  153. <style>
  154. .module-item-duo {
  155. margin-top: 10px;
  156. position: relative;
  157. }
  158. .module-item-duo .mg0 {
  159. margin-top: 0;
  160. }
  161. .module-item-duo .item-duo-con {
  162. position: relative;
  163. overflow: hidden;
  164. }
  165. .module-item-duo .item-duo-style1 {
  166. position: relative;
  167. display: flex;
  168. flex-wrap: wrap;
  169. z-index: 1;
  170. /* padding: 0 10px; */
  171. padding-top: 10px;
  172. padding-right: 10px;
  173. overflow: hidden;
  174. /* justify-content: space-between; */
  175. }
  176. .module-item-duo .item-duo-style1.col1 .item {
  177. width: 100%;
  178. }
  179. .module-item-duo .item-duo-style1.col2 .item {
  180. width: 50%;
  181. }
  182. .module-item-duo .item-duo-style1.col3 .item {
  183. width: 33.333333%;
  184. }
  185. .module-item-duo .item-duo-style1.col4 .item {
  186. width: 25%;
  187. }
  188. .module-item-duo .item-duo-style1 .item {
  189. width: 33.3333333%;
  190. padding-left: 10px;
  191. padding-bottom: 10px;
  192. }
  193. .module-item-duo .item-duo-style1 .item .c {
  194. overflow: hidden;
  195. }
  196. .module-item-duo .item-duo-style1 .item .c image {
  197. /* object-fit: cover; */
  198. display: block;
  199. width: 100%;
  200. height: 150rpx;
  201. }
  202. .module-item-duo .item-duo-style1 .item .c .txt {
  203. white-space: nowrap;
  204. padding: 15rpx 0px;
  205. text-align: center;
  206. overflow: hidden;
  207. text-overflow: ellipsis;
  208. }
  209. .module-item-duo .item-duo-style2 {
  210. position: relative;
  211. z-index: 1;
  212. padding: 10px 0;
  213. overflow: hidden;
  214. }
  215. .module-item-duo .item-duo-style2 .item {
  216. width: 25%;
  217. display: inline-block;
  218. }
  219. .module-item-duo .item-duo-style2 .scroll-view {
  220. white-space: nowrap;
  221. }
  222. .module-item-duo .item-duo-style2 .item image {
  223. display: block;
  224. width: 60px;
  225. margin: 0 auto;
  226. height: 60px;
  227. border-radius: 50%;
  228. object-fit: cover;
  229. }
  230. .module-item-duo .item-duo-style2 .item .txt {
  231. white-space: nowrap;
  232. padding: 15rpx 0px;
  233. text-align: center;
  234. overflow: hidden;
  235. text-overflow: ellipsis;
  236. }
  237. .swiper-slide {
  238. width: 100%;
  239. height: 100%;
  240. }
  241. .module-item-duo .item-duo-style4 {
  242. position: relative;
  243. z-index: 1;
  244. height: 170px;
  245. padding: 10px;
  246. }
  247. .module-item-duo .item-duo-style4 .item {
  248. width: 100%;
  249. height: 100%;
  250. }
  251. .module-item-duo .item-duo-style4 .item .pic {
  252. width: 100%;
  253. height: 100%;
  254. }
  255. .module-item-duo .item-duo-style4 .item .pic image {
  256. display: block;
  257. width: 100%;
  258. height: 100%;
  259. }
  260. .module-item-duo .item-duo-style4 .item .txt {
  261. position: absolute;
  262. left: 0;
  263. bottom: 0;
  264. z-index: 1;
  265. white-space: nowrap;
  266. padding: 10px;
  267. overflow: hidden;
  268. text-overflow: ellipsis;
  269. }
  270. .module-item-duo .item-duo-style3 {
  271. position: relative;
  272. z-index: 1;
  273. padding: 10px;
  274. }
  275. .module-item-duo .item-duo-style3 .item {
  276. height: 150px;
  277. }
  278. .module-item-duo .item-duo-style3 .item .pic {
  279. height: 150px;
  280. }
  281. .module-item-duo .item-duo-style3 .item .pic image {
  282. display: block;
  283. width: 100%;
  284. height: 100%;
  285. object-fit: cover;
  286. }
  287. .module-item-duo .item-duo-style3 .item .txt {
  288. position: absolute;
  289. left: 0;
  290. bottom: 0;
  291. z-index: 1;
  292. white-space: nowrap;
  293. padding: 10px;
  294. overflow: hidden;
  295. text-overflow: ellipsis;
  296. }
  297. .screen-swiper {
  298. /* min-height: 375rpx; */
  299. }
  300. .screen-swiper image,
  301. .screen-swiper video,
  302. .swiper-item image,
  303. .swiper-item video {
  304. width: 100%;
  305. display: block;
  306. height: 100%;
  307. margin: 0;
  308. pointer-events: none;
  309. }
  310. .card-swiper {
  311. height: 126px !important;
  312. }
  313. .card-swiper swiper-item {
  314. /* width: 610rpx !important; */
  315. /* left: 0rpx; */
  316. box-sizing: border-box;
  317. /* padding: 40rpx 0rpx 70rpx; */
  318. overflow: initial;
  319. }
  320. .card-swiper swiper-item .swiper-item {
  321. width: 100%;
  322. display: block;
  323. height: 100%;
  324. border-radius: 10rpx;
  325. -webkit-transform: scale(0.9);
  326. transform: scale(0.9);
  327. -webkit-transition: all 0.2s ease-in 0s;
  328. transition: all 0.2s ease-in 0s;
  329. overflow: hidden;
  330. }
  331. .card-swiper swiper-item .swiper-item .pic {
  332. width: 100%;
  333. /* height: 100%; */
  334. }
  335. .card-swiper swiper-item.cur .swiper-item {
  336. -webkit-transform: none;
  337. transform: none;
  338. -webkit-transition: all 0.2s ease-in 0s;
  339. transition: all 0.2s ease-in 0s;
  340. }
  341. .item-duo-style3 .swiper-item .pic{
  342. height: 100px;
  343. }
  344. .item-duo-style3 .swiper-item .txt {
  345. /* position: absolute;
  346. left: 0;
  347. bottom: 0; */
  348. z-index: 1;
  349. white-space: nowrap;
  350. padding: 10px;
  351. overflow: hidden;
  352. text-overflow: ellipsis;
  353. }
  354. </style>