川
4382feedb3
- 统一并丰富主题色变量，新增多级浅色和圆角、阴影变量 - 调整应用头部布局及风格，增加logo子标题和用户头像显示 - 细化分类导航样式，添加品类图标和渐变背景 - 优化颜色选择器的交互动效和样式细节 - 美化设计预览组件，提升边框圆角和阴影效果 - 调整子类型面板布局、尺寸及交互动画效果 - 修正全局样式中字体和滚动条的表现，增强用户体验 - 统一按钮、标签等控件的圆角和颜色渐变样式 - 增强Element Plus UI组件的主题覆盖和交互状态样式
155 lines
3.2 KiB
Vue
155 lines
3.2 KiB
Vue
<template>
|
|
<nav class="category-nav">
|
|
<div class="nav-brand">
|
|
<h3 class="brand-title">玉 宗</h3>
|
|
<span class="brand-sub">YUZONG JEWELRY</span>
|
|
</div>
|
|
<ul class="category-list">
|
|
<li
|
|
v-for="category in categories"
|
|
:key="category.id"
|
|
class="category-item"
|
|
:class="{ active: currentCategory?.id === category.id }"
|
|
@click="handleSelect(category)"
|
|
>
|
|
<span class="category-icon">{{ getCategoryIcon(category.name) }}</span>
|
|
<span class="category-name">{{ category.name }}</span>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useCategoryStore } from '@/stores/category'
|
|
import type { Category } from '@/stores/category'
|
|
|
|
const categoryStore = useCategoryStore()
|
|
|
|
const categories = computed(() => categoryStore.categories)
|
|
const currentCategory = computed(() => categoryStore.currentCategory)
|
|
|
|
const handleSelect = (category: Category) => {
|
|
categoryStore.selectCategory(category)
|
|
}
|
|
|
|
// 品类图标映射
|
|
const getCategoryIcon = (name: string): string => {
|
|
const iconMap: Record<string, string> = {
|
|
'牌子': '🏷️',
|
|
'珠子': '🔵',
|
|
'手把件': '🤲',
|
|
'雕刻件': '💎',
|
|
'摆件': '🏺',
|
|
'手镯': '⭕',
|
|
'耳钉': '⭐',
|
|
'耳饰': '🌙',
|
|
'手链': '🔗',
|
|
'项链': '📿',
|
|
'戒指': '💍',
|
|
'表带': '⌚',
|
|
'随形': '🗿',
|
|
'吊坠': '🔻',
|
|
'珠串': '📿',
|
|
}
|
|
for (const [key, icon] of Object.entries(iconMap)) {
|
|
if (name.includes(key)) return icon
|
|
}
|
|
return '💠'
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$primary-color: #5B7E6B;
|
|
$primary-light: #8BAF9C;
|
|
$primary-lighter: #D4E5DB;
|
|
$bg-color: #FAF8F5;
|
|
$border-color: #E8E4DF;
|
|
$text-primary: #2C2C2C;
|
|
$text-secondary: #6B6B6B;
|
|
$text-light: #999999;
|
|
|
|
.category-nav {
|
|
width: 220px;
|
|
min-width: 220px;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, #f7f9f7 0%, #f0f4f1 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid rgba($border-color, 0.5);
|
|
}
|
|
|
|
.nav-brand {
|
|
padding: 24px 20px 20px;
|
|
text-align: center;
|
|
border-bottom: 1px solid rgba($border-color, 0.4);
|
|
|
|
.brand-title {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: $primary-color;
|
|
letter-spacing: 8px;
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
.brand-sub {
|
|
font-size: 10px;
|
|
color: $text-light;
|
|
letter-spacing: 2px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.category-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 12px 12px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.category-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
cursor: pointer;
|
|
border-radius: 12px;
|
|
transition: all 0.25s ease;
|
|
|
|
&:hover {
|
|
background-color: rgba($primary-color, 0.06);
|
|
}
|
|
|
|
&.active {
|
|
background-color: $primary-color;
|
|
|
|
.category-icon {
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.category-name {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-icon {
|
|
font-size: 16px;
|
|
width: 24px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.category-name {
|
|
font-size: 14px;
|
|
color: $text-secondary;
|
|
letter-spacing: 1px;
|
|
transition: all 0.25s ease;
|
|
}
|
|
</style>
|