花材分类显示优化开始

hdPad/src/pages/home/components/rightItem.vue

@@ -1,7 +1,12 @@
 <template>
     <view class="shop-listType_box">
         <view class="cat-list-area">
-            <view v-for="item in classData" :key="item.id" :class="[categoryId===item.id?'active':'']" @click="changeCategory(item)" > {{item.name}} </view>
+            <view v-for="item in classData" :key="item.id" :class="[categoryId===item.id?'active':'']" @click="changeCategory(item)" >
+                <image style="width:67upx;height:50upx;" :src="item.cover" lazy-load="true" :lazy-load-margin="0" mode="aspectFill" ></image>
+                <view style="position:absolute;background-color: rgba(0, 0, 0, 0.5);bottom:0;width: 100%;height:12upx;text-align:center;">
+                   <text style="font-size:10upx;font-weight:bold;text-align:center;">{{item.name}}</text>
+                </view>
+            </view>
         </view>
         <view class="shop-show_box">
             <view v-for="item in itemInfoList" :key="item.id" class="show-shop_box">
@@ -175,16 +180,17 @@ export default {
         justify-content:flex-start;
         padding-bottom:2upx;
         & > view {
+            position:relative;
             border:1px solid #e4e4e4;
-            padding: 12upx 0upx;
             font-size: 10upx;
             width: 68upx;
+            height:51upx;
             overflow: hidden;
             white-space: nowrap;
             text-align: center;
+            color:white;
             &.active {
-                background-color: #428369;
-                color: #ffffff;
+                color: yellow;
             }
         }
     }