新版商城页面更新
This commit is contained in:
BIN
public/imgs/shop/1.png
Normal file
BIN
public/imgs/shop/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/10.png
Normal file
BIN
public/imgs/shop/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/2.png
Normal file
BIN
public/imgs/shop/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/3.png
Normal file
BIN
public/imgs/shop/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/4.png
Normal file
BIN
public/imgs/shop/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/5.png
Normal file
BIN
public/imgs/shop/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/6.png
Normal file
BIN
public/imgs/shop/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/7.png
Normal file
BIN
public/imgs/shop/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/8.png
Normal file
BIN
public/imgs/shop/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/9.png
Normal file
BIN
public/imgs/shop/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/imgs/shop/tips.png
Normal file
BIN
public/imgs/shop/tips.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -96,6 +96,14 @@ const routes = [
|
|||||||
title: '积分商城'
|
title: '积分商城'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/productCategory',
|
||||||
|
name: 'ProductCategory',
|
||||||
|
component: () => import('@/views/ProductCategory.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '商品分类'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/product/:id',
|
path: '/product/:id',
|
||||||
name: 'ProductDetail',
|
name: 'ProductDetail',
|
||||||
|
|||||||
237
src/views/ProductCategory.vue
Normal file
237
src/views/ProductCategory.vue
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
<template>
|
||||||
|
<div class="category-container">
|
||||||
|
<div class="header">
|
||||||
|
<button @click="$router.go(-1)" class="back-btn"><</button>
|
||||||
|
<span @click="$router.go(-1)" class="back-text">返回</span>
|
||||||
|
<el-input placeholder="请输入商品名称或种类" v-model="searchKeyword" clearable class="product-searcher">
|
||||||
|
<template #prefix>
|
||||||
|
<el-icon><Search /></el-icon>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
<button class="search-button" @click="searchProducts">搜索</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bar">
|
||||||
|
<div v-for="(item, index) in barItems" :key="index" class="bar-item" :style="{ color: index === selectedCategory ? '#2938e0' : '' }" @click="selectCategory(index)">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative-bar">
|
||||||
|
<div v-for="(item, index) in barItems[selectedCategory].relative" :key="index" class="relative-item">
|
||||||
|
<!-- <img :src="item.img" alt="item.name"> -->
|
||||||
|
<img src="/imgs/shop/1.png" alt="item.name" class="relative-img">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { color } from 'echarts'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const selectedCategory = ref(0)
|
||||||
|
|
||||||
|
const barItems = ref([
|
||||||
|
{
|
||||||
|
name: '手机',
|
||||||
|
relative: [{
|
||||||
|
name: '华为',
|
||||||
|
img: ''
|
||||||
|
},{
|
||||||
|
name: '苹果',
|
||||||
|
img: ''
|
||||||
|
},{
|
||||||
|
name: '小米',
|
||||||
|
img: ''
|
||||||
|
},{
|
||||||
|
name: '荣耀',
|
||||||
|
img: ''
|
||||||
|
},{
|
||||||
|
name: 'iqoo',
|
||||||
|
img: ''
|
||||||
|
},{
|
||||||
|
name: 'realme',
|
||||||
|
img: ''
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
name: '家装',
|
||||||
|
relative: [{
|
||||||
|
name: '灵感美图',
|
||||||
|
img: ''
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
name: '箱包',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '内衣',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '洗护',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '鞋靴',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '美妆',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '保健',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '图书',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '车品',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '图书',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '车品',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '医药',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '奢品',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '饰品',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '百货',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '女装',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '母婴',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '男装',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '运动',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '电器',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '生鲜',
|
||||||
|
relative: []
|
||||||
|
},{
|
||||||
|
name: '数码',
|
||||||
|
relative: []
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const selectCategory = (index) => {
|
||||||
|
selectedCategory.value = index
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.category-container {
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #b9d5ff;
|
||||||
|
margin-bottom: -100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
font-size: 15px;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
color: #ffffff;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
margin-left: -22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-text {
|
||||||
|
font-size: 15px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 36px;
|
||||||
|
height: 26px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-button {
|
||||||
|
width: 64px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 400px;
|
||||||
|
margin-left: 8px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(to right, #7b99ff, #002cc2);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-searcher {
|
||||||
|
width: 180px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-searcher :deep(.el-input__wrapper) {
|
||||||
|
border-radius: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-searcher :deep(.el-input__inner) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-searcher :deep(.el-input__inner::placeholder) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-item {
|
||||||
|
font-size: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin: 4px 8px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative-bar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 40px);
|
||||||
|
gap: 30px;
|
||||||
|
margin-top: 5px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative-img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,300 +1,78 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="shop-page">
|
<div class="shop-container">
|
||||||
<!-- 导航栏 -->
|
<div class="shop-header">
|
||||||
<nav class="navbar">
|
<el-input placeholder="请输入商品名称或种类" v-model="searchKeyword" clearable class="product-searcher">
|
||||||
<!-- 移除 nav-left 部分 -->
|
|
||||||
<div class="nav-center">
|
|
||||||
<h1 class="nav-title">全部商品</h1>
|
|
||||||
</div>
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="points-btn">
|
|
||||||
<el-icon><Coin /></el-icon>
|
|
||||||
积分余额：
|
|
||||||
{{ userPoints }}
|
|
||||||
</div>
|
|
||||||
<div class="points-btn">
|
|
||||||
<div class="beans-container">
|
|
||||||
<img src='/imgs/profile/rongdou.png' alt="融豆" class="rongdou-icon" />
|
|
||||||
融豆余额：
|
|
||||||
{{ userBeans }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<div class="search-section">
|
|
||||||
<el-input
|
|
||||||
v-model="searchKeyword"
|
|
||||||
placeholder="搜索商品"
|
|
||||||
class="search-input"
|
|
||||||
@input="handleSearch"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<el-icon><Search /></el-icon>
|
<el-icon><Search /></el-icon>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
|
<button class="search-button" @click="searchProducts">搜索</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 分类筛选 -->
|
<div class="shop-bar">
|
||||||
<div class="category-section">
|
<div class="shop-bar-item" v-for="item in shopBarItems" :key="item.path" @click="$router.push(item.path)">
|
||||||
<el-scrollbar>
|
<img :src="item.img" :alt="item.name" class="shop-bar-item-img">
|
||||||
<div class="category-list">
|
<span class="shop-bar-item-name">{{ item.name }}</span>
|
||||||
<div
|
|
||||||
v-for="category in categories"
|
|
||||||
:key="category.id"
|
|
||||||
:class="['category-item', { active: selectedCategory === category.id }]"
|
|
||||||
@click="selectCategory(category.id)"
|
|
||||||
>
|
|
||||||
<el-icon>{{ category.icon }}</el-icon>
|
|
||||||
<div class="category-name">{{ category.name }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 推荐 -->
|
|
||||||
<div class="recommend">
|
|
||||||
<!-- 热销推荐 -->
|
|
||||||
<div class="recommend-grid">
|
|
||||||
<div class="recommend-title">热销推荐</div>
|
|
||||||
<div v-for="(product, index) in hotProducts" :key="index" class="recommend-product" @click="goToProduct(product.id)">
|
|
||||||
<div class="recommend-image">
|
|
||||||
<img :src="product.image" :alt="product.name" />
|
|
||||||
<div v-if="product.discount" class="recommend-discount">
|
|
||||||
{{ product.discount }}折
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="recommend-content">
|
|
||||||
<h4 class="recommend-name">{{ product.name }}</h4>
|
|
||||||
<div class="recommend-price-container">
|
|
||||||
<div class="main-price">
|
|
||||||
<img src='/imgs/profile/rongdou.png' alt="融豆" class="rongdou-icon" />
|
|
||||||
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="sub-price">
|
|
||||||
<el-icon class="points-icon"><Coin /></el-icon>
|
|
||||||
<span class="points-price">{{ product.points_price }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 秒杀推荐 -->
|
|
||||||
<div class="recommend-grid">
|
<div class="shop-tips">
|
||||||
<div class="recommend-title">秒杀推荐</div>
|
<img src="/imgs/shop/tips.png" alt="融豆" class="tips-imgs">
|
||||||
<div v-for="(product, index) in cheapProducts" :key="index" class="recommend-product" @click="goToProduct(product.id)">
|
</div>
|
||||||
<div class="recommend-image">
|
|
||||||
<img :src="product.image" :alt="product.name" />
|
<div class="shop-content">
|
||||||
<div v-if="product.discount" class="recommend-discount">
|
<div class="product-content" v-for="item in products" :key="item.id" @click="$router.push(`/productsummary/${item.id}`)">
|
||||||
{{ product.discount }}折
|
<img :src="item.img" :alt="item.name" class="product-content-img">
|
||||||
</div>
|
<span class="product-content-name">{{ item.name }}</span>
|
||||||
</div>
|
<div class="price-info">
|
||||||
<div class="recommend-content">
|
<el-icon><Coin /></el-icon>
|
||||||
<h4 class="recommend-name">{{ product.name }}</h4>
|
<div class="product-content-price">{{ item.points_price }}</div>
|
||||||
<div class="recommend-price-container">
|
</div>
|
||||||
<div class="main-price">
|
<div class="price-info">
|
||||||
<img src='/imgs/profile/rongdou.png' alt="融豆" class="rongdou-icon" />
|
<img src="/imgs/profile/rongdou.png" alt="融豆" class="img-bean">
|
||||||
<span class="rongdou-price">{{ product.flash_price }}</span>
|
<div class="product-content-price">{{ item.rongdou_price }}</div>
|
||||||
</div>
|
|
||||||
<div class="sub-price">
|
|
||||||
<el-icon class="points-icon"><Coin /></el-icon>
|
|
||||||
<span class="points-price">{{ product.flash_price*10000 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 商品列表 -->
|
<div class="block">
|
||||||
<div class="products-section">
|
|
||||||
<div class="section-header">
|
|
||||||
<h3>热门商品</h3>
|
|
||||||
<el-dropdown @command="handleSort">
|
|
||||||
<span class="sort-btn">
|
|
||||||
{{ sortText }}
|
|
||||||
<el-icon><ArrowDown /></el-icon>
|
|
||||||
</span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item command="default">默认排序</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="price_asc">价格从低到高</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="price_desc">价格从高到低</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="sales">销量优先</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-loading="loading" class="products-grid">
|
|
||||||
<div
|
|
||||||
v-for="product in filteredProducts"
|
|
||||||
:key="product.id"
|
|
||||||
class="product-card"
|
|
||||||
@click="goToProduct(product.id)"
|
|
||||||
>
|
|
||||||
<div class="product-image">
|
|
||||||
<img :src="product.image" :alt="product.name" />
|
|
||||||
<div v-if="product.discount" class="discount-badge">
|
|
||||||
{{ product.discount }}折
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="product-name">{{ product.name }}</h4>
|
|
||||||
<div class="product-price">
|
|
||||||
<div class="main-price">
|
|
||||||
<img src='/imgs/profile/rongdou.png' alt="融豆" class="rongdou-icon" />
|
|
||||||
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="sub-price">
|
|
||||||
<el-icon class="points-icon"><Coin /></el-icon>
|
|
||||||
<span class="points-price">{{ product.points_price }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 空状态 -->
|
|
||||||
<div v-if="!loading && filteredProducts.length === 0" class="empty-state">
|
|
||||||
<el-icon size="60"><Box /></el-icon>
|
|
||||||
<p>暂无商品</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 加载更多 -->
|
|
||||||
<div v-if="hasMore" class="load-more">
|
|
||||||
<el-button @click="loadMore" :loading="loadingMore">
|
|
||||||
加载更多
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, computed, onMounted } from 'vue'
|
import { Search } from '@element-plus/icons-vue'
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
|
||||||
import { useUserStore } from '@/stores/user'
|
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import {
|
|
||||||
ArrowLeft,
|
|
||||||
Coin,
|
|
||||||
Search,
|
|
||||||
ArrowDown,
|
|
||||||
Box
|
|
||||||
} from '@element-plus/icons-vue'
|
|
||||||
import api from '@/utils/api'
|
|
||||||
import { debounce } from 'lodash-es'
|
|
||||||
import { getImageUrl } from '@/config'
|
import { getImageUrl } from '@/config'
|
||||||
|
import { ref, onMounted, watch } from 'vue'
|
||||||
|
import api from '@/utils/api'
|
||||||
|
|
||||||
const router = useRouter()
|
const searchKeyword = ref('')
|
||||||
const route = useRoute()
|
const sortBy = ref('')
|
||||||
const userStore = useUserStore()
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
|
|
||||||
|
const products = ref([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const loadingMore = ref(false)
|
const loadingMore = ref(false)
|
||||||
const searchKeyword = ref('')
|
|
||||||
const selectedCategory = ref('all')
|
|
||||||
const sortBy = ref('default')
|
|
||||||
const products = ref([])
|
|
||||||
const page = ref(1)
|
const page = ref(1)
|
||||||
const hasMore = ref(true)
|
const hasMore = ref(true)
|
||||||
|
const selectedCategory = ref('all')
|
||||||
|
|
||||||
|
|
||||||
// 用户积分
|
const shopBarItems = [
|
||||||
const userPoints = ref(0)
|
{name: '商品分类',img: '/imgs/shop/1.png',path: '/productCategory'},
|
||||||
|
{name: '2',img: '/imgs/shop/2.png',path: ''},
|
||||||
// 用户融豆
|
{name: '3',img: '/imgs/shop/3.png',path: ''},
|
||||||
const userBeans = ref(0)
|
{name: '4',img: '/imgs/shop/4.png',path: ''},
|
||||||
|
{name: '5',img: '/imgs/shop/5.png',path: ''},
|
||||||
|
{name: '6',img: '/imgs/shop/6.png',path: ''},
|
||||||
// 分类数据
|
{name: '7',img: '/imgs/shop/7.png',path: ''},
|
||||||
const categories = ref([
|
{name: '8',img: '/imgs/shop/8.png',path: ''},
|
||||||
{ id: 'all', name: '全部', icon: '🛍️' },
|
{name: '9',img: '/imgs/shop/9.png',path: ''},
|
||||||
{ id: '数码产品', name: '电子数码', icon: '📱' },
|
{name: '10',img: '/imgs/shop/10.png',path: ''},
|
||||||
{ id: '图书文具', name: '图书文具', icon: '📚' },
|
]
|
||||||
{ id: '生活用品', name: '日用百货', icon: '🏠' },
|
|
||||||
{ id: '食品饮料', name: '食品饮料', icon: '🍔' },
|
|
||||||
{ id: '服装配饰', name: '精美服饰', icon: '👕' },
|
|
||||||
{ id: '其他', name: '其他', icon: '📦' }
|
|
||||||
])
|
|
||||||
|
|
||||||
//热销商品数据
|
|
||||||
const hotProducts = ref([
|
|
||||||
{ id: '6', name: '1', discount: '100', points: '9999', originalPoints:'999999' },
|
|
||||||
{ id: '6', name: '2', discount: '100', points: '9999', originalPoints:'999999' }
|
|
||||||
])
|
|
||||||
|
|
||||||
//秒杀推荐数据
|
|
||||||
const cheapProducts = ref([
|
|
||||||
{ id: '6', name: '1', discount: '100', points: '9999', originalPoints:'999999' },
|
|
||||||
{ id: '6', name: '2', discount: '100', points: '9999', originalPoints:'999999' }
|
|
||||||
])
|
|
||||||
|
|
||||||
// 计算属性
|
|
||||||
const filteredProducts = computed(() => {
|
|
||||||
let result = products.value
|
|
||||||
|
|
||||||
// 分类筛选
|
|
||||||
if (selectedCategory.value !== 'all') {
|
|
||||||
result = result.filter(p => p.category === selectedCategory.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 搜索筛选
|
|
||||||
if (searchKeyword.value) {
|
|
||||||
result = result.filter(p =>
|
|
||||||
p.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
|
|
||||||
p.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 排序
|
|
||||||
switch (sortBy.value) {
|
|
||||||
case 'price_asc':
|
|
||||||
result.sort((a, b) => a.points - b.points)
|
|
||||||
break
|
|
||||||
case 'price_desc':
|
|
||||||
result.sort((a, b) => b.points - a.points)
|
|
||||||
break
|
|
||||||
case 'sales':
|
|
||||||
result.sort((a, b) => b.sales - a.sales)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
return result
|
|
||||||
})
|
|
||||||
|
|
||||||
const sortText = computed(() => {
|
|
||||||
const sortMap = {
|
|
||||||
default: '默认排序',
|
|
||||||
price_asc: '价格从低到高',
|
|
||||||
price_desc: '价格从高到低',
|
|
||||||
sales: '销量优先'
|
|
||||||
}
|
|
||||||
return sortMap[sortBy.value]
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 方法
|
|
||||||
const selectCategory = (categoryId) => {
|
|
||||||
selectedCategory.value = categoryId
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSort = (command) => {
|
|
||||||
sortBy.value = command
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSearch = debounce(() => {
|
|
||||||
// 搜索逻辑已在计算属性中处理
|
|
||||||
}, 300)
|
|
||||||
|
|
||||||
const goToProduct = (productId) => {
|
|
||||||
router.push(`/productsummary/${productId}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
const getProducts = async (isLoadMore = false) => {
|
const getProducts = async (isLoadMore = false) => {
|
||||||
try {
|
try {
|
||||||
@@ -310,11 +88,10 @@ const getProducts = async (isLoadMore = false) => {
|
|||||||
page: page.value,
|
page: page.value,
|
||||||
limit: 20,
|
limit: 20,
|
||||||
category: selectedCategory.value === 'all' ? '' : selectedCategory.value,
|
category: selectedCategory.value === 'all' ? '' : selectedCategory.value,
|
||||||
keyword: searchKeyword.value,
|
search: searchKeyword.value,
|
||||||
sort: sortBy.value
|
sort: sortBy.value
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.log(data,'response');
|
|
||||||
|
|
||||||
if (isLoadMore) {
|
if (isLoadMore) {
|
||||||
const newProducts = data.data.products
|
const newProducts = data.data.products
|
||||||
@@ -339,517 +116,168 @@ const getProducts = async (isLoadMore = false) => {
|
|||||||
page.value++
|
page.value++
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('获取商品列表失败')
|
ElMessage.error('获取商品列表失败')
|
||||||
|
console.error('获取商品列表失败:', error)
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
loadingMore.value = false
|
loadingMore.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const loadMore = () => {
|
const searchProducts = () => {
|
||||||
getProducts(true)
|
getProducts(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const getUserPoints = async () => {
|
watch(searchKeyword, (newVal, oldVal) => {
|
||||||
try {
|
if (newVal !== oldVal) {
|
||||||
const {data} = await api.get('/user/points')
|
getProducts(false)
|
||||||
console.log(data,'points');
|
|
||||||
|
|
||||||
userPoints.value = data.points
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取用户积分失败:', error)
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// 获取用户融豆
|
|
||||||
const getUserBeans = async () => {
|
|
||||||
try {
|
|
||||||
const {data} = await api.get('/user/profile')
|
|
||||||
console.log(data.user.balance,'beans');
|
|
||||||
|
|
||||||
userBeans.value = data.user.balance
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取用户融豆失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const truncateText = (text, maxLength) => {
|
|
||||||
if (text.length <= maxLength) return text
|
|
||||||
return text.substring(0, maxLength) + '...'
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取热销推荐商品
|
|
||||||
const getHotProducts = async () => {
|
|
||||||
try {
|
|
||||||
const {data} = await api.get('/products/hot')
|
|
||||||
hotProducts.value = data.data.products
|
|
||||||
// 处理热销商品图片路径
|
|
||||||
hotProducts.value.forEach(product => {
|
|
||||||
if (product.image) {
|
|
||||||
product.image = getImageUrl(product.image)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
} finally {
|
|
||||||
console.log('热销：',hotProducts)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取秒杀推荐商品
|
|
||||||
const getCheapProducts = async () => {
|
|
||||||
try {
|
|
||||||
const {data} = await api.get('/products/cheap')
|
|
||||||
cheapProducts.value = data.data.products
|
|
||||||
// 处理秒杀商品图片路径
|
|
||||||
cheapProducts.value.forEach(product => {
|
|
||||||
if (product.image) {
|
|
||||||
product.image = getImageUrl(product.image)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
} finally {
|
|
||||||
console.log('秒杀：',cheapProducts)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生命周期
|
|
||||||
onMounted(() => {
|
|
||||||
// 检查URL参数中是否有分类
|
|
||||||
const categoryFromQuery = route.query.category
|
|
||||||
if (categoryFromQuery && categories.value.some(cat => cat.id === categoryFromQuery)) {
|
|
||||||
selectedCategory.value = categoryFromQuery
|
|
||||||
}
|
|
||||||
|
|
||||||
getProducts()
|
|
||||||
getUserPoints()
|
|
||||||
getUserBeans()
|
|
||||||
getHotProducts()
|
|
||||||
getCheapProducts()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getProducts()
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.shop-page {
|
.shop-container {
|
||||||
min-height: 100vh;
|
padding: 20px;
|
||||||
background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 导航栏保持白色背景 */
|
|
||||||
.navbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 16px;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 56px;
|
|
||||||
top: 0;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
text-align: center;
|
|
||||||
pointer-events: none; /* 允许点击穿透到下方元素 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-title {
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #ffffff;
|
|
||||||
display: inline-block; /* 使文本能够真正居中 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-right {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.points-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
color: #409eff;
|
|
||||||
font-size: 14px;
|
|
||||||
white-space: nowrap; /* 防止换行 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.beans-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.beans-container img {
|
|
||||||
margin-right: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn,
|
|
||||||
.points-btn {
|
|
||||||
color: #409eff;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 搜索栏参与渐变 */
|
|
||||||
.search-section {
|
|
||||||
padding: 16px;
|
|
||||||
background: transparent;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input :deep(.el-input__wrapper) {
|
|
||||||
border-radius: 1000px;
|
|
||||||
background-color: rgba(255,255,255,0.8);
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 分类筛选参与渐变 */
|
|
||||||
.category-section {
|
|
||||||
background: transparent;
|
|
||||||
padding: 16px 0;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-list {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 0 16px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-item {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center; /* 使子元素水平居中 */
|
background: #79afff;
|
||||||
justify-content: center; /* 使子元素垂直居中 */
|
margin-bottom: -100px;
|
||||||
gap: 4px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
min-width: 60px;
|
|
||||||
background: rgba(255,255,255,0.8);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
-webkit-backdrop-filter: blur(5px);
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-name {
|
.shop-header {
|
||||||
font-size: 12px;
|
display: flex;
|
||||||
/* 移除以下三个属性，取消文本省略效果 */
|
align-items: center;
|
||||||
/* white-space: nowrap; */
|
justify-content: center;
|
||||||
/* overflow: hidden; */
|
}
|
||||||
/* text-overflow: ellipsis; */
|
|
||||||
max-width: 100%;
|
.product-searcher {
|
||||||
|
width: 265px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-searcher :deep(.el-input__wrapper) {
|
||||||
|
border-radius: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-button {
|
||||||
|
width: 64px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 400px;
|
||||||
|
margin-left: 8px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(to right, #7b99ff, #002cc2);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-bar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
column-gap: 21px;
|
||||||
|
row-gap: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-bar-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-bar-item-img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-bar-item-name {
|
||||||
|
font-size: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item:hover {
|
.shop-tips {
|
||||||
background: rgba(240,249,255,0.9);
|
align-self: center;
|
||||||
|
margin-top: 28px;
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 30px;
|
||||||
|
width: 330px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item.active {
|
.tips-imgs {
|
||||||
background: rgba(64,158,255,0.9);
|
margin-left: -1px;
|
||||||
color: white;
|
width: auto;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item span {
|
.shop-content {
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 商品列表参与渐变 */
|
|
||||||
.products-section {
|
|
||||||
padding: 16px;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sort-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.products-grid {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 16px;
|
column-gap: 26px;
|
||||||
margin-bottom: 20px;
|
row-gap: 14px;
|
||||||
|
align-self: center;
|
||||||
|
margin-top: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card {
|
.product-content {
|
||||||
width: 163px;
|
width: 153px;
|
||||||
height: 217px;
|
height: 220px;
|
||||||
background: rgba(255,255,255,0.9);
|
border-radius: 5px;
|
||||||
border-radius: 12px;
|
background-color: #fff;
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card:hover {
|
.product-content-img {
|
||||||
transform: translateY(-4px);
|
width: 153px;
|
||||||
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
|
height: 153px;
|
||||||
}
|
border-radius: 5px 5px 0 0;
|
||||||
|
|
||||||
.product-image {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 163px;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-image img {
|
.product-bottom {
|
||||||
width: 100%;
|
flex: 1;
|
||||||
height: 100%;
|
padding: 8px;
|
||||||
object-fit: cover;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discount-badge {
|
.product-content-name {
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
right: 8px;
|
|
||||||
background: #ff4757;
|
|
||||||
color: white;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
text-align: left;
|
||||||
|
display: -webkit-box;
|
||||||
.product-name {
|
-webkit-line-clamp: 2;
|
||||||
margin: 8px 8px 4px;
|
line-clamp: 2;
|
||||||
font-size: 14px;
|
-webkit-box-orient: vertical;
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
line-height: 1.4;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
line-height: 1.4;
|
||||||
|
min-height: 2.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-price {
|
.price-info {
|
||||||
margin: 0 8px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-price {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rongdou-icon {
|
.product-content-price {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ff6b00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-bean {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
object-fit: contain;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rongdou-price {
|
.block {
|
||||||
color: #ff6b35;
|
height: 100px;
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-price {
|
</style>
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.points-icon {
|
|
||||||
font-size: 10px;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.points-price {
|
|
||||||
color: #999;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.products-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-card {
|
|
||||||
width: calc(50vw - 24px);
|
|
||||||
max-width: 163px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 推荐 */
|
|
||||||
.recommend {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 16px;
|
|
||||||
margin: 16px;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
-webkit-backdrop-filter: blur(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-grid {
|
|
||||||
flex: 1;
|
|
||||||
margin: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-product {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 144px;
|
|
||||||
height: 54px;
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 6px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-product:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-image {
|
|
||||||
position: relative;
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-right: 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-discount {
|
|
||||||
position: absolute;
|
|
||||||
top: 2px;
|
|
||||||
right: 2px;
|
|
||||||
background: #ff4757;
|
|
||||||
color: white;
|
|
||||||
padding: 1px 4px;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-name {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
line-height: 1.3;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-price-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-price-container .main-price {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-price-container .rongdou-icon {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-price-container .rongdou-price {
|
|
||||||
color: #ff6b35;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-price-container .sub-price {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-price-container .points-icon {
|
|
||||||
font-size: 8px;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-price-container .points-price {
|
|
||||||
color: #999;
|
|
||||||
font-size: 8px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user