前端首页下拉样式，头部样式，seller端批量上传

buyer/src/components/header/Header.vue

@@ -2,37 +2,33 @@
   <div class="box">
     <div class="nav">
       <ul class="location">
-        <li>
-          <router-link to="/" v-if="$route.path !== '/'" class="home-page">
-            <Icon type="md-home" />首页
-          </router-link>
-        </li>
       </ul>
       <ul class="detail">
         <li class="first" v-show="!userInfo.username">
+          <router-link :to="`/signUp`">
+            <span style="border:none">立即注册</span>
+          </router-link>
+        </li>
+        <li v-show="!userInfo.username">
           <router-link :to="`/login?rePath=${$route.path}&query=${JSON.stringify($route.query)}`">
-            <span style="border:none" class="tipsLogin">请登录</span>
+            <span style="border:none">请登录</span>
           </router-link>
         </li>
         <li v-show="!!userInfo.username">
-          <Dropdown>
-            <p class="username-p">
+          <div class="username-p">
+            <p>
               <Avatar class="person-icon" :src="userInfo.face" icon="person" size="small" />
               <span class="username">{{ userInfo.nickName? userInfo.nickName : userInfo.username | secrecyMobile }}</span>
             </p>
-            <DropdownMenu slot="list">
-              <div class="my-page">
-                <div class="my-info" @click="myInfo">
-                  <Icon type="md-home"></Icon>
-                  <p>我的主页</p>
-                </div>
-                <div class="sign-out" @click="signOutFun">
-                  <Icon type="md-exit"></Icon>
-                  <p>退出登录</p>
-                </div>
-              </div>
-            </DropdownMenu>
-          </Dropdown>
+            <transition name='fade'>
+              <ul class="drop-items">
+                <li @click="goUserCenter('/home')">我的主页</li>
+                <li @click="goUserCenter('/home/Coupons')">优惠券</li>
+                <li @click="goUserCenter('/home/Favorites')">我的收藏</li>
+                <li @click="signOutFun">退出登录</li>
+              </ul>
+            </transition>
+          </div>
         </li>
         <li @click="goUserCenter('/home/MyOrder')"><span class="nav-item hover-color">我的订单</span></li>
         <li @click="goUserCenter('/home/MyTracks')"><span class="nav-item hover-color">我的足迹</span></li>
@@ -95,28 +91,28 @@
 </template>
 
 <script>
