refactor: 重构组件逻辑与样式优化

- 在 App.vue 中重构站点信息的获取与应用逻辑，提升代码可读性与维护性。
- 更新 Search.vue 组件，优化搜索框的样式与结构，增强用户体验。
- 在 element.scss 中注释掉不再使用的样式，并新增确认收货按钮的样式。
- 改进多个页面的布局与样式，确保响应式设计的一致性与美观性。
- 更新订单相关组件的按钮样式，提升视觉一致性与可用性。

buyer/src/components/header/hoverSearch.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="scroll-show">
-    <div class="content clearfix">
-      <cateNav class="cate" :hover="true" :showNavBar="false"
-               useClass="fixed-show"></cateNav>
+    <div class="content">
+      <cateNav
+        class="cate"
+        :hover="true"
+        :showNavBar="false"
+        useClass="fixed-show"
+      />
       <Search
         class="search-con"
         :hover="true"
@@ -10,97 +14,113 @@
         :showLogo="false"
         :showTag="false"
         useClass="fixed-show"
-      ></Search>
-      <div class="flex flex-a-c cart">
+      />
+      <div class="cart">
         <span @mouseenter="getCartList">
           <el-icon class="cart-icon" :size="20" @click="goCartList"><ShoppingCart /></el-icon>
         </span>
         <i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
       </div>
     </div>
-
   </div>
 </template>
 <script>
-import { cartCount } from "@/api/cart.js";
-import storage from "@/plugins/storage.js";
-import { ShoppingCart } from "@element-plus/icons-vue";
+import Search from '@/components/Search.vue'
+import cateNav from '@/components/nav/CateNav.vue'
+import { cartCount } from '@/api/cart.js'
+import storage from '@/plugins/storage.js'
+import { ShoppingCart } from '@element-plus/icons-vue'
+
 export default {
-  components: { ShoppingCart },
+  components: { ShoppingCart, Search, cateNav },
   data() {
     return {
-      userInfo: {}, // 用户信息
-    };
+      userInfo: {}
+    }
   },
   computed: {
     cartNum() {
-      // 购物车商品数量
-      return this.$store.state.cartNum;
-    },
+      return this.$store.state.cartNum
+    }
   },
   methods: {
     goCartList() {
-      // 跳转购物车页面
-      let routerUrl = this.$router.resolve({
-        path: "/cart",
-      });
-      window.open(routerUrl.href, "_blank");
+      const routerUrl = this.$router.resolve({ path: '/cart' })
+      window.open(routerUrl.href, '_blank')
     },
     getCartList() {
-      // 获取购物车列表
-      if (storage.getItem("userInfo")) {
+      if (storage.getItem('userInfo')) {
         cartCount().then((res) => {
-          this.$store.commit("SET_CARTNUM", res.result);
-          this.Cookies.setItem("cartNum", res.result);
-        });
+          this.$store.commit('SET_CARTNUM', res.result)
+          this.Cookies.setItem('cartNum', res.result)
+        })
       }
-    },
-  },
-  mounted() {
-
-    if (storage.getItem("userInfo")) {
-      this.userInfo = JSON.parse(storage.getItem("userInfo"));
     }
   },
-};
+  mounted() {
+    if (storage.getItem('userInfo')) {
+      this.userInfo = JSON.parse(storage.getItem('userInfo'))
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
+$side-col-width: 263.2px;
+$col-gap: 10px;
+$cart-col-width: 40px;
+
+.scroll-show {
+  height: 60px;
+  overflow: hidden;
+}
 
 .content {
   width: 1200px;
-  height: 40px;
-  margin: 0 auto;
-  position: relative;
-}
-.cate {
-  float: left;
-  width: 200px !important;
-}
-.search-con {
-  float: left;
-  width: 800px;
-  overflow: hidden;
-  margin-top: -27px;
-}
-.cart{
   height: 60px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: $side-col-width 1fr $cart-col-width;
+  column-gap: $col-gap;
+  align-items: center;
 }
-.cart-icon {
-  width: 30px;
-  float: left;
-  font-size: 25px;
 
-  color: $theme_color;
-  z-index: 1;
-  position: relative;
-  &:hover {
-    cursor: pointer;
+.cate {
+  min-width: 0;
+
+  :deep(.cate-nav) {
+    width: 100%;
+    margin: 0;
+  }
+
+  :deep(.nav-con) {
+    height: 60px;
   }
 }
+
+.search-con {
+  min-width: 0;
+  width: 100%;
+}
+
+.cart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  position: relative;
+}
+
+.cart-icon {
+  font-size: 25px;
+  color: $theme_color;
+  cursor: pointer;
+}
+
 .cart-badge {
   position: absolute;
   font-style: normal;
-  right: 165px;
+  top: 12px;
+  right: -2px;
   display: block;
   background-color: $theme_color;
   color: #fff;
@@ -111,6 +131,5 @@ export default {
   line-height: 17px;
   text-align: center;
   z-index: 5;
-  top: 10px;
 }
 </style>