feat: 修改UI问题

layouts/module/header/HeaderCart.vue

@@ -170,7 +170,7 @@ export default {
   height: 42px;
   line-height: 42px;
   color: #999999;
-  border-radius: 8px 8px 8px 8px;
+  border-radius: 4px;
   border: 1px solid #eeeeee;
   cursor: pointer;
   .wrap-right-cart__tip {
@@ -181,16 +181,17 @@ export default {
     border-radius: 50%;
     color: #ffffff;
     margin-left: 4px;
+    padding-top: 2px;
     &--more {
       width: unset;
-      padding: 0 4px;
+      padding: 2px 5px 0 4px;
       border-radius: 7px;
     }
   }
   img {
     width: 16px;
     height: 16px;
-    margin: 0 4px 0 10px;
+    margin-right: 10px;
   }
 }
 .header-cart-popover {

layouts/module/header/HeaderCategory.vue

@@ -29,7 +29,7 @@
               'menu-left__item--light': item.id === currentCategroyId,
             }"
           >
-            <img />
+            <img :src="item.icon" />
             <span>{{ item.name }}</span>
           </div>
         </div>
@@ -198,6 +198,7 @@ export default {
         box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
         border: 1px solid #eeeeee;
         background: #ffffff;
+        border-radius: 0 4px 4px 0;
         .category-menu-right__wrap {
           height: 36px;
           margin-top: 23px;

layouts/module/header/HeaderInfoBar.vue

@@ -20,10 +20,10 @@
               <img class="content-login-info__logo" :src="menuIcon" />
             </div>
             <el-dropdown-menu slot="dropdown" class="header-info-bar__dropdown">
-              <div class="menu-item__wrap flex flex-middle">
+              <!-- <div class="menu-item__wrap flex flex-middle">
                 <img class="menu-item-wrap__avatar" :src="userInfo.avatar" />
                 <span>{{ userInfo.nickname }}</span>
-              </div>
+              </div> -->
               <div class="menu-item__line"></div>
               <el-dropdown-item
                 class="flex flex-between flex-middle"
@@ -47,11 +47,20 @@
         <template>
           <div v-if="!menuVisible" class="header-wrap-content--line"></div>
           <div
-            class="header-wrap-content__common flex flex-middle"
+            class="header-wrap-content__common hover-text flex flex-middle"
             @click="onJumpPersonalPage('message')"
+            @mouseenter="messageHover = true"
+            @mouseleave="messageHover = false"
           >
-            <img src="~/assets/img/layout/icon-message.png" />
+            <img
-            <span class="hover-text">消息</span>
+              v-show="messageHover"
+              src="~/assets/img/layout/icon-message-light.png"
+            />
+            <img
+              v-show="!messageHover"
+              src="~/assets/img/layout/icon-message.png"
+            />
+            <span>消息</span>
             <div
               v-if="messageCount > 0"
               class="wrap-content-message__tip flex flex-center flex-middle"
@@ -63,11 +72,17 @@
         </template>
         <div class="header-wrap-content--line"></div>
         <div
-          class="header-wrap-content__common flex flex-middle"
+          class="header-wrap-content__common hover-text flex flex-middle"
           @click="onJumpPersonalPage('order/list')"
+          @mouseenter="orderHover = true"
+          @mouseleave="orderHover = false"
         >
-          <img src="~/assets/img/layout/icon-order.png" />
+          <img
-          <span class="hover-text">我的订单</span>
+            v-show="orderHover"
+            src="~/assets/img/layout/icon-order-light.png"
+          />
+          <img v-show="!orderHover" src="~/assets/img/layout/icon-order.png" />
+          <span>我的订单</span>
         </div>
         <div class="header-wrap-content--line"></div>
         <!-- 下载app -->
@@ -76,13 +91,24 @@
           placement="bottom"
           width="230"
           trigger="hover"
+          @show="phoneHover = true"
+          @hide="phoneHover = false"
         >
           <div
             slot="reference"
             class="header-wrap-content__common flex flex-middle"
           >
-            <img src="~/assets/img/layout/icon-phone.png" />
+            <img
-            <span class="hover-text">下载app</span>
+              v-show="phoneHover"
+              src="~/assets/img/layout/icon-phone-light.png"
+            />
+            <img
+              v-show="!phoneHover"
+              src="~/assets/img/layout/icon-phone.png"
+            />
+            <span :class="{ 'wrap-content-common--light': phoneHover }"
+              >下载app</span
+            >
           </div>
           <div class="info-bar-popover__qrcode">
             <img src="~/assets/img/common/app-qrcode.png" />
@@ -106,6 +132,9 @@ export default {
   data() {
     return {
       menuVisible: false,
+      orderHover: false,
+      phoneHover: false,
+      messageHover: false,
       menuList: [
         {
           label: "个人中心",
@@ -269,6 +298,9 @@ export default {
       .header-wrap-content__common {
         cursor: pointer;
         padding: 0 18px;
+        .wrap-content-common--light {
+          color: #ff875b;
+        }
         img {
           width: 14px;
           height: 14px;

layouts/module/header/index.vue

@@ -8,10 +8,9 @@
       >
         <div class="sticky-bar-header__wrap flex flex-middle flex-between">
           <div class="flex flex-middle">
-            <img
+            <div class="bar-header-wrap__logo" @click="onOpenHomePage">
-              class="bar-header-wrap__logo"
+              <img src="~/assets/img/layout/logo-sticky.png" />
-              src="~/assets/img/layout/logo-sticky.png"
+            </div>
-            />
             <el-menu
               :default-active="tabPath"
               mode="horizontal"
@@ -62,7 +61,10 @@
       <HeaderInfoBar />
       <div class="default-bar-header">
         <div class="bar-header-box">
-          <div class="bar-header-box__wrap flex flex-between flex-middle">
+          <div
+            class="bar-header-box__wrap flex flex-between flex-middle"
+            @click="onOpenHomePage"
+          >
             <img
               class="header-box-wrap__logo"
               src="~/assets/img/layout/logo.png"
@@ -74,14 +76,13 @@
                     v-model="searchContent"
                     clearable
                     placeholder="请输入商品名称"
-                    @keyup.enter.native="onSearch"
+                    @keyup.enter="onSearch"
                   >
                   </el-input>
                 </div>
                 <div
                   slot="suffix"
                   class="search-icon flex flex-center flex-middle"
-                  @keyup.enter.native="onSearch"
                   @click="onSearch"
                 >
                   <img src="~/assets/img/layout/icon-search.png" />
@@ -192,6 +193,9 @@ export default {
     onOpenCartPage() {
       window.open(`${location.origin}/cart`);
     },
+    onOpenHomePage() {
+      this.$router.push("/");
+    },
   },
 };
 </script>
@@ -220,6 +224,11 @@ export default {
       width: 164px;
       height: 28px;
       margin-right: 50px;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
     .bar-header-wrap__icons {
       cursor: pointer;
@@ -229,7 +238,7 @@ export default {
       }
       .header-wrap-icons__shop {
         position: relative;
-        margin-left: 14px;
+        margin-left: 20px;
         .wrap-icons-shop__tip {
           position: absolute;
           left: 18px;
@@ -294,6 +303,7 @@ export default {
       font-size: 14px;
       margin-bottom: 38px;
       padding-right: 50px;
+      cursor: pointer;
       .header-box-wrap__logo {
         width: 244px;
         height: 100%;
@@ -304,6 +314,7 @@ export default {
           .search-input {
             width: 551px;
             z-index: 1;
+            border-radius: 4px;
             /deep/.el-input__inner:focus {
               border-color: #ff512b;
             }
@@ -312,7 +323,7 @@ export default {
             width: 77px;
             margin-left: -2px;
             background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
-            border-radius: 0px 8px 8px 0px;
+            border-radius: 0px 4px 4px 0px;
             z-index: 2;
             cursor: pointer;
             img {
@@ -334,6 +345,9 @@ export default {
         font-size: 16px;
         color: #666666;
         cursor: pointer;
+        &:hover {
+          color: #ff875b;
+        }
       }
     }
   }

nuxt.config.js

@@ -19,7 +19,7 @@ export default {
 			{ name: 'format-detection', content: 'telephone=no' }
 		],
 		link: [
-			{ rel: 'icon', type: 'image/x-icon', href: '/logo.png' }
+			{ rel: 'icon', type: 'image/x-icon', href: '/logo.ico' }
 		]
 	},
 	router: {

pages/index/module/Pick.vue

@@ -2,12 +2,8 @@
   <div class="home-pick flex flex-between">
     <!-- 甄选推荐 -->
     <div v-if="showRecommend" class="home-pick-recommend">
-      <div
+      <div class="home-pick--label flex flex-middle">
-        @click="onJumpGoodsList('recommend')"
-        class="home-pick--label flex flex-middle"
-      >
         <strong>甄选推荐</strong>
-        <img src="~/assets/img/common/icon-jump.png" />
       </div>
       <div class="home-pick-recommend__products flex flex-middle flex-between">
         <!-- 左侧商品一 -->
@@ -74,12 +70,8 @@
     </div>
     <!-- 新品上架 -->
     <div v-if="showNew" class="home-pick-new">
-      <div
+      <div class="home-pick--label flex flex-middle">
-        @click="onJumpGoodsList('new')"
-        class="home-pick--label flex flex-middle"
-      >
         <strong>新品上架</strong>
-        <img src="~/assets/img/common/icon-jump.png" />
       </div>
       <div class="home-pick-new__products flex">
         <!-- 左侧商品 -->
@@ -175,9 +167,6 @@ export default {
     onJumpGoodsDetail(id) {
       window.open(`${location.origin}/goods/detail/${id}`);
     },
-    onJumpGoodsList(type) {
-      window.open(`${location.origin}/goods/list?id=${type}`);
-    },
   },
 };
 </script>
@@ -188,8 +177,6 @@ export default {
   &--label {
     font-size: 24px;
     margin-bottom: 16px;
-    width: 150px;
-    cursor: pointer;
     img {
       width: 16px;
       height: 16px;
@@ -228,9 +215,9 @@ export default {
     height: 340px;
     padding: 16px 20px;
     background: #ffffff;
-    border-radius: 2px;
+    border-radius: 4px;
     &--tag-wrap {
-      margin-bottom: 16px;
+      margin-bottom: 8px;
       .tag-wrap__item {
         width: 40px;
         height: 20px;
@@ -243,18 +230,19 @@ export default {
         }
         &--second_kill {
           color: #3083ff;
-          background: #3083ff;
+          background: rgba(48, 131, 255, 0.1);
         }
         &--recommended {
           color: #ff875b;
-          background: #ff875b;
+          background: rgba(255, 135, 91, 0.1);
         }
       }
     }
     &--title {
       display: block;
-      font-size: 18px;
+      width: 140px;
-      margin-bottom: 8px;
+      font-size: 16px;
+      margin-bottom: 6px;
       @include ellipsis;
     }
     &--subtitle {
@@ -291,7 +279,7 @@ export default {
           height: 122px;
           position: relative;
           background: #f8f7f8;
-          padding: 14px 0 14px 20px;
+          padding: 10px 0 10px 20px;
         }
         .recommend-products-right__cover {
           position: absolute;
@@ -313,6 +301,7 @@ export default {
     height: 340px;
     padding: 14px 20px 16px 20px;
     background: #ffffff;
+    border-radius: 4px;
     &__products {
       cursor: pointer;
       .pick-new-products__left {

pages/index/module/Seckill.vue

@@ -189,6 +189,7 @@ export default {
     text-align: center;
     color: #ffffff;
     background-size: 100% 100%;
+    border-radius: 4px 0 0 4px;
     .home-sckill-title {
       display: block;
       font-size: 28px;
@@ -229,19 +230,27 @@ export default {
   .home-sckill-carousel {
     /deep/.el-carousel {
       width: 1010px;
+      border-radius: 4px;
       .el-carousel__container {
         padding: 0 10px;
         background: #ffffff;
         .el-carousel__arrow {
+          border-radius: 45%;
           i {
             font-size: 14px;
             font-weight: bold;
           }
           &--left {
             left: -11px;
+            i {
+              margin-left: 5px;
+            }
           }
           &--right {
             right: -11px;
+            i {
+              margin-right: 5px;
+            }
           }
         }
       }

pages/index/module/TabbarFixed.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="home-tabbar-fixed flex">
+  <div
+    v-if="tabBarVisible"
+    class="home-tabbar-fixed flex"
+    :class="{ 'home-tabbar-fixed--change': appHover }"
+  >
     <div v-show="appHover" class="home-tabbar-fixed__qrcode">
       <img src="~/assets/img/common/app-qrcode.png" />
       <p>扫一扫上方二维码 下载APP</p>
@@ -23,11 +27,8 @@
         @click="onConcatCustomer"
         class="tabbar-fixed-box__common flex flex-middle"
       >
-        <span v-show="customerHover">联系客服</span>
+        <span v-show="customerHover">消息通知</span>
-        <img
+        <img v-show="!customerHover" src="~/assets/img/home/icon-message.png" />
-          v-show="!customerHover"
-          src="~/assets/img/home/icon-customer.png"
-        />
       </div>
       <div v-show="showToTop">
         <div class="tabbar-fixed-box__line"></div>
@@ -61,6 +62,7 @@ export default {
       appHover: false,
       customerHover: false,
       totopHover: false,
+      tabBarVisible: false,
     };
   },
   computed: {
@@ -68,7 +70,16 @@ export default {
       return this.scrollTop > 400;
     },
   },
+  mounted() {
+    this.getTabBarVisible();
+  },
   methods: {
+    getTabBarVisible() {
+      const clientWidth = document.body.clientWidth;
+      if (clientWidth >= 1200) {
+        this.tabBarVisible = true;
+      }
+    },
     onConcatCustomer() {
       if (!this.$isLoginValidate()) {
         return;
@@ -83,9 +94,13 @@ export default {
 <style lang="scss" scoped>
 .home-tabbar-fixed {
   position: fixed;
-  right: 270px;
+  z-index: 99;
+  left: 50%;
   top: 568px;
-  z-index: 10;
+  margin-left: 630px;
+  &--change {
+    margin-left: 390px;
+  }
   .home-tabbar-fixed__qrcode {
     width: 230px;
     height: 260px;
@@ -93,7 +108,7 @@ export default {
     box-shadow: 0px 4px 30px 1px rgba(0, 0, 0, 0.1);
     font-size: 14px;
     color: #666666;
-    padding: 22px;
+    padding: 22px 20px;
     margin-right: 10px;
     img {
       width: 186px;

pages/seckill/index.vue

@@ -282,7 +282,7 @@ export default {
 <style lang="scss" scoped>
 .seckill {
   background: #f8f8f8;
-  padding-bottom: 42px;
+  padding-bottom: 60px;
   .seckill-header-sticky {
     position: fixed;
     left: 50%;
@@ -342,6 +342,9 @@ export default {
       &:not(:nth-child(4n)) {
         margin-right: calc(4% / 3);
       }
+      &:hover {
+        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
+      }
       .seckill-products-wrap__cover {
         width: 100%;
         height: 288px;
@@ -390,7 +393,6 @@ export default {
     }
   }
   .seckill-pagination {
-    margin-top: 60px;
     .btn-confirm {
       width: 81px;
       height: 32px;

plugins/router.js

@@ -2,6 +2,7 @@ export default ({ app }) => {
   app.router.beforeEach((to, from, next) => {
     const { token, userInfo } = app.store.state;
     if (token) {
+      // 获取用户信息
       if (Object.keys(userInfo).length === 0) {
         app.store.dispatch("getUserInfo");
       }