174 lines
2.6 KiB
Plaintext
174 lines
2.6 KiB
Plaintext
.page {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f7f7f7;
|
||
}
|
||
|
||
/* 上部分：搜索栏 */
|
||
.top {
|
||
padding: 16rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
gap: 16rpx;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
height: 72rpx;
|
||
padding: 0 20rpx;
|
||
background: #f3f4f6;
|
||
border-radius: 12rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.search-btn {
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
padding: 0 28rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
/* 下部分：结果区 */
|
||
.bottom {
|
||
flex: 1;
|
||
position: relative;
|
||
padding: 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.list {
|
||
height: 100%;
|
||
}
|
||
|
||
/* 无结果：正中央 */
|
||
.empty {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
/* 列表项 */
|
||
.item {
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
|
||
/* 原来是 16rpx，这里加大 */
|
||
padding: 24rpx;
|
||
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 左边图片 */
|
||
.item-img {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 12rpx;
|
||
background: #eaeaea;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 右边区域：上下两部分 */
|
||
.item-right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
/* 原来是 space-between，这里保留 */
|
||
justify-content: space-between;
|
||
|
||
/* 增加最小高度，跟随图片 */
|
||
min-height: 200rpx;
|
||
}
|
||
|
||
.item-top {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
/* 原来 gap: 8rpx，稍微拉开 */
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #222222;
|
||
line-height: 1.5;
|
||
|
||
/* 多行换行显示 */
|
||
white-space: normal;
|
||
word-break: break-all;
|
||
|
||
/* 限制最多显示 2 行（可按需改为 3 行） */
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
|
||
overflow: hidden;
|
||
|
||
}
|
||
|
||
.meta {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 右下：价格 */
|
||
.item-bottom {
|
||
padding-top: 12rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.price {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
/* 图片包裹层，用于绝对定位 */
|
||
.img-wrapper {
|
||
position: relative;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 保持图片原样 */
|
||
.item-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
background: #eaeaea;
|
||
}
|
||
|
||
/* 右上角状态矩形 */
|
||
.status-tag {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
right: 8rpx;
|
||
|
||
padding: 4rpx 10rpx;
|
||
font-size: 22rpx;
|
||
line-height: 1.2;
|
||
|
||
color: #ffffff;
|
||
background: rgba(0, 0, 0, 0.65);
|
||
|
||
border-radius: 6rpx;
|
||
white-space: nowrap;
|
||
}
|