feat: 头部banner

src/components/layout/header/index.vue

@@ -99,7 +99,7 @@ export default {
         } else {
           // TODO 去dropdown里面精确查找当前的路径
           const result = this.comparePath(nav_.children, this.$route.path);
-          console.log(result);
+          // console.log(result);
           result &&
           result.breadcrumb &&
           this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
@@ -131,7 +131,7 @@ export default {
       return result;
     },
     handleWindowClick() {
-      console.log('handleWindowClick', this.fromNav, this.preActive);
+      // console.log('handleWindowClick', this.fromNav, this.preActive);
       if (this.preActive && !this.fromNav) {
         this.currentNav = this.preActive;
         this.preActive = "";
@@ -148,7 +148,7 @@ export default {
       } else {
         // 点击事件不来自子代导航item
         if (!this.fromDropdown) {
-          console.log('!this.fromDropdown', this.currentNav, nav.id)
+          // console.log('!this.fromDropdown', this.currentNav, nav.id)
           // 重复点击同一个nav
           if (this.currentNav === nav.id) {
             this.currentNav = this.preActive;
@@ -170,7 +170,7 @@ export default {
       if (item.link.startsWith("http")) {
         window.open(item.link);
       } else {
-        console.log(item.root)
+        // console.log(item.root)
         this.updateCurrent(item.root.id);
         item.breadcrumb &&
         this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
@@ -180,7 +180,7 @@ export default {
     },
 
     updateCurrent(id) {
-      console.log('updateCurrent', id);
+      // console.log('updateCurrent', id);
       this.currentNav = id;
       this.preActive = "";
     }

src/components/layout/topBanner.vue

+<template>
+  <div class="container d-none d-xl-block d-lg-block">
+    <div class="top-banner">
+      <div>全球商业语言</div>
+      <div class="top-banner-item tb-hover">咨询电话：400-7000-690</div>
+      <div class="top-banner-item">
+        <img src="../../assets/image/head/wx.png" alt=""/>
+        <a class="tb-hover" target="_blank" href="/gs1cnweixin">官方微信</a>
+      </div>
+      <div class="top-banner-item">
+        <img src="../../assets/image/head/xlwb.png" alt="">
+        <a class="tb-hover" target="_blank" href="https://weibo.com/gs1cn">官方微博</a>
+      </div>
+      <div class="top-banner-item tb-hover">
+        <img src="../../assets/image/head/search.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "topBanner"
+}
+</script>
+
+<style lang="scss">
+.top-banner {
+  height: 30px;
+  width: 100%;
+  background: #F0F5FA;
+  font-size: 12px;
+  line-height: 30px;
+  font-weight: 400;
+  color: #414345;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  .tb-hover:hover {
+    cursor: pointer;
+    color: #0E2C6B;
+  }
+
+  .top-banner-item {
+    color: #00799E;
+
+    > img {
+      width: 12px;
+      height: 12px;
+      margin-right: 6px;
+    }
+
+    > a {
+      text-decoration: none;
+      color: #00799E;
+    }
+  }
+
+  > div + div {
+    margin-left: 24px;
+  }
+}
+</style>

src/components/main.vue

 <template>
   <div>
+    <TopBanner></TopBanner>
     <Header></Header>
     <div class="router-view">
       <router-view></router-view>
@@ -9,10 +10,12 @@
 </template>
 
 <script>
+import TopBanner from './layout/topBanner.vue'
 import Header from "./layout/header/index.vue";
 import Footer from "./layout/footer.vue"
 export default {
   components: {
+    TopBanner,
     Header,
     Footer,
   },