liwj提交

src/assets/css/english.scss

@@ -160,6 +160,7 @@ summary {
   margin-left: auto;
   padding-left: 15px;
   padding-right: 15px;
+  max-width: 100%;
 }
 
 .toolkit .content-module-container {
@@ -297,7 +298,7 @@ h4,
   padding: 0;
   margin-bottom: 0;
   list-style: none;
-  background-color: #fff;
+  // background-color: #fff;
   border-radius: 0;
 }
 
@@ -564,8 +565,13 @@ small,
     width: 970px;
   }
 
+  .toolkit .carousel-inner .item .carousel-glyph {
+    display: none;
+  }
+
   .banner {
     height: 400px;
+
     .slick-arrow {
       &.slick-prev {
         left: 38%;

src/assets/css/englishComm.scss

 .englishToolkit {
-  .arousel-glyph {
+  .carousel-glyph {
     margin-top: -40px;
   }
 
@@ -33,3 +33,14 @@
     }
   }
 }
+
+.leftCon {
+  position: relative;
+
+  .slick-dots {
+    background: rgba(0, 0, 0, 0.15);
+    height: 42px;
+    line-height: 42px;
+    bottom: -20px !important;
+  }
+}
\ No newline at end of file

src/components/layout/englishHeader/index.vue

@@ -4,11 +4,7 @@
       <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"
-          />
+          <img class="navbar-brand-logo" src="../../../assets/image/head/logo.png" alt="Logo" />
         </a>
         <!-- End Default Logo -->
 
@@ -18,36 +14,18 @@
             <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
-                  >
+                <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 }"
-                >
+                <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>
@@ -78,7 +56,7 @@ import { deepFindBreadcrumb } from "@/utils/utils";
 
 export default {
   components: { HeaderBtn, HeaderDropdown },
-  data() {
+  data () {
     return {
       // 点击事件来自头部导航
       fromNav: false,
@@ -89,7 +67,7 @@ export default {
       preActive: "",
     };
   },
-  created() {
+  created () {
     // 监听路由 处理nav高亮 和面包屑 和subnav
     nav.forEach((nav_) => {
       if (this.$route.path.startsWith(nav_.link)) {
@@ -119,14 +97,14 @@ export default {
       }
     });
   },
-  mounted() {
+  mounted () {
     window.addEventListener("click", this.handleWindowClick);
   },
-  beforeDestroy() {
+  beforeDestroy () {
     window.removeEventListener("click", this.handleWindowClick);
   },
   methods: {
-    handleWindowClick() {
+    handleWindowClick () {
       // console.log('handleWindowClick', this.fromNav, this.preActive);
       if (this.preActive && !this.fromNav) {
         this.currentNav = this.preActive;
@@ -136,9 +114,10 @@ export default {
       this.fromDropdown = false;
     },
 
-    handleNavClick(nav) {
-      // debugger
-      if (!nav.children || nav.children.length === 0) {
+    handleNavClick (nav) {
+      if (nav.linkFlag == 1) {
+        window.open(nav.link);
+      } else if (!nav.children || nav.children.length === 0) {
         this.currentNav = nav.id;
         this.preActive = "";
         this.$router.push({ path: nav.link });
@@ -162,7 +141,7 @@ export default {
       }
     },
 
-    handleItemClick(item) {
+    handleItemClick (item) {
       this.fromDropdown = true;
       if (item.link.startsWith("http")) {
         window.open(item.link);
@@ -179,7 +158,7 @@ export default {
       }
     },
 
-    updateCurrent(id) {
+    updateCurrent (id) {
       // console.log('updateCurrent', id);
       this.currentNav = id;
       this.preActive = "";

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

@@ -6,22 +6,56 @@
           <h4></h4>
           <div class="content-module-wrapper" style="border-top: 7px solid #c1d82f"></div>
 
+          <div class="carousel-inner leftCon" role="listbox" style="height: 525px">
+            <VueSlickCarousel v-bind="bannerSettings">
+              <div class="item active" role="option" aria-selected="true" tabindex="0" style="padding: 0px">
+                <blockquote class="typography-blockquote"
+                  style="position: relative; border-left: 0;
+                                                margin: 0px 0; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; font-size: 24px;
+                                                color: #002c6c; margin: 0 auto; width: 100%; padding: 0px; border-bottom: none">
                   <div class="row content">
-            <div class="col-xs-12"></div>
+                    <div class="col-xs-12">
+                      <img src="@/assets/image/english/1.jpg" class="img-responsive"></div>
                     <div class="col-xs-12">
                       <p style="line-height: 28px; padding: 22px; font-size: 14px">
-                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.
+                        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>
                     </div>
                   </div>
+                </blockquote>
+              </div>
+              <div class="item" role="option" aria-selected="false" tabindex="-1" style="padding: 0px">
+                <blockquote class="typography-blockquote"
+                  style="position: relative; border-left: 0;
+                                                margin: 0px 0; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; font-size: 24px;
+                                                color: #002c6c; margin: 0 auto; width: 100%; padding: 0px; border-bottom: none">
+                  <div class="row content">
+                    <div class="col-xs-12" style="float: none">
+                      <img src="@/assets/image/english/2.jpg" class="img-responsive">
+                      <div class="col-xs-12">
+                      </div>
+                      <p style="line-height: 28px; padding: 22px; font-size: 14px">
+                        Barcode applications have been extended to the food safety area with great efforts
+                        and a number of food safety tracking and tracing system demonstrations have been
+                        established on a range of products such as Shandong seafood, Xinjiang cantaloupe,
+                        Yunnan pork, Sichuan tea, and the Hetian chicken of Fujian, this consolidates the
+                        critical role the barcode plays in our national food safety tracking and tracing
+                        system
+                      </p>
+                    </div>
+                  </div>
+                </blockquote>
+              </div>
+              <template #customPaging>
+                <div class="custom-dot"></div>
+              </template>
+            </VueSlickCarousel>
+          </div>
         </div>
       </div>
       <div class="col-xs-12 col-md-3 section-spacing">
@@ -73,10 +107,19 @@ 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},
+  components: { VueSlickCarousel },
   data () {
     return {
-
+      bannerSettings: {
+        arrows: true,
+        autoplay: false,
+        autoplaySpeed: 4000,
+        dots: true,
+        centerMode: true,
+        centerPadding: "0% 0% 0%",
+        slidesToShow: 1,
+        slidesToScroll: 1,
+      },
     }
   },
   methods: {

src/views/English/Home/index.vue

@@ -19,7 +19,7 @@
               </p>
               <a @click="handleGo('SecondaryMenu/Introduction')">
                 <button type="button" class="btn-primary btn-margin bg-blue">
-                  More About GS1 China0000
+                  More About GS1 China
                 </button></a>
             </div>
           </div>

src/views/English/SecondaryMenu/Barcode.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color:#f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Commodity Barcode</li>
               </ol>
@@ -100,11 +100,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

src/views/English/SecondaryMenu/ContactUs.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color: #f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Contact Us</li>
               </ol>
@@ -27,11 +27,12 @@
                   <bm-label :content="map.label" :position="map.center" :labelStyle="{ borderColor: 'black' }"
                     :offset="{ width: -48 }" @click="lookDetail" />
                   <bm-info-window :position="map.center" :show="map.show" @close="infoWindowClose">
-                    <div>中国物品编码中心</div>
-                    <div>
-                      地址：北京市东城区安定门外大街138号皇城国际大厦B座3-6层
+                    <div class="iw_poi_title">GS1 China</div>
+                    <div class="iw_poi_content">
+                      3-6 F, Wing B, Imperial International Bldg., No.138 Andingmenwai
+                      Street, Dongcheng District, Beijing 100011, P.R.China
                     </div>
-                    <div>邮编：100011</div>
+                    <!-- <div>邮编：100011</div> -->
                   </bm-info-window>
                 </baidu-map>
               </div>
@@ -82,8 +83,8 @@ export default {
   data () {
     return {
       map: {
-        label: "中国物品编码中心",
-        center: { lng: 116.415256, lat: 39.961205 },
+        label: "GS1 China",
+        center: { lng: 116.415108, lat: 39.961695 },
         zoom: 16,
         show: false,
       },
@@ -111,4 +112,19 @@ export default {
     height: 500px;
   }
 }
+.iw_poi_title {
+  color: #cc5522;
+  font-size: 14px;
+  font-weight: bold;
+  overflow: hidden;
+  padding-right: 13px;
+  white-space: nowrap;
+}
+.iw_poi_content {
+  font: 12px arial, sans-serif;
+  overflow: visible;
+  padding-top: 4px;
+  white-space: -moz-pre-wrap;
+  word-wrap: break-word;
+}
 </style>

src/views/English/SecondaryMenu/ECommerce.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color:#f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">ECommerce</li>
               </ol>
@@ -88,11 +88,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

src/views/English/SecondaryMenu/EPC.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color:#f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">EPC</li>
               </ol>
@@ -76,11 +76,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

src/views/English/SecondaryMenu/GDSN.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color:#f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">GDSN</li>
               </ol>
@@ -83,11 +83,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

src/views/English/SecondaryMenu/HanXinCode.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color:#f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Han Xin Code</li>
               </ol>
@@ -162,11 +162,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

src/views/English/SecondaryMenu/InnovativeSectors.vue

 <template>
-  <div class="container site-content flush-outside" style="width: 100%">
+  <div class="container site-content flush-outside" style="width: 100%;max-width: 100%;">
     <div class="container" style="padding-left:15px; padding-right:15px">
       <div class="row" style="background-color: #FFF;margin-right: 0px;
                     margin-top: 20px">
@@ -148,11 +148,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },
@@ -160,4 +160,11 @@ export default {
 </script>
 <style scoped lang="scss" >
 @import "@/assets/css/english";
+.container {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.toolkit .site-content {
+  margin-top: 0;
+}
 </style>

src/views/English/SecondaryMenu/Introduction.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color:#f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Introduction</li>
               </ol>
@@ -69,11 +69,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

src/views/English/SecondaryMenu/eLearning.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color: #f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">e-Learning</li>
               </ol>
@@ -46,49 +46,31 @@
               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
-              >
+              <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>
+            <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-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 />
+                  <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 />
+                  <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 />
+                  <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>
@@ -101,11 +83,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

src/views/English/SecondaryMenu/industryPromotion.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color:#f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li class="active">Industry Promotion</li>
               </ol>

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

@@ -5,12 +5,10 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color: #f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li>
-                  <a @click="handleGo('/SecondaryMenu/industryPromotion')"
-                    >Industry Promotion</a
-                  >
+                  <a @click="handleGo('/SecondaryMenu/industryPromotion')">Industry Promotion</a>
                 </li>
                 <li class="active">Food safety</li>
               </ol>
@@ -59,11 +57,7 @@
             </p>
           </div>
           <div class="col-sm-3" style="padding-top: 85px">
-            <img
-              class="img-responsive center-block"
-              src="@/assets/image/english/FS-2.jpg"
-              alt="Food satety"
-            />
+            <img class="img-responsive center-block" src="@/assets/image/english/FS-2.jpg" alt="Food satety" />
           </div>
         </div>
       </section>
@@ -72,11 +66,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

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

@@ -5,12 +5,10 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color: #f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li>
-                  <a @click="handleGo('/SecondaryMenu/industryPromotion')"
-                    >Industry Promotion</a
-                  >
+                  <a @click="handleGo('/SecondaryMenu/industryPromotion')">Industry Promotion</a>
                 </li>
                 <li class="active">Healthcare</li>
               </ol>
@@ -38,20 +36,13 @@
               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"
-              >
+              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"
-            />
+            <img class="img-responsive center-block" src="@/assets/image/english/HC-2.jpg" alt="Healthcare" />
           </div>
         </div>
       </section>
@@ -60,11 +51,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

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

@@ -5,12 +5,10 @@
         <div class="row">
           <div class="col-md-12">
             <ul class="nav navbar-nav mm-float1">
-              <ol class="breadcrumb" style="background-color: #f4f4f4">
+              <ol class="breadcrumb">
                 <li><a @click="handleGo('/EnglishHome')">Home</a></li>
                 <li>
-                  <a @click="handleGo('/SecondaryMenu/industryPromotion')"
-                    >Industry Promotion</a
-                  >
+                  <a @click="handleGo('/SecondaryMenu/industryPromotion')">Industry Promotion</a>
                 </li>
                 <li class="active">Others</li>
               </ol>
@@ -69,11 +67,7 @@
             </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"
-            />
+            <img class="img-responsive center-block" src="@/assets/image/english/TL-2.png" alt="Food satety" />
           </div>
         </div>
       </section>
@@ -82,11 +76,11 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {};
   },
   methods: {
-    handleGo(val) {
+    handleGo (val) {
       this.$router.push({ path: val });
     },
   },

src/views/English/blankMain.vue

 <template>
-  <div class="toolkit" style="background-color: #f4f4f4">
+  <div class="toolkit">
     <TopBanner></TopBanner>
     <Header></Header>
     <div>