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

<template>
  <view :class="{'padding-lr':showStyle!=='0px'}">
    <view v-if="storage" class="bg-white">
      <view :class="{'padding-lr':bannerShowStyle!=='0px'}">
        <image @click="naviageToPage(indexBanner.url)" :src="image"
          :mode="bannerImgStyle==='cover'?'aspectFill':'scaleToFill'"
          style="width: 100%;height:174rpx ;padding-top: 8rpx;"></image>
      </view>
      <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>
</template>

<script>
  export default {
    name: 'Navigation',
    props: ['storage', 'categoryButtomList', 'options'],
    computed: {
      bannerShowStyle() {
        return this.options.banner.showStyle
      },
      bannerImgStyle() {
        return this.options.banner.imgStyle
      },
      showStyle() {
        return this.options.showStyle
      },
      fontColor() {
        return this.options.fontColor
      },
      bgColor() {
        return this.options.bgColor
      },
      image() {
        const {
          image
        } = this.options.banner
        if (image) {
          return JSON.parse(image)[0].url
        } else {
          return 'https://nontax.oss-cn-beijing.aliyuncs.com/kxmall/G2urVA.png'
        }
      },
      iconStyle() {
        return this.options.iconStyle
      }
    },
    methods: {
      naviageToPage(url, title) {
        this.$emit('naviage-to-page', url, title)
      }
    }
  }
</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: $font-sm + 2upx;
      color: $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>