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

优化evaluate1页面UI设计，包括： 

1. 改进product-list页面，实现3列布局，添加玻璃质感和动画效果
2. 改进index页面，实现3列布局，添加玻璃质感和动画效果，优化商品信息显示
3. 重写spec-detail页面布局，解决拥挤和超屏幕问题，添加玻璃质感和动画效果
4. 确保所有页面响应式设计，适配不同屏幕尺寸
5. 为所有页面添加一致的现代UI风格和交互效果
pull/19/head
徐飞洋 1 month ago
parent
9559d6d1aa
commit
620e575347
7 changed files with 919 additions and 372 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. 50
      pages/evaluate1/index.wxml
  2. 461
      pages/evaluate1/index.wxss
  3. 24
      pages/evaluate1/product-list.wxml
  4. 248
      pages/evaluate1/product-list.wxss
  5. 16
      pages/evaluate1/spec-detail.js
  6. 74
      pages/evaluate1/spec-detail.wxml
  7. 418
      pages/evaluate1/spec-detail.wxss

50
pages/evaluate1/index.wxml
View File

@ -1,61 +1,73 @@
<view class="container"> <view class="container">
<!-- 头部导航栏 -->
<view class="header"> <view class="header">
<text class="title">选择规格</text> <view class="header-content" style="width: 4200rpx; display: block; box-sizing: border-box; height: 124rpx">
<text class="title">规格选择</text>
</view>
</view> </view>
<view class="content"> <view class="content">
<!-- 加载中状态 --> <!-- 加载中状态 -->
<view wx:if="{{loading}}" class="loading"> <view wx:if="{{loading}}" class="loading">
<view class="loading-spinner"></view> <view class="loading-spinner"></view>
<text>加载中...</text> <text class="loading-text">正在加载规格数据...</text>
</view> </view>
<!-- 错误提示 --> <!-- 错误提示 -->
<view wx:if="{{error}}" class="error"> <view wx:if="{{error}}" class="error-card">
<view class="error-icon">⚠️</view> <view class="error-icon">⚠️</view>
<text>{{error}}</text> <text class="error-text">{{error}}</text>
<view class="button-group"> <view class="button-group">
<button bindtap="loadSpecifications" data-product="{{productName}}" type="primary" class="retry-button">重试</button> <button bindtap="loadSpecifications" data-product="{{productName}}" class="btn-primary">重新加载</button>
<button bindtap="goBackToProductList" type="default" class="back-button">返回上一步</button> <button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
</view> </view>
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<view wx:else class="product-info"> <view wx:else class="product-card">
<text class="product-label">商品名称：</text> <view class="product-info-container">
<text class="product-value">{{productName}}</text> <view class="product-info-row">
<button bindtap="goBackToProductList" type="default" class="back-button">返回上一步</button> <text class="product-label">商品名称</text>
<button bindtap="goBackToProductList" class="btn-back" style="width: 172rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx; height: 87rpx">
<text class="btn-back-icon">←</text>
<text class="btn-back-text">更换商品</text>
</button>
</view>
<text class="product-name">{{productName}}</text>
</view>
</view> </view>
<!-- 规格列表 --> <!-- 规格列表 -->
<view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-list"> <view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-section">
<view class="section-header"> <view class="section-header">
<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>
<view class="spec-items"> <view class="spec-grid">
<view <view
wx:for="{{specifications}}" wx:for="{{specifications}}"
wx:key="item.name" wx:key="item.name"
class="spec-item" 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-arrow"> <view class="spec-price">
<text class="spec-price">¥{{item.finalPriceText}}</text> <text class="price-label">参考价格</text>
<view class="spec-arrow">→</view> <text class="price-value">¥{{item.finalPriceText}}</text>
</view> </view>
<view class="spec-arrow">→</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 无规格提示 --> <!-- 无规格提示 -->
<view wx:if="{{!loading && !error && specifications.length === 0}}" class="hint"> <view wx:if="{{!loading && !error && specifications.length === 0}}" class="empty-state" style="height: 600rpx; display: flex; box-sizing: border-box">
<view class="hint-icon">📋</view> <view class="empty-icon">📋</view>
<text>该商品暂无可用规格</text> <text class="empty-text">该商品暂无可用规格</text>
<button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
</view> </view>
</view> </view>
</view> </view>

