SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化 evaluate2 页面布局，改为单列显示并统一样式

蛋吧eggbar
徐飞洋 1 month ago
parent
e46e1f432f
commit
f372bbc162
7 changed files with 110 additions and 337 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      pages/evaluate2/index.wxml
  2. 74
      pages/evaluate2/index.wxss
  3. 33
      pages/evaluate2/one.wxml
  4. 187
      pages/evaluate2/one.wxss
  5. 10
      pages/evaluate2/product-list.wxml
  6. 130
      pages/evaluate2/product-list.wxss
  7. 2
      pages/profile/authentication/index.wxml

11
pages/evaluate2/index.wxml
View File

@ -1,12 +1,12 @@
<view class="container"> <view class="container">
<!-- 头部导航栏 --> <!-- 头部导航栏 -->
<view class="header"> <view class="header">
<view class="header-content" style="width: 4200rpx; display: block; box-sizing: border-box; height: 124rpx"> <view class="header-content" style="display: block; box-sizing: border-box; height: 124rpx; width: 740rpx">
<text class="title">规格选择</text> <text class="title">规格选择</text>
</view> </view>
</view> </view>
<view class="content" style="width: 512rpx; height: 2089rpx; display: block; box-sizing: border-box"> <view class="content" style="width: 612rpx; height: 1622rpx; display: block; box-sizing: border-box">
<!-- 加载中状态 --> <!-- 加载中状态 -->
<view wx:if="{{loading}}" class="loading"> <view wx:if="{{loading}}" class="loading">
<view class="loading-spinner"></view> <view class="loading-spinner"></view>
@ -24,7 +24,7 @@
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<view wx:else class="product-card"> <view wx:else class="product-card" style="display: block; box-sizing: border-box; width: 525rpx">
<view class="product-info-container"> <view class="product-info-container">
<view class="product-info-row"> <view class="product-info-row">
<text class="product-label">商品名称</text> <text class="product-label">商品名称</text>
@ -39,7 +39,7 @@
<!-- 规格列表 --> <!-- 规格列表 -->
<view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-section"> <view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-section">
<view class="section-header"> <view class="section-header" style="width: 525rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">
<text class="section-title">可用规格</text> <text class="section-title">可用规格</text>
<text class="section-count">{{specifications.length}}个</text> <text class="section-count">{{specifications.length}}个</text>
</view> </view>
@ -50,9 +50,8 @@
class="spec-item" class="spec-item"
data-spec="{{item}}" data-spec="{{item}}"
bindtap="goToSpecDetail" bindtap="goToSpecDetail"
> style="width: 525rpx; height: 90rpx; display: flex; box-sizing: border-box">
<text class="spec-name">{{item.name}}</text> <text class="spec-name">{{item.name}}</text>
<view class="spec-arrow">→</view>
</view> </view>
</view> </view>

74
pages/evaluate2/index.wxss
View File

