界面美化

frontend/src/views/Home.vue

@@ -2,39 +2,116 @@
   <div class="page">
     <el-container>
       <el-header class="header">
-        <div class="logo">植愈线上花店</div>
-        <div>
-          <el-button v-if="isLoggedIn" type="text" @click="$router.push('/orders')">我的订单</el-button>
-          <el-button v-if="isLoggedIn" type="text" @click="$router.push('/profile')">个人中心</el-button>
-          <el-button v-if="isAdmin" type="text" @click="$router.push('/admin')">后台管理</el-button>
-          <el-button v-if="!isLoggedIn" type="primary" @click="$router.push('/login')">登录</el-button>
-          <el-button v-else type="danger" @click="handleLogout">注销</el-button>
+        <div class="logo">
+          <span class="logo-icon">🌸</span>
+          <span class="logo-text">植愈线上花店</span>
+        </div>
+        <div class="nav-actions">
+          <el-button v-if="isLoggedIn" type="text" class="nav-btn" @click="$router.push('/orders')">
+            <i class="el-icon-s-order"></i>我的订单
+          </el-button>
+          <el-button v-if="isLoggedIn" type="text" class="nav-btn" @click="$router.push('/profile')">
+            <i class="el-icon-user"></i>个人中心
+          </el-button>
+          <el-button v-if="isAdmin" type="text" class="nav-btn" @click="$router.push('/admin')">
+            <i class="el-icon-s-tools"></i>后台管理
+          </el-button>
+          <el-button v-if="!isLoggedIn" type="primary" class="login-btn" @click="$router.push('/login')">
+            <i class="el-icon-user-solid"></i>登录
+          </el-button>
+          <el-button v-else type="danger" class="logout-btn" @click="handleLogout">
+            <i class="el-icon-switch-button"></i>退出
+          </el-button>
         </div>
       </el-header>
       <el-main>
-        <el-card>
+        <!-- Banner区域 -->
+        <div class="hero-banner">
+          <div class="hero-content">
+            <h1 class="hero-title">用鲜花传递爱意</h1>
+            <p class="hero-subtitle">每一束花都承载着独特的情感</p>
+          </div>
+          <div class="hero-decoration">
+            <span class="flower-decoration">🌺</span>
+            <span class="flower-decoration">🌻</span>
+            <span class="flower-decoration">🌷</span>
+          </div>
+        </div>
+
+        <!-- 搜索过滤区域 -->
+        <el-card class="filter-card">
           <div class="filters">
-            <el-select v-model="categoryId" clearable placeholder="全部分类" @change="loadProducts">
-              <el-option
-                v-for="item in categories"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+            <div class="filter-group">
+              <span class="filter-label">
+                <i class="el-icon-s-grid"></i>分类
+              </span>
+              <el-select v-model="categoryId" clearable placeholder="全部分类" @change="loadProducts" class="category-select">
+                <el-option
+                  v-for="item in categories"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </div>
+            <div class="search-group">
+              <el-input 
+                v-model="keyword" 
+                placeholder="搜索心仪的花束..." 
+                class="search-input" 
+                @keyup.enter.native="filterProducts"
+                prefix-icon="el-icon-search"
               />
-            </el-select>
-            <el-input v-model="keyword" placeholder="搜索花束" class="search" @keyup.enter.native="filterProducts" />
-            <el-button type="primary" @click="filterProducts">搜索</el-button>
+              <el-button type="primary" class="search-btn" @click="filterProducts">
+                <i class="el-icon-search"></i>搜索
+              </el-button>
+            </div>
           </div>
         </el-card>
-        <el-row :gutter="16" class="product-list">
-          <el-col v-for="item in filteredProducts" :key="item.id" :span="6">
-            <el-card :body-style="{ padding: '12px' }" class="product-card" @click.native="goDetail(item.id)">
-              <img :src="item.coverUrl || placeholder" class="product-cover" />
-              <div class="product-name">{{ item.name }}</div>
-              <div class="product-price">￥{{ item.price }}</div>
-            </el-card>
+
+        <!-- 产品列表 -->
+        <div class="section-header">
+          <h2 class="section-title">
+            <span class="title-icon">✿</span>
+            精选花束
+          </h2>
+          <span class="product-count">共 {{ filteredProducts.length }} 款</span>
+        </div>
+
+        <el-row :gutter="20" class="product-list">
+          <el-col v-for="(item, index) in filteredProducts" :key="item.id" :span="6" :xs="12" :sm="8" :md="8" :lg="6">
+            <div class="product-card-wrapper" :style="{ animationDelay: index * 0.1 + 's' }">
+              <el-card class="product-card" @click.native="goDetail(item.id)">
+                <div class="card-image-wrapper">
+                  <img :src="item.coverUrl || placeholder" class="product-cover" />
+                  <div class="card-overlay">
+                    <span class="view-detail">查看详情</span>
+                  </div>
+                </div>
+                <div class="card-content">
+                  <div class="product-category" v-if="item.categoryName">{{ item.categoryName }}</div>
+                  <div class="product-name">{{ item.name }}</div>
+                  <div class="product-footer">
+                    <div class="product-price">
+                      <span class="price-symbol">¥</span>
+                      <span class="price-value">{{ item.price }}</span>
+                    </div>
+                    <el-button type="primary" size="mini" class="buy-btn" @click.stop="goDetail(item.id)">
+                      立即选购
+                    </el-button>
+                  </div>
+                </div>
+              </el-card>
+            </div>
           </el-col>
         </el-row>