461
pages/evaluate1/index.wxss
View File

@ -2,81 +2,52 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
} }
.header { .header {
background: #fff;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 10;
}
.header-content {
padding: 30rpx 0; padding: 30rpx 0;
text-align: center; text-align: center;
background-color: #fff;
border-bottom: 1rpx solid #eee;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
} }
.title { .title {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: 700;
color: #333; color: #2c3e50;
letter-spacing: 2rpx; letter-spacing: 2rpx;
} }
.content { .content {
flex: 1; flex: 1;
padding: 20rpx; padding: 16rpx;
}
.product-info {
background-color: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20rpx;
}
.back-button {
width: 100%;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
border-radius: 35rpx;
margin-top: 10rpx;
}
.product-label {
font-size: 28rpx;
color: #666;
margin-right: 20rpx;
}
.product-value {
font-size: 32rpx;
font-weight: bold;
color: #FF6B81;
flex: 1;
} }
/* 加载状态 */
.loading { .loading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 100rpx 0; padding: 160rpx 0;
color: #666;
} }
.loading-spinner { .loading-spinner {
width: 60rpx; width: 80rpx;
height: 60rpx; height: 80rpx;
border: 6rpx solid #f3f3f3; border: 8rpx solid rgba(74, 144, 226, 0.2);
border-top: 6rpx solid #FF6B81; border-top: 8rpx solid #4a90e2;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin-bottom: 20rpx; margin-bottom: 32rpx;
} }
@keyframes spin { @keyframes spin {
@ -84,204 +55,326 @@
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
.error { .loading-text {
font-size: 28rpx;
color: #666;
font-weight: 500;
}
/* 错误提示卡片 */
.error-card {
background: #fff;
border-radius: 16rpx;
padding: 48rpx;
margin: 32rpx 0;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; text-align: center;
padding: 40rpx;
background-color: #fff;
border-radius: 12rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
} }
.error-icon { .error-icon {
font-size: 60rpx; font-size: 80rpx;
margin-bottom: 20rpx; margin-bottom: 24rpx;
} }
.error text { .error-text {
display: block;
color: #ff4d4f;
margin-bottom: 30rpx;
font-size: 28rpx; font-size: 28rpx;
text-align: center; color: #e74c3c;
margin-bottom: 32rpx;
line-height: 1.5;
}
/* 按钮样式 */
.button-group {
display: flex;
gap: 16rpx;
width: 100%;
max-width: 600rpx;
} }
.retry-button { .btn-primary {
width: 200rpx; flex: 1;
height: 70rpx; height: 80rpx;
line-height: 70rpx; line-height: 80rpx;
font-size: 28rpx; font-size: 28rpx;
border-radius: 35rpx; font-weight: 600;
background-color: #FF6B81; border-radius: 40rpx;
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
color: #fff; color: #fff;
border: none;
box-shadow: 0 4rpx 12rpx rgba(96, 165, 250, 0.4);
transition: all 0.3s ease;
} }
.button-group { .btn-primary:hover {
display: flex; transform: translateY(-2rpx);
gap: 20rpx; box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5);
margin-top: 20rpx;
} }
.button-group button { .btn-secondary {
flex: 1; flex: 1;
height: 70rpx; height: 80rpx;
line-height: 70rpx; line-height: 80rpx;
font-size: 28rpx; font-size: 28rpx;
border-radius: 35rpx; font-weight: 600;
border-radius: 40rpx;
background: #fff;
color: #4a90e2;
border: 2rpx solid #4a90e2;
transition: all 0.3s ease;
} }
.section-header { .btn-secondary:hover {
background: rgba(74, 144, 226, 0.05);
transform: translateY(-2rpx);
}
.btn-back {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20rpx; justify-content: center;
padding: 8rpx 24rpx;
font-size: 24rpx;
color: #4a90e2;
background: transparent;
border: 1rpx solid #4a90e2;
border-radius: 20rpx;
transition: all 0.3s ease;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
} }
.section-title { .btn-back:hover {
font-size: 30rpx; background: rgba(74, 144, 226, 0.1);
font-weight: bold; transform: translateY(-2rpx);
color: #333; box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2);
padding-left: 15rpx;
border-left: 5rpx solid #FF6B81;
} }
.section-count { .btn-back-icon {
font-size: 24rpx; margin-right: 8rpx;
color: #999; font-size: 20rpx;
background-color: #f5f5f5;
padding: 5rpx 15rpx;
border-radius: 20rpx;
} }
.product-list, .btn-back-text {
.spec-list { font-size: 22rpx;
background-color: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
} }
.product-items, /* 商品信息卡片 */
.spec-items { .product-card {
display: flex; background: rgba(255, 255, 255, 0.95);
flex-direction: column; border-radius: 20rpx;
gap: 15rpx; padding: 32rpx;
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 {
width: 100%;
box-sizing: border-box;
} }
.product-item { .product-info-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 30rpx; margin-bottom: 16rpx;
border-radius: 10rpx; width: 100%;
background-color: #f9f9f9; box-sizing: border-box;
border: 1rpx solid #eee; }
transition: all 0.3s ease;
cursor: pointer; .product-label {
font-size: 24rpx;
color: #666;
font-weight: 500;
flex: 1;
} }
.spec-item { .product-name {
font-size: 32rpx;
font-weight: 700;
color: #2c3e50;
line-height: 1.4;
word-break: break-word;
margin-top: 12rpx;
padding: 12rpx 0;
border-top: 1rpx solid #f1f5f9;
}
/* 规格列表区域 */
.spec-section {
margin-top: 24rpx;
}
.section-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
padding: 30rpx; margin-bottom: 24rpx;
border-radius: 10rpx; padding: 0 8rpx;
background-color: #f9f9f9; }
border: 1rpx solid #eee;
.section-title {
font-size: 30rpx;
font-weight: 700;
color: #2c3e50;
padding-left: 16rpx;
border-left: 6rpx solid #4a90e2;
}
.section-count {
font-size: 24rpx;
color: #999;
background: rgba(74, 144, 226, 0.1);
padding: 6rpx 16rpx;
border-radius: 20rpx;
}
/* 规格网格布局 */
.spec-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
margin-top: 16rpx;
}
/* 规格卡片 */
.spec-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20rpx;
padding: 32rpx 24rpx;
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
position: relative;
overflow: hidden;
backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
min-height: 200rpx;
display: flex;
flex-direction: column; flex-direction: column;
gap: 15rpx;
} }
.spec-info { .spec-card::before {
flex: 1; content: '';
position: absolute;
top: 0;
left: 0;
width: 6rpx;
height: 100%;
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
} }
.spec-price-arrow { .spec-card:hover {
display: flex; transform: translateY(-6rpx);
justify-content: flex-end; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15);
align-items: center; background: rgba(255, 255, 255, 1);
gap: 10rpx;
width: 100%;
} }
.product-item:hover, .spec-card:active {
.spec-item:hover {
background-color: #f0f0f0;
transform: translateY(-2rpx); transform: translateY(-2rpx);
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
} }
.product-item.selected { .spec-info {
background-color: #FFE6E6; margin-bottom: 20rpx;
border-color: #FF6B81; flex: 1;
color: #FF6B81; display: flex;
align-items: center;
} }
.product-name,
.spec-name { .spec-name {
font-size: 28rpx; font-size: 28rpx;
color: #333; font-weight: 600;
flex: 1; color: #2c3e50;
line-height: 1.4;
word-break: break-word;
padding-right: 40rpx;
} }
.spec-price { .spec-price {
font-size: 28rpx; display: flex;
font-weight: bold; flex-direction: column;
color: #FF6B81; margin-top: 16rpx;
margin-right: 20rpx;
} }
.product-item.selected .product-name { .price-label {
color: #FF6B81; font-size: 20rpx;
font-weight: bold; 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);
} }
.product-arrow,
.spec-arrow { .spec-arrow {
font-size: 30rpx; position: absolute;
color: #999; top: 32rpx;
margin-left: 20rpx; right: 28rpx;
font-size: 32rpx;
color: #4a90e2;
font-weight: bold;
opacity: 0.6;
transition: all 0.3s ease;
} }
.product-item.selected .product-arrow { .spec-card:hover .spec-arrow {
color: #FF6B81; opacity: 1;
transform: translateX(4rpx);
} }
.hint { /* 空状态 */
.empty-state {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 100rpx 0; padding: 160rpx 0;
color: #999; text-align: center;
font-size: 28rpx;
} }
.hint-icon { .empty-icon {
font-size: 80rpx; font-size: 160rpx;
margin-bottom: 30rpx; margin-bottom: 40rpx;
opacity: 0.6;
}
.empty-text {
font-size: 32rpx;
color: #666;
margin-bottom: 48rpx;
line-height: 1.4;
padding: 0 40rpx;
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 375px) { @media (max-width: 750rpx) {
.content { .content {
padding: 15rpx; padding: 20rpx;
} }
.product-list, .spec-grid {
.spec-list { grid-template-columns: repeat(3, 1fr);
padding: 20rpx; gap: 16rpx;
} }
.product-item, .product-card {
.spec-item { padding: 28rpx;
padding: 20rpx; }
.spec-card {
padding: 28rpx 20rpx;
min-height: 180rpx;
} }
.title { .title {
@ -289,11 +382,45 @@
} }
.section-title { .section-title {
font-size: 26rpx; font-size: 28rpx;
}
.product-name {
font-size: 28rpx;
}
.price-value {
font-size: 32rpx;
}
.button-group {
flex-direction: column;
gap: 12rpx;
}
.btn-primary,
.btn-secondary {
width: 100%;
}
}
/* 小屏幕设备适配 */
@media (max-width: 414rpx) {
.spec-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12rpx;
}
.spec-card {
padding: 24rpx 16rpx;
min-height: 160rpx;
} }
.product-name,
.spec-name { .spec-name {
font-size: 26rpx; font-size: 24rpx;
}
.price-value {
font-size: 28rpx;
} }
} }

