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 {
-    background: #eeeeee;
-  }
+  position: relative;
   .wrap-right-cart__tip {
     width: 16px;
     height: 16px;
@@ -182,9 +173,12 @@ export default {
     color: #ffffff;
     margin-left: 4px;
     &--more {
-      width: unset;
-      padding: 1px 5px 0 4px;
+      // width: unset;
+      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>
-        <!-- 右侧二级分类 -->
-        <div
-          v-show="categroyTwoVisible"
-          class="tab-category-menu__right flex-1"
-        >
-          <div
-            v-for="item in list"
-            :key="item.id"
-            @mouseenter="handleCategoryHover(item.id)"
-            class="category-menu-right__wrap"
-            :class="{
-              'category-menu-right__wrap--light': item.id === currentCategroyId,
-            }"
-          >
-            <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 class="menu-left__item--bottom"></div>
+            <!-- 右侧二级分类 -->
+            <div class="tab-category-menu__right flex-1 flex-wrap flex-between">
+              <div
+                v-for="itemList in getList(item.id)"
+                :key="itemList.id"
+                class="menu-right-wrap__item"
+                @click="onCategoryClick(itemList.id, CATEGROY_LEVEL.TWO)"
+              >
+                <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"
+                v-show="item.id === currentCategroyId"
+              ></div> -->
+            </div>
           </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,63 +168,69 @@ export default {
       }
     }
     .tab-category__menu {
-      position: absolute;
-      top: 38px;
-      left: 0;
-      height: 360px;
-      font-size: 14px;
-      color: #333333;
+      // position: absolute;
+      // top: 38px;
+      // left: 0;
+      // height: 360px;
+      // font-size: 14px;
+      // color: #333333;
+      width: 100%;
+      height: 100%;
+      padding: 0 55px;
       .tab-category-menu__left {
-        width: 190px;
-        padding: 30px 0 35px 0;
-        background: #ffffff;
+        width: 100%;
+        height: 100%;
         .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;
-          &:first-child {
-            margin-top: 0;
+
+          .menu-left__item--bottom {
+            width: 68px;
+            height: 3px;
+            background: #ff6a19;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+            display: none;
           }
           &:hover,
           &--light {
-            color: #ff875b;
-          }
-          img {
-            width: 20px;
-            height: 20px;
-            margin-right: 16px;
+            color: #ff6a19;
+            .tab-category-menu__right,
+            .menu-left__item--bottom {
+              display: flex;
+            }
           }
         }
       }
       .tab-category-menu__right {
-        padding: 30px 26px 35px 26px;
-        box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
-        border: 1px solid #eeeeee;
+        position: absolute;
+        top: 90px;
+        left: -54px;
+        width: 350px;
+        padding: 25px 25px 9px;
         background: #ffffff;
-        border-radius: 0 4px 4px 0;
-        .category-menu-right__wrap {
-          height: 36px;
-          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;
+        box-shadow: 0px 0px 40px 1px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        display: none;
+
+        .menu-right-wrap__item {
+          width: 140px;
+          height: 40px;
+          cursor: pointer;
+          color: #333;
+          margin-bottom: 16px;
+          img {
+            height: 40px;
+            width: 40px;
           }
-          .menu-right-wrap__item {
-            color: #999999;
-            margin-right: 20px;
-            cursor: pointer;
-            &:hover {
-              color: #ff875b;
-            }
+          &:hover {
+            color: #ff875b;
           }
         }
       }

layouts/module/header/HeaderInfoBar.vue

@@ -251,9 +251,9 @@ export default {
   }
 }
 .info-bar-header {
-  height: 30px;
-  color: #999999;
-  background: #f1f1f1;
+  height: 40px;
+  color: #969696;
+  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
-              :default-active="tabPath"
-              mode="horizontal"
-              @select="onTabSelect"
-            >
-              <el-menu-item
-                v-for="item in tabList"
-                :key="item.value"
-                :index="item.value"
-                >{{ item.label }}</el-menu-item
-              >
-            </el-menu>
-          </div>
-          <div class="bar-header-wrap__icons flex flex-middle">
-            <img
-              src="~/assets/img/layout/icon-search-sticky.png"
-              @click="onEnterSearch"
-            />
-            <div class="header-wrap-icons__shop" @click="onOpenCartPage">
-              <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 }}
+            <HeaderCategory />
+            <div class="header-box-wrap__right flex flex-middle">
+              <div class="box-wrap-right__search flex">
+                <div class="search-input">
+                  <el-input
+                    ref="searchInput"
+                    v-model="searchContent"
+                    clearable
+                    placeholder="请输入商品名称"
+                    @keyup.enter.native="onSearch"
+                  >
+                    <img
+                      slot="suffix"
+                      class="search-icon"
+                      src="~/assets/img/layout/icon-search.png"
+                    />
+                  </el-input>
+                </div>
               </div>
-            </div>
-            <div
-              v-if="token"
-              class="header-wrap-icons__login"
-              @click="$router.push('/account/home')"
-            >
-              <img :src="userInfo.avatar" />
-            </div>
-            <div
-              v-else
-              class="header-wrap-icons__unlogin"
-              @click="onLoginClick"
-            >
-              登录
+              <!-- 购物车 -->
+              <HeaderCart />
             </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"
                   >
+                    <img
+                      slot="suffix"
+                      class="search-icon"
+                      src="~/assets/img/layout/icon-search.png"
+                    />
                   </el-input>
                 </div>
-                <div
-                  slot="suffix"
-                  class="search-icon flex flex-center flex-middle"
-                  @click="onSearch"
-                >
-                  <img src="~/assets/img/layout/icon-search.png" />
-                </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;
-      height: 28px;
-      margin-right: 50px;
+      width: 160px;
+      height: 40px;
+      margin-right: 20px;
       cursor: pointer;
       img {
         width: 100%;
@@ -311,47 +279,44 @@ export default {
     }
   }
 }
+.header-box-wrap__right {
+  margin-left: auto;
+  .box-wrap-right__search {
+    margin-right: 23px;
+    .search-input {
+      width: 240px;
+      z-index: 1;
+      border-radius: 4px;
+
+      /deep/.el-input__suffix{
+        display: flex;
+        align-items: center;
+        // margin-right: 16px;
+      }
+      .search-icon {
+        width: 32px;
+        height: 16px;
+        padding-right: 16px;
+        // margin-right: 16px;
+        // margin-top: 12px;
+      }
+    }
+  }
+}
+
 .default-bar-header {
-  padding-top: 32px;
   position: relative;
   z-index: 3;
   .bar-header-box {
     @include layout-box;
     background: #ffffff;
     .bar-header-box__wrap {
-      height: 40px;
+      height: 90px;
       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;
-            z-index: 1;
-            border-radius: 4px;
-            /deep/.el-input__inner:focus {
-              border-color: #ff512b;
-            }
-          }
-          .search-icon {
-            width: 77px;
-            margin-left: -2px;
-            background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
-            border-radius: 0px 4px 4px 0px;
-            z-index: 2;
-            cursor: pointer;
-            img {
-              width: 26px;
-              height: 26px;
-            }
-          }
-        }
+        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,66 +7,75 @@
 -->
 
 <template>
-  <div class="home-sckill flex" @click="onJumpSeckill">
-    <div class="home-sckill-bar" :style="{ backgroundImage: `url(${bkgUrl})` }">
-      <strong class="home-sckill-title">限时秒杀</strong>
+  <main class="main">
+    <div class="home-sckill-bar flex flex-middle">
+      <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>
-          <span>{{ seckillText }}</span>
+          {{ data.activityTimeVO.timeName }} {{ seckillText }}
         </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>
-          <span class="sckill-wrap-countdown--mark">:</span>
-          <div class="sckill-wrap-countdown__time">{{ countdown.second }}</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>
+        <span class="sckill-wrap-countdown--mark">:</span>
+        <div class="sckill-wrap-countdown__time">
+          {{ countdown.second }}
         </div>
       </div>
     </div>
-    <div class="home-sckill-carousel">
-      <el-carousel
-        height="260px"
-        arrow="always"
-        :autoplay="false"
-        :loop="false"
-      >
-        <el-carousel-item v-for="(item, index) in goodsList" :key="index">
-          <div class="carousel-goods flex">
-            <div
-              v-for="(itemChild, indexChild) in item"
-              :key="itemChild.productId"
-              class="carousel-goods-box flex flex-middle"
-            >
+    <div class="home-sckill flex" @click="onJumpSeckill">
+      <div class="home-sckill-carousel">
+        <el-carousel
+          height="260px"
+          arrow="always"
+          :autoplay="false"
+          :loop="false"
+        >
+          <el-carousel-item v-for="(item, index) in goodsList" :key="index">
+            <div class="carousel-goods flex">
               <div
-                v-if="indexChild !== 0"
-                class="carousel-goods-box--line"
-              ></div>
-              <div class="carousel-goods-box__item">
-                <img
-                  class="goods-box-item__cover"
-                  :src="itemChild.productMainPicture"
-                />
-                <div class="goods-box-item__wrap">
-                  <p class="box-item-wrap__title">
-                    {{ itemChild.productName }}
-                  </p>
-                  <strong class="box-item-wrap__price"
-                    >￥{{ itemChild.activityPrice }}</strong
-                  >
+                v-for="(itemChild, indexChild) in item"
+                :key="itemChild.productId"
+                class="carousel-goods-box flex flex-middle"
+              >
+                <div
+                  v-if="indexChild !== 0"
+                  class="carousel-goods-box--line"
+                ></div>
+                <div class="carousel-goods-box__item">
+                  <img
+                    class="goods-box-item__cover"
+                    :src="itemChild.productMainPicture"
+                  />
+                  <div class="goods-box-item__wrap">
+                    <p class="box-item-wrap__title">
+                      {{ itemChild.productName }}
+                    </p>
+                    <strong class="box-item-wrap__price"
+                      >￥{{ itemChild.activityPrice }}</strong
+                    >
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </el-carousel-item>
-      </el-carousel>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
     </div>
-  </div>
+  </main>
 </template>
 <script>
 import _ from "lodash";
 
-const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
+const CAROUSEL_COUNT = 6; // 走马灯每页展示商品数
 
 export default {
   name: "HomeSeckill",
@@ -179,57 +188,48 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.home-sckill {
-  height: 260px;
-  cursor: pointer;
-  .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;
-      font-size: 28px;
-      margin-bottom: 90px;
+.home-sckill-bar {
+  width: 100%;
+  padding-bottom: 28px;
+  .home-sckill-title {
+    width: 110px;
+    height: 26px;
+    margin-right: 20px;
+  }
+  .home-sckill-wrap {
+    .home-sckill-wrap__tip {
+      font-size: 18px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: #999999;
+      margin-right: 10px;
     }
-    .home-sckill-wrap {
-      margin-bottom: 10px;
-      .home-sckill-wrap__tip {
-        font-size: 0;
-        strong {
-          font-size: 18px;
-          margin-right: 4px;
-        }
-        span {
-          font-size: 14px;
-        }
-      }
-      .home-sckill-wrap__countdown {
-        margin-top: 10px;
-        .sckill-wrap-countdown__time {
-          width: 30px;
-          height: 30px;
-          line-height: 30px;
-          text-align: center;
-          color: #ffffff;
-          font-size: 18px;
-          font-weight: bold;
-          background: #2f3430;
-        }
-        .sckill-wrap-countdown--mark {
-          display: block;
-          font-size: 20px;
-          margin: 0 8px;
-        }
-      }
+  }
+
+  .home-sckill-wrap__countdown {
+    .sckill-wrap-countdown__time {
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #ffffff;
+      font-size: 18px;
+      font-weight: bold;
+      background: #2f3430;
+    }
+    .sckill-wrap-countdown--mark {
+      display: block;
+      font-size: 20px;
+      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;