magazine-web/pages/market/index.vue

<template>
	<view class="container">
    <uni-search-bar class="uni-mt-10" radius="100" placeholder="搜索" clearButton="auto" cancelButton="none" @confirm="search" />
    <view class="iconBox">
      <view class="box">
        <view class="item" v-for="(item,index) in iconType" :key="index">
          <uni-icons class="icons" :type="item.icon" size="26"></uni-icons>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
    <goosList class="goos" :data="marketList"></goosList>
    <text>分类</text>
    <text>推荐</text>
    <text>悬浮购物车</text>
	</view>
</template>

<script>
  import { mapActions, mapState } from "vuex";
	export default {
		data() {
			return {
        iconType: [
          { name: '会员', icon: 'vip-filled' },
          { name: '期刊', icon: 'vip-filled' },
          { name: '文章', icon: 'vip-filled' },
          { name: '商品', icon: 'vip-filled' }
        ]
      };
    },
    computed: {
      ...mapState(['marketList'])
    },
    async mounted() {
      await this.marketQuery();
    },
		methods: {
      ...mapActions(['marketQuery']),
      search (e) {
        console.log(e);
      }
    }
	}
</script>

<style lang="scss" scope>
	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color:#666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}
  .goos /deep/ .uni-list {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    padding: 5px;
    box-sizing: border-box;
  }
  .iconBox {
    width: 100%;
    padding:15px 0;
    background: #fff;
    margin-bottom: 10px;
    .box {
      margin: 0 auto;
      width: 90%;
      height: 80%;
      display: flex;
    }
    .item {
      width: 27%;
      .icons {
        display: block;
      }
      text {
        width: 100%;
        display: block;
        text-align: center;
      }
    }
  }
</style>