修复icon显示异常的问题

pages/order/order.wxml

@@ -72,8 +72,11 @@
       </view>
       <view class="medicine-grid">
         <view class="medicine-item" wx:for="{{hotMedicines}}" wx:key="name" bindtap="selectHotMedicine" data-medicine="{{item.name}}">
-          <text class="medicine-name">{{item.name}}</text>
-          <text class="medicine-price">¥{{item.minPrice}}起</text>
+          <image class="medicine-icon" src="{{item.icon || '/images/medicine-default.png'}}" mode="aspectFit"></image>
+          <view class="medicine-info">
+            <text class="medicine-name">{{item.name}}</text>
+            <text class="medicine-price">¥{{item.minPrice}}起</text>
+          </view>
         </view>
       </view>
     </view>

pages/order/order.wxss

@@ -225,23 +225,38 @@
   width: calc(50% - 10rpx);
   background: white;
   border-radius: 15rpx;
-  padding: 25rpx;
+  padding: 20rpx;
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   transition: all 0.3s;
 }
 
 .medicine-grid .medicine-item:active {
-  transform: scale(0.95);
+  transform: scale(0.98);
+  background: #f8f8f8;
+}
+
+.medicine-grid .medicine-icon {
+  width: 60rpx;
+  height: 60rpx;
+  margin-right: 15rpx;
+  flex-shrink: 0;
+}
+
+.medicine-grid .medicine-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .medicine-grid .medicine-name {
   font-size: 26rpx;
   color: #333;
-  margin-bottom: 10rpx;
-  text-align: center;
+  margin-bottom: 8rpx;
+  text-align: left;
 }
 
 .medicine-grid .medicine-price {