liwj提交

src/components/englishMain.vue

 <template>
   <div>
     <TopBanner></TopBanner>
-    <!-- <Header></Header> -->
+    <Header></Header>
     <div class="router-view">
       <router-view></router-view>
     </div>
@@ -11,7 +11,7 @@
 
 <script>
 import TopBanner from './layout/topBanner.vue'
-import Header from "./layout/header/index.vue";
+import Header from "./layout/englishHeader/index.vue";
 import Footer from "./layout/englishFoor.vue"
 export default {
   components: {
@@ -31,6 +31,6 @@ export default {
   mounted () { },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import "@/assets/css/english";
 </style>

src/components/layout/englishHeader/HeaderBtn.vue

+<template>
+  <div class="header-btn move-btn">
+    <el-button v-if="!user" type="primary" style="padding: 9px 30px;margin-right: 6px" size="small"
+               @click="handleToLogin">注册/登录
+    </el-button>
+    <el-button v-else type="primary" style="padding: 9px 30px;margin-right: 6px" size="small" @click="handleExit">退出登录
+    </el-button>
+
+    <!-- Toggler -->
+    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
+            aria-label="Toggle navigation">
+          <span class="navbar-toggler-default">
+            <i class="bi-list"></i>
+          </span>
+      <span class="navbar-toggler-toggled">
+            <i class="bi-x"></i>
+          </span>
+    </button>
+    <!-- End Toggler -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HeaderBtn",
+  data() {
+    return {
+      user: null
+    }
+  },
+  methods: {
+    handleToLogin() {
+      this.$router.push({path: "/login"});
+    },
+    handleExit() {
+      localStorage.removeItem('loginInfo')
+      localStorage.removeItem('TOKEN')
+      localStorage.removeItem('gs-user')
+      // this.$router.push({path: "/"})
+      location.href = '/'
+      this.user = null
+    }
+  },
+  created() {
+    this.user = localStorage.getItem('loginInfo') ? JSON.parse(localStorage.getItem('loginInfo')) : null
+  },
+}
+</script>
+<style lang="scss">
+.header-btn {
+  button {
+    &:hover {
+      background: #CC3C0F;
+    }
+  }
+}
+</style>

src/components/layout/englishHeader/HeaderDropdown.vue

+<script>
+const ROW_NUM = 24;
+export default {
+  name: "HeaderDropdown",
+  props: {
+    nav: Object,
+  },
+  data() {
+    return {
+      rows:ROW_NUM
+    };
+  },
+  computed: {
+    rowNum() {
+      return this.rows - 1;
+    },
+  },
+  created() {
+    if(this.nav.rowNum){
+      this.rows = this.nav.rowNum
+    }
+  },
+  methods: {
+    // 目前只支持两级子代 主要是设计图布局不递归
+    renderDropdown() {
+      const children = [];
+      let itemBox = [];
+      if (this.nav.children && this.nav.children.length > 0) {
+        this.nav.children.forEach((item) => {
+          if (item.children && item.children.length > 0) {
+            if (itemBox.length !== 0) {
+              // 循环到大版块，且之前有遗留非大版块导航选项 需要先处理下非大版块导航选项列
+              children.push(this.renderItemBox([...itemBox]));
+              itemBox = [];
+            }
+            children.push(this.renderDropdownRect(item));
+          } else {
+            // 处理非大版块导航选项
+            if (itemBox.length === this.rowNum) {
+              children.push(this.renderItemBox([...itemBox, item]));
+              itemBox = [];
+            } else {
+              itemBox.push(item);
+            }
+          }
+        });
+        if (itemBox.length !== 0) {
+          // 循环完之后，有遗留非大版块导航选项 也需要处理
+          children.push(this.renderItemBox([...itemBox]));
+        }
+      }
+      return <div class="navbar-dropdown-menu-inner">{children}</div>;
+    },
+
+    // 渲染一个下拉导航里的一个大板块(#1) （带children)
+    renderDropdownRect(nav) {
+      const children = [];
+      let itemBox = [];
+      nav.children.forEach((item) => {
+        if (itemBox.length === this.rowNum) {
+          children.push(this.renderItemBox([...itemBox, item], true));
+          itemBox = [];
+        } else {
+          itemBox.push(item);
+        }
+      });
+      if (itemBox.length > 0) {
+        children.push(this.renderItemBox([...itemBox], true));
+      }
+      // style: { flex:'1 1 490px'},
+      const classNames = ["gs-dropdown-rect"];
+      if(nav.class){
+        classNames.push(...nav.class)
+      }
+      return (
+        <div class={classNames.join(" ").trim()} style={{...nav.style}}>
+          <div
+            class="rect-title gs-hover"
+            vOn:click={() => {
+              this.$emit("itemClick", { ...nav, root: { ...this.nav } });
+            }}
+          >
+            <span class="pointer">
+              {nav.nameInHeaderNav ? nav.nameInHeaderNav : nav.name}
+            </span>
+          </div>
+          <div class="rect-body">{children}</div>
+        </div>
+      );
+    },
+
+    // 渲染一个下拉导航里的一列 这个分为在大版块(#1)里的列 和 只是单纯的一列
+    renderItemBox(items, isChild = false) {
+      const classNames = ["gs-dropdown-col", isChild ? "no-padding-top" : ""];
+      return (
+        <div class={classNames.join(" ").trim()} style={items[0].style}>
+          {items.map((item) => {
+            // console.log(item.isHiddenMenu, 'item.isHiddenMenu');
+            if (item.isHiddenMenu) return
+            return (
+              <div class="gs-dropdown-item">
+                <span
+                  vOn:click={() => {
+                    this.$emit("itemClick", { ...item, root: { ...this.nav } });
+                  }}
+                  class="pointer link-item gs-hover"
+                >
+                  {item.name}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      );
+    },
+  },
+  render() {
+    return (
+      <div
+        class="dropdown-menu w-100 gs-nav-dropdown"
+        aria-labelledby={`gs-nav-item-${this.nav.id}`}
+      >
+        <div class="row title">{this.nav.name}</div>
+
+        <div class="row">{this.renderDropdown()}</div>
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss">
+// 导航item下拉
+.dropdown-menu.gs-nav-dropdown {
+  border: none;
+  background: #ffffff;
+  box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+  border-radius: 0px 0px 6px 6px;
+  padding: 20px 40px;
+
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #04408d;
+    line-height: 25px;
+    padding-bottom: 10px;
+    //margin-bottom: 29px;
+    //border-bottom: 1px solid rgba(4, 64, 141, 0.18);
+  }
+
+  .navbar-dropdown-menu-inner {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+  }
+}
+
+.gs-dropdown-rect {
+  //flex:1 0 auto;
+  display: flex;
+  flex-direction: column;
+  padding-right: 75px;
+  margin-bottom: 20px;
+  padding-top: 28px;
+  border-top: 1px solid rgba(4, 64, 141, 0.18);
+
+  .gs-dropdown-col{
+    border-top: none;
+  }
+
+  .rect-title {
+    font-weight: 600;
+    color: #002C6C;
+    line-height: 22px;
+    font-size: 16px;
+    padding-bottom: 13px;
+  }
+
+  .rect-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+}
+
+.gs-dropdown-col {
+  //flex:1 0 auto;
+  display: flex;
+  flex-direction: column;
+  padding-top: 35px;
+  padding-right: 60px;
+  margin-bottom: 20px;
+  border-top: 1px solid rgba(4, 64, 141, 0.18);
+
+  &.no-padding-top {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+
+  .gs-dropdown-item {
+    //width: 180px;
+    padding: 7px 0;
+    font-size: 14px;
+    color: #00799E;
+    line-height: 20px;
+  }
+}
+
+@media (max-width: 992px) {
+  .navbar-dropdown-menu-inner,.rect-body{
+    flex-direction: column;
+  }
+  .gs-dropdown-rect{
+    padding-top: 0;
+    flex-direction: column;
+    flex: 1!important;
+  }
+  .gs-dropdown-col{
+   flex: 1!important;
+  }
+  .gs-dropdown-rect,.gs-dropdown-col{
+    border-top: none;
+    padding-right: 0;
+  }
+}
+
+@media (min-width: 1400px) {
+  .service_xtcy_custom,.service_cxfw_custom{
+    flex:1 0 auto;
+  }
+}
+
+@media (max-width: 1399px){
+  .service_xtcy_custom{
+    flex:1 0 490px;
+  }
+  .service_cxfw_custom{
+    flex:1 0 260px;
+  }
+}
+</style>

src/components/layout/englishHeader/index.vue

+<template>
+  <header class="navbar navbar-expand-lg navbar-end gs-header-nav">
+    <div class="container">
+      <nav class="navbar-nav-wrap">
+        <!-- Default Logo -->
+        <a class="navbar-brand" href="/Home" aria-label="Front">
+          <img
+            class="navbar-brand-logo"
+            src="../../../assets/image/head/logo.png"
+            alt="Logo"
+          />
+        </a>
+        <!-- End Default Logo -->
+
+        <!-- Collapse -->
+        <div class="navbar-collapse collapse" id="navbarNavDropdown">
+          <div class="navbar-absolute-top-scroller">
+            <ul class="navbar-nav">
+              <!-- Nav items-->
+              <template v-for="nav in navList">
+                <li
+                  v-if="nav.children && nav.children.length > 0"
+                  class="gs-nav-item nav-item"
+                  :key="nav.id"
+                  :class="{ active: currentNav === nav.id }"
+                  @click="handleNavClick(nav, $event)"
+                >
+                  <a
+                    :id="`gs-nav-item-${nav.id}`"
+                    class="nav-link"
+                    aria-current="page"
+                    href="javascript:void(0)"
+                    role="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                    >{{ nav.name }}</a
+                  >
+                  <i class="mobile-menu-down bi bi-chevron-compact-down"></i>
+
+                  <!-- Dropdown Menu -->
+                  <HeaderDropdown :nav="nav" @itemClick="handleItemClick" />
+                  <!-- End Dropdown Menu -->
+                </li>
+                <li
+                  v-else
+                  :key="nav.id"
+                  @click="handleNavClick(nav, $event)"
+                  class="gs-nav-item nav-item"
+                  :class="{ active: currentNav === nav.id }"
+                >
+                  <a class="nav-link" href="javascript:void(0)">{{
+                    nav.name
+                  }}</a>
+                </li>
+              </template>
+
+              <!-- Nav items End-->
+            </ul>
+          </div>
+        </div>
+        <!-- End Collapse -->
+
+        <!-- Button -->
+        <HeaderBtn />
+        <!-- End Button -->
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script>
+import HeaderBtn from "./HeaderBtn.vue";
+import HeaderDropdown from "./HeaderDropdown.vue";
+import { nav } from "./mock";
+import Qs from "qs";
+import { cleanObject } from "@/axios/parameter";
+import { deepFindBreadcrumb } from "@/utils/utils";
+
+export default {
+  components: { HeaderBtn, HeaderDropdown },
+  data() {
+    return {
+      // 点击事件来自头部导航
+      fromNav: false,
+      // 点击事件来自dropdown
+      fromDropdown: false,
+      navList: nav,
+      currentNav: "0",
+      preActive: "",
+    };
+  },
+  created() {
+    // 监听路由 处理nav高亮 和面包屑 和subnav
+    nav.forEach((nav_) => {
+      if (this.$route.path.startsWith(nav_.link)) {
+        this.currentNav = nav_.id;
+
+        // nav_.children &&
+        //   nav_.children.length > 0 &&
+        //   this.$store.commit("system/SET_SUB_NAV", nav_.children);
+        // console.log(nav_, this.$route, 'this.$route.path');
+        if (nav_.link === this.$route.path) {
+          nav_.breadcrumb &&
+            this.$store.commit("system/SET_BREADCRUMB", nav_.breadcrumb);
+        } else {
+          // TODO 去dropdown里面精确查找当前的路径
+          let result;
+          result = deepFindBreadcrumb(nav_.children, this.$route.path);
+          // console.log(this.$route.path, result, 'resultresultresult');
+          if (result.length === 0 && Object.keys(this.$route.query).length > 0) {
+            const queryString = Qs.stringify(cleanObject(this.$route.query));
+            let path = `${this.$route.path}?${queryString}`;
+            result = deepFindBreadcrumb(nav_.children, path);
+          }
+          result &&
+            result.breadcrumb &&
+            this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
+        }
+      }
+    });
+  },
+  mounted() {
+    window.addEventListener("click", this.handleWindowClick);
+  },
+  beforeDestroy() {
+    window.removeEventListener("click", this.handleWindowClick);
+  },
+  methods: {
+    handleWindowClick() {
+      // console.log('handleWindowClick', this.fromNav, this.preActive);
+      if (this.preActive && !this.fromNav) {
+        this.currentNav = this.preActive;
+        this.preActive = "";
+      }
+      this.fromNav = false;
+      this.fromDropdown = false;
+    },
+
+    handleNavClick(nav) {
+      if (!nav.children || nav.children.length === 0) {
+        this.currentNav = nav.id;
+        this.preActive = "";
+        this.$router.push({ path: nav.link });
+      } else {
+        // 点击事件不来自子代导航item
+        if (!this.fromDropdown) {
+          // console.log('!this.fromDropdown', this.currentNav, nav.id)
+          // 重复点击同一个nav
+          if (this.currentNav === nav.id) {
+            this.currentNav = this.preActive;
+            this.preActive = "";
+          } else {
+            // 点击的是有dropdown的nav 需要保存当前激活状态
+            if (this.preActive === "") {
+              this.preActive = this.currentNav;
+            }
+            this.currentNav = nav.id;
+            this.fromNav = true;
+          }
+        }
+      }
+    },
+
+    handleItemClick(item) {
+      this.fromDropdown = true;
+      if (item.link.startsWith("http")) {
+        window.open(item.link);
+      } else {
+        // console.log(item.root)
+        this.updateCurrent(item.root.id);
+        item.breadcrumb &&
+          this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
+        // this.$store.commit("system/SET_SUB_NAV", item.root.children);
+        this.$router.push({
+          path: item.link,
+          query: item.query || {},
+        });
+      }
+    },
+
+    updateCurrent(id) {
+      // console.log('updateCurrent', id);
+      this.currentNav = id;
+      this.preActive = "";
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.navbar {
+  background: #fff;
+  font-family: "Microsoft YaHei";
+}
+
+.gs-header-nav {
+  .navbar-nav-wrap {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    flex-basis: 100%;
+    align-items: center;
+  }
+
+  .header-btn {
+    display: flex;
+    align-items: center;
+    margin-left: 15px;
+  }
+
+  // 导航item样式
+  .gs-nav-item.nav-item {
+    &.active > a,
+    a.show {
+      color: #f26335;
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: 15px;
+        right: 15px;
+        bottom: 0;
+        height: 3px;
+        border-radius: 1.5px;
+        background-color: #f26335;
+      }
+    }
+
+    > a {
+      display: inline-block;
+      position: relative;
+      font-size: 14px;
+      font-weight: 600;
+      color: #002c6c;
+      padding: 10px 15px;
+      // margin: 0 16px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: #e5f0fc;
+      }
+    }
+  }
+
+  .navbar-toggler {
+    padding: 0.5rem 0.5rem;
+  }
+
+  .navbar-toggler:focus {
+    box-shadow: none;
+  }
+
+  .navbar-toggler .navbar-toggler-text {
+    color: #21325b;
+  }
+
+  .navbar-toggler .navbar-toggler-default {
+    display: flex;
+  }
+
+  .navbar-toggler .navbar-toggler-toggled {
+    display: none;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-default {
+    display: none;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-toggled {
+    display: flex;
+  }
+
+  .navbar-topbar .navbar-toggler {
+    margin-left: 0;
+    font-size: 0.875rem;
+  }
+
+  .link-item {
+    color: #00799e;
+  }
+}
+
+@media (max-width: 1400px) {
+  //导航item边距
+  // .gs-header-nav .gs-nav-item.nav-item {
+  //   > a {
+  //     margin: 0 8px;
+  //   }
+  // }
+}
+
+@media (max-width: 1200px) {
+  //导航item边距
+  .gs-header-nav .gs-nav-item.nav-item {
+    > a {
+      padding: 10px 10px;
+
+      &.show::after {
+        left: 10px;
+        right: 10px;
+      }
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .gs-header-nav .move-btn {
+    position: absolute;
+    top: 16px;
+    right: 0;
+  }
+
+  .gs-header-nav .gs-nav-item.nav-item {
+    position: relative;
+    > a {
+      width: 100%;
+    }
+    &.active > a,
+    a.show {
+      color: #f26335;
+
+      &::after {
+        content: "";
+        background-color: transparent;
+      }
+    }
+  }
+
+  .gs-header-nav .gs-nav-item.nav-item.active .mobile-menu-down {
+    transform: rotate(180deg);
+  }
+
+  .gs-header-nav .mobile-menu-down {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 41px;
+    transition: 0.3s;
+  }
+
+  .gs-header-nav .dropdown-menu.gs-nav-dropdown {
+    box-shadow: none;
+    padding: 20px 30px;
+
+    .row.title {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .navbar-expand-lg.navbar-end .navbar-absolute-top-scroller,
+  .navbar-expand-lg.navbar-end .navbar-sticky-top-scroller {
+    margin-left: auto;
+  }
+  .gs-header-nav .mobile-menu-down {
+    display: none;
+  }
+}
+</style>

src/components/layout/englishHeader/mock.js

+import { uuid } from "../../../utils/utils";
+export const nav = [
+    {
+        id: "0",
+        name: "Home",
+        index: 0,
+        link: "/EnglishHome",
+        children: [],
+    },
+    {
+        id: "1",
+        name: "About us",
+        index: 1,
+        link: "/Org",
+        rowNum: 4,
+        children: [
+            {
+                id: uuid("gs_nav"),
+                name: "About us",
+                nameInHeaderNav: "About us",
+                index: 0,
+                link: "/Org",
+                style: { flex: '1 0 auto' },
+                breadcrumb: [{ name: "About us", path: "/Org" }, { name: "Introduction" }],
+                children: [
+                    {
+                        id: uuid("gs_nav"),
+                        name: "Introduction",
+                        index: 0,
+                        link: "/SecondaryMenu/Introduction",
+                        style: { paddingRight: '160px' },
+                        breadcrumb: [
+                            { name: "About us", path: "/Org" },
+                            { name: "Introduction" },
+                        ],
+                    },
+                    {
+                        id: uuid("gs_nav"),
+                        name: "Structure",
+                        index: 0,
+                        link: "/SecondaryMenu/Structure",
+                        breadcrumb: [
+                            { name: "About us", path: "/Org" },
+                            { name: "Structure" },
+                        ],
+                    },
+                    {
+                        id: uuid("gs_nav"),
+                        name: "Contact Us",
+                        index: 0,
+                        link: "/ContactUs",
+                        breadcrumb: [
+                            { name: "About us", path: "/Org" },
+                            { name: "ContactUs" },
+                        ],
+                    }
+                ],
+            },
+        ],
+    },
+];

src/router/index.js

@@ -1377,6 +1377,11 @@ const routes = [{
         name: "InnovativeSectors",
         component: () => import("@/views/English/SecondaryMenu/InnovativeSectors"),
       },
+      {
+        path: "/SecondaryMenu/eLearning",
+        name: "eLearning",
+        component: () => import("@/views/English/SecondaryMenu/eLearning"),
+      }
     ]
   }
 

src/views/English/Home/index.vue

@@ -68,6 +68,6 @@ export default {
   },
 };
 </script>
-<style lang="scss" >
+<style lang="scss" scoped>
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/eLearning.vue

+<template>
+  <div class="container site-content flush-outside">
+    <div class="container">
+      <section>
+        <div class="row">
+          <div class="col-md-12">
+            <ul class="nav navbar-nav mm-float1">
+              <ol class="breadcrumb" style="background-color: #f4f4f4">
+                <li>
+                  <a href="/GS1ChinaEN/GS1ChinaENTest/index.aspx">Home</a>
+                </li>
+                <li class="active">e-Learning</li>
+              </ol>
+            </ul>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h1>e-Learning</h1>
+        <div class="row">
+          <div class="col-sm-9">
+            <p class="small" style="padding-top: 20px; line-height: 30px">
+              GS1 LEARN is the home of GS1 China complete programme of eLearning
+              and classroom training courses for staff of GS1's 112 Member
+              Organizations around the world.
+            </p>
+            <p class="small" style="padding-top: 20px; line-height: 30px">
+              GS1 LEARN is a web-based learning tool ideal for those who cannot
+              spare the time to travel to a more in-depth training course. You
+              can learn at your own pace as you work through the seven online
+              modules showing how the GS1 System brings benefits at all stages
+              of the supply chain, from the manufacturer to the consumer. For
+              more information about eLearning please contact.
+            </p>
+            <p class="small" style="padding-top: 20px; line-height: 30px">
+              Their curricula are developed and maintained by faculties composed
+              of Global Office and Member Organisation experts, solution
+              providers, and strategic partners.
+            </p>
+            <p class="small" style="padding-top: 20px; line-height: 30px">
+              If you are a return visitor and already have a User ID and
+              Password,
+              <a href="http://learn.gs1.org/" target="_blank">click here</a>.
+            </p>
+            <p class="small" style="padding-top: 20px; line-height: 30px">
+              If you are a first time visitor,
+              <a href="http://learn.gs1.org/" target="_blank">click here</a> to
+              register.
+            </p>
+            <p class="small" style="padding-top: 20px; line-height: 30px">
+              <a href="http://learn.gs1.org/" target="_blank"
+                >Demo of e-Learning</a
+              >
+            </p>
+            <a href="http://learn.gs1.org/" target="_blank"
+              ><img
+                class="img-responsive center-block"
+                src="@/assets/image/english/prntscreen_course.gif"
+                alt=""
+            /></a>
+          </div>
+          <div class="col-sm-3" style="padding-top: 15px">
+            <div class="content-module-container">
+              <h4></h4>
+              <div
+                class="content-module-wrapper"
+                style="border-top: 7px solid #7ac143"
+              ></div>
+              <div class="content-module content-module-padding">
+                <h4>Tools</h4>
+                <p class="small">
+                  <a
+                    href="http://www.gs1.org/check-digit-calculator"
+                    target="_blank"
+                    >Check digit calculator</a
+                  ><br />
+                  Calculate correct check digit for barcodes.
+                </p>
+                <p class="small">
+                  <a href="http://gepir.gs1.org" target="_blank"
+                    >Who owns this barcode?</a
+                  ><br />
+                  Find companies linked to GS1 barcode numbers.
+                </p>
+              </div>
+              <div class="content-module content-module-padding">
+                <h4>Standards</h4>
+                <p class="small">
+                  <a
+                    href="http://www.gs1.org/how-gs1-standards-work"
+                    target="_blank"
+                    >See how GS1 standards work</a
+                  ><br />
+                  GS1 standards help you single out what really matters.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>

src/views/English/blankMain.vue

 <template>
   <div class="toolkit" style="background-color: #f4f4f4">
+    <Header></Header>
     <router-view></router-view>
     <Footer></Footer>
   </div>
 </template>
 <script>
+import Header from '@/components/layout/englishHeader'
 import Footer from "@/components/layout/englishFoor.vue"
 export default {
   components: {
     Footer,
+    Header
   },
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import "@/assets/css/english";
 </style>
\ No newline at end of file