添加活动专区/供需匹配 字体颜色/图片前端

sqw123

2025-12-23 a8b9a78690f1255c4cf648531476d4321c306029

 mobile/components/diy/hdzq/hdzq.vue

@@ -1,13 +1,19 @@
<template>
   <view class="diy-article">
      <!--列表-->
      <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
         :key="index" @click="gotoPageFunc(item)">
         <template>
            <view class="f24 text-ellipsis-2 lh200">
               {{ item.name }}
            </view>
         </template>
      <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="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
            :key="index" @click="gotoPageFunc(item)">
            <template>
					
               <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'">
                  {{ item.name }}
               </view>
            </template>
         </view>
      </view>
   </view>
</template>
@@ -59,16 +65,21 @@
   }
   .diy-article {
      background: #ffffff;
      margin: 20rpx;
      margin: 20rpx 0px;
      padding:0px 10rpx;
      border-radius: 6rpx;
      padding: 0 30rpx;
      box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
   }

	
   .diy-bg{
      background-size: 100%;
   }

   .diy-article .show-type__10,
   .diy-article .show-type__20 {
      display: flex;
      padding: 30rpx 0;
      padding: 20rpx;
      border-bottom: 1rpx solid #eeeeee;
   }

@@ -92,14 +103,18 @@
      height: 36rpx;
   }

   .diy-article image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
   }

   .diy-article .show-type__10 .icon.iconfont {
      font-size: 18rpx;
      color: #999999;
   }
	
   .diy-article .hdzq-icon {
      width: 100%;
   }
	
   .diy-article .hdzq-icon image {
      width: auto;
      height: 80rpx;
   }
</style>