-import storage from "@/plugins/storage.js";
-import { cartGoodsAll } from "@/api/cart.js";
+import storage from '@/plugins/storage.js';
+import { cartGoodsAll } from '@/api/cart.js';
 export default {
-  name: "M-Header",
-  created() {
-    if (storage.getItem("userInfo")) {
-      this.userInfo = JSON.parse(storage.getItem("userInfo"));
+  name: 'M-Header',
+  created () {
+    if (storage.getItem('userInfo')) {
+      this.userInfo = JSON.parse(storage.getItem('userInfo'));
     }
   },
 
-  data() {
+  data () {
     return {
       // 主题颜色切换
-      themeType: "light",
+      themeType: 'light',
       userInfo: {}, // 用户信息
-      shoppingCart: [], // 购物车
+      shoppingCart: [] // 购物车
     };
   },
   computed: {
-    cartNum() {
+    cartNum () {
       return this.$store.state.cartNum;
-    },
+    }
   },
   methods: {
     changeCity (city) { // 选择所在城市
@@ -124,15 +120,15 @@ export default {
     },
     goToPay () { // 跳转购物车
       let url = this.$router.resolve({
-        path: "/cart",
+        path: '/cart'
       });
-      window.open(url.href, "_blank");
+      window.open(url.href, '_blank');
     },
     myInfo () { // 跳转会员中心
       let url = this.$router.resolve({
-        path: "/home",
+        path: '/home'
       });
-      window.open(url.href, "_blank");
+      window.open(url.href, '_blank');
     },
     signOutFun () { // 退出登录
       storage.removeItem('accessToken');
@@ -142,51 +138,51 @@ export default {
       this.$store.commit('SET_CARTNUM', 0)
       this.$router.push('/login');
     },
-    goUserCenter(path) {
+    goUserCenter (path) {
       // 跳转我的订单，我的足迹
       if (this.userInfo.username) {
         this.$router.push({ path: path });
       } else {
         this.$Modal.confirm({
-          title: "请登录",
-          content: "<p>请登录后执行此操作</p>",
-          okText: "立即登录",
-          cancelText: "继续浏览",
+          title: '请登录',
+          content: '<p>请登录后执行此操作</p>',
+          okText: '立即登录',
+          cancelText: '继续浏览',
           onOk: () => {
             this.$router.push({
-              path: "/login",
+              path: '/login',
               query: {
                 rePath: this.$router.history.current.path,
-                query: JSON.stringify(this.$router.history.current.query),
-              },
+                query: JSON.stringify(this.$router.history.current.query)
+              }
             });
-          },
+          }
         });
       }
     },
-    shopEntry() {
+    shopEntry () {
       // 店铺入驻
-      if (storage.getItem("accessToken")) {
+      if (storage.getItem('accessToken')) {
         let routeUrl = this.$router.resolve({
-          path: "/shopEntry",
-          query: { id: 1 },
+          path: '/shopEntry',
+          query: { id: 1 }
         });
-        window.open(routeUrl.href, "_blank");
+        window.open(routeUrl.href, '_blank');
       } else {
-        this.$router.push("login");
+        this.$router.push('login');
       }
     },
-    getCartList() {
+    getCartList () {
       // 获取购物车列表
       if (this.userInfo.username) {
         cartGoodsAll().then((res) => {
           this.shoppingCart = res.result.skuList;
-          this.$store.commit("SET_CARTNUM", this.shoppingCart.length);
-          this.Cookies.setItem("cartNum", this.shoppingCart.length);
+          this.$store.commit('SET_CARTNUM', this.shoppingCart.length);
+          this.Cookies.setItem('cartNum', this.shoppingCart.length);
         });
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -201,12 +197,10 @@ export default {
 .shopping-cart-null span {
   @include sub_color($light_sub_color);
 }
-.tipsLogin {
-  color: $theme_color;
-}
 
 .box {
   width: 100%;
+  font-size: 12px!important;
   // height: 35px;
   @include background_color($light_white_background_color);
 }
@@ -222,7 +216,7 @@ export default {
 }
 .nav li {
   float: left;
-  font-size: 14px;
+  font-size: 12px;
   line-height: 35px;
   margin-right: 10px;
   font-weight: bold;
@@ -230,7 +224,7 @@ export default {
 .nav a,
 .nav-item {
   text-decoration: none;
-  padding-left: 10px;
+  padding-left: 14px;
   border-left: 1px solid #ccc;
   color: #999;
   cursor: pointer;
@@ -324,8 +318,67 @@ export default {
   line-height: 16px;
 }
 .username-p {
-  cursor: pointer;
+  position: relative;
+  p{
+    cursor: pointer;
+  }
+  .drop-items {
+    position: absolute;
+    display: none;
+    top: 45px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: 5px 10px;
+    z-index: 20;
+    height: 150px;
+    background-color: #fff;
+    width: 80px;
+    border: 1px solid #eee;
+    box-shadow: 2px 2px 7px #999;
+
+    li {
+      color: rgb(107, 106, 106);
+      width: 100%;
+      border-bottom:1px solid rgb(207, 206, 206);
+      font-weight: normal;
+      text-align: center;
+      &:last-child{
+        border: none;
+      }
+      &:hover{
+        cursor: pointer;
+        color: $theme_color;
+      }
+    }
+
+    &::before{
+      position: absolute;
+      top: -20px;
+      left: 30px;
+      content: '';
+      width: 0;
+      height: 0;
+      border: 10px solid #999;
+      border-color:  transparent transparent #fff transparent ;
+    }
+
+    &::after{
+      content: '';
+      position: absolute;
+      width: 80px;
+      height: 20px;
+      top: -20px;
+      left: 0;
+    }
+  }
+  &:hover{
+    .drop-items{
+      display: block;
+    }
+  }
 }
+
 .my-page {
   padding: 3px 5px;
   width: 180px;