Browse Source

Fix iOS compatibility issue with horizontal scrolling in product-list page by removing fixed widths and adding proper responsive design

pull/19/head
徐飞洋 1 month ago
parent
commit
5b67a3a015
  1. 4
      pages/evaluate1/product-list.wxml
  2. 13
      pages/evaluate1/product-list.wxss

4
pages/evaluate1/product-list.wxml

@ -1,7 +1,7 @@
<view class="container">
<!-- 头部导航栏 -->
<view class="header">
<view class="header-content" style="width: 800rpx; display: block; box-sizing: border-box">
<view class="header-content">
<text class="title">商品选择</text>
</view>
</view>
@ -26,7 +26,7 @@
<text class="section-title">商品列表</text>
<text class="section-count">{{productNames.length}}个商品</text>
</view>
<view class="product-grid" style="width: 700rpx; display: grid; box-sizing: border-box">
<view class="product-grid">
<view
wx:for="{{productNames}}"
wx:key="*this"

13
pages/evaluate1/product-list.wxss

@ -4,6 +4,9 @@
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
}
.header {
@ -17,6 +20,8 @@
.header-content {
padding: 30rpx 0;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.title {
@ -29,6 +34,9 @@
.content {
flex: 1;
padding: 16rpx;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
/* 加载状态 */
@ -141,6 +149,9 @@
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
margin-top: 16rpx;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
/* 商品卡片 */
@ -160,6 +171,8 @@
min-height: 180rpx;
backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
width: 100%;
box-sizing: border-box;
}
.product-card::before {

Loading…
Cancel
Save