微信小程序点餐列表样式csdn

以下是一个简单的微信小程序点餐列表样式的代码示例：

<view class="menu-list">
  <view class="menu-item" wx:for="{{menuList}}" wx:key="id">
    <image class="menu-img" src="{{item.imageUrl}}"></image>
    <view class="menu-info">
      <view class="menu-name">{{item.name}}</view>
      <view class="menu-price">￥{{item.price}}</view>
      <button class="menu-btn" bindtap="addToCart" data-id="{{item.id}}">加入购物车</button>
    </view>
  </view>
</view>

.menu-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

.menu-item {
  width: 45%;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
  overflow: hidden;
}

.menu-img {
  width: 150rpx;
  height: 150rpx;
}

.menu-info {
  flex: 1;
  padding: 20rpx;
}

.menu-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.menu-price {
  font-size: 28rpx;
  color: #f60;
  margin-bottom: 10rpx;
}

.menu-btn {
  display: inline-block;
  padding: 10rpx 20rpx;
  background-color: #f60;
  color: #fff;
  border-radius: 5rpx;
  outline: none;
  border: none;
  cursor: pointer;
}

此代码示例创建了一个点餐列表，每个菜品都有一个图片、名称、价格和一个加入购物车的按钮。整个列表使用 flex 布局，每个菜品占据 45% 的宽度，之间有空隙。每个菜品的样式使用了圆角和阴影，使得看起来更加美观。