CommunityApp/pagesM/comps/dt_category_series.vue

<template>
  <view>
    <view class="series_list" v-if="dataList.length>0">
      <view class="series_item" v-for="(item,index) in dataList" :key="index" @tap="jumpGoodsList(item,index)">
        <!-- <image mode="aspectFill" class="series_pic" src="https://api.dreamstech.cn/img/ysyl//20191012/1c15b1d8-da65-4219-a8ae-a8e671e297891570847701931.png"></image> -->
        <view class="series_name">
			<image :src="item.icon?item.icon:'http://139.9.103.171:1888/img/image/goods_def.png'" style="width: 100%;height: 100upx;display: block;" mode="aspectFit"/>
			<view>{{item.name}}</view>
		  </view>
      </view>
    </view>
    <view class="no_data_wrap" v-else>
      <DtNoData msg="暂无数据" image="http://139.9.103.171:1888/img/image/noData.png" />
    </view>
  </view>
</template>

<script>

import DtNoData from './dt_no_data'
export default {
  components: {
    DtNoData,
  },
  props: {
    dataList: {
      type: Array,
      default: []
    },
    wrapHeight: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      curActive:-1,
    };
  },
  watch:{
    dataList:{
      deep:true,
      handler:function(n,o){
        this.curActive = 0
      }
    }
  },
  methods: {
    jumpGoodsList(item,index) {
      this.curActive = index
      this.$emit('tapitem',{item,index})
    }
  },
  created() { 
  }
};
</script>

<style lang="scss">
.series_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 25upx;
  // justify-content: space-around;
  .series_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 170upx;
    margin: 20upx 10upx 20upx 0;
    .series_pic {
      width: 148upx;
      height: 148upx;
    }
    .series_name {
      font-size: 24upx;
      // color: rgb(51, 51, 51);
      width: 100%;
      padding:0 20upx;
      box-sizing: border-box;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      text-align: center;
      // margin-top: 20upx;
      // border:1upx solid #e5e5e5;
      color:#333;
      border-radius: 6rpx;
      height: 150rpx;
      display: flex;
	  flex-direction: column;
      align-item: center;
      justify-content: space-between;
    }
    .series-hover{
      background-color:$dt-color-primary;
      color:#fff;
    }
  }
}

.no_data_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500upx;
}
</style>