Commit f19f357f by liwenjin

liwj提交

parent 2a69e60c
<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>
<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>
<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>
<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>
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" },
],
}
],
},
],
},
];
......@@ -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"),
}
]
}
......
......@@ -68,6 +68,6 @@ export default {
},
};
</script>
<style lang="scss" >
<style lang="scss" scoped>
@import "@/assets/css/english";
</style>
<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>
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment