打包

dist/css/601.b5eaf439.css → dist/css/854.e92e0afc.css

@@ -1 +1 @@
-.home-layout-container[data-v-083f77c2]{display:flex;width:100%;height:auto}.left-nav[data-v-083f77c2]{width:200px;background-color:#f8f9fa;padding:20px 0;box-sizing:border-box}.nav-list[data-v-083f77c2]{list-style:none;margin:0;padding:0}.nav-item[data-v-083f77c2]{padding:12px 20px;cursor:pointer;color:#333;transition:all .3s ease;display:flex}.nav-item img[data-v-083f77c2]{width:20px;margin-right:5px}.nav-item[data-v-083f77c2]:hover{background-color:#e9ecef;padding-left:25px}.main-content[data-v-083f77c2]{flex:1;height:auto;overflow:hidden}.carousel-img[data-v-083f77c2]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.main-content[data-v-083f77c2] .el-carousel__container{height:100%!important}.right-info[data-v-083f77c2]{width:280px;background-color:#fff;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;border-left:1px solid #eee}.avatar-container[data-v-083f77c2]{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.user-avatar[data-v-083f77c2]{width:60px;height:60px;border-radius:50%;margin-bottom:10px;border:2px solid #f0f0f0}.welcome-text[data-v-083f77c2]{font-size:14px;color:#333}.btn-group[data-v-083f77c2]{display:flex;gap:10px;margin-bottom:30px;width:100%}.func-icons[data-v-083f77c2]{display:flex;justify-content:space-around;width:100%;margin-bottom:30px;padding:10px 0;border-top:1px dashed #eee;border-bottom:1px dashed #eee}.icon-item[data-v-083f77c2]{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666;transition:color .3s ease;width:50px}.icon-item[data-v-083f77c2]:hover{color:#1890ff}.icon[data-v-083f77c2]{font-size:24px;margin-bottom:5px}.icon-item span[data-v-083f77c2]{font-size:12px}.announcement[data-v-083f77c2]{display:flex;align-items:center;font-size:12px;color:#666;width:100%;padding-top:10px}.announcement span[data-v-083f77c2]{margin-left:10px}.product-list .product-grid[data-v-6ecfbe40]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.product-list .product-card[data-v-6ecfbe40]{border:1px solid #eaeaea;border-radius:8px;overflow:hidden;transition:all .3s ease;padding:10px}.product-list .product-card[data-v-6ecfbe40]:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.product-list .product-card .product-img[data-v-6ecfbe40]{height:250px;overflow:hidden}.product-list .product-card .product-img .product-pic[data-v-6ecfbe40]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease}.product-list .product-card .product-img .product-pic[data-v-6ecfbe40]:hover{transform:scale(1.05)}.product-list .product-card .product-info[data-v-6ecfbe40]{padding:10px}.product-list .product-card .product-info .product-name[data-v-6ecfbe40]{font-size:14px;line-height:20px;min-height:40px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:10px}.product-list .product-card .product-info .product-name a[data-v-6ecfbe40]{color:#333}.product-list .product-card .product-info .product-name a[data-v-6ecfbe40]:hover{color:#409eff}.product-list .product-card .product-info .product-price[data-v-6ecfbe40]{margin-bottom:15px}.product-list .product-card .product-info .product-price .current-price[data-v-6ecfbe40]{color:#f40;font-size:16px;font-weight:700}.product-list .product-card .product-info .product-price .original-price[data-v-6ecfbe40]{color:#999;font-size:12px;text-decoration:line-through;margin-left:8px}.product-list .product-card .product-info .product-actions[data-v-6ecfbe40]{margin-bottom:10px}.product-list .product-card .product-info .product-sales[data-v-6ecfbe40]{font-size:12px;color:#999;margin-bottom:15px}.product-list .no-products[data-v-6ecfbe40]{padding:50px 0;text-align:center}.product-box[data-v-9b57fa58]{margin:30px 0}.product-box h2[data-v-9b57fa58]{margin-bottom:20px}
+.home-layout-container[data-v-a8825fb4]{display:flex;width:100%;height:auto}.left-nav[data-v-a8825fb4]{width:200px;background-color:#f8f9fa;padding:20px 0;box-sizing:border-box}.nav-list[data-v-a8825fb4]{list-style:none;margin:0;padding:0}.nav-item[data-v-a8825fb4]{padding:12px 20px;cursor:pointer;color:#333;transition:all .3s ease;display:flex}.nav-item img[data-v-a8825fb4]{width:20px;margin-right:5px}.nav-item[data-v-a8825fb4]:hover{background-color:#e9ecef;padding-left:25px}.main-content[data-v-a8825fb4]{flex:1;height:auto;overflow:hidden}.carousel-img[data-v-a8825fb4]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.main-content[data-v-a8825fb4] .el-carousel__container{height:100%!important}.right-info[data-v-a8825fb4]{width:280px;background-color:#fff;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;border-left:1px solid #eee}.avatar-container[data-v-a8825fb4]{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.user-avatar[data-v-a8825fb4]{width:60px;height:60px;border-radius:50%;margin-bottom:10px;border:2px solid #f0f0f0}.welcome-text[data-v-a8825fb4]{font-size:14px;color:#333}.btn-group[data-v-a8825fb4]{display:flex;gap:10px;margin-bottom:30px;width:100%}.func-icons[data-v-a8825fb4]{display:flex;justify-content:space-around;width:100%;margin-bottom:30px;padding:10px 0;border-top:1px dashed #eee;border-bottom:1px dashed #eee}.icon-item[data-v-a8825fb4]{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666;transition:color .3s ease;width:50px}.icon-item[data-v-a8825fb4]:hover{color:#1890ff}.icon[data-v-a8825fb4]{font-size:24px;margin-bottom:5px}.icon-item span[data-v-a8825fb4]{font-size:12px}.announcement[data-v-a8825fb4]{display:flex;align-items:center;font-size:12px;color:#666;width:100%;padding-top:10px}.announcement span[data-v-a8825fb4]{margin-left:10px}.product-list .product-grid[data-v-6ecfbe40]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.product-list .product-card[data-v-6ecfbe40]{border:1px solid #eaeaea;border-radius:8px;overflow:hidden;transition:all .3s ease;padding:10px}.product-list .product-card[data-v-6ecfbe40]:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.product-list .product-card .product-img[data-v-6ecfbe40]{height:250px;overflow:hidden}.product-list .product-card .product-img .product-pic[data-v-6ecfbe40]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease}.product-list .product-card .product-img .product-pic[data-v-6ecfbe40]:hover{transform:scale(1.05)}.product-list .product-card .product-info[data-v-6ecfbe40]{padding:10px}.product-list .product-card .product-info .product-name[data-v-6ecfbe40]{font-size:14px;line-height:20px;min-height:40px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:10px}.product-list .product-card .product-info .product-name a[data-v-6ecfbe40]{color:#333}.product-list .product-card .product-info .product-name a[data-v-6ecfbe40]:hover{color:#409eff}.product-list .product-card .product-info .product-price[data-v-6ecfbe40]{margin-bottom:15px}.product-list .product-card .product-info .product-price .current-price[data-v-6ecfbe40]{color:#f40;font-size:16px;font-weight:700}.product-list .product-card .product-info .product-price .original-price[data-v-6ecfbe40]{color:#999;font-size:12px;text-decoration:line-through;margin-left:8px}.product-list .product-card .product-info .product-actions[data-v-6ecfbe40]{margin-bottom:10px}.product-list .product-card .product-info .product-sales[data-v-6ecfbe40]{font-size:12px;color:#999;margin-bottom:15px}.product-list .no-products[data-v-6ecfbe40]{padding:50px 0;text-align:center}.product-box[data-v-9b57fa58]{margin:30px 0}.product-box h2[data-v-9b57fa58]{margin-bottom:20px}

dist/index.html

@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>abcdf</title><script defer="defer" src="/js/chunk-vendors.88c8f662.js"></script><script defer="defer" src="/js/app.cca24c0d.js"></script><link href="/css/chunk-vendors.10dd4e95.css" rel="stylesheet"><link href="/css/app.f2c6c3bd.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but abcdf doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>abcdf</title><script defer="defer" src="/js/chunk-vendors.88c8f662.js"></script><script defer="defer" src="/js/app.5b4a444d.js"></script><link href="/css/chunk-vendors.10dd4e95.css" rel="stylesheet"><link href="/css/app.5178ac73.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but abcdf doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

src/components/layout/HeaderNav.vue

@@ -10,7 +10,7 @@
           >
         </p>
         <div class="top-links">
-          <router-link to="/User" v-if="isLogin">
+          <router-link to="/User" v-if="isLogin" class="user-link">
             <img v-lazy="userInfo.avatar" alt="用户头像" class="avatar" />
             {{ userInfo.username }}
           </router-link>
@@ -18,17 +18,17 @@
           <span class="separator" v-if="false">|</span>
           <router-link to="/Register" v-if="false">注册</router-link>
           <router-link to="/User">采购人中心</router-link>
-          <router-link to="/User/ShoppingCart"
+          <router-link to="/User/ShoppingCart" class="cart-link">
-            >购物车<span v-if="cartTotalCount > 0"
+            购物车<span v-if="cartTotalCount > 0"
               >({{ cartTotalCount }}件)</span
             ></router-link
           >
           <router-link to="/User/OrderList" v-if="isLogin"
             >我的订单</router-link
           >
-          <router-link to="javascript:;" @click="handleLogout" v-if="isLogin"
+          <div class="logout-btn" @click="handleLogout" v-if="isLogin">
-            >退出</router-link
+            退出
-          >
+          </div>
         </div>
       </div>
     </div>
@@ -62,39 +62,42 @@
           </el-input>
           <div class="hot-tags">
             <span>热门搜索：</span>
-            <router-link
+            <div
-              to="javascript:;"
               @click="
                 searchText = '手机';
                 handleSearch();
               "
-              >手机</router-link
+              class="hot-tag"
             >
-            <router-link
+              手机
-              to="javascript:;"
+            </div>
+            <div
               @click="
                 searchText = '电脑';
                 handleSearch();
               "
-              >电脑</router-link
+              class="hot-tag"
             >
-            <router-link
+              电脑
-              to="javascript:;"
+            </div>
+            <div
               @click="
                 searchText = '服装';
                 handleSearch();
               "
-              >服装</router-link
+              class="hot-tag"
             >
+              服装
+            </div>
           </div>
         </div>
 
         <!-- 电话 -->
-        <div class="cart-entry">
+        <div class="phone-entry">
-          <router-link tos="cart-link">
+          <router-link to="#">
             <img
               src="https://static.ticket.sz-trip.com/shiweisuzhou/pc/login/phone.png"
-              alt=""
+              alt="联系电话"
             />
             <span>0512-680541</span>
             <span class="cart-count" v-if="cartTotalCount > 0 && false">{{
@@ -106,9 +109,9 @@
     </div>
 
     <!-- 分类导航 -->
-    <div class="category-nav" v-if="false">
+    <div class="category-nav" v-if="categories.length > 0">
       <div class="container">
-        <ul class="nav-list">
+        <ul class="nav-list" v-if="false">
           <li class="nav-item">
             <router-link
               to="/"
@@ -123,7 +126,6 @@
             class="nav-item"
           >
             <router-link
-              to="/category/:id"
               :to="`/category/${category.id}`"
               class="nav-link"
               :class="{ active: $route.params.id == category.id }"
@@ -155,13 +157,13 @@ export default {
       "getUserInfo",
     ]),
     categories() {
-      return this.getCategories;
+      return this.getCategories || []; // 确保返回数组，避免undefined
     },
     cartTotalCount() {
-      return this.getCartTotalCount;
+      return this.getCartTotalCount || 0; // 确保返回数字
     },
     isLogin() {
-      return this.$store.getters.isUserLogin;
+      return this.isUserLogin; // 直接使用mapGetters获取的属性
     },
     userInfo() {
       return this.getUserInfo || {};
@@ -173,7 +175,9 @@ export default {
   methods: {
     ...mapActions(["fetchCategories", "logout"]),
     handleSearch() {
-      this.$store.commit("setSearchText", this.searchText); // 保存到 Vuex
+      if (!this.searchText.trim()) return; // 避免空搜索
+
+      this.$store.commit("setSearchText", this.searchText);
 
       // 判断当前是否在搜索结果页
       const isSearchPage =
@@ -181,8 +185,8 @@ export default {
         this.$route.query.type === "search";
 
       if (isSearchPage) {
-        // 如果在搜索页，不跳转只触发重新搜索（假设通过事件或状态更新触发）
+        // 如果在搜索页，触发父组件更新或重新获取数据
-        this.$emit("search", this.searchText); // 可根据实际情况调整触发方式
+        this.$emit("search", this.searchText);
       } else {
         // 不在搜索页则跳转
         this.$router.push({
@@ -198,11 +202,18 @@ export default {
         type: "warning",
       })
         .then(() => {
-          this.logout();
+          this.logout()
-          this.$message.success("退出登录成功");
+            .then(() => {
+              // 假设logout是异步操作
+              this.$message.success("退出登录成功");
+              this.$router.push("/Login"); // 退出后跳转到登录页
+            })
+            .catch((err) => {
+              this.$message.error("退出失败：" + (err.message || "未知错误"));
+            });
         })
         .catch(() => {
-          // 取消退出
+          // 取消退出，不做操作
         });
     },
   },
@@ -228,6 +239,7 @@ export default {
       p {
         font-size: 14px;
         color: #666;
+        margin: 0; // 移除默认margin
 
         .highlight {
           color: #ff4400;
@@ -248,21 +260,34 @@ export default {
           border-radius: 50%;
           margin-right: 5px;
           vertical-align: middle;
+          object-fit: cover; // 确保图片正确显示
         }
 
         .separator {
           color: #ccc;
         }
 
-        a {
+        a,
+        .logout-btn {
           color: #666;
           transition: color 0.2s;
-          margin-left: 10px;
+          cursor: pointer; // 为退出按钮添加指针样式
+          text-decoration: none; // 移除链接下划线
 
           &:hover {
             color: #6a8a27;
           }
         }
+
+        .user-link {
+          display: flex;
+          align-items: center;
+        }
+
+        .cart-link {
+          display: inline-flex;
+          align-items: center;
+        }
       }
     }
   }
@@ -285,11 +310,9 @@ export default {
       a {
         display: block;
 
-        h1 {
+        .logo-img {
-          font-size: 28px;
+          height: 40px; // 设置logo高度，避免过大
-          color: #409eff;
+          object-fit: contain;
-          margin: 0;
-          font-weight: 700;
         }
       }
     }
@@ -298,7 +321,7 @@ export default {
       flex: 0 0 500px;
 
       @media (max-width: 992px) {
-        flex: 0 0 500px;
+        flex: 0 0 400px; // 响应式调整
       }
 
       @media (max-width: 768px) {
@@ -308,20 +331,34 @@ export default {
       .search-input {
         width: 100%;
         border: 1px solid #6a8a27;
+
+        ::v-deep .el-input__inner {
+          border-right: none; // 修复搜索框和按钮边框重叠
+        }
+
+        ::v-deep .el-input-group__append {
+          background-color: #6a8a27;
+          border-color: #6a8a27;
+          color: white;
+        }
       }
 
       .hot-tags {
         margin-top: 8px;
         font-size: 12px;
         color: #999;
+        display: flex;
+        align-items: center;
 
         span {
           margin-right: 5px;
         }
 
-        a {
+        .hot-tag {
           margin: 0 5px;
           color: #666;
+          cursor: pointer;
+          transition: color 0.2s;
 
           &:hover {
             color: #409eff;
@@ -331,20 +368,21 @@ export default {
       }
     }
 
-    .cart-entry {
+    .phone-entry {
-      .cart-link {
+      a {
         display: flex;
         align-items: center;
         color: #333;
         font-size: 16px;
+        text-decoration: none;
 
-        span {
+        img {
-          margin-left: 10px;
+          width: 24px;
+          height: 24px;
         }
 
-        .cart-icon {
+        span {
-          font-size: 20px;
+          margin-left: 10px;
-          margin-right: 5px;
         }
 
         .cart-count {
@@ -380,6 +418,7 @@ export default {
       @media (max-width: 992px) {
         overflow-x: auto;
         white-space: nowrap;
+        -webkit-overflow-scrolling: touch; // 优化移动端滚动
       }
 
       .nav-item {
@@ -391,6 +430,7 @@ export default {
           color: #fff;
           font-size: 16px;
           transition: background-color 0.2s;
+          text-decoration: none;
 
           &:hover,
           &.active {
@@ -401,4 +441,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/layout/HomeLayout.vue

@@ -20,7 +20,7 @@
 
     <!-- 右侧用户信息栏 -->
     <div class="right-info">
-      <div class="avatar-container">
+      <div class="avatar-container" v-if="isLogin">
         <img
           :src="$store.getters.getUserInfo.avatar"
           alt="用户头像"
@@ -39,7 +39,7 @@
         <el-button type="primary" size="mini">客服</el-button>
       </div>
 
-      <div class="func-icons">
+      <div class="func-icons" v-if="isLogin">
         <div class="icon-item">
           <i class="icon el-icon-user"></i>
           <span>个人中心</span>