|
|
|
@ -1,11 +1,13 @@ |
|
|
|
<template> |
|
|
|
<div class="product-grid-page"> |
|
|
|
<!-- 筛选排序区（可根据需求扩展，设计稿未体现时可隐藏） --> |
|
|
|
<!-- 筛选排序区 --> |
|
|
|
<div class="filter-bar" v-if="showFilter"> |
|
|
|
<!-- 分类弹框 --> |
|
|
|
<el-select |
|
|
|
v-model="selectedCategory" |
|
|
|
placeholder="选择分类" |
|
|
|
placeholder="全部分类" |
|
|
|
class="filter-select" |
|
|
|
@change="handleCategoryChange" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="cat in categories" |
|
|
|
@ -15,28 +17,35 @@ |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
<!-- 排序选项 --> |
|
|
|
<el-select |
|
|
|
v-model="selectedSort" |
|
|
|
placeholder="排序方式" |
|
|
|
placeholder="综合排序" |
|
|
|
class="filter-select" |
|
|
|
@change="handleSortChange" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="sort in sortOptions" |
|
|
|
:key="sort.value" |
|
|
|
:label="sort.label" |
|
|
|
:value="sort.value" |
|
|
|
></el-option> |
|
|
|
<el-option label="综合排序" value="default"></el-option> |
|
|
|
<el-option label="销量↑" value="sales_asc"></el-option> |
|
|
|
<el-option label="销量↓" value="sales_desc"></el-option> |
|
|
|
<el-option label="价格↑" value="price_asc"></el-option> |
|
|
|
<el-option label="价格↓" value="price_desc"></el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-input |
|
|
|
v-model="searchKeyword" |
|
|
|
placeholder="搜索商品" |
|
|
|
class="search-input" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleSearch" |
|
|
|
<!-- 搜索结果统计 --> |
|
|
|
<div class="result-stats" v-if="type == 'search'"> |
|
|
|
<span>全部结果 ></span> |
|
|
|
<span class="keyword" v-if="searchKeyword">"{{ searchKeyword }}"</span> |
|
|
|
<span |
|
|
|
v-if=" |
|
|
|
selectedCategory && |
|
|
|
categories.find((cat) => cat.value === selectedCategory) |
|
|
|
" |
|
|
|
class="category" |
|
|
|
> |
|
|
|
<i slot="suffix" class="el-icon-search" @click="handleSearch" style="line-height: 3;"></i> |
|
|
|
</el-input> |
|
|
|
"{{ categories.find((cat) => cat.value === selectedCategory).label }}" |
|
|
|
</span> |
|
|
|
<span>共{{ totalProducts }}个结果</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 商品网格 --> |
|
|
|
@ -44,10 +53,9 @@ |
|
|
|
<div |
|
|
|
class="product-card" |
|
|
|
v-for="(product, index) in visibleProducts" |
|
|
|
:key="index" |
|
|
|
:key="product.id" |
|
|
|
@click="goToDetail(product.id)" |
|
|
|
> |
|
|
|
<!-- 商品图片（懒加载 + 占位） --> |
|
|
|
<el-image |
|
|
|
v-lazy="product.image" |
|
|
|
:alt="product.name" |
|
|
|
@ -59,8 +67,6 @@ |
|
|
|
<i class="el-icon-loading"></i> |
|
|
|
</div> |
|
|
|
</el-image> |
|
|
|
|
|
|
|
<!-- 标签（如新品、折扣等，设计稿未体现时可注释） --> |
|
|
|
<div |
|
|
|
class="tag" |
|
|
|
v-if="product.tag" |
|
|
|
@ -68,16 +74,17 @@ |
|
|
|
> |
|
|
|
{{ product.tag }} |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 商品信息区 --> |
|
|
|
<div class="product-info"> |
|
|
|
<div class="product-name">{{ product.name }}</div> |
|
|
|
<div class="price-row"> |
|
|
|
<span class="current-price">¥{{ product.price }}</span> |
|
|
|
<span class="current-price">¥{{ product.price.toFixed(2) }}</span> |
|
|
|
<span class="original-price" v-if="product.originalPrice" |
|
|
|
>¥{{ product.originalPrice }}</span |
|
|
|
>¥{{ product.originalPrice.toFixed(2) }}</span |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="sales-volume" v-if="product.sales > 0"> |
|
|
|
<i class="el-icon-shopping-cart"></i> 已售 {{ product.sales }} |
|
|
|
</div> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
size="mini" |
|
|
|
@ -88,15 +95,13 @@ |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 空状态 --> |
|
|
|
<div class="empty-state" v-if="visibleProducts.length === 0"> |
|
|
|
<el-empty description="暂无商品"></el-empty> |
|
|
|
<el-empty description="暂无符合条件的商品"></el-empty> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 分页组件 --> |
|
|
|
<div class="pagination-container"> |
|
|
|
<div class="pagination-container" v-if="totalProducts > 0"> |
|
|
|
<el-pagination |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
@ -111,262 +116,229 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
export default { |
|
|
|
name: "ProductGridPage", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 筛选/排序条件（可根据需求扩展） |
|
|
|
selectedCategory: "", |
|
|
|
selectedSort: "", |
|
|
|
type: "", |
|
|
|
// 搜索关键词 |
|
|
|
searchKeyword: "", |
|
|
|
showFilter: true, // 控制是否显示筛选栏，设计稿无则设为 false |
|
|
|
|
|
|
|
// 筛选/排序条件 |
|
|
|
selectedCategory: "", |
|
|
|
selectedSort: "default", // 默认综合排序 |
|
|
|
showFilter: true, |
|
|
|
// 分页控制 |
|
|
|
currentPage: 1, |
|
|
|
pageSize: 12, // 设计稿每行 4 个，共 4 行，所以 12 个/页 |
|
|
|
|
|
|
|
// 商品数据（模拟，替换成真实接口） |
|
|
|
pageSize: 12, |
|
|
|
// 商品数据 |
|
|
|
products: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: "产品名称产品名称1", |
|
|
|
image: "https://picsum.photos/id/101/200/200", |
|
|
|
price: 359, |
|
|
|
originalPrice: 499, |
|
|
|
name: "无线蓝牙耳机 主动降噪长续航", |
|
|
|
image: "https://picsum.photos/id/101/300/300", |
|
|
|
price: 359.0, |
|
|
|
originalPrice: 499.0, |
|
|
|
category: "digital", |
|
|
|
tag: "限时折扣", |
|
|
|
tagColor: "#FF6B6B", |
|
|
|
sales: 120, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/102/200/200", |
|
|
|
price: 259, |
|
|
|
originalPrice: 329, |
|
|
|
name: "智能手表 心率监测运动计步", |
|
|
|
image: "https://picsum.photos/id/102/300/300", |
|
|
|
price: 259.0, |
|
|
|
originalPrice: 329.0, |
|
|
|
category: "digital", |
|
|
|
tag: "新品", |
|
|
|
tagColor: "#4ECDC4", |
|
|
|
sales: 86, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/103/200/200", |
|
|
|
price: 159, |
|
|
|
originalPrice: 229, |
|
|
|
tag: "爆款", |
|
|
|
tagColor: "#FFD166", |
|
|
|
name: "纯棉短袖T恤 宽松休闲", |
|
|
|
image: "https://picsum.photos/id/103/300/300", |
|
|
|
price: 89.0, |
|
|
|
originalPrice: 129.0, |
|
|
|
category: "life", |
|
|
|
sales: 320, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/104/200/200", |
|
|
|
price: 215, |
|
|
|
originalPrice: 299, |
|
|
|
tag: "推荐", |
|
|
|
tagColor: "#06D6A0", |
|
|
|
name: "新鲜水果礼盒 当季混合装", |
|
|
|
image: "https://picsum.photos/id/104/300/300", |
|
|
|
price: 159.0, |
|
|
|
category: "food", |
|
|
|
tag: "热销", |
|
|
|
tagColor: "#FF9F1C", |
|
|
|
sales: 215, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/105/200/200", |
|
|
|
price: 299, |
|
|
|
originalPrice: 399, |
|
|
|
tag: "限时折扣", |
|
|
|
tagColor: "#FF6B6B", |
|
|
|
name: "全自动咖啡机 家用小型", |
|
|
|
image: "https://picsum.photos/id/105/300/300", |
|
|
|
price: 1299.0, |
|
|
|
originalPrice: 1599.0, |
|
|
|
category: "life", |
|
|
|
sales: 45, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 6, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/106/200/200", |
|
|
|
price: 159, |
|
|
|
originalPrice: 229, |
|
|
|
tag: "新品", |
|
|
|
tagColor: "#4ECDC4", |
|
|
|
name: "高清投影仪 家用办公两用", |
|
|
|
image: "https://picsum.photos/id/106/300/300", |
|
|
|
price: 2499.0, |
|
|
|
category: "digital", |
|
|
|
tag: "推荐", |
|
|
|
tagColor: "#2EC4B6", |
|
|
|
sales: 78, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 7, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/107/200/200", |
|
|
|
price: 229, |
|
|
|
originalPrice: 329, |
|
|
|
tag: "爆款", |
|
|
|
tagColor: "#FFD166", |
|
|
|
name: "进口红酒 赤霞珠干红", |
|
|
|
image: "https://picsum.photos/id/107/300/300", |
|
|
|
price: 199.0, |
|
|
|
originalPrice: 258.0, |
|
|
|
category: "food", |
|
|
|
sales: 63, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 8, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/108/200/200", |
|
|
|
price: 289, |
|
|
|
originalPrice: 399, |
|
|
|
tag: "推荐", |
|
|
|
tagColor: "#06D6A0", |
|
|
|
name: "瑜伽垫 防滑专业健身垫", |
|
|
|
image: "https://picsum.photos/id/108/300/300", |
|
|
|
price: 129.0, |
|
|
|
category: "life", |
|
|
|
sales: 156, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 9, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/109/200/200", |
|
|
|
price: 359, |
|
|
|
originalPrice: 499, |
|
|
|
name: "机械键盘 青轴游戏专用", |
|
|
|
image: "https://picsum.photos/id/109/300/300", |
|
|
|
price: 299.0, |
|
|
|
originalPrice: 399.0, |
|
|
|
category: "digital", |
|
|
|
tag: "限时折扣", |
|
|
|
tagColor: "#FF6B6B", |
|
|
|
sales: 92, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 10, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/110/200/200", |
|
|
|
price: 159, |
|
|
|
originalPrice: 229, |
|
|
|
tag: "新品", |
|
|
|
tagColor: "#4ECDC4", |
|
|
|
name: "有机蔬菜礼盒 新鲜配送", |
|
|
|
image: "https://picsum.photos/id/110/300/300", |
|
|
|
price: 89.0, |
|
|
|
category: "food", |
|
|
|
sales: 205, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 11, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/111/200/200", |
|
|
|
price: 259, |
|
|
|
originalPrice: 329, |
|
|
|
tag: "爆款", |
|
|
|
tagColor: "#FFD166", |
|
|
|
name: "北欧风落地灯 客厅卧室", |
|
|
|
image: "https://picsum.photos/id/111/300/300", |
|
|
|
price: 199.0, |
|
|
|
category: "life", |
|
|
|
sales: 57, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 12, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/112/200/200", |
|
|
|
price: 299, |
|
|
|
originalPrice: 399, |
|
|
|
tag: "推荐", |
|
|
|
tagColor: "#06D6A0", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 13, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/113/200/200", |
|
|
|
price: 359, |
|
|
|
originalPrice: 499, |
|
|
|
tag: "限时折扣", |
|
|
|
tagColor: "#FF6B6B", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 14, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/114/200/200", |
|
|
|
price: 159, |
|
|
|
originalPrice: 229, |
|
|
|
tag: "新品", |
|
|
|
tagColor: "#4ECDC4", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 15, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/115/200/200", |
|
|
|
price: 259, |
|
|
|
originalPrice: 329, |
|
|
|
tag: "爆款", |
|
|
|
tagColor: "#FFD166", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 16, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/116/200/200", |
|
|
|
price: 299, |
|
|
|
originalPrice: 399, |
|
|
|
tag: "推荐", |
|
|
|
tagColor: "#06D6A0", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 17, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/117/200/200", |
|
|
|
price: 359, |
|
|
|
originalPrice: 499, |
|
|
|
tag: "限时折扣", |
|
|
|
tagColor: "#FF6B6B", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 18, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/118/200/200", |
|
|
|
price: 159, |
|
|
|
originalPrice: 229, |
|
|
|
tag: "新品", |
|
|
|
tagColor: "#4ECDC4", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 19, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/119/200/200", |
|
|
|
price: 259, |
|
|
|
originalPrice: 329, |
|
|
|
tag: "爆款", |
|
|
|
tagColor: "#FFD166", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 20, |
|
|
|
name: "产品名称产品名称", |
|
|
|
image: "https://picsum.photos/id/120/200/200", |
|
|
|
price: 299, |
|
|
|
originalPrice: 399, |
|
|
|
tag: "推荐", |
|
|
|
tagColor: "#06D6A0", |
|
|
|
name: "便携式充电宝 20000mAh", |
|
|
|
image: "https://picsum.photos/id/112/300/300", |
|
|
|
price: 129.0, |
|
|
|
originalPrice: 169.0, |
|
|
|
category: "digital", |
|
|
|
sales: 310, |
|
|
|
}, |
|
|
|
], |
|
|
|
|
|
|
|
// 分页控制 |
|
|
|
currentPage: 1, |
|
|
|
pageSize: 12, |
|
|
|
|
|
|
|
// 筛选选项（设计稿未体现时可简化） |
|
|
|
// 分类选项 |
|
|
|
categories: [ |
|
|
|
{ label: "全部", value: "" }, |
|
|
|
{ label: "美食", value: "food" }, |
|
|
|
{ label: "生活", value: "life" }, |
|
|
|
{ label: "数码", value: "digital" }, |
|
|
|
], |
|
|
|
sortOptions: [ |
|
|
|
{ label: "默认排序", value: "" }, |
|
|
|
{ label: "价格 ascending", value: "price_asc" }, |
|
|
|
{ label: "价格 descending", value: "price_desc" }, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters(["getSearchText"]), |
|
|
|
// 筛选后商品 |
|
|
|
filteredProducts() { |
|
|
|
return this.products.filter((product) => { |
|
|
|
// 分类筛选 |
|
|
|
const categoryMatch = this.selectedCategory |
|
|
|
? product.category === this.selectedCategory |
|
|
|
: true; |
|
|
|
|
|
|
|
// 关键词搜索筛选 |
|
|
|
const keywordMatch = this.searchKeyword |
|
|
|
? product.name.includes(this.searchKeyword) |
|
|
|
? product.name |
|
|
|
.toLowerCase() |
|
|
|
.includes(this.searchKeyword.toLowerCase()) |
|
|
|
: true; |
|
|
|
|
|
|
|
return categoryMatch && keywordMatch; |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 排序处理 |
|
|
|
sortedProducts() { |
|
|
|
if (this.selectedSort === "price_asc") { |
|
|
|
return this.filteredProducts.sort((a, b) => a.price - b.price); |
|
|
|
} else if (this.selectedSort === "price_desc") { |
|
|
|
return this.filteredProducts.sort((a, b) => b.price - a.price); |
|
|
|
const sorted = [...this.filteredProducts]; |
|
|
|
console.log(...this.filteredProducts, sorted); |
|
|
|
|
|
|
|
switch (this.selectedSort) { |
|
|
|
case "price_asc": |
|
|
|
return sorted.sort((a, b) => a.price - b.price); |
|
|
|
case "price_desc": |
|
|
|
return sorted.sort((a, b) => b.price - a.price); |
|
|
|
case "sales_asc": |
|
|
|
return sorted.sort((a, b) => a.sales - b.sales); |
|
|
|
case "sales_desc": |
|
|
|
return sorted.sort((a, b) => b.sales - a.sales); |
|
|
|
default: // 综合排序（默认按ID） |
|
|
|
return sorted.sort((a, b) => a.id - b.id); |
|
|
|
} |
|
|
|
return this.filteredProducts; |
|
|
|
}, |
|
|
|
|
|
|
|
// 分页后商品 |
|
|
|
visibleProducts() { |
|
|
|
const start = (this.currentPage - 1) * this.pageSize; |
|
|
|
const end = start + this.pageSize; |
|
|
|
return this.sortedProducts.slice(start, end); |
|
|
|
}, |
|
|
|
|
|
|
|
// 商品总数 |
|
|
|
totalProducts() { |
|
|
|
return this.sortedProducts.length; |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
// 监听搜索词变化 |
|
|
|
getSearchText(newVal, oldVal) { |
|
|
|
if (newVal !== oldVal) { |
|
|
|
this.searchKeyword = newVal; |
|
|
|
this.fetchProducts(); // 调用接口获取数据 |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.type = this.$route.query?.type; |
|
|
|
this.searchKeyword = this.getSearchText; |
|
|
|
this.fetchProducts(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 搜索 |
|
|
|
// 获取列表 |
|
|
|
async fetchProducts() { |
|
|
|
console.log(this.getSearchText); |
|
|
|
// const response = await this.$axios.get('/api/products', { params }); |
|
|
|
}, |
|
|
|
|
|
|
|
// 搜索处理 |
|
|
|
handleSearch() { |
|
|
|
this.currentPage = 1; |
|
|
|
this.currentPage = 1; // 搜索后重置到第一页 |
|
|
|
}, |
|
|
|
|
|
|
|
// 分类变更处理 |
|
|
|
handleCategoryChange() { |
|
|
|
this.currentPage = 1; // 切换分类后重置到第一页 |
|
|
|
}, |
|
|
|
|
|
|
|
// 排序变更处理 |
|
|
|
handleSortChange() { |
|
|
|
this.currentPage = 1; // 切换排序后重置到第一页 |
|
|
|
}, |
|
|
|
|
|
|
|
// 分页大小改变 |
|
|
|
@ -378,14 +350,17 @@ export default { |
|
|
|
// 当前页改变 |
|
|
|
handleCurrentChange(val) { |
|
|
|
this.currentPage = val; |
|
|
|
// 滚动到页面顶部 |
|
|
|
window.scrollTo(0, 0); |
|
|
|
}, |
|
|
|
|
|
|
|
// 加入购物车 |
|
|
|
addToCart(product) { |
|
|
|
this.$message.success(`${product.name} 已加入购物车`); |
|
|
|
// 实际项目中这里会调用购物车API |
|
|
|
}, |
|
|
|
|
|
|
|
// 跳转详情 |
|
|
|
// 跳转详情页 |
|
|
|
goToDetail(id) { |
|
|
|
this.$router.push(`/product/${id}`); |
|
|
|
}, |
|
|
|
@ -396,30 +371,53 @@ export default { |
|
|
|
<style lang="scss" scoped> |
|
|
|
.product-grid-page { |
|
|
|
padding: 20px; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #f5f7fa; |
|
|
|
max-width: 1400px; |
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
// 筛选栏样式（设计稿无则隐藏） |
|
|
|
// 筛选栏样式 |
|
|
|
.filter-bar { |
|
|
|
display: flex; |
|
|
|
gap: 15px; |
|
|
|
margin-bottom: 20px; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-items: center; |
|
|
|
padding: 15px; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 8px; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
.search-input { |
|
|
|
flex: 1; |
|
|
|
min-width: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-select { |
|
|
|
min-width: 150px; |
|
|
|
min-width: 140px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.search-input { |
|
|
|
flex: 1; |
|
|
|
max-width: 300px; |
|
|
|
// 搜索结果统计样式 |
|
|
|
.result-stats { |
|
|
|
margin: 0 0 15px 5px; |
|
|
|
color: #666; |
|
|
|
font-size: 14px; |
|
|
|
padding: 5px 0; |
|
|
|
|
|
|
|
.keyword, |
|
|
|
.category { |
|
|
|
color: #ff4d4f; |
|
|
|
font-weight: 500; |
|
|
|
margin: 0 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 商品网格布局（4列响应式） |
|
|
|
// 商品网格布局 |
|
|
|
.product-grid { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
|
|
|
gap: 20px; |
|
|
|
margin-bottom: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
// 商品卡片 |
|
|
|
@ -434,89 +432,92 @@ export default { |
|
|
|
|
|
|
|
&:hover { |
|
|
|
transform: translateY(-5px); |
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
// 商品图片容器 |
|
|
|
.product-img { |
|
|
|
width: 100%; |
|
|
|
height: 200px; |
|
|
|
border-radius: 8px 8px 0 0; |
|
|
|
background-color: #f5f5f5; |
|
|
|
} |
|
|
|
|
|
|
|
.image-placeholder { |
|
|
|
width: 100%; |
|
|
|
height: 200px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background-color: #f5f5f5; |
|
|
|
} |
|
|
|
|
|
|
|
// 标签（设计稿无则注释） |
|
|
|
.tag { |
|
|
|
position: absolute; |
|
|
|
top: 10px; |
|
|
|
left: 10px; |
|
|
|
padding: 4px 8px; |
|
|
|
border-radius: 4px; |
|
|
|
color: #fff; |
|
|
|
padding: 3px 8px; |
|
|
|
font-size: 12px; |
|
|
|
color: #fff; |
|
|
|
border-radius: 4px; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
// 商品信息区 |
|
|
|
.product-info { |
|
|
|
padding: 15px; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.product-name { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 500; |
|
|
|
margin-bottom: 8px; |
|
|
|
line-height: 1.4; |
|
|
|
height: 36px; |
|
|
|
overflow: hidden; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 10px; |
|
|
|
height: 40px; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.price-row { |
|
|
|
display: flex; |
|
|
|
align-items: baseline; |
|
|
|
gap: 8px; |
|
|
|
margin-bottom: 10px; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 8px; |
|
|
|
|
|
|
|
.current-price { |
|
|
|
font-size: 16px; |
|
|
|
color: #ff4d4f; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.original-price { |
|
|
|
font-size: 12px; |
|
|
|
color: #999; |
|
|
|
font-size: 12px; |
|
|
|
text-decoration: line-through; |
|
|
|
margin-left: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.cart-btn { |
|
|
|
position: absolute; |
|
|
|
bottom: 15px; |
|
|
|
right: 15px; |
|
|
|
padding: 4px 12px; |
|
|
|
.sales-volume { |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
margin-bottom: 10px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
i { |
|
|
|
font-size: 12px; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 加载占位 |
|
|
|
.image-placeholder { |
|
|
|
width: 100%; |
|
|
|
height: 200px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background-color: #f8f8f8; |
|
|
|
color: #ccc; |
|
|
|
.cart-btn { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 空状态 |
|
|
|
// 空状态样式 |
|
|
|
.empty-state { |
|
|
|
grid-column: 1 / -1; |
|
|
|
padding: 60px 0; |
|
|
|
text-align: center; |
|
|
|
padding: 50px 0; |
|
|
|
} |
|
|
|
|
|
|
|
// 分页容器 |
|
|
|
@ -524,17 +525,34 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin-top: 20px; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 响应式适配（平板/手机） |
|
|
|
// 响应式调整 |
|
|
|
@media (max-width: 768px) { |
|
|
|
.product-grid { |
|
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); |
|
|
|
} |
|
|
|
.product-grid-page { |
|
|
|
padding: 10px; |
|
|
|
|
|
|
|
.product-card .product-img { |
|
|
|
height: 160px; |
|
|
|
.filter-bar { |
|
|
|
padding: 10px; |
|
|
|
gap: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.product-grid { |
|
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); |
|
|
|
gap: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.product-card { |
|
|
|
.product-img { |
|
|
|
height: 140px; |
|
|
|
} |
|
|
|
|
|
|
|
.image-placeholder { |
|
|
|
height: 140px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
chenkainan
2 months ago