修改商城
This commit is contained in:
@@ -76,7 +76,7 @@
|
||||
@click="goToProduct(product.id)"
|
||||
>
|
||||
<div class="product-image">
|
||||
<img :src="product.image" :alt="product.name" />
|
||||
<img :src="getImageUrl(product.image)" :alt="product.name" />
|
||||
<div v-if="product.discount" class="discount-badge">
|
||||
{{ product.discount }}折
|
||||
</div>
|
||||
@@ -138,6 +138,9 @@
|
||||
title="购物车"
|
||||
direction="rtl"
|
||||
size="80%"
|
||||
:z-index="10000"
|
||||
:modal="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<div class="cart-content">
|
||||
<div v-if="cartItems.length === 0" class="empty-cart">
|
||||
@@ -146,7 +149,7 @@
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="item in cartItems" :key="item.id" class="cart-item">
|
||||
<img :src="item.image" :alt="item.name" class="item-image" />
|
||||
<img :src="getImageUrl(item.image)" :alt="item.name" class="item-image" />
|
||||
<div class="item-info">
|
||||
<h4>{{ item.name }}</h4>
|
||||
<p class="item-price">
|
||||
@@ -205,6 +208,7 @@ import {
|
||||
} from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { getImageUrl } from '@/config'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
@@ -237,6 +241,11 @@ const categories = ref([
|
||||
|
||||
// 计算属性
|
||||
const filteredProducts = computed(() => {
|
||||
// 安全检查：确保products.value是数组
|
||||
if (!products.value || !Array.isArray(products.value)) {
|
||||
return []
|
||||
}
|
||||
|
||||
let result = products.value
|
||||
|
||||
// 分类筛选
|
||||
@@ -247,21 +256,21 @@ const filteredProducts = computed(() => {
|
||||
// 搜索筛选
|
||||
if (searchKeyword.value) {
|
||||
result = result.filter(p =>
|
||||
p.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
|
||||
p.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
p.name && p.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
|
||||
p.description && p.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
// 排序
|
||||
switch (sortBy.value) {
|
||||
case 'price_asc':
|
||||
result.sort((a, b) => a.points - b.points)
|
||||
result.sort((a, b) => (a.points || 0) - (b.points || 0))
|
||||
break
|
||||
case 'price_desc':
|
||||
result.sort((a, b) => b.points - a.points)
|
||||
result.sort((a, b) => (b.points || 0) - (a.points || 0))
|
||||
break
|
||||
case 'sales':
|
||||
result.sort((a, b) => b.sales - a.sales)
|
||||
result.sort((a, b) => (b.sales || 0) - (a.sales || 0))
|
||||
break
|
||||
}
|
||||
|
||||
@@ -279,11 +288,19 @@ const sortText = computed(() => {
|
||||
})
|
||||
|
||||
const cartCount = computed(() => {
|
||||
return cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
|
||||
// 安全检查：确保cartItems.value是数组
|
||||
if (!cartItems.value || !Array.isArray(cartItems.value)) {
|
||||
return 0
|
||||
}
|
||||
return cartItems.value.reduce((sum, item) => sum + (item.quantity || 0), 0)
|
||||
})
|
||||
|
||||
const totalPoints = computed(() => {
|
||||
return cartItems.value.reduce((sum, item) => sum + (item.points * item.quantity), 0)
|
||||
// 安全检查：确保cartItems.value是数组
|
||||
if (!cartItems.value || !Array.isArray(cartItems.value)) {
|
||||
return 0
|
||||
}
|
||||
return cartItems.value.reduce((sum, item) => sum + ((item.points || 0) * (item.quantity || 0)), 0)
|
||||
})
|
||||
|
||||
// 方法
|
||||
@@ -382,7 +399,7 @@ const getProducts = async (isLoadMore = false) => {
|
||||
loadingMore.value = true
|
||||
}
|
||||
|
||||
const response = await api.get('/products', {
|
||||
const {data} = await api.get('/products', {
|
||||
params: {
|
||||
page: page.value,
|
||||
limit: 20,
|
||||
@@ -392,16 +409,28 @@ const getProducts = async (isLoadMore = false) => {
|
||||
}
|
||||
})
|
||||
|
||||
// 确保响应数据是有效的数组
|
||||
const responseProducts = data.data?.products || []
|
||||
|
||||
if (isLoadMore) {
|
||||
products.value.push(...response.data.products)
|
||||
// 确保products.value是数组
|
||||
if (!Array.isArray(products.value)) {
|
||||
products.value = []
|
||||
}
|
||||
products.value.push(...responseProducts)
|
||||
} else {
|
||||
products.value = response.data.products
|
||||
products.value = responseProducts
|
||||
}
|
||||
|
||||
hasMore.value = response.data.hasMore
|
||||
hasMore.value = data.data?.hasMore || false
|
||||
page.value++
|
||||
} catch (error) {
|
||||
console.error('获取商品列表失败:', error)
|
||||
ElMessage.error('获取商品列表失败')
|
||||
// 确保products.value始终是数组
|
||||
if (!isLoadMore && (!products.value || !Array.isArray(products.value))) {
|
||||
products.value = []
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
@@ -415,13 +444,18 @@ const loadMore = () => {
|
||||
const getUserPoints = async () => {
|
||||
try {
|
||||
const response = await api.get('/user/points')
|
||||
userPoints.value = response.data.points
|
||||
userPoints.value = response.data.points || 0
|
||||
} catch (error) {
|
||||
console.error('获取用户积分失败:', error)
|
||||
userPoints.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
const truncateText = (text, maxLength) => {
|
||||
// 安全检查：确保text是字符串
|
||||
if (!text || typeof text !== 'string') {
|
||||
return ''
|
||||
}
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
@@ -436,7 +470,33 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.shop-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background-attachment: fixed;
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
/* 移动端优化 */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.shop-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.shop-page > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -445,11 +505,13 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-left,
|
||||
@@ -471,14 +533,21 @@ onMounted(() => {
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 20px 16px 0 16px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@@ -486,9 +555,14 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.category-section {
|
||||
background: white;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 0 16px;
|
||||
border-radius: 16px;
|
||||
margin-top: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.category-list {
|
||||
@@ -502,21 +576,33 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
min-width: 60px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
min-width: 70px;
|
||||
background: rgba(248, 250, 252, 0.8);
|
||||
border: 2px solid transparent;
|
||||
/* 移动端触摸优化 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background: #f0f9ff;
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
border-color: rgba(139, 92, 246, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
background: #409eff;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||
color: white;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
@@ -524,7 +610,12 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.products-section {
|
||||
padding: 16px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 20px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -557,98 +648,183 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
/* 移动端触摸优化 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.product-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.06) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 16px 48px rgba(139, 92, 246, 0.25);
|
||||
border-color: rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
.product-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-card:active {
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(45deg, #f1f5f9 0%, #e2e8f0 100%);
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.product-card:hover .product-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: #ff4757;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 12px;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.product-name {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #ff6b35;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
gap: 4px;
|
||||
color: #f59e0b;
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
color: #999;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
text-decoration: line-through;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.product-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-bottom: 8px;
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 0 12px 12px;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.product-actions .el-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.product-actions .el-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
}
|
||||
|
||||
.product-actions .el-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.product-actions .el-button:disabled {
|
||||
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
|
||||
color: #64748b;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -665,18 +841,67 @@ onMounted(() => {
|
||||
.cart-fab {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #409eff;
|
||||
right: 40px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
|
||||
z-index: 9999;
|
||||
/* 移动端触摸优化 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
||||
border: 2px solid white;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4), 0 0 0 0 rgba(239, 68, 68, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4), 0 0 0 10px rgba(239, 68, 68, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4), 0 0 0 0 rgba(239, 68, 68, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.cart-fab:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 12px 35px rgba(139, 92, 246, 0.5);
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
|
||||
}
|
||||
|
||||
.cart-fab:active {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
.cart-content {
|
||||
@@ -752,23 +977,276 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 0 12px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.points-btn {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 16px;
|
||||
margin: 16px 12px 0 12px;
|
||||
}
|
||||
|
||||
.category-section {
|
||||
padding: 12px 0;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
padding: 0 12px;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.category-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
min-width: 60px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
padding: 16px;
|
||||
margin: 16px 12px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.cart-fab {
|
||||
bottom: 70px;
|
||||
right: 16px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navbar {
|
||||
padding: 0 10px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
margin: 12px 8px 0 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.category-section {
|
||||
margin: 8px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
margin: 12px 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-stats {
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
|
||||
.product-actions .el-button {
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.cart-fab {
|
||||
bottom: 60px;
|
||||
right: 12px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item-info h4 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.total-points {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.navbar {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
margin: 8px 6px 0 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.category-section {
|
||||
margin: 6px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
margin: 8px 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
padding: 0 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
min-width: 50px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
padding: 0 8px 8px;
|
||||
}
|
||||
|
||||
.product-actions .el-button {
|
||||
height: 32px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cart-fab {
|
||||
right: 8px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user