24
pages/evaluate1/product-list.wxml
View File

@ -1,36 +1,40 @@
<view class="container"> <view class="container">
<!-- 头部导航栏 -->
<view class="header"> <view class="header">
<text class="title">选择商品</text> <view class="header-content" style="width: 800rpx; display: block; box-sizing: border-box">
<text class="title">商品选择</text>
</view>
</view> </view>
<view class="content"> <view class="content">
<!-- 加载中状态 --> <!-- 加载中状态 -->
<view wx:if="{{loading}}" class="loading"> <view wx:if="{{loading}}" class="loading">
<view class="loading-spinner"></view> <view class="loading-spinner"></view>
<text>加载中...</text> <text class="loading-text">正在加载商品数据...</text>
</view> </view>
<!-- 错误提示 --> <!-- 错误提示 -->
<view wx:if="{{error}}" class="error"> <view wx:if="{{error}}" class="error-card">
<view class="error-icon">⚠️</view> <view class="error-icon">⚠️</view>
<text>{{error}}</text> <text class="error-text">{{error}}</text>
<button bindtap="loadProductNames" type="primary" class="retry-button">重试</button> <button bindtap="loadProductNames" class="btn-primary">重新加载</button>
</view> </view>
<!-- 商品名称列表 --> <!-- 商品名称列表 -->
<view wx:else class="product-list"> <view wx:else class="product-section">
<view class="section-header"> <view class="section-header">
<text class="section-title">商品名称</text> <text class="section-title">商品列表</text>
<text class="section-count">{{productNames.length}}个</text> <text class="section-count">{{productNames.length}}个商品</text>
</view> </view>
<view class="product-items"> <view class="product-grid" style="width: 700rpx; display: grid; box-sizing: border-box">
<view <view
wx:for="{{productNames}}" wx:for="{{productNames}}"
wx:key="*this" wx:key="*this"
class="product-item" class="product-card"
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 class="product-arrow">→</view>
</view> </view>

