<scroll-view scroll-x class="category-scroll" enhanced :show-scrollbar="false">

                         <view class="category-icon-item" v-for="(item,index) in categoryList" :key="item.id"

                              @click="selectCategory(item)" :class="{ active: String(activeCategoryId) === String(item.id) }">

                              <view class="category-icon-wrapper">

                                   <image v-if="item.imgUrl" :src="item.imgUrl" class="category-icon" mode="aspectFill">

                                   </image>

                                   <view v-else class="category-icon-placeholder">

                                        <text

                                             class="placeholder-text">{{ item.categoryName ? item.categoryName.charAt(0) : '' }}</text>

                                   </view>

                              </view>

                              <text class="category-name" :class="{ 'active-text': activeCategoryId === item.id }">

                                   {{ item.categoryName }}

                              </text>

                         </view>

                    </scroll-view>