英文版顶部调整，banner更多按钮调整，底部调整

src/assets/css/english.scss

@@ -278,6 +278,10 @@ h4,
   font-weight: 300;
 }
 
+.toolkit footer a:hover {
+  text-decoration: underline;
+}
+
 .toolkit section {
   margin-top: 30px;
   margin-bottom: 30px;
@@ -442,10 +446,67 @@ small,
   background-color: #f26334;
 }
 
-.toolkit .bg-blue {
-  background-color: #002c6c !important;
+.toolkit button.bg-blue {
+  background-color: #002c6c;
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  font-size: 16px;
+  color: #ffffff;
+  padding: 5px 5px 5px !important;
+}
+
+.toolkit .bg-blue span {
+  margin-left: 18px;
+}
+
+.toolkit .bg-blue img {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+
+.bg-blue {
+  background: #0e2c6b;
+
+  img {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:hover {
+    background: #061a4d !important;
+
+    img {
+      right: 17px;
+    }
+  }
+
+  &:focus {
+    background: #0e2c6b !important;
+
+    img {
+      right: 20px;
+    }
+  }
+
+  &:active {
+    background: #061a4d !important;
+
+    img {
+      right: 17px;
+    }
+  }
 }
 
+
+
 .toolkit .btn-primary,
 .toolkit .btn-secondary {
   padding: 5px 30px 5px;

src/components/englishMain.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import TopBanner from './layout/topBanner.vue'
+import TopBanner from './layout/englishTopBanner.vue'
 import Header from "./layout/englishHeader/index.vue";
 import Footer from "./layout/englishFoot.vue"
 export default {

src/components/layout/englishFoot.vue

@@ -4,7 +4,7 @@
       <div class="row">
         <div class="col-xs-12 col-md-12">
           <div class="row">
-            <div class="col-xs-12 col-sm-6 col-md-1">
+            <div class="col-xs-12 col-sm-6 col-md-2">
               <a @click="handleGo('/EnglishHome')">
                 <h4>Home</h4>
               </a>
@@ -47,7 +47,7 @@
                 </li>
               </ul>
             </div>
-            <div class="col-xs-12 col-sm-6 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-2">
               <h4>Training &amp; Learning</h4>
               <ul>
                 <li>
@@ -58,7 +58,7 @@
                 </li>
               </ul>
             </div>
-            <div class="col-xs-12 col-sm-6 col-md-1">
+            <div class="col-xs-12 col-sm-6 col-md-2">
               <a href="http://www.gs1.org/news-events" target="_blank">
                 <h4>Events</h4>
               </a>

src/components/layout/englishTopBanner.vue

+<template>
+  <div class="container d-none d-xl-block d-lg-block">
+    <div class="top-banner">
+      <div>The Global Language of Business</div>
+      <div class="top-banner-item language">
+        <el-dropdown class="language-dropdown" @command="handleClick">
+          <span class="el-dropdown-link">
+            {{ languageTxt }}<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="language-dropdown-menu">
+            <el-dropdown-item command="中文">中文</el-dropdown-item>
+            <el-dropdown-item command="EN">EN</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="top-banner-item tb-hover"></div>
+      <div class="top-banner-item">
+
+      </div>
+      <div class="top-banner-item">
+
+      </div>
+      <div class="top-banner-item tb-hover" @click="handleSearch">
+        <!-- <img src="../../assets/image/head/search.png" alt="" /> -->
+        <i class="bi bi-search"></i>
+      </div>
+      <div @click="toAdmin" style="
+          color: #00799e;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          margin-left: 14px;
+        " v-if="user.username">
+        <img style="width: 22px" src="../../assets/image/mymanage/pic_touxiang.png" alt="" />
+        <!--        <span style="">个人中心:</span>-->
+        <span class="gs-hover" style="margin-left: 4px; font-weight: bold">{{
+          user.username
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "topBanner",
+  computed: {
+    ...mapState(["urls"]),
+  },
+  watch: {
+    // $route: {
+    //   handler (val) {
+    //     const currentRouterComp = val.meta.language;
+    //     if (currentRouterComp && currentRouterComp.indexOf("EN") !== -1) {
+    //       this.languageTxt = "EN";
+    //     } else {
+    //       this.languageTxt = "中文";
+    //     }
+    //   },
+    //   immediate: true,
+    // },
+  },
+  created () {
+    this.user = localStorage.getItem("loginInfo")
+      ? JSON.parse(localStorage.getItem("loginInfo"))
+      : {};
+    // console.log(this.user);
+  },
+  data () {
+    return {
+      user: {},
+      languageTxt: "EN",
+    };
+  },
+  methods: {
+    toAdmin () {
+      if (
+        (this.user.userType === 1 && this.user.isXT !== 1) ||
+        (this.user.userType === 2 && this.user.isXT !== 1) ||
+        (this.user.userType === 3 && this.user.levels === null)
+      ) {
+        this.$router.push({ path: "/MyManage/UnVerify/index" });
+      } else if (this.user.isXT === 1) {
+        this.$router.push({ path: "/MyManage/SystemMember/index" });
+      } else if (this.user.levels === 0) {
+        this.$router.push({ path: "/MyManage/admin/check" });
+      } else if (this.user.levels === 1) {
+        this.$router.push({ path: "/MyManage/admin/check" });
+      } else if (String(this.user.levels).length === 4) {
+        this.$router.push({ path: "/MyManage/admin/check" });
+      }
+    },
+    handleSearch () {
+      this.$router.push({
+        path: "/Home/sousuo",
+      });
+    },
+    handleClick (val) {
+      console.log(val, "val");
+      this.languageTxt = val;
+      if (val == "中文") {
+        this.$router.push({
+          path: "/Home",
+        });
+      } else {
+        this.$router.push({
+          path: "/EnglishHome",
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.language {
+  .el-dropdown {
+    font-size: 12px;
+    color: #414345;
+  }
+}
+
+.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/layout/topBanner.vue

@@ -13,45 +13,30 @@
           </select> -->
           <el-dropdown-menu slot="dropdown" class="language-dropdown-menu">
             <el-dropdown-item command="中文">中文</el-dropdown-item>
-            <el-dropdown-item command="英文">英文</el-dropdown-item>
+            <el-dropdown-item command="英文">EN</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </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="`${urls.ancc}gs1cnweixin.aspx`"
-          >官方微信</a
-        >
+        <a class="tb-hover" target="_blank" :href="`${urls.ancc}gs1cnweixin.aspx`">官方微信</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
-        >
+        <a class="tb-hover" target="_blank" href="https://weibo.com/gs1cn">官方微博</a>
       </div>
       <div class="top-banner-item tb-hover" @click="handleSearch">
         <img src="../../assets/image/head/search.png" alt="" />
       </div>
-      <div
-        @click="toAdmin"
-        style="
+      <div @click="toAdmin" style="
           color: #00799e;
           display: flex;
           align-items: center;
           cursor: pointer;
           margin-left: 14px;
-        "
-        v-if="user.username"
-      >
-        <img
-          style="width: 22px"
-          src="../../assets/image/mymanage/pic_touxiang.png"
-          alt=""
-        />
+        " v-if="user.username">
+        <img style="width: 22px" src="../../assets/image/mymanage/pic_touxiang.png" alt="" />
         <!--        <span style="">个人中心:</span>-->
         <span class="gs-hover" style="margin-left: 4px; font-weight: bold">{{
           user.username
@@ -71,10 +56,10 @@ export default {
   },
   watch: {
     $route: {
-      handler(val) {
+      handler (val) {
         const currentRouterComp = val.meta.language;
-        if (currentRouterComp && currentRouterComp.indexOf("英文") !== -1) {
-          this.languageTxt = "英文";
+        if (currentRouterComp && currentRouterComp.indexOf("EN") !== -1) {
+          this.languageTxt = "EN";
         } else {
           this.languageTxt = "中文";
         }
@@ -82,20 +67,20 @@ export default {
       immediate: true,
     },
   },
-  created() {
+  created () {
     this.user = localStorage.getItem("loginInfo")
       ? JSON.parse(localStorage.getItem("loginInfo"))
       : {};
     // console.log(this.user);
   },
-  data() {
+  data () {
     return {
       user: {},
       languageTxt: "中文",
     };
   },
   methods: {
-    toAdmin() {
+    toAdmin () {
       if (
         (this.user.userType === 1 && this.user.isXT !== 1) ||
         (this.user.userType === 2 && this.user.isXT !== 1) ||
@@ -112,12 +97,12 @@ export default {
         this.$router.push({ path: "/MyManage/admin/check" });
       }
     },
-    handleSearch() {
+    handleSearch () {
       this.$router.push({
         path: "/Home/sousuo",
       });
     },
-    handleClick(val) {
+    handleClick (val) {
       console.log(val, "val");
       this.languageTxt = val;
       if (val == "中文") {

src/views/English/Home/index.vue

@@ -18,8 +18,9 @@
                 China.
               </p>
               <a @click="handleGo('SecondaryMenu/Introduction')">
-                <button type="button" class="btn-primary btn-margin bg-blue">
-                  More About GS1 China
+                <button type="button" class="btn-primary btn-margin bg-blue width250">
+                  <span>More About GS1 China</span>
+                  <img src="../../../assets/image/home/more-arrow.png" alt="" />
                 </button></a>
             </div>
           </div>
@@ -36,8 +37,9 @@
                 efficiency, safety, security and sustainability .
               </p>
               <a href="http://www.gs1.org/about" target="_blank">
-                <button type="button" class="btn-primary btn-margin bg-blue">
-                  More About GS1
+                <button type="button" class="btn-primary btn-margin bg-blue width220">
+                  <span style="color:red;">More About GS1</span>
+                  <img src="../../../assets/image/home/more-arrow.png" alt="" />
                 </button></a>
             </div>
           </div>
@@ -61,8 +63,9 @@
               </li>
               <p></p>
               <a href="http://www.gs1.org/training" target="_blank">
-                <button type="button" class="btn-primary btn-margin bg-blue">
-                  View More
+                <button type="button" class="btn-primary btn-margin bg-blue width200">
+                  <span>View More</span>
+                  <img src="../../../assets/image/home/more-arrow.png" alt="" />
                 </button></a>
             </div>
           </div>
@@ -90,8 +93,9 @@
                 Asia Pacific
               </li>
               <a href="http://www.gs1.org/contact/overview" target="_blank">
-                <button type="button" class="btn-primary btn-margin bg-blue">
-                  View More
+                <button type="button" class="btn-primary btn-margin bg-blue width200">
+                  <span>View More</span>
+                  <img src="../../../assets/image/home/more-arrow.png" alt="" />
                 </button></a>
             </div>
           </div>
@@ -148,6 +152,15 @@ export default {
 </script>
 <style scoped lang="scss">
 @import "@/assets/css/english";
+.width200 {
+  width: 140px;
+}
+.width250 {
+  width: 230px;
+}
+.width220 {
+  width: 180px;
+}
 .carousel-inner {
   height: 400px;
 }