248
pages/evaluate1/product-list.wxss
View File

@ -2,47 +2,52 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
} }
.header { .header {
background: #fff;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 10;
}
.header-content {
padding: 30rpx 0; padding: 30rpx 0;
text-align: center; text-align: center;
background-color: #fff;
border-bottom: 1rpx solid #eee;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
} }
.title { .title {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: 700;
color: #333; color: #2c3e50;
letter-spacing: 2rpx; letter-spacing: 2rpx;
} }
.content { .content {
flex: 1; flex: 1;
padding: 20rpx; padding: 16rpx;
} }
/* 加载状态 */
.loading { .loading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 100rpx 0; padding: 160rpx 0;
color: #666;
} }
.loading-spinner { .loading-spinner {
width: 60rpx; width: 80rpx;
height: 60rpx; height: 80rpx;
border: 6rpx solid #f3f3f3; border: 8rpx solid rgba(74, 144, 226, 0.2);
border-top: 6rpx solid #FF6B81; border-top: 8rpx solid #4a90e2;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin-bottom: 20rpx; margin-bottom: 32rpx;
} }
@keyframes spin { @keyframes spin {
@ -50,120 +55,190 @@
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
.error { .loading-text {
font-size: 28rpx;
color: #666;
font-weight: 500;
}
/* 错误提示卡片 */
.error-card {
background: #fff;
border-radius: 16rpx;
padding: 48rpx;
margin: 32rpx 0;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; text-align: center;
padding: 40rpx;
background-color: #fff;
border-radius: 12rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
} }
.error-icon { .error-icon {
font-size: 60rpx; font-size: 80rpx;
margin-bottom: 20rpx; margin-bottom: 24rpx;
} }
.error text { .error-text {
display: block;
color: #ff4d4f;
margin-bottom: 30rpx;
font-size: 28rpx; font-size: 28rpx;
text-align: center; color: #e74c3c;
margin-bottom: 32rpx;
line-height: 1.5;
} }
.retry-button { /* 按钮样式 */
width: 200rpx; .btn-primary {
height: 70rpx; width: 240rpx;
line-height: 70rpx; height: 80rpx;
line-height: 80rpx;
font-size: 28rpx; font-size: 28rpx;
border-radius: 35rpx; font-weight: 600;
background-color: #FF6B81; border-radius: 40rpx;
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
color: #fff; color: #fff;
border: none;
box-shadow: 0 4rpx 12rpx rgba(96, 165, 250, 0.4);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2rpx);
box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5);
}
/* 商品列表区域 */
.product-section {
margin-top: 24rpx;
} }
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 24rpx;
padding: 0 8rpx;
} }
.section-title { .section-title {
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: 700;
color: #333; color: #2c3e50;
padding-left: 15rpx; padding-left: 16rpx;
border-left: 5rpx solid #FF6B81; border-left: 6rpx solid #4a90e2;
} }
.section-count { .section-count {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
background-color: #f5f5f5; background: rgba(74, 144, 226, 0.1);
padding: 5rpx 15rpx; padding: 6rpx 16rpx;
border-radius: 20rpx; border-radius: 20rpx;
} }
.product-list { /* 商品网格布局 */
background-color: #fff; .product-grid {
border-radius: 12rpx; display: grid;
padding: 30rpx; grid-template-columns: repeat(3, 1fr);
margin-bottom: 30rpx; gap: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); margin-top: 16rpx;
} }
.product-items { /* 商品卡片 */
.product-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20rpx;
padding: 32rpx 24rpx;
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15rpx; align-items: center;
text-align: center;
min-height: 180rpx;
backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
} }
.product-item { .product-card::before {
display: flex; content: '';
justify-content: space-between; position: absolute;
align-items: center; top: 0;
padding: 30rpx; left: 0;
border-radius: 10rpx; width: 100%;
background-color: #f9f9f9; height: 6rpx;
border: 1rpx solid #eee; background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
transition: all 0.3s ease; }
cursor: pointer;
.product-card:hover {
transform: translateY(-6rpx);
box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15);
background: rgba(255, 255, 255, 1);
} }
.product-item:hover { .product-card:active {
background-color: #f0f0f0;
transform: translateY(-2rpx); transform: translateY(-2rpx);
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); 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: 28rpx;
color: #333; font-weight: 600;
color: #2c3e50;
line-height: 1.4;
word-break: break-word;
margin-bottom: 20rpx;
flex: 1; flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8rpx;
} }
.product-arrow { .product-arrow {
font-size: 30rpx; position: absolute;
color: #999; bottom: 20rpx;
margin-left: 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: 375px) { @media (max-width: 750rpx) {
.content { .content {
padding: 15rpx; padding: 20rpx;
} }
.product-list { .product-grid {
padding: 20rpx; grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
} }
.product-item { .product-card {
padding: 20rpx; padding: 28rpx 20rpx;
min-height: 160rpx;
} }
.title { .title {
@ -171,10 +246,35 @@
} }
.section-title { .section-title {
font-size: 26rpx; font-size: 28rpx;
}
.product-name {
font-size: 24rpx;
}
.product-icon {
font-size: 60rpx;
}
}
/* 小屏幕设备适配 */
@media (max-width: 414rpx) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12rpx;
}
.product-card {
padding: 20rpx 16rpx;
min-height: 140rpx;
} }
.product-name { .product-name {
font-size: 26rpx; font-size: 22rpx;
}
.product-icon {
font-size: 50rpx;
} }
} }

