<!--pages/index/index.wxml-->

<view>示例一</view>

<view class="menu-1">

  <image src="/static/hg.jpg"></image>

  <image src="/static/hg.jpg"></image>

  <image src="/static/hg.jpg"></image>

  <image src="/static/hg.jpg"></image>

</view>

 

<view>示例二</view>

<view class="menu-2">

  <view class="item">

    <image src="/static/hg.jpg"></image>

    <text>精品</text>

  </view>

  <view class="item">

    <image src="/static/hg.jpg"></image>

    <text>精品</text>

  </view>

  <view class="item">

    <image src="/static/hg.jpg"></image>

    <text>精品</text>

  </view>

  <view class="item">

    <image src="/static/hg.jpg"></image>

    <text>精品</text>

  </view>

</view>

/* pages/index/index.wxss */

.c1 {

  color: red;

}

 

image {

  width: 100rpx;

  height: 100rpx;

  border-radius: 50rpx;

}

 

.menu-1 {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

}

 

.menu-2 {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

}

 

.menu-2 .item {

  display: flex;

  flex-direction: column;

  align-items: center;

}