kxmall-ui/kxmall-app-ui/pages/index/components/navigation1.vue

<template>
<!--  <view :class="{'padding-lr':showStyle!=='0px'}">
    <view v-if="storage" class="bg-white">

      <view class="cate-section" :style="{backgroundColor:bgColor}">
        <view v-for="(item, index) in categoryButtomList" :key="index"
          @click="naviageToPage(item.url+('&id='+item.id),item.title)" class="cate-item" :style={color:fontColor}>
          <image :src="JSON.parse(item.imgUrl)[0].url" :style="{borderRadius: iconStyle}"></image>
          <text>{{item.title}}</text>
        </view>
      </view>
    </view>
  </view> -->
  
    <view class="navigation-view" :style="{padding:showStyle}">
		<view class="content" :style="`background-color:${bgColor}`">
		  <view class="list" style="display: flex;flex-wrap: wrap;padding-top: 10px;padding-bottom: 5px;">
			<view v-for="(item, index) in items" :key="index" class="list-item"
			@click="naviageToPage(item.link,item.title)"
				 :style="`width: ${itemWidth}%;display: flex;flex-direction: column;
				 justify-content: center;align-items: center;padding-bottom: 5px;`">

			  <image :src="JSON.parse(item.imgUrl)[0].url" style="width: 43px;height: 43px;margin-bottom: 3px;" :style="{borderRadius: iconStyle}"></image>
			  <!-- <img :src="JSON.parse(item.imgUrl)[0].url" width="100%" height="100%" :style="{borderRadius:iconStyle}"> -->
			  <text 
			  style="font-size: 13px;"
			  :style="{color:item.fontColor}">{{item.title}}</text>
			  <!-- <div class="text" style="font-size: 13px;" :style="{color:item.fontColor}">{{ item.title }}</div> -->
			</view>
		  </view>
		</view>
    </view>
</template>

<script>
  export default {
    name: 'Navigation',
    props: ['storage', 'options'],
    computed: {
      showStyle() {
		return this.options.showStyle
	  },
	  fontColor() {
		return this.options.fontColor
	  },
	  bgColor() {
		return this.options.bgColor
	  },
	  iconStyle() {
		return this.options.iconStyle
	  },
	  colNum() {
		return this.options.colNum || 5 // 设置默认值为5列
	  },
	  itemWidth() {
		console.log('100 / this.colNum----',100 / this.colNum)
		return 100 / this.colNum; // 计算每个item的宽度
	  },
	  items(){
		return this.options.items
	  }
    },
    methods: {
      naviageToPage(url, title) {
        this.$emit('naviage-to-page', url, title)
      },
	  getImgUrl(item){
	  
	        console.log('item.imgUrl------',item.imgUrl)
	        // let item1 = JSON.parse(item)
	        let imgUrl = JSON.parse(item.imgUrl)
	        console.log('item.imgUrl1------',imgUrl)
	  
	        return imgUrl[0].url;
	      },
	      itemImgs(index) {
	        // console.log('index------',index)
	        // console.log('this.options------',this.options)
	        let imgUrl = JSON.parse(this.options.itemImgs[index])
	        // console.log('imgUrl------',imgUrl)
	        return imgUrl[0].url
	      }
    }
  }
</script>

<style scoped lang="scss">
  // /* 分类 */
  // .cate-section {
  //   display: flex;
  //   //justify-content: space-around;
  //   align-items: center;
  //   flex-wrap: wrap;
  //   padding-top: 34rpx;
  //   // padding: 30upx 25upx;
  //   background-color: #fff;
  //   justify-content: space-evenly;

  //   .cate-item {
  //     display: flex;
  //     flex-direction: column;
  //     align-items: center;
  //     width: 138rpx;
  //     padding-bottom: 24rpx;
  //     font-size: $kxmall-font-sm + 2upx;
  //     color: $kxmall-font-color-dark;
  //   }

  //   /* 原图标颜色太深,不想改图了,所以加了透明度 */
  //   image {
  //     width: 86upx;
  //     height: 86upx;
  //     margin-bottom: 24upx;
  //     border-radius: 8rpx;
  //     opacity: .7;
  //     // box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
  //   }
  // }
</style>