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

feat: 实现玻璃质感UI和瀑布流布局 

- 实现左长右短左短右长交替瀑布流布局
- 商品卡片添加半透明毛玻璃效果和3D悬浮效果
- 将价格替换为货源情况、认证状态、议价状态标签
- 分类标签改为圆角矩形玻璃质感样式
- 搜索页面样式与首页保持一致
- 修复WXSS编译错误
pull/1/head
Trae AI 2 months ago
parent
8355f56d0f
commit
734b4b7ba3
5 changed files with 676 additions and 193 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 353
      pages/buyer/index.wxss
  2. 112
      pages/index/index.js
  3. 97
      pages/index/index.wxml
  4. 303
      pages/index/index.wxss
  5. 2
      project.private.config.json

353
pages/buyer/index.wxss
View File

@ -1,93 +1,100 @@
/* pages/buyer/index.wxss */
page {
height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
background-color: #f5f5f5;
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #f8f8f8;
padding: 0;
margin: 0;
}
/* 搜索框样式 */
.search-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 20rpx;
background-color: transparent;
z-index: 100;
width: 100%;
margin: 20rpx;
flex: 0 1 auto;
box-sizing: border-box;
}
.search-container {
display: flex;
align-items: center;
border: 1rpx solid rgba(0, 0, 0, 0.08);
border-radius: 40rpx;
background-color: white;
padding: 0 30rpx;
margin: 0 auto;
width: 90%;
height: 80rpx;
width: 100%;
border-radius: 50rpx;
background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
padding: 6rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
box-sizing: border-box;
transition: all 0.3s ease;
}
.search-container:focus-within {
border-color: #07c160;
background-color: white;
box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1);
border: 1rpx solid rgba(22, 119, 255, 0.2);
}
.search-icon {
font-size: 30rpx;
margin: 0 15rpx;
font-size: 28rpx;
color: #999;
margin-right: 20rpx;
}
.search-input {
flex: 1;
font-size: 30rpx;
height: 70rpx;
font-size: 28rpx;
color: #333;
background-color: transparent;
background: transparent;
border: none;
outline: none;
height: 60rpx;
line-height: 60rpx;
}
.search-input::placeholder {
color: #999;
font-size: 30rpx;
font-size: 28rpx;
}
.clear-icon {
font-size: 45rpx;
color: #26ba20ff;
padding: 8rpx;
border-radius: 0;
background-color: transparent;
cursor: pointer;
transition: all 0.2s ease;
}
.clear-icon:hover {
background-color: transparent;
color: #666;
font-size: 32rpx;
color: #999;
padding: 10rpx 20rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
width: 100%;
text-align: center;
/* 商品列表样式 */
.goods-list {
flex: 1;
padding: 20rpx 32rpx;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.card {
background: white;
border-radius: 12rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 20rpx;
box-shadow:
0 6rpx 24rpx rgba(0, 0, 0, 0.15),
0 0 0 1rpx rgba(0, 0, 0, 0.08),
inset 0 0 0 1rpx rgba(255, 255, 255, 0.95);
border: 2rpx solid rgba(200, 200, 200, 0.5);
margin-bottom: 16rpx;
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-4rpx);
box-shadow:
0 12rpx 32rpx rgba(0, 0, 0, 0.2),
0 0 0 2rpx rgba(0, 0, 0, 0.1),
inset 0 0 0 1rpx rgba(255, 255, 255, 1);
}
.image-swiper {
@ -95,6 +102,175 @@
height: 100%;
}
/* 商品卡片内部布局 */
.goods-card-content {
display: flex;
width: 100%;
height: 200rpx;
}
.goods-image-section {
width: 40%;
position: relative;
height: 200rpx;
}
.goods-image {
width: 100%;
height: 100%;
}
.goods-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
color: #999;
font-size: 24rpx;
}
.image-page-indicator {
position: absolute;
bottom: 10rpx;
right: 10rpx;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 4rpx 12rpx;
border-radius: 15rpx;
font-size: 20rpx;
}
.goods-info-section {
width: 60%;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5rpx);
border-left: 1rpx solid rgba(240, 240, 240, 0.8);
}
.goods-info-top {
flex: 0.6;
padding: 16rpx 20rpx;
display: flex;
flex-direction: column;
}
.goods-name-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8rpx;
margin-bottom: 8rpx;
}
.supply-tag {
font-size: 20rpx;
padding: 4rpx 10rpx;
border-radius: 8rpx;
font-weight: 600;
white-space: nowrap;
}
.supply-tag.spot {
background: rgba(82, 196, 26, 0.15);
color: #389e0d;
border: 1rpx solid rgba(82, 196, 26, 0.5);
}
.supply-tag.presale {
background: rgba(255, 154, 28, 0.15);
color: #d46b08;
border: 1rpx solid rgba(255, 154, 28, 0.5);
}
.auth-badge {
font-size: 20rpx;
padding: 4rpx 10rpx;
background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%);
color: white;
clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%);
font-weight: bold;
}
.goods-name {
font-size: 30rpx;
font-weight: bold;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.goods-spec {
font-size: 24rpx;
color: #888;
margin-top: 8rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods-info-bottom {
flex: 0.4;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
border-top: 1rpx solid rgba(240, 240, 240, 0.5);
}
.favorite-count {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999;
}
.favorite-count .count {
color: #d865d8;
font-weight: bold;
margin: 0 6rpx;
}
.favorite-button {
font-size: 22rpx;
font-weight: 600;
width: 120rpx;
height: 50rpx;
border-radius: 25rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
border: none;
transition: all 0.3s ease;
}
.favorite-button.add {
color: #1677ff;
background: rgba(22, 119, 255, 0.15);
border: 1rpx solid rgba(22, 119, 255, 0.3);
}
.favorite-button.add:hover {
background: rgba(22, 119, 255, 0.25);
}
.favorite-button.add:active {
transform: scale(0.95);
}
.favorite-button.canceled {
color: #ff6b6b;
background: rgba(255, 107, 107, 0.15);
border: 1rpx solid rgba(255, 107, 107, 0.3);
}
/* 弹窗样式 */
.modal-overlay {
position: fixed;
@ -144,15 +320,15 @@
padding: 0;
border-radius: 20rpx 20rpx 0 0;
width: 100%;
height: 100vh; /* 改为全屏高度 */
max-height: 100vh; /* 确保不超过屏幕高度 */
height: 100vh;
max-height: 100vh;
overflow: hidden;
box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
margin-bottom: 0; /* 导航栏已隐藏，无需间距 */
margin-bottom: 0;
z-index: 9999;
position: absolute; /* 确保弹窗位于遮罩层内 */
position: absolute;
top: 0;
left: 0;
}
@ -194,13 +370,13 @@
padding: 40rpx;
overflow-y: auto;
flex: 1;
height: calc(100vh - 120rpx); /* 减去头部高度，实现全屏滚动 */
-webkit-overflow-scrolling: touch; /* 优化iOS滚动体验 */
width: 100%; /* 确保宽度100% */
box-sizing: border-box; /* 确保padding不影响宽度计算 */
height: calc(100vh - 120rpx);
-webkit-overflow-scrolling: touch;
width: 100%;
box-sizing: border-box;
}
.goods-image-section {
.goods-image-section-detail {
margin-bottom: 40rpx;
border-radius: 12rpx;
overflow: hidden;
@ -217,17 +393,11 @@
height: 100%;
}
.goods-image {
width: 100%;
height: 100%;
display: block;
}
.goods-info-section {
.goods-info-section-detail {
text-align: left;
}
.goods-name {
.goods-name-detail {
font-size: 36rpx;
font-weight: 600;
color: #2c3e50;
@ -304,28 +474,28 @@
}
.call-phone-button {
background-color: white;
color: black;
font-size: 24rpx;
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
padding: 0;
border-radius: 20rpx;
border: 1rpx solid #d9d9d9;
transition: all 0.3s;
white-space: nowrap;
text-align: center;
background-color: white;
color: black;
font-size: 24rpx;
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
padding: 0;
border-radius: 20rpx;
border: 1rpx solid #d9d9d9;
transition: all 0.3s;
white-space: nowrap;
text-align: center;
}
.call-phone-button:hover {
background-color: #f5f5f5;
transform: translateY(-1rpx);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
background-color: #f5f5f5;
transform: translateY(-1rpx);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.call-phone-button:active {
transform: translateY(0);
transform: translateY(0);
}
.goods-action-section {
@ -612,3 +782,16 @@ button:after {
padding: 24rpx 0;
border: 2rpx solid #e5e5e5;
}
/* 已加载全部提示 */
.load-complete {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 20rpx;
}
.load-complete text {
color: #999;
font-size: 26rpx;
}

112
pages/index/index.js
View File

@ -31,6 +31,9 @@ Page({
// 商品相关
goods: [],
filteredGoods: [],
groupedGoods: [],
leftColumnGoods: [],
rightColumnGoods: [],
selectedCategory: '全部',
loadingMore: false,
hasMoreData: true,
@ -277,13 +280,14 @@ Page({
(reservedCountValue !== undefined && reservedCountValue !== null ? reservedCountValue :
(reservationCountValue || 0));
// 转换supplyStatus字段值
// 货源情况 - 直接显示数据库字段值
let supplyStatusValue = product.supplyStatus || '';
if (['平台货源', '三方认证'].includes(supplyStatusValue)) {
supplyStatusValue = '现货';
} else if (supplyStatusValue === '三方未认证') {
supplyStatusValue = '预售';
}
// 认证状态 - 直接显示数据库的sourceType字段值
let sourceTypeValue = product.sourceType || '';
// 处理议价状态 - 全部显示可议价
let negotiateValue = '可议价';
// 处理图片URL，确保imageUrls字段存在且为数组
const imageUrls = product.imageUrls || product.images || [];
@ -302,7 +306,8 @@ Page({
product_contact: product.product_contact || '',
contact_phone: product.contact_phone || '',
supplyStatus: supplyStatusValue,
sourceType: product.sourceType || '',
sourceType: sourceTypeValue,
negotiateStatus: negotiateValue,
isReserved: false,
isFavorite: false,
currentImageIndex: 0,
@ -329,6 +334,8 @@ Page({
// 应用筛选条件
const filteredGoods = this.applyFilters(updatedGoods)
const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
// 计算是否还有更多数据
const totalGoods = res.total || 0;
@ -338,6 +345,9 @@ Page({
this.setData({
goods: updatedGoods,
filteredGoods: filteredGoods,
groupedGoods: groupedGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods,
loadingMore: false,
page: currentPage + 1,
hasMoreData: hasMoreData,
@ -439,6 +449,75 @@ Page({
return filtered
},
// 分组商品用于交错布局（左长右短，左短右长交替）
groupGoodsForStaggeredLayout: function(goods) {
if (!goods || goods.length === 0) {
return []
}
const grouped = []
const len = goods.length
for (let i = 0; i < len; i += 2) {
const row = []
// 第一个商品：如果是偶数行(index为偶数)，则是长商品；如果是奇数行，则是短商品
if (i < len) {
row.push({
...goods[i],
isLong: i % 2 === 0 // 偶数索引为长商品
})
}
// 第二个商品：与第一个相反
if (i + 1 < len) {
row.push({
...goods[i + 1],
isLong: i % 2 !== 0 // 奇数索引为长商品
})
}
grouped.push(row)
}
return grouped
},
// 瀑布流布局：将商品分配到左右两列
// 规则：左长右短 -> 左短右长 交替排列
// 偶数行(0,2,4...)：左长右短
// 奇数行(1,3,5...)：左短右长
distributeToColumns: function(goods) {
if (!goods || goods.length === 0) {
return { leftColumnGoods: [], rightColumnGoods: [] }
}
const leftColumn = []
const rightColumn = []
const rowCount = Math.ceil(goods.length / 2)
for (let i = 0; i < goods.length; i += 2) {
const currentRow = Math.floor(i / 2)
const isEvenRow = currentRow % 2 === 0
if (i < goods.length) {
leftColumn.push({
...goods[i],
isLong: isEvenRow // 偶数行左边为长，奇数行左边为短
})
}
if (i + 1 < goods.length) {
rightColumn.push({
...goods[i + 1],
isLong: !isEvenRow // 偶数行右边为短，奇数行右边为长
})
}
}
return { leftColumnGoods: leftColumn, rightColumnGoods: rightColumn }
},
// 搜索输入
onSearchInput: function(e) {
this.setData({
@ -455,8 +534,13 @@ Page({
}
const filteredGoods = this.applyFilters(this.data.goods)
const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
this.setData({
filteredGoods: filteredGoods
filteredGoods: filteredGoods,
groupedGoods: groupedGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods
})
},
@ -484,8 +568,13 @@ Page({
}
const filteredGoods = this.applyFilters(this.data.goods)
const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
this.setData({
filteredGoods: filteredGoods,
groupedGoods: groupedGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods,
showRegionPicker: false
})
},
@ -509,8 +598,13 @@ Page({
})
const filteredGoods = this.applyFilters(this.data.goods)
const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
this.setData({
filteredGoods: filteredGoods
filteredGoods: filteredGoods,
groupedGoods: groupedGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods
})
},

97
pages/index/index.wxml
View File

@ -136,33 +136,80 @@
style="height: calc(100% - 60rpx);"
>
<view class="goods-list-container">
<view
wx:for="{{filteredGoods}}"
wx:key="id"
class="goods-item"
data-item="{{item}}"
bindtap="viewGoodsDetail"
>
<!-- 商品图片 -->
<view class="goods-image-container">
<image
class="goods-image"
src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}"
mode="aspectFill"
bindtap="previewImage"
<view class="waterfall-container">
<view class="waterfall-column left-column">
<view
class="goods-item {{item.isLong ? 'long-card' : 'short-card'}}"
wx:for="{{leftColumnGoods}}"
wx:key="id"
data-item="{{item}}"
data-index="0"
></image>
<view class="goods-tag">{{item.supplyStatus || '现货'}}</view>
bindtap="viewGoodsDetail"
>
<view class="goods-card">
<view class="goods-image-container">
<image
class="goods-image"
src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}"
mode="aspectFill"
bindtap="previewImage"
data-item="{{item}}"
data-index="0"
></image>
</view>
<view class="goods-info">
<view class="goods-name">{{item.name}}</view>
<view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view>
<view class="goods-status-row">
<view class="status-tag supply-{{item.supplyStatus === '预售' ? 'presale' : 'spot'}}">{{item.supplyStatus || ''}}</view>
<view class="status-tag source-{{item.sourceType ? 'yes' : 'no'}}">{{item.sourceType || ''}}</view>
<view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
</view>
<view class="goods-footer">
<view class="goods-region-bg">
<view class="goods-region">{{item.region}}</view>
</view>
<view class="goods-reserved">已有{{item.reservedCount || 0}}人收藏</view>
</view>
</view>
</view>
</view>
</view>
<!-- 商品信息 -->
<view class="goods-info">
<view class="goods-name">{{item.name}}</view>
<view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view>
<view class="goods-price">¥{{item.price}}</view>
<view class="goods-footer">
<view class="goods-region">{{item.region}}</view>
<view class="goods-reserved">已有{{item.reservedCount || 0}}人收藏</view>
<view class="waterfall-column right-column">
<view
class="goods-item {{item.isLong ? 'long-card' : 'short-card'}}"
wx:for="{{rightColumnGoods}}"
wx:key="id"
data-item="{{item}}"
bindtap="viewGoodsDetail"
>
<view class="goods-card">
<view class="goods-image-container">
<image
class="goods-image"
src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}"
mode="aspectFill"
bindtap="previewImage"
data-item="{{item}}"
data-index="0"
></image>
</view>
<view class="goods-info">
<view class="goods-name">{{item.name}}</view>
<view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view>
<view class="goods-status-row">
<view class="status-tag supply-{{item.supplyStatus === '预售' ? 'presale' : 'spot'}}">{{item.supplyStatus || ''}}</view>
<view class="status-tag source-{{item.sourceType ? 'yes' : 'no'}}">{{item.sourceType || ''}}</view>
<view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
</view>
<view class="goods-footer">
<view class="goods-region-bg">
<view class="goods-region">{{item.region}}</view>
</view>
<view class="goods-reserved">已有{{item.reservedCount || 0}}人收藏</view>
</view>
</view>
</view>
</view>
</view>
</view>

303
pages/index/index.wxss
View File

@ -3,7 +3,7 @@ page {
height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
margin: 0;
padding: 0;
}
@ -16,7 +16,7 @@ page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #f5f7fa;
background-color: #f8f8f8;
}
/* 标题样式 */
@ -192,70 +192,53 @@ page {
.category-scroll {
display: flex;
gap: 15rpx;
padding: 8rpx 15rpx;
gap: 16rpx;
padding: 12rpx 16rpx;
white-space: nowrap;
overflow-x: auto;
background-color: transparent;
border-radius: 10rpx;
box-shadow: none;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
border-radius: 40rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid rgba(255, 255, 255, 0.5);
}
/* 蛋形样式 - 玻璃质感 */
.egg-item {
position: relative;
width: 80rpx;
height: 100rpx;
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10rpx);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
padding: 16rpx 28rpx;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8rpx);
-webkit-backdrop-filter: blur(8rpx);
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
border: 1rpx solid rgba(255, 255, 255, 0.5);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid rgba(200, 200, 200, 0.5);
flex-shrink: 0;
}
/* 不同品种的颜色 */
.egg-item:nth-child(2) { /* 粉壳 */
background-color: rgba(255, 182, 193, 0.3);
border-color: rgba(255, 182, 193, 0.7);
}
.egg-item:nth-child(3) { /* 红壳 */
background-color: rgba(255, 105, 180, 0.3);
border-color: rgba(255, 105, 180, 0.7);
}
.egg-item:nth-child(4) { /* 绿壳 */
background-color: rgba(144, 238, 144, 0.3);
border-color: rgba(144, 238, 144, 0.7);
}
.egg-item:nth-child(5) { /* 白壳 */
background-color: rgba(245, 245, 245, 0.5);
border-color: rgba(245, 245, 245, 0.8);
}
.egg-item.active {
background-color: rgba(22, 119, 255, 0.4);
border-color: rgba(22, 119, 255, 0.8);
box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.3);
transform: scale(1.05);
background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
color: white;
box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.35);
border: 1rpx solid transparent;
transform: translateY(-2rpx);
}
.egg-inner {
font-size: 22rpx;
color: #333;
font-weight: bold;
font-size: 26rpx;
color: #555;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.egg-item.active .egg-inner {
color: #1677ff;
font-size: 24rpx;
color: #ffffff;
font-size: 28rpx;
}
/* 侧边栏按钮样式 - 白色半透明毛玻璃质感 */
@ -450,25 +433,105 @@ page {
}
.goods-list-container {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
justify-content: flex-start;
padding: 20rpx 24rpx;
padding-bottom: 20rpx;
}
.waterfall-container {
display: flex;
gap: 32rpx;
width: 100%;
}
.waterfall-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.left-column {
align-items: flex-start;
}
.right-column {
align-items: flex-end;
}
.goods-item {
width: calc((100% - 20rpx) / 2);
background-color: #f9f9f9;
border-radius: 10rpx;
width: 100%;
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transform-style: preserve-3d;
perspective: 1000rpx;
}
.goods-card {
width: 100%;
border-radius: 20rpx;
overflow: hidden;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
box-shadow:
0 6rpx 24rpx rgba(0, 0, 0, 0.15),
0 0 0 1rpx rgba(0, 0, 0, 0.08),
inset 0 0 0 1rpx rgba(255, 255, 255, 0.95);
border: 2rpx solid rgba(200, 200, 200, 0.5);
display: flex;
flex-direction: column;
}
.goods-item:hover {
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
transform: translateY(-2rpx);
transform: translateY(-8rpx);
box-shadow:
0 16rpx 40rpx rgba(0, 0, 0, 0.22),
0 0 0 2rpx rgba(0, 0, 0, 0.12),
inset 0 0 0 1rpx rgba(255, 255, 255, 1);
}
.goods-item:active {
transform: translateY(-4rpx);
}
.goods-item.long-card {
margin-bottom: 24rpx;
}
.goods-item.long-card .goods-info {
min-height: 200rpx;
padding: 24rpx;
}
.goods-item.short-card {
margin-bottom: 16rpx;
}
.goods-item.short-card .goods-info {
min-height: 140rpx;
padding: 16rpx;
}
.goods-item.short-card .goods-name {
-webkit-line-clamp: 1;
min-height: 40rpx;
}
.goods-item.short-card .goods-spec {
margin-bottom: 8rpx;
}
.goods-item.short-card .goods-price {
font-size: 32rpx;
}
.left-column .goods-item {
transform: translateZ(10rpx);
}
.right-column .goods-item {
transform: translateZ(-10rpx);
}
.goods-image-container {
@ -476,6 +539,7 @@ page {
width: 100%;
padding-bottom: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
}
.goods-image {
@ -485,64 +549,159 @@ page {
width: 100%;
height: 100%;
background-color: #eee;
transition: all 0.4s ease;
}
.goods-item:hover .goods-image {
transform: scale(1.05);
}
.goods-tag {
position: absolute;
top: 10rpx;
left: 10rpx;
background-color: rgba(255, 90, 90, 0.8);
top: 16rpx;
left: 16rpx;
background: rgba(255, 90, 90, 0.85);
backdrop-filter: blur(8rpx);
color: white;
font-size: 20rpx;
padding: 5rpx 10rpx;
border-radius: 15rpx;
font-size: 22rpx;
padding: 8rpx 16rpx;
border-radius: 20rpx;
font-weight: bold;
box-shadow: 0 2rpx 8rpx rgba(255, 90, 90, 0.3);
border: 1rpx solid rgba(255, 255, 255, 0.3);
}
.goods-info {
padding: 15rpx;
padding: 20rpx;
flex: 1;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10rpx);
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}
.goods-name {
font-size: 26rpx;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 10rpx;
margin-bottom: 12rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 60rpx;
line-height: 1.4;
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
}
.goods-spec {
font-size: 22rpx;
color: #999;
margin-bottom: 10rpx;
font-size: 24rpx;
color: #666;
margin-bottom: 12rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
}
.goods-price {
font-size: 32rpx;
font-size: 36rpx;
font-weight: bold;
color: #ff4d4f;
margin-bottom: 10rpx;
margin-bottom: 12rpx;
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
}
.goods-status-row {
display: flex;
flex-wrap: nowrap;
gap: 8rpx;
margin-bottom: 12rpx;
}
.status-tag {
font-size: 20rpx;
padding: 4rpx 8rpx;
border-radius: 4rpx;
font-weight: 600;
display: inline-block;
white-space: nowrap;
flex-shrink: 0;
}
.status-tag.supply-spot {
background: rgba(82, 196, 26, 0.15);
color: #389e0d;
border: 1rpx solid rgba(82, 196, 26, 0.5);
}
.status-tag.supply-presale {
background: rgba(255, 154, 28, 0.15);
color: #d46b08;
border: 1rpx solid rgba(255, 154, 28, 0.5);
}
.status-tag.auth-verified {
background: rgba(24, 144, 255, 0.15);
color: #096dd9;
border: 1rpx solid rgba(24, 144, 255, 0.5);
}
.status-tag.auth-unverified {
background: rgba(140, 140, 140, 0.15);
color: #595959;
border: 1rpx solid rgba(140, 140, 140, 0.5);
}
.status-tag.negotiate-yes {
background: rgba(114, 46, 209, 0.15);
color: #722ed1;
border: 1rpx solid rgba(114, 46, 209, 0.5);
}
.status-tag.source-yes {
background: rgba(24, 144, 255, 0.15);
color: #096dd9;
border: 1rpx solid rgba(24, 144, 255, 0.5);
}
.status-tag.negotiate-no {
background: rgba(180, 180, 180, 0.15);
color: #595959;
border: 1rpx solid rgba(180, 180, 180, 0.5);
}
.goods-footer {
display: flex;
justify-content: space-between;
font-size: 20rpx;
color: #999;
font-size: 22rpx;
color: #888;
margin-top: auto;
padding-top: 12rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
}
.goods-region-bg {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(4rpx);
-webkit-backdrop-filter: blur(4rpx);
border-radius: 4rpx;
padding: 4rpx 12rpx;
border: 1.5rpx solid #1e3a6e;
box-shadow: 0 1rpx 3rpx rgba(30, 58, 110, 0.08);
}
.goods-region {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #1e3a6e;
font-weight: 600;
font-size: 23rpx;
letter-spacing: 0.5rpx;
}
.goods-reserved {

2
project.private.config.json
View File

@ -1,6 +1,6 @@
{
"libVersion": "3.10.3",
"projectname": "New2",
"projectname": "Mini-New2",
"setting": {
"urlCheck": false,
"coverView": true,

Write Preview
Loading…
Cancel
Save