16
pages/evaluate1/spec-detail.js
View File

@ -40,6 +40,22 @@ Page({
}); });
}, },
// 减少数量
decreaseQuantity() {
if (this.data.quantity > 1) {
this.setData({
quantity: this.data.quantity - 1
});
}
},
// 增加数量
increaseQuantity() {
this.setData({
quantity: this.data.quantity + 1
});
},
// 计算价格 // 计算价格
calculatePrice() { calculatePrice() {
const totalPrice = Math.round(this.data.price * this.data.quantity * 10) / 10; const totalPrice = Math.round(this.data.price * this.data.quantity * 10) / 10;

74
pages/evaluate1/spec-detail.wxml
View File

@ -1,45 +1,59 @@
<view class="container"> <view class="page-container">
<view class="header"> <!-- 头部导航栏 -->
<text class="title">{{productName}}</text> <view class="page-header">
<text class="header-title">{{productName || '规格详情'}}</text>
</view> </view>
<view class="content"> <!-- 主要内容区域 -->
<view class="spec-card"> <view class="main-content">
<view class="spec-item"> <!-- 规格信息卡片 -->
<text class="label">规格：</text> <view class="info-card">
<text class="value">{{specification}}</text> <text class="card-subtitle">规格信息</text>
<view class="info-row">
<text class="info-label">规格</text>
<text class="info-value">{{specification}}</text>
</view> </view>
<view class="spec-item"> <view class="info-row">
<text class="label">单价：</text> <text class="info-label">单价</text>
<text class="value price">¥{{price || 0}}</text> <text class="info-value price">¥{{price || 0}}</text>
</view>
<view class="spec-info">
<text>您已选择此规格进行估价</text>
</view> </view>
<text class="info-hint">您已选择此规格进行估价</text>
</view> </view>
<view class="quantity-section"> <!-- 数量设置卡片 -->
<text class="label">件数：</text> <view class="control-card">
<input <text class="card-subtitle">数量设置</text>
class="quantity-input" <view class="quantity-box">
type="number" <button bindtap="decreaseQuantity" class="quantity-btn minus" style="width: 180rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">-</button>
value="{{quantity}}" <input style="width: 420rpx; display: block; box-sizing: border-box"
bindinput="onQuantityChange" class="quantity-input"
min="1" type="number"
/> value="{{quantity}}"
bindinput="onQuantityChange"
min="1"
/>
<button bindtap="increaseQuantity" class="quantity-btn plus" style="width: 180rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">+</button>
</view>
</view> </view>
<view class="calculate-section"> <!-- 计算按钮 -->
<button bindtap="calculatePrice" type="primary" class="calculate-button">计算价格</button> <view class="button-section">
<button bindtap="calculatePrice" class="primary-btn" style="height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">计算预估价格</button>
</view> </view>
<view class="result-section"> <!-- 结果展示卡片 -->
<text class="result-label">预估：</text> <view class="result-card" wx:if="{{totalPrice > 0}}">
<text class="result-value">¥{{totalPrice > 0 ? totalPrice : ''}}</text> <text class="card-subtitle">预估结果</text>
<view class="result-row">
<text class="result-label">预估总价</text>
<text class="result-value">¥{{totalPrice}}</text>
</view>
<text class="result-hint">此价格为预估价格，实际价格可能会有所变动</text>
</view> </view>
<view class="action"> <!-- 返回按钮 -->
<button bindtap="goBack" type="default">返回</button> <view class="button-section bottom">
<button bindtap="goBack" class="secondary-btn" style="height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">返回规格列表</button>
</view> </view>
</view> </view>
</view> </view>

418
pages/evaluate1/spec-detail.wxss
View File

@ -1,127 +1,401 @@
.container { /* 页面容器 */
.page-container {
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
display: flex;
flex-direction: column;
box-sizing: border-box;
} }
.header { /* 头部样式 */
padding: 30rpx 0; .page-header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10rpx);
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
padding: 28rpx 0;
text-align: center; text-align: center;
background-color: #fff; position: sticky;
border-bottom: 1rpx solid #eee; top: 0;
z-index: 10;
} }
.title { .header-title {
font-size: 32rpx; font-size: 30rpx;
font-weight: bold; font-weight: 700;
color: #333; color: #2c3e50;
letter-spacing: 1rpx;
} }
.content { /* 主要内容区域 */
padding: 30rpx; .main-content {
flex: 1;
padding: 24rpx;
display: flex;
flex-direction: column;
gap: 24rpx;
padding-bottom: 48rpx;
box-sizing: border-box;
} }
.spec-card { /* 卡片基础样式 */
background-color: #fff; .info-card,
border-radius: 12rpx; .control-card,
padding: 40rpx; .result-card {
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); background: rgba(255, 255, 255, 0.95);
margin-bottom: 40rpx; border-radius: 24rpx;
padding: 32rpx;
box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.08);
backdrop-filter: blur(12rpx);
border: 1rpx solid rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
box-sizing: border-box;
} }
.spec-item { .info-card:hover,
.control-card:hover,
.result-card:hover {
box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
transform: translateY(-4rpx);
background: rgba(255, 255, 255, 0.98);
}
/* 卡片标题 */
.card-subtitle {
font-size: 26rpx;
font-weight: 600;
color: #64748b;
margin-bottom: 24rpx;
padding-bottom: 16rpx;
border-bottom: 1rpx solid #f1f5f9;
}
/* 信息行样式 */
.info-row {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 30rpx; padding: 16rpx 0;
border-bottom: 1rpx solid #f8fafc;
} }
.label { .info-row:last-child {
font-size: 28rpx; border-bottom: none;
color: #666;
margin-right: 20rpx;
width: 120rpx;
} }
.value { .info-label {
font-size: 32rpx; font-size: 26rpx;
font-weight: bold; color: #64748b;
color: #FF6B81; font-weight: 500;
flex: 1;
} }
.price { .info-value {
color: #FF6B81; font-size: 26rpx;
font-weight: 600;
color: #2c3e50;
} }
.spec-info { .info-value.price {
padding-top: 20rpx; color: #ef4444;
border-top: 1rpx solid #eee; font-size: 32rpx;
font-weight: 700;
}
/* 提示信息 */
.info-hint {
font-size: 22rpx;
color: #94a3b8;
text-align: center; text-align: center;
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 1rpx solid #f1f5f9;
} }
.spec-info text { /* 数量控制 */
font-size: 24rpx; .quantity-box {
color: #999; display: flex;
align-items: center;
gap: 24rpx;
margin-top: 12rpx;
justify-content: center;
} }
.quantity-section { .quantity-btn {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
font-size: 36rpx;
font-weight: bold;
background: rgba(255, 255, 255, 0.9);
color: #3b82f6;
border: 2rpx solid rgba(96, 165, 250, 0.4);
backdrop-filter: blur(12rpx);
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30rpx; justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
}
.quantity-btn:hover {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.6);
transform: scale(1.1);
}
.quantity-btn.minus:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.6);
color: #ef4444;
}
.quantity-btn.plus:hover {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.6);
color: #10b981;
} }
.quantity-input { .quantity-input {
flex: 1; width: 160rpx;
height: 80rpx; height: 80rpx;
border: 2rpx solid #ddd; border: 2rpx solid rgba(96, 165, 250, 0.4);
border-radius: 8rpx; border-radius: 16rpx;
padding: 0 20rpx; padding: 0 24rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600;
text-align: center;
color: #2c3e50;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12rpx);
box-shadow: inset 0 2rpx 8rpx rgba(0,0,0,0.08);
box-sizing: border-box;
} }
.calculate-section { /* 按钮区域 */
display: flex; .button-section {
justify-content: center; margin-top: 12rpx;
margin-bottom: 30rpx;
} }
.calculate-button { .button-section.bottom {
width: 80%; margin-top: 20rpx;
height: 80rpx; }
/* 按钮样式 */
.primary-btn {
width: 100%;
height: 92rpx;
line-height: 92rpx;
font-size: 28rpx; font-size: 28rpx;
border-radius: 40rpx; font-weight: 600;
border-radius: 46rpx;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
border: none;
box-shadow: 0 6rpx 24rpx rgba(59, 130, 246, 0.4);
transition: all 0.3s ease;
text-align: center;
} }
.result-section { .primary-btn:hover {
transform: translateY(-4rpx);
box-shadow: 0 8rpx 32rpx rgba(59, 130, 246, 0.5);
}
.secondary-btn {
width: 100%;
height: 84rpx;
line-height: 84rpx;
font-size: 26rpx;
font-weight: 600;
border-radius: 42rpx;
background: rgba(255, 255, 255, 0.95);
color: #3b82f6;
border: 2rpx solid rgba(59, 130, 246, 0.4);
backdrop-filter: blur(12rpx);
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}
.secondary-btn:hover {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.6);
transform: translateY(-4rpx);
box-shadow: 0 6rpx 24rpx rgba(59, 130, 246, 0.3);
}
/* 结果卡片 */
.result-card {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 结果行 */
.result-row {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 40rpx; padding: 20rpx 0;
padding: 20rpx;
background-color: #f9f9f9;
border-radius: 8rpx;
} }
.result-label { .result-label {
font-size: 28rpx; font-size: 26rpx;
color: #666; color: #64748b;
margin-right: 20rpx; font-weight: 500;
width: 120rpx;
} }
.result-value { .result-value {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: 700;
color: #FF6B81; color: #ef4444;
flex: 1; text-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.2);
} }
.action { /* 结果提示 */
display: flex; .result-hint {
justify-content: center; font-size: 22rpx;
color: #94a3b8;
text-align: center;
margin-top: 16rpx;
padding-top: 16rpx;
border-top: 1rpx solid #f1f5f9;
line-height: 1.5;
} }
button { /* 响应式设计 */
width: 80%; @media (max-width: 750rpx) {
height: 80rpx; .main-content {
font-size: 28rpx; padding: 20rpx;
border-radius: 40rpx; gap: 20rpx;
}
.info-card,
.control-card,
.result-card {
padding: 28rpx;
}
.header-title {
font-size: 28rpx;
}
.card-subtitle {
font-size: 24rpx;
margin-bottom: 20rpx;
}
.info-label,
.info-value {
font-size: 24rpx;
}
.info-value.price {
font-size: 30rpx;
}
.result-value {
font-size: 32rpx;
}
.quantity-box {
gap: 20rpx;
}
.quantity-btn {
width: 72rpx;
height: 72rpx;
font-size: 32rpx;
}
.quantity-input {
width: 140rpx;
height: 72rpx;
font-size: 26rpx;
}
.primary-btn {
height: 84rpx;
line-height: 84rpx;
font-size: 26rpx;
}
.secondary-btn {
height: 76rpx;
line-height: 76rpx;
font-size: 24rpx;
}
}
/* 小屏幕设备适配 */
@media (max-width: 375rpx) {
.main-content {
padding: 16rpx;
gap: 16rpx;
}
.info-card,
.control-card,
.result-card {
padding: 24rpx;
}
.header-title {
font-size: 26rpx;
}
.card-subtitle {
font-size: 22rpx;
margin-bottom: 16rpx;
}
.info-label,
.info-value {
font-size: 22rpx;
}
.info-value.price {
font-size: 28rpx;
}
.result-value {
font-size: 28rpx;
}
.quantity-box {
gap: 16rpx;
}
.quantity-btn {
width: 64rpx;
height: 64rpx;
font-size: 28rpx;
}
.quantity-input {
width: 120rpx;
height: 64rpx;
font-size: 24rpx;
}
.primary-btn {
height: 76rpx;
line-height: 76rpx;
font-size: 24rpx;
}
.secondary-btn {
height: 68rpx;
line-height: 68rpx;
font-size: 22rpx;
}
} }

Write Preview
Loading…
Cancel
Save