quanwei
2 days ago 04102f7237efefa744090ed7c25f7b5d0807b679
mobile/components/diy/gxpp/gxpp.vue
@@ -3,17 +3,52 @@
      <view class="hdzq-icon">
         <image :src="itemData.style.image" mode="aspectFill"></image>
      </view>
      <view class="diy-bg" :style="'background:url('+itemData.style.background+') no-repeat;'">
         <!--列表-->
      <view class="diy-bg" :style="'background-image:url('+itemData.style.background+');'">
         <!---列表-->
         <swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration" @change="changeSwiper">
            <!---第一个-->
         <swiper-item v-if="listData.length > 0">
         <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
            :key="index" @click="gotoPageFunc(item)">
            :key="index" @click="gotoPageFunc(item)" v-if="index < 4">
            <template>
               <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'">
                  {{ item.name }}
               </view>
            </template>
         </view>
         </swiper-item>
         <!---第一个-->
         <!---第二个-->
         <swiper-item v-if="listData.length > 4">
         <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
            :key="index" @click="gotoPageFunc(item)"  v-if="index > 3 && index < 8">
            <template>
               <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'">
                  {{ item.name }}
               </view>
            </template>
         </view>
         </swiper-item>
         <!---第二个-->
         <!---第三个-->
         <swiper-item v-if="listData.length > 8">
         <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
            :key="index" @click="gotoPageFunc(item)"  v-if="index > 7 && index < 12">
            <template>
               <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'">
                  {{ item.name }}
               </view>
            </template>
         </view>
         </swiper-item>
         <!---第三个-->
         <!--列表-->
         </swiper>
      </view>
   </view>
</template>
@@ -23,7 +58,13 @@
      data() {
         return {
            /*数据列表*/
            listData: []
            listData: [],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
            indicatorActiveColor: '#ffffff',
            current: 0
         };
      },
      props: ['itemData'],
@@ -31,6 +72,10 @@
         this.listData = this.itemData.data;
      },
      methods: {
         changeSwiper(e) {
            this.current = e.detail.current;
         },
         /*跳转页面*/
         gotoPageFunc(e) {
@@ -70,9 +115,16 @@
      border-radius: 6rpx;
      box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
   }
   swiper {
      height: 350rpx;
   }
   .diy-bg{
      background-size: 100%;
      width: 100%;
      height: 350rpx;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
   }
   .diy-article .show-type__10,
@@ -80,6 +132,9 @@
      display: flex;
      padding: 20rpx;
      border-bottom: 1rpx solid #eeeeee;
      white-space: nowrap;  /* 不换行 */
      overflow: hidden;     /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出显示省略号 */
   }
   .diy-article .show-type__10:last-child,