feat: 添加公共页尾,页头置顶样式

assets/scss/global.scss

@@ -1,5 +1,6 @@
 
 @import './flex.scss';
+@import './util.scss';
 
 * {
   -webkit-box-sizing: border-box; box-sizing: border-box;

layouts/default.vue

@@ -9,15 +9,16 @@
   <div class="layout">
     <Header />
     <div class="layout-box"><Nuxt /></div>
-    <div class="layout-footer"></div>
+    <Footer />
   </div>
 </template>
 <script>
 import Header from "./module/header/index.vue";
+import Footer from "./module/footer/index.vue";
 
 export default {
   name: "Layout",
-  components: { Header },
+  components: { Header, Footer },
 };
 </script>
 <style lang="scss" scoped>

layouts/module/footer/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="layout-footer">
+    <div class="layout-footer-wrap">
+      <div class="layout-footer-wrap__promise flex flex-middle flex-between">
+        <div
+          v-for="(item, index) in promiseList"
+          :key="index"
+          class="wrap-promise-item"
+        >
+          <img :src="item.icon" />
+          <span>{{ item.label }}</span>
+        </div>
+      </div>
+      <div class="layout-footer-wrap__line"></div>
+      <div class="layout-footer-wrap__address">
+        © 2020 马士兵（北京）教育科技有限公司
+        地址：北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      promiseList: [
+        {
+          label: "马士兵严选",
+          icon: require("@/static/images/layout/footer-1.png"),
+        },
+        {
+          label: "马士兵严选",
+          icon: require("@/static/images/layout/footer-2.png"),
+        },
+        {
+          label: "马士兵严选",
+          icon: require("@/static/images/layout/footer-3.png"),
+        },
+        {
+          label: "马士兵严选",
+          icon: require("@/static/images/layout/footer-4.png"),
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.layout-footer {
+  height: 189px;
+  background: #dddddd;
+  .layout-footer-wrap {
+    .layout-footer-wrap__promise {
+      width: 1060px;
+      margin: 0 auto;
+      padding: 25px 0;
+      .wrap-promise-item {
+        font-weight: bold;
+        color: #999999;
+        font-size: 18px;
+        margin-left: 20px;
+        img {
+          width: 52px;
+          height: 52px;
+        }
+      }
+    }
+    .layout-footer-wrap__line {
+      width: 100%;
+      height: 1px;
+      background: #cccccc;
+    }
+    .layout-footer-wrap__address {
+      width: 500px;
+      margin: 0 auto;
+      padding: 20px 0;
+      font-size: 12px;
+      color: #797979;
+      text-align: center;
+    }
+  }
+}
+</style>

layouts/module/header/HeaderInfoBar.vue

@@ -6,12 +6,11 @@
       <div class="header-wrap__logo">马士兵严选欢迎你！</div>
       <div class="header-wrap__content flex flex-middle">
         <div class="header-wrap-content__login">
-          <div v-if="isLogin" class="wrap-content-login__text flex">
+          <el-dropdown v-if="isLogin" @visible-change="menuVisible = $event">
-            <span>请先</span>
+            <div
-            <span class="content-login-text--light">登录/注册</span>
+              class="wrap-content-login__info flex flex-middle flex-center"
-          </div>
+              :class="{ 'wrap-content-login__info--hover': menuVisible }"
-          <el-dropdown @visible-change="menuVisible = $event">
+            >
-            <div class="wrap-content-login__info flex flex-middle flex-center">
               <span>你好，{{ userInfo.name }}</span>
               <img class="content-login-info__logo" :src="menuIcon" />
             </div>
@@ -31,6 +30,10 @@
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
+          <div v-else class="wrap-content-login__text flex">
+            <span>请先</span>
+            <span class="content-login-text--light">登录/注册</span>
+          </div>
         </div>
         <template>
           <div v-if="!menuVisible" class="header-wrap-content--line"></div>
@@ -64,7 +67,7 @@ const MENU_VALUE = {
 export default {
   data() {
     return {
-      isLogin: false,
+      isLogin: true,
       userInfo: {
         name: "仙女广",
       },
@@ -148,13 +151,14 @@ export default {
     .header-wrap__content {
       .header-wrap-content__login {
         .wrap-content-login__text {
+          padding: 0 18px;
           .content-login-text--light {
             margin-left: 6px;
             color: #ff875b;
             cursor: pointer;
           }
         }
-        .wrap-content-login__info:hover {
+        .wrap-content-login__info--hover {
           background: #ffffff !important;
           color: #ff875b;
         }

layouts/module/header/index.vue

@@ -1,55 +1,89 @@
 <template>
-  <div>
+  <div class="layout-header" :class="{ 'layout-sticky-bar-header': isSticky }">
-    <HeaderInfoBar />
+    <template v-if="isSticky">
-    <div class="default-header">
+      <div class="sticky-bar-header">
-      <div class="default-header-box">
+        <div class="sticky-bar-header__wrap flex flex-middle flex-between">
-        <div class="default-header-box__wrap flex flex-between flex-middle">
+          <div class="flex flex-middle">
-          <img
+            <img
-            class="header-box-wrap__logo"
+              class="bar-header-wrap__logo"
-            src="@/static/images/layout/logo.png"
+              src="@/static/images/layout/logo-sticky.png"
-          />
+            />
-          <div class="header-box-wrap__right flex flex-middle">
+            <el-menu
-            <div class="box-wrap-right__search flex">
+              :default-active="tabIndex"
-              <div class="search-input">
+              mode="horizontal"
-                <el-input
+              @select="handleTabSelect"
-                  v-model="searchContent"
+            >
-                  placeholder="请输入商品名称"
+              <el-menu-item
-                ></el-input>
+                v-for="item in tabList"
-              </div>
+                :key="item.value"
-              <div class="search-icon flex flex-center flex-middle">
+                :index="item.value"
-                <img src="@/static/images/layout/icon-search.png" />
+                >{{ item.label }}</el-menu-item
-              </div>
+              >
-            </div>
+            </el-menu>
-            <div class="box-wrap-right__cart flex flex-middle">
+          </div>
-              <img src="@/static/images/layout/icon-shop.png" />
+          <div class="bar-header-wrap__icons flex flex-middle">
-              <span>购物车</span>
+            <img src="@/static/images/layout/icon-search-sticky.png" />
-              <div class="wrap-right-cart__tip">3</div>
+            <div class="header-wrap-icons__shop">
+              <img src="@/static/images/layout/icon-shop-sticky.png" />
+              <span class="">3</span>
             </div>
+            <div class="header-wrap-icons__login">登录</div>
           </div>
         </div>
-        <div class="default-header-box__tab flex flex-middle">
+      </div>
-          <div class="header-box-tab__category">
+    </template>
-            <div class="tab-category__label flex flex-center flex-middle">
+    <template v-else>
-              <img src="@/static/images/layout/icon-category.png" />
+      <HeaderInfoBar />
-              <span>热门分类</span>
+      <div class="default-bar-header">
-            </div>
+        <div class="bar-header-box">
-            <div class="tab-category__menu flex flex-left">
+          <div class="bar-header-box__wrap flex flex-between flex-middle">
-              <div class="tab-category-menu__left">
+            <img
-                <div
+              class="header-box-wrap__logo"
-                  v-for="item in categrayData"
+              src="@/static/images/layout/logo.png"
-                  :key="item.id"
+            />
-                  @mouseenter="handleMouEnter(item.id)"
+            <div class="header-box-wrap__right flex flex-middle">
-                  @mouseleave="categrayHoverVisible = false"
+              <div class="box-wrap-right__search flex">
-                  class="menu-left__item flex felx-middle"
+                <div class="search-input">
-                >
+                  <el-input
-                  <img />
+                    v-model="searchContent"
-                  <span>{{ item.name }}</span>
+                    placeholder="请输入商品名称"
+                  ></el-input>
                 </div>
+                <div class="search-icon flex flex-center flex-middle">
+                  <img src="@/static/images/layout/icon-search.png" />
+                </div>
+              </div>
+              <div class="box-wrap-right__cart flex flex-middle">
+                <img src="@/static/images/layout/icon-shop.png" />
+                <span>购物车</span>
+                <div class="wrap-right-cart__tip">3</div>
               </div>
-              <div v-show="categrayHoverVisible">
+            </div>
+          </div>
+          <div class="bar-header-box__tab flex flex-middle">
+            <div class="header-box-tab__category">
+              <div class="tab-category__label flex flex-center flex-middle">
+                <img src="@/static/images/layout/icon-category.png" />
+                <span>热门分类</span>
+              </div>
+              <div class="tab-category__menu flex flex-left">
+                <div class="tab-category-menu__left">
+                  <div
+                    v-for="item in categrayData"
+                    :key="item.id"
+                    @mouseenter="handleMouEnter(item.id)"
+                    @mouseleave="categrayHoverVisible = false"
+                    class="menu-left__item flex flex-middle"
+                  >
+                    <img />
+                    <span>{{ item.name }}</span>
+                  </div>
+                </div>
                 <div
+                  v-show="categrayHoverVisible"
                   class="tab-category-menu__right flex flex-wrap"
                   @mouseenter="categrayHoverVisible = true"
+                  @mouseleave="categrayHoverVisible = false"
                 >
                   <div
                     v-for="item in currentCategrayList"
@@ -61,21 +95,22 @@
                 </div>
               </div>
             </div>
+            <nuxt-link
+              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.path === $nuxt.$route.path,
+              }"
+              :to="item.path"
+            >
+              {{ item.label }}
+            </nuxt-link>
           </div>
-          <nuxt-link
-            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.path === $nuxt.$route.path,
-            }"
-            :to="item.path"
-          >
-            {{ item.label }}
-          </nuxt-link>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 <script>
@@ -94,19 +129,25 @@ const TAB_TYPE = {
 export default {
   name: "DefaultHeader",
   components: { HeaderInfoBar },
+  props: {
+    isSticky: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       searchContent: "",
-      activityTab: TAB_TYPE.HOME,
+      tabIndex: TAB_TYPE.HOME,
       tabList: [
         { label: "首页", value: TAB_TYPE.HOME, path: "/" },
         { label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
         { label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
         { label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
       ],
-      categrayData: [],
       categrayHoverVisible: false,
       currentCategrayId: 0,
+      categrayData: [],
     };
   },
   computed: {
@@ -148,15 +189,84 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.default-header {
+.layout-sticky-bar-header {
+  height: 50px;
+}
+.sticky-bar-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  .sticky-bar-header__wrap {
+    width: 1200px;
+    height: 100%;
+    margin: 0 auto;
+    .bar-header-wrap__logo {
+      width: 164px;
+      height: 28px;
+      margin-right: 50px;
+    }
+    .bar-header-wrap__icons {
+      cursor: pointer;
+      img {
+        width: 23px;
+        height: 23px;
+      }
+      .header-wrap-icons__shop {
+        position: relative;
+        margin: 0 30px 0 14px;
+        img {
+          width: 30px;
+        }
+        span {
+          position: absolute;
+          right: -6px;
+          top: -4px;
+          display: block;
+          height: 14px;
+          padding: 0 2px;
+          line-height: 14px;
+          text-align: center;
+          background: #ff512b;
+          font-size: 10px;
+          color: #ffffff;
+          border-radius: 50%;
+        }
+      }
+      .header-wrap-icons__login {
+        font-size: 16px;
+        color: #909399;
+      }
+    }
+    /deep/ .el-menu {
+      height: 50px;
+      color: #666666;
+      .is-active {
+        color: #ff7f39;
+        border-bottom: 2px solid #ff823c;
+      }
+      .el-menu-item:hover {
+        color: #ff7f39;
+      }
+      .el-menu-item {
+        height: 100%;
+        line-height: 50px;
+        font-size: 16px;
+        margin: 0 20px;
+      }
+    }
+  }
+}
+.default-bar-header {
   padding-top: 32px;
   position: relative;
   z-index: 3;
-  .default-header-box {
+  .bar-header-box {
     width: 1200px;
     margin: 0 auto;
     background: #ffffff;
-    .default-header-box__wrap {
+    .bar-header-box__wrap {
       height: 42px;
       font-size: 14px;
       margin-bottom: 38px;
@@ -214,7 +324,7 @@ export default {
         }
       }
     }
-    .default-header-box__tab {
+    .bar-header-box__tab {
       height: 38px;
       .header-box-tab__category {
         position: relative;
@@ -241,7 +351,7 @@ export default {
           color: #333333;
           .tab-category-menu__left {
             width: 190px;
-            padding: 34px 0;
+            padding: 15px 0;
             background: #ffffff;
             .menu-left__item:hover {
               color: #ff875b;

pages/index/module/Banner.vue

@@ -9,8 +9,12 @@
 <template>
   <div class="home-banner">
     <el-carousel height="360px" indicator-position="outside">
-      <el-carousel-item v-for="item in bannerList" :key="item.id">
+      <el-carousel-item
-        <el-image :src="item.picture"></el-image>
+        v-for="item in bannerList"
+        :key="item.id"
+        @click="onBannerClick(item.id)"
+      >
+        <el-image :src="item.url" fit="fill"></el-image>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -22,16 +26,29 @@ export default {
     return {
       bannerList: [
         {
-          picture:
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/banner4.jpg",
-            "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/banner4.jpg",
+          id: 13,
         },
         {
-          picture:
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/1.png",
-            "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/2banner.png",
+          id: 30,
+        },
+        {
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/2banner.png",
+          id: 15,
+        },
+        {
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/3banner.png",
+          id: 40,
         },
       ],
     };
   },
+  methods: {
+    onBannerClick(goodsId) {
+      window.open(`${location.href}/detail/${goodsId}`);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -46,6 +63,9 @@ export default {
       width: 45px;
       height: 45px;
     }
+    .el-carousel__indicators {
+      display: none;
+    }
     .el-carousel__arrow--left {
       left: calc(50% - 380px) !important;
     }
@@ -54,6 +74,7 @@ export default {
     }
     .el-image {
       width: 100%;
+      height: 100%;
     }
   }
 }