@ -162,13 +162,10 @@
/* 商品信息卡片 */ /* 商品信息卡片 */
.product-card { .product-card {
background: rgba(255, 255, 255, 0.95); background: #f5f5f5;
border-radius: 20rpx; border-radius: 12rpx;
padding: 32rpx; padding: 32rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
} }
.product-info-container { .product-info-container {
@ -193,14 +190,14 @@
} }
.product-name { .product-name {
font-size: 32rpx; font-size: 30rpx;
font-weight: 700; font-weight: 600;
color: #2c3e50; color: #333;
line-height: 1.4; line-height: 1.4;
word-break: break-word; word-break: break-word;
margin-top: 12rpx; margin-top: 12rpx;
padding: 12rpx 0; padding: 12rpx 0;
border-top: 1rpx solid #f1f5f9; border-top: 1rpx solid #e0e0e0;
} }
/* 规格列表区域 */ /* 规格列表区域 */
@ -242,63 +239,24 @@
/* 规格项 */ /* 规格项 */
.spec-item { .spec-item {
background: rgba(255, 255, 255, 0.95); background: #f5f5f5;
border-radius: 20rpx; border-radius: 12rpx;
padding: 32rpx 24rpx; padding: 40rpx 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
position: relative; min-height: 120rpx;
overflow: hidden;
backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
}
.spec-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6rpx;
height: 100%;
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
}
.spec-item:hover {
transform: translateY(-4rpx);
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
background: rgba(255, 255, 255, 1);
}
.spec-item:active {
transform: translateY(-2rpx);
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.1);
} }
.spec-name { .spec-name {
font-size: 28rpx; font-size: 30rpx;
font-weight: 600; font-weight: 500;
color: #2c3e50; color: #333;
line-height: 1.4; line-height: 1.4;
word-break: break-word; word-break: break-word;
flex: 1; text-align: center;
padding-right: 40rpx; padding: 0 8rpx;
}
.spec-arrow {
font-size: 32rpx;
color: #4a90e2;
font-weight: bold;
opacity: 0.6;
transition: all 0.3s ease;
}
.spec-item:hover .spec-arrow {
opacity: 1;
transform: translateX(4rpx);
} }
/* 空状态 */ /* 空状态 */

33
pages/evaluate2/one.wxml
View File

@ -1,7 +1,7 @@
<view class="container"> <view class="container">
<!-- 头部导航栏 --> <!-- 头部导航栏 -->
<view class="header"> <view class="header">
<view class="header-content" style="width: 600rpx; display: block; box-sizing: border-box; height: 106rpx"> <view class="header-content" style="width: 740rpx; display: block; box-sizing: border-box; height: 106rpx">
<text class="title">分类选择</text> <text class="title">分类选择</text>
</view> </view>
</view> </view>
@ -59,11 +59,11 @@
class="category-card" class="category-card"
data-category="{{item}}" data-category="{{item}}"
bindtap="selectCategory" bindtap="selectCategory"
> style="height: 120rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx; width: 579rpx">
<view class="category-info"> <view class="category-info">
<text class="category-name">{{item}}</text> <text class="category-name" style="position: relative; top: 1rpx">{{item}}</text>
</view> </view>
<view class="category-arrow">→</view>
</view> </view>
</view> </view>
</view> </view>
@ -90,21 +90,16 @@
</view> </view>
<view class="spec-grid"> <view class="spec-grid">
<view <view
wx:for="{{specifications}}" wx:for="{{specifications}}"
wx:key="item.name" wx:key="item.name"
class="spec-card" class="spec-card"
data-spec="{{item}}" data-spec="{{item}}"
bindtap="goToSpecDetail" bindtap="goToSpecDetail"
> >
<view class="spec-info"> <view class="spec-info">
<text class="spec-name">{{item.name}}</text> <text class="spec-name">{{item.name}}</text>
</view> </view>
<view class="spec-price"> </view>
<text class="price-label">参考价格</text>
<text class="price-value">¥{{item.finalPriceText}}</text>
</view>
<view class="spec-arrow">→</view>
</view>
</view> </view>
<!-- 暂无更多规格提示 --> <!-- 暂无更多规格提示 -->

187
pages/evaluate2/one.wxss
View File