+
+        <!-- 空状态 -->
+        <div v-if="filteredProducts.length === 0" class="empty-state">
+          <div class="empty-icon">🌱</div>
+          <p class="empty-text">没有找到相关花束</p>
+          <el-button type="text" @click="keyword = ''; filterProducts()">清除搜索</el-button>
+        </div>
       </el-main>
     </el-container>
   </div>
@@ -111,43 +188,382 @@ export default {
 <style scoped>
 .page {
   min-height: 100vh;
+  background: var(--bg-color);
 }
+
+/* Header 样式 */
 .header {
-  background: #fff;
+  background: linear-gradient(135deg, #fff 0%, var(--bg-color) 100%);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0 40px;
+  box-shadow: var(--shadow-sm);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
+
 .logo {
-  font-size: 20px;
-  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
+
+.logo-icon {
+  font-size: 32px;
+  animation: float 3s ease-in-out infinite;
+}
+
+.logo-text {
+  font-size: 22px;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-dark) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nav-btn {
+  font-size: 14px;
+  padding: 8px 16px;
+  border-radius: 20px;
+  transition: var(--transition);
+}
+
+.nav-btn:hover {
+  background: rgba(232, 180, 184, 0.1);
+}
+
+.login-btn, .logout-btn {
+  border-radius: 20px;
+  padding: 10px 24px;
+}
+
+/* Banner 区域 */
+.hero-banner {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 50%, var(--secondary-light) 100%);
+  border-radius: var(--radius-lg);
+  padding: 50px 40px;
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-banner::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
+  animation: rotate 20s linear infinite;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0 0 12px 0;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+}
+
+.hero-subtitle {
+  font-size: 16px;
+  color: rgba(255,255,255,0.9);
+  margin: 0;
+}
+
+.hero-decoration {
+  display: flex;
+  gap: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.flower-decoration {
+  font-size: 48px;
+  animation: float 3s ease-in-out infinite;
+}
+
+.flower-decoration:nth-child(2) {
+  animation-delay: 0.5s;
+}
+
+.flower-decoration:nth-child(3) {
+  animation-delay: 1s;
+}
+
+/* 过滤区域 */
+.filter-card {
+  margin-bottom: 24px;
+  border-radius: var(--radius-md);
+}
+
 .filters {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
 }
-.search {
-  margin: 0 12px;
-  width: 240px;
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
+
+.filter-label {
+  font-weight: 500;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.category-select {
+  width: 180px;
+}
+
+.search-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-input {
+  width: 300px;
+}
+
+.search-input >>> .el-input__inner {
+  border-radius: 25px;
+  padding-left: 40px;
+}
+
+.search-btn {
+  border-radius: 25px;
+  padding: 10px 24px;
+}
+
+/* 区域标题 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.title-icon {
+  color: var(--primary-color);
+  font-size: 28px;
+}
+
+.product-count {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+/* 产品列表 */
 .product-list {
-  margin-top: 16px;
+  margin-top: 0;
 }
+
+.product-card-wrapper {
+  margin-bottom: 20px;
+  animation: fadeIn 0.6s ease-out forwards;
+  opacity: 0;
+}
+
 .product-card {
   cursor: pointer;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  transition: var(--transition);
+  border: none;
 }
+
+.product-card:hover {
+  transform: translateY(-8px);
+  box-shadow: var(--shadow-lg);
+}
+
+.card-image-wrapper {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+}
+
 .product-cover {
   width: 100%;
-  height: 160px;
+  height: 200px;
   object-fit: cover;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
+  transition: var(--transition);
 }
+
+.card-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition);
+  padding-bottom: 20px;
+}
+
+.product-card:hover .card-overlay {
+  opacity: 1;
+}
+
+.product-card:hover .product-cover {
+  transform: scale(1.05);
+}
+
+.view-detail {
+  color: #fff;
+  font-weight: 500;
+  padding: 8px 20px;
+  background: rgba(255,255,255,0.2);
+  border-radius: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.card-content {
+  padding: 16px 0 0 0;
+}
+
+.product-category {
+  font-size: 12px;
+  color: var(--secondary-color);
+  font-weight: 500;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
 .product-name {
-  margin-top: 8px;
+  font-size: 16px;
   font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
+
+.product-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .product-price {
-  color: #f56c6c;
-  margin-top: 4px;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.price-symbol {
+  font-size: 14px;
+  color: var(--price-color);
+  font-weight: 500;
+}
+
+.price-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--price-color);
+}
+
+.buy-btn {
+  border-radius: 15px;
+  padding: 8px 16px;
+  font-size: 12px;
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.empty-icon {
+  font-size: 64px;
+  margin-bottom: 16px;
+}
+
+.empty-text {
+  font-size: 16px;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .header {
+    padding: 0 20px;
+  }
+  
+  .hero-banner {
+    padding: 30px 20px;
+    flex-direction: column;
+    text-align: center;
+    gap: 20px;
+  }
+  
+  .hero-title {
+    font-size: 24px;
+  }
+  
+  .filters {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .search-group {
+    width: 100%;
+  }
+  
+  .search-input {
+    flex: 1;
+  }
 }
 </style>