liwj提交

src/assets/css/english.scss

@@ -7,7 +7,7 @@ body {
   background-color: #ffffff;
 }
 
-body {
+.toolkit {
   font-family: "Gotham Office", "Arial", "Gotham SSm A", "Gotham SSm B", Verdana, sans-serif;
 }
 
@@ -368,6 +368,129 @@ small,
   margin-bottom: 30px;
 }
 
+.carousel-inner {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.toolkit .carousel-inner>.item {
+  height: 100%;
+  width: 100%;
+  padding: 40px;
+}
+
+.carousel-inner .item {
+  position: relative;
+  -webkit-transition: 0.6s ease-in-out left;
+  transition: 0.6s ease-in-out left;
+}
+
+.pull-right {
+  float: right !important;
+}
+
+.toolkit .carousel-inner .item .carousel-glyph {
+  width: auto;
+  height: 100%;
+}
+
+.toolkit .carousel-inner .item h1 {
+  color: #fff;
+}
+
+.toolkit .carousel-inner .item p,
+.toolkit .carousel-inner .item h1 {
+  display: block;
+  margin-top: 0;
+}
+
+.toolkit .carousel p {
+  color: #002c6c;
+}
+
+.toolkit p.large {
+  font-size: 18px;
+  line-height: 26px;
+}
+
+.toolkit .btn-margin {
+  margin-top: 15px;
+  margin-right: 15px;
+}
+
+.toolkit .bg-peach {
+  background-color: #fbb034 !important;
+}
+
+.toolkit .bg-purple {
+  background-color: #bf83b9 !important;
+}
+
+.toolkit .bg-lime {
+  background-color: #c1d82f !important;
+}
+
+.toolkit .bg-sky {
+  background-color: #00b6de !important;
+}
+
+.toolkit a.btn-primary,
+.toolkit button.btn-primary,
+.toolkit *.btn-primary {
+  background-color: #f26334;
+}
+
+.toolkit .bg-blue {
+  background-color: #002c6c !important;
+}
+
+.toolkit .btn-primary,
+.toolkit .btn-secondary {
+  padding: 5px 30px 5px;
+}
+
+.toolkit .carousel-inner p {
+  color: #002c6c;
+}
+
+.toolkit {
+  .slick-arrow {
+    z-index: 9;
+    display: flex;
+    align-items: center;
+
+    &.slick-prev {
+      left: 0;
+
+      &::before {
+        background: url("~@/assets/image/home/prevArrow-hover.png") no-repeat;
+        background-size: 100% 100%;
+        content: "";
+      }
+
+    }
+
+    &.slick-next {
+      right: 0;
+      display: flex;
+      justify-content: flex-end;
+
+      &::before {
+        background: url("~@/assets/image/home/nextArrow-hover.png") no-repeat;
+        background-size: 100% 100%;
+        content: "";
+      }
+    }
+
+    img {
+      vertical-align: middle;
+    }
+  }
+
+  
+}
+
 
 @media (min-width: 768px) {
 
@@ -440,6 +563,19 @@ small,
   .container {
     width: 970px;
   }
+
+  .banner {
+    height: 400px;
+    .slick-arrow {
+      &.slick-prev {
+        left: 38%;
+      }
+
+      &.slick-next {
+        right: 38%;
+      }
+    }
+  }
 }
 
 @media (min-width: 1200px) {

src/assets/css/englishComm.scss

+
+.englishToolkit {
+    .slick-dots {
+      bottom: 25px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 20px;
+  
+      li {
+        width: 10px;
+        height: 10px;
+  
+        &.slick-active {
+          .custom-dot {
+            background: #ffffff;
+            opacity: 1;
+          }
+        }
+  
+        .custom-dot {
+          border-radius: 50%;
+          width: 100%;
+          height: 100%;
+          background: #fff;
+          line-height: 1;
+          padding: 0;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
\ No newline at end of file

src/assets/css/main.scss

@@ -7,4 +7,5 @@
 @import "../../../node_modules/bootstrap/scss/functions";
 @import "../../../node_modules/bootstrap/scss/variables";
 @import "../../../node_modules/bootstrap/scss/mixins";
+@import './englishComm.scss';
 // @import "../../../node_modules/bootstrap/scss/bootstrap";

src/components/layout/englishHeader/index.vue

@@ -137,6 +137,7 @@ export default {
     },
 
     handleNavClick(nav) {
+      // debugger
       if (!nav.children || nav.children.length === 0) {
         this.currentNav = nav.id;
         this.preActive = "";

src/components/layout/englishHeader/mock.js

@@ -191,6 +191,7 @@ export const nav = [
         name: "Events",
         index: 4,
         link: "http://www.gs1.org/news-events",
+        linkFlag:1
     },
     {
         id: "5",

src/router/index.js

@@ -1397,6 +1397,11 @@ const routes = [{
         path: "/IndustryPromotion/Healthcare",
         name: "Healthcare",
         component: () => import("@/views/English/TertiaryMenu/IndustryPromotion/Healthcare"),
+      },
+      {
+        path: "/IndustryPromotion/Others",
+        name: "Others",
+        component: () => import("@/views/English/TertiaryMenu/IndustryPromotion/Others"),
       }
     ]
   }

src/views/English/Home/components/trodList.vue

@@ -69,7 +69,11 @@
   </div>
 </template>
 <script>
+import VueSlickCarousel from "vue-slick-carousel";
+import "vue-slick-carousel/dist/vue-slick-carousel.css";
+import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
 export default {
+  components: { VueSlickCarousel},
   data () {
     return {
 

src/views/English/Home/index.vue

 <template>
-  <div class="toolkit">
+  <div class="toolkit englishToolkit">
     <!-- Banner图 -->
     <div class="banner">
       <VueSlickCarousel v-bind="bannerSettings">
-        <div class="carousel-container full-width">
-          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
-            <div class="container">
-              <ol class="carousel-indicators">
-                <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
-                <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
-                <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
-                <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
-              </ol>
-            </div>
-            <div class="carousel-inner" style="height: 400px">
+        <div class="carousel-inner">
           <div class="item bg-peach next left">
             <div class="container">
-                  <img class="pull-right carousel-glyph" src="@/assets/image/english/GS1-China.jpg"
-                    style="margin-top: -40px" alt="Placeholder">
-                  <h1>
-                    About GS1 China</h1>
+              <img
+                class="pull-right carousel-glyph"
+                src="@/assets/image/english/GS1-China.jpg"
+                style="margin-top: -40px"
+                alt="Placeholder"
+              />
+              <h1>About GS1 China</h1>
               <p class="large">
-                    GS1 China, founded in 1988 under the authorization of the State Council of the People’s
-                    Republic of China as an affiliate of General Administration of State Administration for
-                    Market Regulation, is in charge of organizing, coordinating and
-                    administrating article numbering and Auto-ID work throughout China.</p>
-                  <a href="/GS1ChinaEN/GS1ChinaENTest/introduction.aspx">
+                GS1 China, founded in 1988 under the authorization of the State
+                Council of the People’s Republic of China as an affiliate of
+                General Administration of State Administration for Market
+                Regulation, is in charge of organizing, coordinating and
+                administrating article numbering and Auto-ID work throughout
+                China.
+              </p>
+              <a @click="handleGo('SecondaryMenu/Introduction')">
                 <button type="button" class="btn-primary btn-margin bg-blue">
-                      More About GS1 China</button></a>
+                  More About GS1 China
+                </button></a
+              >
             </div>
           </div>
+        </div>
+        <div class="carousel-inner">
           <div class="item bg-purple">
             <div class="container">
-                  <img class="pull-right carousel-glyph" src="@/assets/image/english/carousel-1.jpg"
-                    style="margin-top: -40px" alt="Placeholder">
-                  <h1>
-                    About GS1</h1>
+              <img
+                class="pull-right carousel-glyph"
+                src="@/assets/image/english/carousel-1.jpg"
+                style="margin-top: -40px"
+                alt="Placeholder"
+              />
+              <h1>About GS1</h1>
               <p class="large">
-                    GS1 believes in the power of standards to transform the way we work and live. We
-                    empower business to grow and to improve efficiency, safety, security and sustainability
-                    .</p>
+                GS1 believes in the power of standards to transform the way we
+                work and live. We empower business to grow and to improve
+                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></a>
+                  More About GS1
+                </button></a
+              >
             </div>
           </div>
+        </div>
+        <div class="carousel-inner">
           <div class="item bg-lime">
             <div class="container">
-                  <img class="pull-right carousel-glyph" src="@/assets/image/english/training.jpg"
-                    style="margin-top: -40px" alt="Placeholder">
-                  <h1>
-                    Training</h1>
+              <img
+                class="pull-right carousel-glyph"
+                src="@/assets/image/english/training.jpg"
+                style="margin-top: -40px"
+                alt="Placeholder"
+              />
+              <h1>Training</h1>
               <p class="large">
-                    GS1 offers a wide range of training courses to help you use our standards. Take
-                    a look at some of our online resources to get started:
+                GS1 offers a wide range of training courses to help you use our
+                standards. Take a look at some of our online resources to get
+                started:
               </p>
-                  <li style="color: #002c6c; font-size: 18px; line-height: 30px">Intro to Transport and
-                    Logistics</li>
-                  <li style="color: #002c6c; font-size: 18px; line-height: 30px">Intro to Traceability</li>
+              <li style="color: #002c6c; font-size: 18px; line-height: 30px">
+                Intro to Transport and Logistics
+              </li>
+              <li style="color: #002c6c; font-size: 18px; line-height: 30px">
+                Intro to Traceability
+              </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></a>
+                  View More
+                </button></a
+              >
+            </div>
           </div>
         </div>
-              <div class="item bg-sky active left">
+        <div class="carousel-inner">
+          <div class="item bg-sky left">
             <div class="container">
-                  <img class="pull-right carousel-glyph" src="@/assets/image/english/local.jpg"
-                    style="margin-top: -40px" alt="Placeholder">
-                  <h1>
-                    Contact GS1 local offices</h1>
+              <img
+                class="pull-right carousel-glyph"
+                src="@/assets/image/english/local.jpg"
+                style="margin-top: -40px"
+                alt="Placeholder"
+              />
+              <h1>Contact GS1 local offices</h1>
               <p class="large">
-                    GS1 has local offices in over 100 countries. Our local offices handle all enquiries
-                    related to GS1 standards.</p>
-                  <li style="color: #002c6c; font-size: 18px; line-height: 30px">Europe</li>
-                  <li style="color: #002c6c; font-size: 18px; line-height: 30px">Middle East and Africa</li>
-                  <li style="color: #002c6c; font-size: 18px; line-height: 30px">Americas</li>
-                  <li style="color: #002c6c; font-size: 18px; line-height: 30px">Asia Pacific</li>
+                GS1 has local offices in over 100 countries. Our local offices
+                handle all enquiries related to GS1 standards.
+              </p>
+              <li style="color: #002c6c; font-size: 18px; line-height: 30px">
+                Europe
+              </li>
+              <li style="color: #002c6c; font-size: 18px; line-height: 30px">
+                Middle East and Africa
+              </li>
+              <li style="color: #002c6c; font-size: 18px; line-height: 30px">
+                Americas
+              </li>
+              <li style="color: #002c6c; font-size: 18px; line-height: 30px">
+                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></a>
-                </div>
-              </div>
-            </div>
-            <div class="container">
-              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
-                <span class="glyphicon icon-arrow_left"></span></a><a class="right carousel-control"
-                href="#carousel-example-generic" data-slide="next"><span class="glyphicon icon-arrow_right">
-                </span></a>
+                  View More
+                </button></a
+              >
             </div>
           </div>
         </div>
+        <template #prevArrow>
+          <div class="custom-arrow"></div>
+        </template>
+        <template #customPaging>
+          <div class="custom-dot"></div>
+        </template>
+        <template #nextArrow>
+          <div class="custom-arrow"></div>
+        </template>
       </VueSlickCarousel>
     </div>
 
@@ -110,12 +144,12 @@ import trodList from "./components/trodList";
 import columnFourList from "./components/columnFourList";
 export default {
   components: { VueSlickCarousel, columnFourList, trodList },
-  data () {
+  data() {
     return {
       banner: [], // 首页大轮播图
       bannerSettings: {
         arrows: true,
-        autoplay: false,
+        autoplay: true,
         autoplaySpeed: 4000,
         dots: true,
         centerMode: true,
@@ -125,8 +159,45 @@ export default {
       },
     };
   },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
 };
 </script>
-<style scoped lang="scss" >
+<style scoped lang="scss">
 @import "@/assets/css/english";
+.carousel-inner {
+  height: 400px;
+}
+.banner {
+  position: relative;
+}
+
+.slick-arrow {
+  margin: 0 10px;
+
+  &.slick-prev {
+    top: auto;
+    bottom: 25px;
+    transform: translate(0, 0);
+
+    &::before {
+      width: 10px;
+      height: 18px;
+    }
+  }
+
+  &.slick-next {
+    top: auto;
+    bottom: 25px;
+    transform: translate(0, 0);
+
+    &::before {
+      width: 10px;
+      height: 18px;
+    }
+  }
+}
 </style>

src/views/English/SecondaryMenu/Barcode.vue

@@ -6,7 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Commodity Barcode</li>
               </ol>
             </ul>
@@ -98,6 +98,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/ContactUs.vue

@@ -6,7 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Contact Us</li>
               </ol>
             </ul>
@@ -61,6 +61,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/ECommerce.vue

@@ -6,7 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">ECommerce</li>
               </ol>
             </ul>
@@ -86,6 +86,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/EPC.vue

@@ -6,7 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">EPC</li>
               </ol>
             </ul>
@@ -74,6 +74,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/GDSN.vue

@@ -6,7 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">GDSN</li>
               </ol>
             </ul>
@@ -81,6 +81,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/HanXinCode.vue

@@ -6,7 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Han Xin Code</li>
               </ol>
             </ul>
@@ -160,6 +160,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/InnovativeSectors.vue

@@ -7,7 +7,7 @@
           <div class="col-xs-12 col-md-12 section-spacing" style="margin-top: 0px; padding-bottom: 0px">
             <ul class="nav navbar-nav mm-float1">
               <ol class="breadcrumb">
-                <li><a href="/GS1ChinaEN/GS1ChinaENTest/index.aspx">Home</a></li>
+                <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Innovative Sectors</li>
               </ol>
             </ul>
@@ -146,6 +146,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/Introduction.vue

@@ -6,7 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Introduction</li>
               </ol>
             </ul>
@@ -67,6 +67,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/Structure.vue

@@ -6,7 +6,9 @@
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
               <ol class="breadcrumb">
-                <li><a href="/GS1ChinaEN/GS1ChinaENTest/index.aspx">Home</a></li>
+                <li>
+                  <a @click="handleGo('/EnglishHome')">Home</a>
+                </li>
                 <li class="active">Structure</li>
               </ol>
             </ul>
@@ -17,27 +19,46 @@
         <div class="row">
           <div class="col-sm-9">
             <h1>Structure</h1>
-            <img src="@/assets/image/english/structure.jpg" alt="" class="img-responsive">
+            <img
+              src="@/assets/image/english/structure.jpg"
+              alt=""
+              class="img-responsive"
+            />
           </div>
-          <div class="col-sm-3" style="padding-top:85px">
+          <div class="col-sm-3" style="padding-top: 85px">
             <div class="content-module-container">
-              <h4> </h4>
-              <div class="content-module-wrapper" style="border-top: 7px solid #7ac143">
-              </div>
+              <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>
+                  <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>
+                  <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>
+                  <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>
@@ -46,6 +67,18 @@
     </div>
   </div>
 </template>
-<style scoped lang="scss" >
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/eLearning.vue

@@ -6,9 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">e-Learning</li>
               </ol>
             </ul>
@@ -101,6 +99,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/SecondaryMenu/industryPromotion.vue

@@ -6,7 +6,7 @@
           <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><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Industry Promotion</li>
               </ol>
             </ul>
@@ -52,7 +52,7 @@
                 <h4>
                   Healthcare</h4>
                 <p class="small">
-                  <a href="/GS1ChinaEN/GS1ChinaENTest/healthcare.aspx">Read More &gt;</a>
+                  <a @click="handleGo('/IndustryPromotion/Healthcare')">Read More &gt;</a>
                 </p>
               </div>
             </div>
@@ -68,7 +68,7 @@
                 <h4>
                   Others</h4>
                 <p class="small">
-                  <a href="/GS1ChinaEN/GS1ChinaENTest/others.aspx">Read More &gt;</a>
+                  <a @click="handleGo('/IndustryPromotion/Others')">Read More &gt;</a>
                 </p>
               </div>
             </div>

src/views/English/TertiaryMenu/IndustryPromotion/FoodSafety.vue

@@ -6,11 +6,9 @@
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
               <ol class="breadcrumb" style="background-color: #f4f4f4">
+                <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li>
-                  <a href="/GS1ChinaEN/GS1ChinaENTest/index.aspx">Home</a>
-                </li>
-                <li>
-                  <a href="/GS1ChinaEN/GS1ChinaENTest/promotion.aspx"
+                  <a @click="handleGo('/SecondaryMenu/industryPromotion')"
                     >Industry Promotion</a
                   >
                 </li>
@@ -72,6 +70,18 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
 </style>

src/views/English/TertiaryMenu/IndustryPromotion/Healthcare.vue

@@ -5,9 +5,13 @@
         <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><a href="/GS1ChinaEN/GS1ChinaENTest/promotion.aspx">Industry Promotion</a></li>
+              <ol class="breadcrumb" style="background-color: #f4f4f4">
+                <li><a @click="handleGo('/EnglishHome')">Home</a></li>
+                <li>
+                  <a @click="handleGo('/SecondaryMenu/industryPromotion')"
+                    >Industry Promotion</a
+                  >
+                </li>
                 <li class="active">Healthcare</li>
               </ol>
             </ul>
@@ -19,26 +23,53 @@
           <div class="col-sm-9">
             <h1>Healthcare</h1>
             <p class="small" style="padding-top: 20px">
-              In order to address to the domestic demand of healthcare safety, GS1 China strengthened and broadened the
-              use of barcode technology in the healthcare sector in 2007, and established Healthcare Workgroup in 2008
-              consists of staff from 20 branches all around China. There are several projects including “Implantable
-              medical device traceability in hospital”, “Beijing cosmetics market supervision system” and “Product ID
-              for Chinese traditional medicine” had been carried out by the branches organized.</p>
+              In order to address to the domestic demand of healthcare safety,
+              GS1 China strengthened and broadened the use of barcode technology
+              in the healthcare sector in 2007, and established Healthcare
+              Workgroup in 2008 consists of staff from 20 branches all around
+              China. There are several projects including “Implantable medical
+              device traceability in hospital”, “Beijing cosmetics market
+              supervision system” and “Product ID for Chinese traditional
+              medicine” had been carried out by the branches organized.
+            </p>
             <p class="small" style="padding-top: 20px">
-              GS1 China offers technical support for regulators in healthcare sector to develop standards and
-              regulations, and help all stakeholders in the healthcare supply chain to gain more efficiency and safety
-              through adopting GS1 system. GS1 China has also published application guide, reference book and
-              newsletters, all of them can be found at website:<a href=" http://healthcare.ancc.org.cn/"
-                target="_blank"> http://healthcare.ancc.org.cn/ </a></p>
+              GS1 China offers technical support for regulators in healthcare
+              sector to develop standards and regulations, and help all
+              stakeholders in the healthcare supply chain to gain more
+              efficiency and safety through adopting GS1 system. GS1 China has
+              also published application guide, reference book and newsletters,
+              all of them can be found at website:<a
+                href=" http://healthcare.ancc.org.cn/"
+                target="_blank"
+              >
+                http://healthcare.ancc.org.cn/
+              </a>
+            </p>
           </div>
-          <div class="col-sm-3" style="padding-top:85px">
-            <img class="img-responsive center-block" src="@/assets/image/english/HC-2.jpg" alt="Healthcare">
+          <div class="col-sm-3" style="padding-top: 85px">
+            <img
+              class="img-responsive center-block"
+              src="@/assets/image/english/HC-2.jpg"
+              alt="Healthcare"
+            />
           </div>
         </div>
       </section>
     </div>
   </div>
 </template>
-<style scoped lang="scss" >
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
 @import "@/assets/css/english";
 </style>

src/views/English/TertiaryMenu/IndustryPromotion/Others.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 @click="handleGo('/EnglishHome')">Home</a></li>
+                <li>
+                  <a @click="handleGo('/SecondaryMenu/industryPromotion')"
+                    >Industry Promotion</a
+                  >
+                </li>
+                <li class="active">Others</li>
+              </ol>
+            </ul>
+          </div>
+        </div>
+      </section>
+      <section>
+        <div class="row">
+          <div class="col-sm-9">
+            <h1>Others</h1>
+            <p class="small" style="padding-top: 20px">
+              In 2007, due to the domestic and international concern, GS1 China
+              chose to greatly advance the application of barcode technology in
+              areas such as food and healthcare, while strengthening the
+              promotion of barcode in sectors such as:
+            </p>
+            <h4 style="color: #f16333; border-bottom: none">
+              Logistics Distribution:
+            </h4>
+            <p class="small" style="padding-top: 10px">
+              The GS1 system was adopted in international freight and logistics
+              distribution enterprises in Shenzhen, Zhejiang, etc.
+            </p>
+            <h4 style="color: #f16333; border-bottom: none">Apparel:</h4>
+            <p class="small" style="padding-top: 10px">
+              The demonstrative application of barcode identification technology
+              in apparel industry was completed in Shanghai, Wuhan, etc.
+            </p>
+            <h4 style="color: #f16333; border-bottom: none">
+              Construction Materials and Furniture:
+            </h4>
+            <p class="small" style="padding-top: 10px">
+              Pilots were successfully set up to apply GS1 system to
+              construction materials and furniture in Shanghai, Guangdong, etc.
+            </p>
+            <h4 style="color: #f16333; border-bottom: none">
+              Military Industry:
+            </h4>
+            <p class="small" style="padding-top: 10px">
+              GS1 system was adopted in military materials catalog system and
+              visible system for logistics resources and tools in Beijing,
+              Shenyang etc.
+            </p>
+            <h4 style="color: #f16333; border-bottom: none">Stationery:</h4>
+            <p class="small" style="padding-top: 10px">
+              A pilot was established in Ningbo.
+            </p>
+            <h4 style="color: #f16333; border-bottom: none">
+              Special Equipment:
+            </h4>
+            <p class="small" style="padding-top: 10px">
+              The application of article identification on special equipment
+              such as liquefied gas containers was created by GS1 China in
+              Qingdao, Yantai, etc.
+            </p>
+          </div>
+          <div class="col-sm-3" style="padding-top: 85px">
+            <img
+              class="img-responsive center-block"
+              src="@/assets/image/english/TL-2.png"
+              alt="Food satety"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    handleGo(val) {
+      this.$router.push({ path: val });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "@/assets/css/english";
+</style>