app-AgricultureSmart/uniapp/components/my-grid/my-grid.vue

<template>
  <view>


    <van-grid column-num="2" :gutter="10">
      <!-- 		  <van-grid-item icon="photo-o" text="冰美式">
            </van-grid-item>
            <van-grid-item icon="photo-o" text="古茗" />
            <van-grid-item icon="photo-o" text="白茶" />
            <van-grid-item icon="photo-o" text="热咖" /> -->

      <van-grid-item v-for="(item,idx) in grid_data" icon="photo-o" :text="item.text" :key="idx" :use-slot="true">
        <slot name="icon">
<!--          <van-icon name="chat" color="red"></van-icon>-->
          <image src="@/static/logo.png" class="itemImg"></image>
<!--          <van-image></van-image>-->
        </slot>
        <slot name="text" :item="item">
        <view v-if="idx%2" style="background-color: red">去摸鱼儿Isaac查看啊啊啊啊</view></slot>
        <view>描述信息：{{ item.description }}</view>
      </van-grid-item>
    </van-grid>
<!--    123-->
<!--    <van-row gutter="20">-->
<!--      <van-col span="20">-->
<!--&lt;!&ndash;        <my-grid-item></my-grid-item>&ndash;&gt;-->
<!--        <view style="width: 40%">-->
<!--          <image src="@/static/logo.png" style="width: 40%;height: auto"></image>-->
<!--          123-->
<!--        </view>-->
<!--      </van-col>-->
<!--      <van-col span="20">-->

<!--        <view style="width: 40%">-->
<!--          <image src="@/static/logo.png"></image>-->
<!--          123-->
<!--        </view>-->
<!--      </van-col>-->
<!--    </van-row>-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      grid_data:[{text:"冰美式"},{text:"古茗"},{text:"热咖"},{text:"白茶"},
        {text:"冰美式"},{text:"古茗"},{text:"热咖"},{text:"白茶"},
        {text:"冰美式"},{text:"古茗"},{text:"热咖"}]
    };
  }
}
</script>

<style lang="scss">
.itemImg{
  width: 250rpx;
  height: 170rpx;
}
</style>