@ -234,103 +234,39 @@
/* 规格网格布局 */ /* 规格网格布局 */
.spec-grid { .spec-grid {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr); flex-direction: column;
gap: 20rpx; gap: 16rpx;
margin-top: 16rpx; margin-top: 16rpx;
} }
/* 规格卡片 */ /* 规格卡片 */
.spec-card { .spec-card {
background: rgba(255, 255, 255, 0.95); background: #f5f5f5;
border-radius: 20rpx; border-radius: 12rpx;
padding: 32rpx 24rpx; padding: 40rpx 24rpx;
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
position: relative; min-height: 120rpx;
overflow: hidden;
backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
min-height: 200rpx;
display: flex; display: flex;
flex-direction: column; align-items: center;
} justify-content: center;
.spec-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6rpx;
height: 100%;
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
}
.spec-card:hover {
transform: translateY(-6rpx);
box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15);
background: rgba(255, 255, 255, 1);
}
.spec-card:active {
transform: translateY(-2rpx);
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
} }
.spec-info { .spec-info {
margin-bottom: 20rpx;
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
} }
.spec-name { .spec-name {
font-size: 28rpx; font-size: 30rpx;
font-weight: 600; font-weight: 500;
color: #2c3e50; color: #333;
line-height: 1.4; line-height: 1.4;
word-break: break-word; word-break: break-word;
padding-right: 40rpx; text-align: center;
} padding-right: 0;
.spec-price {
display: flex;
flex-direction: column;
margin-top: 16rpx;
}
.price-label {
font-size: 20rpx;
color: #999;
margin-bottom: 4rpx;
}
.price-value {
font-size: 36rpx;
font-weight: 700;
color: #e74c3c;
transition: all 0.3s ease;
}
.spec-card:hover .price-value {
transform: scale(1.05);
}
.spec-arrow {
position: absolute;
top: 32rpx;
right: 28rpx;
font-size: 32rpx;
color: #4a90e2;
font-weight: bold;
opacity: 0.6;
transition: all 0.3s ease;
}
.spec-card:hover .spec-arrow {
opacity: 1;
transform: translateX(4rpx);
} }
/* 空状态 */ /* 空状态 */
@ -364,7 +300,6 @@
} }
.spec-grid { .spec-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16rpx; gap: 16rpx;
} }
@ -373,8 +308,8 @@
} }
.spec-card { .spec-card {
padding: 28rpx 20rpx; padding: 36rpx 20rpx;
min-height: 180rpx; min-height: 110rpx;
} }
.title { .title {
@ -389,10 +324,6 @@
font-size: 28rpx; font-size: 28rpx;
} }
.price-value {
font-size: 32rpx;
}
.button-group { .button-group {
flex-direction: column; flex-direction: column;
gap: 12rpx; gap: 12rpx;
@ -407,22 +338,17 @@
/* 小屏幕设备适配 */ /* 小屏幕设备适配 */
@media (max-width: 414rpx) { @media (max-width: 414rpx) {
.spec-grid { .spec-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12rpx; gap: 12rpx;
} }
.spec-card { .spec-card {
padding: 24rpx 16rpx; padding: 32rpx 16rpx;
min-height: 160rpx; min-height: 100rpx;
} }
.spec-name { .spec-name {
font-size: 24rpx; font-size: 24rpx;
} }
.price-value {
font-size: 28rpx;
}
} }
/* 暂无更多规格提示 */ /* 暂无更多规格提示 */
@ -451,86 +377,48 @@
} }
.category-grid { .category-grid {
display: grid; display: flex;
grid-template-columns: repeat(2, 1fr); flex-direction: column;
gap: 20rpx; gap: 20rpx;
margin-top: 16rpx; margin-top: 16rpx;
} }
.category-card { .category-card {
background: rgba(255, 255, 255, 0.95); background: #f5f5f5;
border-radius: 20rpx; border-radius: 12rpx;
padding: 32rpx 24rpx; padding: 40rpx 24rpx;
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
position: relative; min-height: 120rpx;
overflow: hidden;
backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
min-height: 150rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6rpx;
height: 100%;
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
}
.category-card:hover {
transform: translateY(-6rpx);
box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15);
background: rgba(255, 255, 255, 1);
}
.category-card:active {
transform: translateY(-2rpx);
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
} }
.category-info { .category-info {
flex: 1; flex: 1;
margin-right: 20rpx; display: flex;
align-items: center;
justify-content: center;
} }
.category-name { .category-name {
font-size: 32rpx; font-size: 30rpx;
font-weight: 600; font-weight: 500;
color: #2c3e50; color: #333;
line-height: 1.4; line-height: 1.4;
word-break: break-word; word-break: break-word;
} text-align: center;
.category-arrow {
font-size: 32rpx;
color: #4a90e2;
font-weight: bold;
opacity: 0.6;
transition: all 0.3s ease;
}
.category-card:hover .category-arrow {
opacity: 1;
transform: translateX(4rpx);
} }
/* 响应式设计 - 分类区域 */ /* 响应式设计 - 分类区域 */
@media (max-width: 750rpx) { @media (max-width: 750rpx) {
.category-grid { .category-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16rpx; gap: 16rpx;
} }
.category-card { .category-card {
padding: 28rpx 20rpx; padding: 36rpx 20rpx;
min-height: 130rpx; min-height: 110rpx;
} }
.category-name { .category-name {
@ -540,13 +428,12 @@
@media (max-width: 414rpx) { @media (max-width: 414rpx) {
.category-grid { .category-grid {
grid-template-columns: 1fr;
gap: 12rpx; gap: 12rpx;
} }
.category-card { .category-card {
padding: 24rpx 16rpx; padding: 32rpx 16rpx;
min-height: 110rpx; min-height: 100rpx;
} }
.category-name { .category-name {

10
pages/evaluate2/product-list.wxml
View File

@ -1,7 +1,7 @@
<view class="container"> <view class="container">
<!-- 头部导航栏 --> <!-- 头部导航栏 -->
<view class="header"> <view class="header">
<view class="header-content" style="display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20rpx;"> <view class="header-content" style="display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20rpx; width: 740rpx">
<button class="title" bindtap="goBackToCategories">返回分类</button> <button class="title" bindtap="goBackToCategories">返回分类</button>
<text class="title">商品选择</text> <text class="title">商品选择</text>
<view style="width: 120rpx;"></view> <!-- 占位，保持标题居中 --> <view style="width: 120rpx;"></view> <!-- 占位，保持标题居中 -->
@ -28,8 +28,10 @@
<view wx:else class="product-section"> <view wx:else class="product-section">
<!-- 当前选择的分类 --> <!-- 当前选择的分类 -->
<view wx:if="{{category}}" class="current-category"> <view wx:if="{{category}}" class="current-category">
<text class="current-category-label">当前分类：</text> <view class="current-category-content">
<text class="current-category-name">{{category}}</text> <text class="current-category-label">当前分类：</text>
<text class="current-category-name">{{category}}</text>
</view>
<!-- 价格范围 --> <!-- 价格范围 -->
<view wx:if="{{priceRange.hasPrice}}" class="price-range"> <view wx:if="{{priceRange.hasPrice}}" class="price-range">
<text class="price-range-label">价格范围：</text> <text class="price-range-label">价格范围：</text>
@ -50,9 +52,7 @@
data-product="{{item}}" data-product="{{item}}"
bindtap="selectProduct" bindtap="selectProduct"
> >
<view class="product-icon">🛍️</view>
<text class="product-name">{{item}}</text> <text class="product-name">{{item}}</text>
<view class="product-arrow">→</view>
</view> </view>
</view> </view>

130
pages/evaluate2/product-list.wxss
View File

@ -142,43 +142,47 @@
/* 当前选择的分类 */ /* 当前选择的分类 */
.current-category { .current-category {
display: flex; display: flex;
align-items: center; flex-direction: column;
background: rgba(74, 144, 226, 0.1); background: #f5f5f5;
padding: 16rpx 20rpx; padding: 20rpx 24rpx;
border-radius: 12rpx; border-radius: 12rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
border-left: 6rpx solid #4a90e2; }
.current-category-content {
display: flex;
align-items: center;
margin-bottom: 12rpx;
} }
.current-category-label { .current-category-label {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
margin-right: 8rpx; margin-right: 12rpx;
} }
.current-category-name { .current-category-name {
font-size: 26rpx; font-size: 26rpx;
font-weight: 600; font-weight: 600;
color: #4a90e2; color: #333;
} }
/* 价格范围 */ /* 价格范围 */
.price-range { .price-range {
margin-top: 8rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.price-range-label { .price-range-label {
font-size: 22rpx; font-size: 24rpx;
color: #666; color: #666;
margin-right: 8rpx; margin-right: 12rpx;
} }
.price-range-value { .price-range-value {
font-size: 22rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
color: #ff6b81; color: #333;
} }
.section-header { .section-header {
@ -207,8 +211,8 @@
/* 商品网格布局 */ /* 商品网格布局 */
.product-grid { .product-grid {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr); flex-direction: column;
gap: 20rpx; gap: 20rpx;
margin-top: 16rpx; margin-top: 16rpx;
width: 100%; width: 100%;
@ -218,88 +222,28 @@
/* 商品卡片 */ /* 商品卡片 */
.product-card { .product-card {
background: rgba(255, 255, 255, 0.95); background: #f5f5f5;
border-radius: 20rpx; border-radius: 12rpx;
padding: 32rpx 24rpx; padding: 40rpx 24rpx;
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
position: relative; min-height: 120rpx;
overflow: hidden;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
text-align: center; justify-content: center;
min-height: 180rpx;
backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6rpx;
background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
}
.product-card:hover {
transform: translateY(-6rpx);
box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15);
background: rgba(255, 255, 255, 1);
}
.product-card:active {
transform: translateY(-2rpx);
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
}
.product-icon {
font-size: 72rpx;
margin-bottom: 20rpx;
opacity: 0.9;
transition: all 0.3s ease;
}
.product-card:hover .product-icon {
transform: scale(1.1);
opacity: 1;
}
.product-name { .product-name {
font-size: 28rpx; font-size: 30rpx;
font-weight: 600; font-weight: 500;
color: #2c3e50; color: #333;
line-height: 1.4; line-height: 1.4;
word-break: break-word; word-break: break-word;
margin-bottom: 20rpx; text-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8rpx; padding: 0 8rpx;
} }
.product-arrow {
position: absolute;
bottom: 20rpx;
right: 24rpx;
font-size: 28rpx;
color: #4a90e2;
font-weight: bold;
opacity: 0.6;
transition: all 0.3s ease;
}
.product-card:hover .product-arrow {
opacity: 1;
transform: translateX(4rpx);
}
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 750rpx) { @media (max-width: 750rpx) {
.content { .content {
@ -307,13 +251,12 @@
} }
.product-grid { .product-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16rpx; gap: 16rpx;
} }
.product-card { .product-card {
padding: 28rpx 20rpx; padding: 36rpx 20rpx;
min-height: 160rpx; min-height: 110rpx;
} }
.title { .title {
@ -325,32 +268,23 @@
} }
.product-name { .product-name {
font-size: 24rpx; font-size: 28rpx;
}
.product-icon {
font-size: 60rpx;
} }
} }
/* 小屏幕设备适配 */ /* 小屏幕设备适配 */
@media (max-width: 414rpx) { @media (max-width: 414rpx) {
.product-grid { .product-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12rpx; gap: 12rpx;
} }
.product-card { .product-card {
padding: 20rpx 16rpx; padding: 32rpx 16rpx;
min-height: 140rpx; min-height: 100rpx;
} }
.product-name { .product-name {
font-size: 22rpx; font-size: 24rpx;
}
.product-icon {
font-size: 50rpx;
} }
} }

2
pages/profile/authentication/index.wxml
View File

@ -73,6 +73,6 @@
<!-- 认证按钮 --> <!-- 认证按钮 -->
<view class="auth-btn" bindtap="submitAuth"> <view class="auth-btn" bindtap="submitAuth">
<text class="auth-btn-text">提交审核</text> <text class="auth-btn-text">{{idcardstatus === '' || idcardstatus === 0 ? '提交' : '重新提交'}}</text>
</view> </view>
</view> </view>
Write Preview
Loading…
Cancel
Save