feat:修改首页

layouts/module/header/HeaderCart.vue

@@ -13,7 +13,6 @@
       @click="onJumCartPage"
     >
       <img src="~/assets/img/layout/icon-shop.png" />
-      <span>购物车</span>
       <div
         v-if="cartCount > 0"
         class="wrap-right-cart__tip flex flex-middle flex-center"
@@ -163,16 +162,8 @@ export default {
 </style>
 <style lang="scss" scoped>
 .header-cart-popover__refrence {
-  padding: 0 18px;
-  height: 42px;
-  line-height: 42px;
-  color: #999999;
-  border-radius: 4px;
-  border: 1px solid #eeeeee;
   cursor: pointer;
-  &:hover {
+  position: relative;
-    background: #eeeeee;
-  }
   .wrap-right-cart__tip {
     width: 16px;
     height: 16px;
@@ -182,9 +173,12 @@ export default {
     color: #ffffff;
     margin-left: 4px;
     &--more {
-      width: unset;
+      // width: unset;
-      padding: 1px 5px 0 4px;
+      top: -8px;
+      right: 0px;
+      padding: 5;
       border-radius: 7px;
+      position: absolute;
     }
   }
   img {

layouts/module/header/HeaderCategory.vue

@@ -7,18 +7,18 @@
       @mouseenter="handleCategoryChange(true)"
       @mouseleave="handleCategoryChange(false)"
     >
-      <div class="tab-category__label flex flex-middle">
+      <!-- <div class="tab-category__label flex flex-middle">
         <img src="~/assets/img/layout/icon-category.png" />
         <span>热门分类</span>
-      </div>
+      </div> -->
       <div
         v-show="isCategroyOpen || categroyVisible"
-        class="tab-category__menu flex"
+        class="tab-category__menu"
         @mouseenter="handleCategoryTwoChange(true)"
         @mouseleave="handleCategoryTwoChange(false)"
       >
         <!-- 左侧一级分类 -->
-        <div class="tab-category-menu__left">
+        <div class="tab-category-menu__left flex flex-between flex-middle">
           <div
             v-for="item in categroyData"
             :key="item.id"
@@ -29,31 +29,27 @@
               'menu-left__item--light': item.id === currentCategroyId,
             }"
           >
-            <img :src="item.icon" />
             <span>{{ item.name }}</span>
-          </div>
+            <div class="menu-left__item--bottom"></div>
-        </div>
             <!-- 右侧二级分类 -->
+            <div class="tab-category-menu__right flex-1 flex-wrap flex-between">
               <div
-          v-show="categroyTwoVisible"
+                v-for="itemList in getList(item.id)"
-          class="tab-category-menu__right flex-1"
+                :key="itemList.id"
+                class="menu-right-wrap__item"
+                @click="onCategoryClick(itemList.id, CATEGROY_LEVEL.TWO)"
               >
-          <div
+                <img :src="itemList.picture" alt="商品分类" />
+                {{ itemList.name }}
+              </div>
+              <!-- <div
                 v-for="item in list"
                 :key="item.id"
                 @mouseenter="handleCategoryHover(item.id)"
                 class="category-menu-right__wrap"
-            :class="{
+                v-show="item.id === currentCategroyId"
-              'category-menu-right__wrap--light': item.id === currentCategroyId,
+              ></div> -->
-            }"
+            </div>
-          >
-            <span
-              v-for="itemList in item.list"
-              :key="itemList.id"
-              class="menu-right-wrap__item"
-              @click="onCategoryClick(itemList.id, CATEGROY_LEVEL.TWO)"
-              >{{ itemList.name }}</span
-            >
           </div>
         </div>
       </div>
@@ -101,6 +97,11 @@ export default {
     },
   },
   methods: {
+    getList(id) {
+      let list = this.list.filter((item) => item.id == id);
+      console.log(`list[0]?.list`, list[0]?.list);
+      return list[0]?.list;
+    },
     // 获取热门分类信息
     async getCategroyData() {
       this.list = await Promise.all(
@@ -146,9 +147,11 @@ export default {
 <style lang="scss" scoped>
 .header-category {
   height: 100%;
+  width: 700px;
   .header-box-tab__category {
     position: relative;
     height: 100%;
+    width: 700px;
     .tab-category__label {
       width: 190px;
       height: 100%;
@@ -165,60 +168,67 @@ export default {
       }
     }
     .tab-category__menu {
-      position: absolute;
+      // position: absolute;
-      top: 38px;
+      // top: 38px;
-      left: 0;
+      // left: 0;
-      height: 360px;
+      // height: 360px;
-      font-size: 14px;
+      // font-size: 14px;
-      color: #333333;
+      // color: #333333;
+      width: 100%;
+      height: 100%;
+      padding: 0 55px;
       .tab-category-menu__left {
-        width: 190px;
+        width: 100%;
-        padding: 30px 0 35px 0;
+        height: 100%;
-        background: #ffffff;
         .menu-left__item {
-          height: 36px;
+          height: 100%;
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+          position: relative;
           cursor: pointer;
-          padding: 0 24px 0 41px;
+
-          margin-top: 15px;
+          .menu-left__item--bottom {
-          &:first-child {
+            width: 68px;
-            margin-top: 0;
+            height: 3px;
+            background: #ff6a19;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+            display: none;
           }
           &:hover,
           &--light {
-            color: #ff875b;
+            color: #ff6a19;
+            .tab-category-menu__right,
+            .menu-left__item--bottom {
+              display: flex;
             }
-          img {
-            width: 20px;
-            height: 20px;
-            margin-right: 16px;
           }
         }
       }
       .tab-category-menu__right {
-        padding: 30px 26px 35px 26px;
+        position: absolute;
-        box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
+        top: 90px;
-        border: 1px solid #eeeeee;
+        left: -54px;
+        width: 350px;
+        padding: 25px 25px 9px;
         background: #ffffff;
-        border-radius: 0 4px 4px 0;
+        box-shadow: 0px 0px 40px 1px rgba(0, 0, 0, 0.1);
-        .category-menu-right__wrap {
+        border-radius: 4px;
-          height: 36px;
+        display: none;
-          margin-top: 15px;
+
-          line-height: 36px;
-          padding: 0 16px;
-          font-size: 12px;
-          color: #999999;
-          white-space: nowrap;
-          &:first-child {
-            margin-top: 0;
-          }
-          &:hover,
-          &--light {
-            background: #f8f8f8;
-          }
         .menu-right-wrap__item {
-            color: #999999;
+          width: 140px;
-            margin-right: 20px;
+          height: 40px;
           cursor: pointer;
+          color: #333;
+          margin-bottom: 16px;
+          img {
+            height: 40px;
+            width: 40px;
+          }
           &:hover {
             color: #ff875b;
           }
@@ -226,6 +236,5 @@ export default {
       }
     }
   }
-  }
 }
 </style>

layouts/module/header/HeaderInfoBar.vue

@@ -251,9 +251,9 @@ export default {
   }
 }
 .info-bar-header {
-  height: 30px;
+  height: 40px;
-  color: #999999;
+  color: #969696;
-  background: #f1f1f1;
+  background: #333333;
   font-size: 12px;
   .info-bar-header-wrap {
     height: 100%;
@@ -264,7 +264,7 @@ export default {
           padding: 0 18px;
           .content-login-text--light {
             margin-left: 6px;
-            color: #ff875b;
+            color: #969696;
             cursor: pointer;
           }
         }

layouts/module/header/index.vue

@@ -11,47 +11,27 @@
             <div class="bar-header-wrap__logo" @click="onOpenHomePage">
               <img src="~/assets/img/layout/logo-sticky.png" />
             </div>
-            <el-menu
+            <HeaderCategory />
-              :default-active="tabPath"
+            <div class="header-box-wrap__right flex flex-middle">
-              mode="horizontal"
+              <div class="box-wrap-right__search flex">
-              @select="onTabSelect"
+                <div class="search-input">
-            >
+                  <el-input
-              <el-menu-item
+                    ref="searchInput"
-                v-for="item in tabList"
+                    v-model="searchContent"
-                :key="item.value"
+                    clearable
-                :index="item.value"
+                    placeholder="请输入商品名称"
-                >{{ item.label }}</el-menu-item
+                    @keyup.enter.native="onSearch"
                   >
-            </el-menu>
-          </div>
-          <div class="bar-header-wrap__icons flex flex-middle">
                     <img
-              src="~/assets/img/layout/icon-search-sticky.png"
+                      slot="suffix"
-              @click="onEnterSearch"
+                      class="search-icon"
+                      src="~/assets/img/layout/icon-search.png"
                     />
-            <div class="header-wrap-icons__shop" @click="onOpenCartPage">
+                  </el-input>
-              <img src="~/assets/img/layout/icon-shop-sticky.png" />
-              <div
-                v-if="cartCount > 0"
-                :class="{ 'wrap-icons-shop__tip--more': cartCount > 10 }"
-                class="wrap-icons-shop__tip flex flex-middle flex-center"
-              >
-                {{ cartCount }}
-              </div>
                 </div>
-            <div
-              v-if="token"
-              class="header-wrap-icons__login"
-              @click="$router.push('/account/home')"
-            >
-              <img :src="userInfo.avatar" />
               </div>
-            <div
+              <!-- 购物车 -->
-              v-else
+              <HeaderCart />
-              class="header-wrap-icons__unlogin"
-              @click="onLoginClick"
-            >
-              登录
             </div>
           </div>
         </div>
@@ -61,10 +41,11 @@
       <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-middle">
             <div class="header-box-wrap__logo" @click="onOpenHomePage">
               <img src="~/assets/img/layout/logo.png" />
             </div>
+            <HeaderCategory />
             <div class="header-box-wrap__right flex flex-middle">
               <div class="box-wrap-right__search flex">
                 <div class="search-input">
@@ -75,35 +56,18 @@
                     placeholder="请输入商品名称"
                     @keyup.enter.native="onSearch"
                   >
-                  </el-input>
+                    <img
-                </div>
-                <div
                       slot="suffix"
-                  class="search-icon flex flex-center flex-middle"
+                      class="search-icon"
-                  @click="onSearch"
+                      src="~/assets/img/layout/icon-search.png"
-                >
+                    />
-                  <img src="~/assets/img/layout/icon-search.png" />
+                  </el-input>
                 </div>
               </div>
               <!-- 购物车 -->
               <HeaderCart />
             </div>
           </div>
-          <div class="bar-header-box__tab flex flex-middle">
-            <HeaderCategory />
-            <div
-              v-for="item in tabList"
-              :key="item.value"
-              class="header-box-tab__common flex flex-center flex-middle"
-              :class="{
-                'header-box-tab__common--light':
-                  item.value === $nuxt.$route.fullPath,
-              }"
-              @click="onTabSelect(item.value)"
-            >
-              {{ item.label }}
-            </div>
-          </div>
         </div>
       </div>
       <div v-if="!hideBarLine" class="layout-header-line"></div>
@@ -224,7 +188,7 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  height: 50px;
+  height: 70px;
   z-index: 10;
   background: #ffffff;
   box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
@@ -240,10 +204,14 @@ export default {
   .sticky-bar-header__wrap {
     @include layout-box;
     height: 100%;
+    > div {
+      height: 100%;
+      width: 100%;
+    }
     .bar-header-wrap__logo {
-      width: 164px;
+      width: 160px;
-      height: 28px;
+      height: 40px;
-      margin-right: 50px;
+      margin-right: 20px;
       cursor: pointer;
       img {
         width: 100%;
@@ -311,47 +279,44 @@ export default {
     }
   }
 }
-.default-bar-header {
+.header-box-wrap__right {
-  padding-top: 32px;
+  margin-left: auto;
-  position: relative;
-  z-index: 3;
-  .bar-header-box {
-    @include layout-box;
-    background: #ffffff;
-    .bar-header-box__wrap {
-      height: 40px;
-      font-size: 14px;
-      margin-bottom: 38px;
-      padding-right: 50px;
-      cursor: pointer;
-      .header-box-wrap__logo {
-        width: 244px;
-        height: 100%;
-      }
-      .header-box-wrap__right {
   .box-wrap-right__search {
     margin-right: 23px;
     .search-input {
-            width: 551px;
+      width: 240px;
       z-index: 1;
       border-radius: 4px;
-            /deep/.el-input__inner:focus {
+
-              border-color: #ff512b;
+      /deep/.el-input__suffix{
-            }
+        display: flex;
+        align-items: center;
+        // margin-right: 16px;
       }
       .search-icon {
-            width: 77px;
+        width: 32px;
-            margin-left: -2px;
+        height: 16px;
-            background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
+        padding-right: 16px;
-            border-radius: 0px 4px 4px 0px;
+        // margin-right: 16px;
-            z-index: 2;
+        // margin-top: 12px;
-            cursor: pointer;
-            img {
-              width: 26px;
-              height: 26px;
       }
     }
   }
+}
+
+.default-bar-header {
+  position: relative;
+  z-index: 3;
+  .bar-header-box {
+    @include layout-box;
+    background: #ffffff;
+    .bar-header-box__wrap {
+      height: 90px;
+      font-size: 14px;
+      cursor: pointer;
+      .header-box-wrap__logo {
+        width: 198px;
+        height: 50px;
       }
     }
     .bar-header-box__tab {

pages/index/module/Banner.vue

@@ -53,6 +53,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .home-banner {
+  @include layout-box;
   /deep/.el-carousel {
     .el-carousel__container {
       i {
@@ -67,7 +68,7 @@ export default {
       display: none;
     }
     .el-carousel__arrow--left {
-      left: calc(50% - 380px) !important;
+      left: calc(50% - 550px) !important;
     }
     .el-carousel__arrow--right {
       right: calc(50% - 550px) !important;

pages/index/module/Seckill.vue

@@ -7,23 +7,31 @@
 -->
 
 <template>
-  <div class="home-sckill flex" @click="onJumpSeckill">
+  <main class="main">
-    <div class="home-sckill-bar" :style="{ backgroundImage: `url(${bkgUrl})` }">
+    <div class="home-sckill-bar flex flex-middle">
-      <strong class="home-sckill-title">限时秒杀</strong>
+      <img
+        class="home-sckill-title"
+        src="~/assets/img/sckill/title.png"
+        alt=""
+      />
       <div class="home-sckill-wrap">
         <div class="home-sckill-wrap__tip">
-          <strong>{{ data.activityTimeVO.timeName }}</strong>
+          {{ data.activityTimeVO.timeName }} {{ seckillText }}
-          <span>{{ seckillText }}</span>
+        </div>
       </div>
       <div class="home-sckill-wrap__countdown flex flex-middle flex-center">
         <div class="sckill-wrap-countdown__time">{{ countdown.hour }}</div>
         <span class="sckill-wrap-countdown--mark">:</span>
-          <div class="sckill-wrap-countdown__time">{{ countdown.minute }}</div>
+        <div class="sckill-wrap-countdown__time">
+          {{ countdown.minute }}
+        </div>
         <span class="sckill-wrap-countdown--mark">:</span>
-          <div class="sckill-wrap-countdown__time">{{ countdown.second }}</div>
+        <div class="sckill-wrap-countdown__time">
+          {{ countdown.second }}
         </div>
       </div>
     </div>
+    <div class="home-sckill flex" @click="onJumpSeckill">
       <div class="home-sckill-carousel">
         <el-carousel
           height="260px"
@@ -62,11 +70,12 @@
         </el-carousel>
       </div>
     </div>
+  </main>
 </template>
 <script>
 import _ from "lodash";
 
-const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
+const CAROUSEL_COUNT = 6; // 走马灯每页展示商品数
 
 export default {
   name: "HomeSeckill",
@@ -179,36 +188,25 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.home-sckill {
+.home-sckill-bar {
-  height: 260px;
+  width: 100%;
-  cursor: pointer;
+  padding-bottom: 28px;
-  .home-sckill-bar {
-    width: 190px;
-    height: 100%;
-    padding: 45px 0 28px 0;
-    text-align: center;
-    color: #ffffff;
-    background-size: 100% 100%;
-    border-radius: 4px 0 0 4px;
   .home-sckill-title {
-      display: block;
+    width: 110px;
-      font-size: 28px;
+    height: 26px;
-      margin-bottom: 90px;
+    margin-right: 20px;
   }
   .home-sckill-wrap {
-      margin-bottom: 10px;
     .home-sckill-wrap__tip {
-        font-size: 0;
-        strong {
       font-size: 18px;
-          margin-right: 4px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-        }
+      font-weight: 400;
-        span {
+      color: #999999;
-          font-size: 14px;
+      margin-right: 10px;
     }
   }
+
   .home-sckill-wrap__countdown {
-        margin-top: 10px;
     .sckill-wrap-countdown__time {
       width: 30px;
       height: 30px;
@@ -225,11 +223,13 @@ export default {
       margin: 0 8px;
     }
   }
-    }
+}
-  }
+.home-sckill {
+  height: 260px;
+  cursor: pointer;
   .home-sckill-carousel {
     /deep/.el-carousel {
-      width: 1010px;
+      width: 1200px;
       border-radius: 4px;
       .el-carousel__container {
         padding: 0 10px;