Skip to content

G
gs1
Commit 90b856c2 by liwenjin
Options

静态英文首页

parent d9b73541
Showing with 829 additions and 69 deletions
src/assets/css/english.scss 0 → 100644
// home
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #ffffff;
}
body {
font-family: "Gotham Office","Arial","Gotham SSm A", "Gotham SSm B", Verdana, sans-serif;
}
.toolkit {
font-size: 16px;
font-weight: 300;
}
.section-spacing {
padding-bottom: 15px;
}
.content-module-container {
margin-bottom: 30px;
}
.toolkit .section-spacing h4 {
margin-top: 30px;
font-weight: 400;
}
.toolkit h4 {
margin: 35px 0 15px;
}
.toolkit .content-module-container:before,
.toolkit .content-module-container:after {
content: " ";
display: table;
}
.toolkit .content-module-container:after {
clear: both;
}
.toolkit .content-module-wrapper {
border-top: 7px solid #f26334;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
.col-xs-12 {
width: 100%;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.toolkit .bg-light-gray {
background-color: #f4f4f4 !important;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.toolkit .content-module-container {
margin-bottom: 30px;
}
.toolkit .content-module, .toolkit .content-module-freeform {
background-color: #ffffff;
border: 1px solid #b1b3b3;
border-top: 0;
position: relative;
}
.toolkit .content-module-padding {
padding: 20px;
}
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
img {
vertical-align: middle;
border: 0;
}
.toolkit p {
font-size: 16px;
line-height: 24px;
color: #454545;
}
.toolkit p.small {
font-size: 14px;
line-height: 24px;
}
.toolkit a {
color: #008dbd;
text-decoration: none;
font-weight: 500;
word-break: break-word;
}
.toolkit h1, .toolkit h2, .toolkit h3, .toolkit h4, .toolkit h5, .toolkit h6 {
color: #002c6c;
font-weight: 400;
}
.content-module h4, .toolkit .content-module-freeform h4, .toolkit .content-module h5, .toolkit .content-module-freeform h5, .toolkit .content-module h6, .toolkit .content-module-freeform h6 {
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #b2b2b8;
}
h4, .h4 {
font-size: 18px;
}
.toolkit .content-module h1, .toolkit .content-module-freeform h1, .toolkit .content-module h2, .toolkit .content-module-freeform h2, .toolkit .content-module h3, .toolkit .content-module-freeform h3, .toolkit .content-module h4, .toolkit .content-module-freeform h4, .toolkit .content-module h5, .toolkit .content-module-freeform h5, .toolkit .content-module h6, .toolkit .content-module-freeform h6 {
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #b2b2b8;
}
.toolkit .content-module h4 {
line-height: 26px;
}
.toolkit .content-module h4 a {
color: #002c6c;
}
.toolkit .content-module a {
font-weight: 300;
}
.toolkit footer {
margin: 20px 0;
background: #ffffff;
}
.toolkit footer a {
font-weight: 300;
}
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.container {
width: 750px;
}
.col-sm-6 {
width: 50%;
}
}
@media (min-width: 992px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-6 {
width: 50%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
\ No newline at end of file
src/components/englishMain.vue 0 → 100644
<template>
<div>
<TopBanner></TopBanner>
<!-- <Header></Header> -->
<div class="router-view">
<router-view></router-view>
</div>
<!-- <Footer></Footer> -->
</div>
</template>
<script>
import TopBanner from './layout/topBanner.vue'
import Header from "./layout/header/index.vue";
import Footer from "./layout/footer.vue"
export default {
components: {
TopBanner,
Header,
Footer,
},
data() {
return {
userName: "",
sidebarNav: [],
};
},
computed: {},
methods: {},
created() {},
mounted() {},
};
</script>
src/router/englist.js 0 → 100644
import main from "_c/main";
const english = [
{
path: "/EnglishHome",
name: "EnglishHome",
component: main,
meta: {
name: "首页",
},
children: [
{
path: "/EnglishHome",
component: () => import("@/views/English/Home/index"),
},
]
}
]
export {
english
}
\ No newline at end of file
src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import main from "@/components/main.vue";
import { service } from "@/router/service";
import englishMain from "@/components/englishMain.vue";
import {
service
} from "@/router/service";
import {
english
} from "@/router/englist";
Vue.use(VueRouter);
......@@ -11,8 +17,7 @@ VueRouter.prototype.push = function push(to) {
return routerPush.call(this, to).catch((err) => err);
};
const routes = [
{
const routes = [{
path: "/",
redirect: "/Home",
},
......@@ -23,8 +28,7 @@ const routes = [
meta: {
name: "首页",
},
children: [
{
children: [{
path: "/",
component: () => import("@/views/Home/index"),
},
......@@ -41,8 +45,7 @@ const routes = [
},
component: () => import("@/views/Org/index"),
redirect: '/Org/Intro',
children: [
{
children: [{
path: "/Org/Intro",
name: "Intro",
meta: {
......@@ -165,8 +168,7 @@ const routes = [
},
component: () => import("@/views/Business/index"),
redirect: '/Business/Register',
children: [
{
children: [{
path: "/Business/Register",
name: "Register",
meta: {
......@@ -455,8 +457,7 @@ const routes = [
},
component: () => import("@/views/BarCode/index"),
redirect: '/BarCode/SSCC',
children: [
{
children: [{
path: "/BarCode/SSCC",
name: "SSCC",
meta: {
......@@ -521,8 +522,7 @@ const routes = [
name: "资讯中心",
},
component: () => import("@/views/News/main.vue"),
children: [
{
children: [{
path: "/News/PicNews",
name: "PicNews",
meta: {
......@@ -669,7 +669,7 @@ const routes = [
},
component: () => import("@/views/News/NoticeArticle.vue"),
},
{
path: "/News/Health",
name: "Health",
......@@ -710,7 +710,7 @@ const routes = [
},
component: () => import("@/views/News/Retail.vue"),
},
{
path: "/News/Logistics",
name: "Logistics",
......@@ -752,8 +752,7 @@ const routes = [
name: "技术标准",
},
component: () => import("@/views/Knowledge/TeKIndex.vue"),
children: [
{
children: [{
path: "/Knowledge/ANCCSystem",
name: "ANCCSystem",
meta: {
......@@ -883,8 +882,7 @@ const routes = [
name: "知识导航",
},
component: () => import("@/views/Knowledge/GSBMindex.vue"),
children: [
{
children: [{
path: "/Knowledge/ANCCSystem",
name: "ANCCSystem",
meta: {
......@@ -1098,7 +1096,7 @@ const routes = [
name: "修改企业信息",
},
component: () => import("@/views/MyManage/UnVerify/vendorModify.vue"),
}, // 系统成员
}, // 系统成员
{
path: "/MyManage/SystemMember/index",
name: "SystemMember",
......@@ -1172,53 +1170,50 @@ const routes = [
meta: {
name: "首页",
},
children: [
{
path: "/",
component: () => import("@/views/Search/index"),
children: [
{
path: "tool",
component: () => import("@/views/Search/tools"),
},
// 境内条码查询
{
path: "internal",
component: () => import("@/views/Search/internal"),
},
// 境外条码信息查询
{
path: "external",
component: () => import("@/views/Search/external"),
},
// 缩短码查询
{
path: "shortcode",
component: () => import("@/views/Search/shortcode"),
},
{
path: "gln",
component: () => import("@/views/Search/gln"),
},
{
path: "bike",
component: () => import("@/views/Search/bike"),
},
{
path: "glossary",
component: () => import("@/views/Search/glossary"),
},
{
path: "check",
component: () => import("@/views/Search/check"),
},
{
path: "country",
component: () => import("@/views/Search/country"),
},
],
},
],
children: [{
path: "/",
component: () => import("@/views/Search/index"),
children: [{
path: "tool",
component: () => import("@/views/Search/tools"),
},
// 境内条码查询
{
path: "internal",
component: () => import("@/views/Search/internal"),
},
// 境外条码信息查询
{
path: "external",
component: () => import("@/views/Search/external"),
},
// 缩短码查询
{
path: "shortcode",
component: () => import("@/views/Search/shortcode"),
},
{
path: "gln",
component: () => import("@/views/Search/gln"),
},
{
path: "bike",
component: () => import("@/views/Search/bike"),
},
{
path: "glossary",
component: () => import("@/views/Search/glossary"),
},
{
path: "check",
component: () => import("@/views/Search/check"),
},
{
path: "country",
component: () => import("@/views/Search/country"),
},
],
}, ],
},
......@@ -1263,13 +1258,39 @@ const routes = [
redirect: "/404",
},
//英文版本
{
path: "/EnglishHome",
name: "EnglishHome",
component: englishMain,
meta: {
name: "首页",
},
children: [{
path: "/EnglishHome",
component: () => import("@/views/English/Home/index"),
},
{
path: "/BusinessBrief/industryPromotion",
name: "IndustryPromotion",
component: () => import("@/views/English/BusinessBrief/industryPromotion"),
// redirect: '/Org/Intro',
children: [{
path: "/BusinessBrief/industryPromotion",
name: "IndustryPromotion",
component: () => import("@/views/English/BusinessBrief/industryPromotion"),
}]
}
]
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
export default router;
\ No newline at end of file
src/views/English/Article/article.vue 0 → 100644
<template>
<div>文章</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/English/BusinessBrief/industryPromotion.vue 0 → 100644
<template>
<div>付水电费第三方水电费是的</div>
</template>
\ No newline at end of file
src/views/English/Home/components/columnFourList.vue 0 → 100644
<template>
<div class="container" style="padding-top: 30px">
<div class="row">
<div class="col-xs-12 col-md-3 section-spacing" style="margin-top: -3%">
<div class="content-module-container">
<h4>
<a
href="/GS1ChinaEN/GS1ChinaENTest/foodsafety.aspx"
target="_blank"
style="text-decoration: none; color: #002c6c"
>Food safety</a
>
</h4>
<div
class="content-module-wrapper"
style="border-top: 7px solid #7ac143"
></div>
<div
class="content-module content-module-padding"
style="padding: 0px; background-color: #002c6c"
>
<img
src="@/assets/image/english/Food-satety.jpg"
alt=""
class="img-responsive"
/>
<p class="small" style="padding: 20px">
<a
href="/GS1ChinaEN/GS1ChinaENTest/foodsafety.aspx"
target="_blank"
style="color: #fff; text-decoration: none"
>Barcode applications have been extended to the food safety area
with great efforts…</a
>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 section-spacing" style="margin-top: -3%">
<div class="content-module-container">
<h4>
<a
href="/GS1ChinaEN/GS1ChinaENTest/healthcare.aspx"
target="_blank"
style="text-decoration: none; color: #002c6c"
>Healthcare</a
>
</h4>
<div
class="content-module-wrapper"
style="border-top: 7px solid #00b6de"
></div>
<div
class="content-module content-module-padding"
style="padding: 0px; background-color: #002c6c"
>
<img
src="@/assets/image/english/Healthcare.jpg"
alt=""
class="img-responsive"
/>
<p class="small" style="padding: 20px">
<a
href="/GS1ChinaEN/GS1ChinaENTest/healthcare.aspx"
target="_blank"
style="color: #fff; text-decoration: none"
>GS1 China offers technical support for regulators in healthcare
sector to develop standards and regulations…</a
>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 section-spacing" style="margin-top: -3%">
<div class="content-module-container">
<h4>
<a
href="/GS1ChinaEN/GS1ChinaENTest/ecommerce.aspx"
target="_blank"
style="text-decoration: none; color: #002c6c"
>ECommerce</a
>
</h4>
<div
class="content-module-wrapper"
style="border-top: 7px solid #f05587"
></div>
<div
class="content-module content-module-padding"
style="padding: 0px; background-color: #002c6c"
>
<img
src="@/assets/image/english/ECommerce.jpg"
alt=""
class="img-responsive"
/>
<p class="small" style="padding: 20px">
<a
href="/GS1ChinaEN/GS1ChinaENTest/ecommerce.aspx"
target="_blank"
style="color: #fff; text-decoration: none"
>GS1 standard can provide the efficiency solutions for the
issues for e-commerce enterprises…</a
>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 section-spacing" style="margin-top: -3%">
<div class="content-module-container">
<h4>
<a
href="/GS1ChinaEN/GS1ChinaENTest/gdsn.aspx"
target="_blank"
style="text-decoration: none; color: #002c6c"
>GDSN</a
>
</h4>
<div
class="content-module-wrapper"
style="border-top: 7px solid #71b790"
></div>
<div
class="content-module content-module-padding"
style="padding: 0px; background-color: #002c6c"
>
<img
src="@/assets/image/english/GDSN.jpg"
alt=""
class="img-responsive"
/>
<p class="small" style="padding: 20px">
<a
href="/GS1ChinaEN/GS1ChinaENTest/gdsn.aspx"
target="_blank"
style="color: #fff; text-decoration: none"
>GS1 China is willing to cooperate with countries around the
world to encourage the exchange and sharing...</a
>
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/English/Home/components/trodList.vue 0 → 100644
<template>
<div
class="row"
style="background-color: #fff; margin-left: 0px; margin-right: 0px"
>
<div class="container">
<div class="col-xs-12 col-md-6 section-spacing">
<div class="content-module-container">
<h4></h4>
<div
class="content-module-wrapper"
style="border-top: 7px solid #c1d82f"
></div>
<div class="row content">
<div class="col-xs-12"></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.
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 section-spacing">
<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 class="col-xs-12 col-md-3 section-spacing">
<div class="content-module-container">
<h4></h4>
<div
class="content-module-wrapper"
style="border-top: 7px solid #002c6c"
></div>
<div
class="content-module content-module-padding"
style="padding: 0px"
>
<img
src="@/assets/image/english/need-bar.jpg"
alt=""
class="img-responsive"
/>
<h4 style="padding: 20px">
<a href="/GS1ChinaEN/GS1ChinaENTest/barcodes.aspx"
>Need a barcode?</a
>
</h4>
<p class="small" style="padding: 20px">
Our barcodes identify products uniquely so they can be sold
anywhere in the world.
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped></style>
src/views/English/Home/index.vue 0 → 100644
<template>
<div class="toolkit">
<!-- Banner图 -->
<div class="banner">
<VueSlickCarousel v-bind="bannerSettings" v-if="banner.length > 0">
<div v-for="(el, i) in banner" :key="i">
<div class="banner-item" :style="{ background: el.colorBackground }">
<div class="container">
<div class="row">
<div class="col-lg-6 carousel-caption-left">
<div class="carousel-title">{{ el.title }}</div>
<p class="carousel-note">
{{ el.brief }}
</p>
<button
:class="['carousel-btn', el.colorMore]"
@click="learnMore(i)"
>
<span>了解更多</span
><img src="@/assets/image/home/more-arrow.png" alt="" />
</button>
</div>
</div>
</div>
<div class="banner-bg">
<img :src="el.picIndexPath" alt="" />
</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>
<div class="bg-light-gray">
<!-- 三列介紹 -->
<trodList></trodList>
<!-- 四列列表 -->
<columnFourList></columnFourList>
</div>
<footer class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-1">
<a href="/GS1ChinaEN/GS1ChinaENTest/index.aspx"
><h4>Home</h4></a
>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<h4>About Us</h4>
<ul>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/introduction.aspx"
>Introduction</a
>
</li>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/structure.aspx"
>Structure</a
>
</li>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/contactus.aspx"
>Contact Us</a
>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<h4>Business Brief</h4>
<ul>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/barcodes.aspx"
>BarCodes</a
>
</li>
<li><a href="/GS1ChinaEN/GS1ChinaENTest/epc.aspx">EPC</a></li>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/gdsn.aspx">GDSN</a>
</li>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/ecommerce.aspx"
>ECommerce</a
>
</li>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/hanxincode.aspx"
>Han Xin Code</a
>
</li>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/sectors.aspx"
>Innovative Sectors</a
>
</li>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/promotion.aspx"
>Industry Promotion</a
>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h4>Training &amp; Learning</h4>
<ul>
<li>
<a href="/GS1ChinaEN/GS1ChinaENTest/elearning.aspx"
>E-Learning</a
>
</li>
<li>
<a
href="http://ocp.gs1.org/sites/glossary/en-gb"
target="_blank"
>Glossary</a
>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-1">
<a href="http://www.gs1.org/news-events" target="_blank"
><h4>Events</h4></a
>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<h4>Useful Links</h4>
<ul>
<li>
<a
href="http://www.gs1.org/contact/overview"
target="_blank"
>
GS1 Member Links</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12 footer-links">
<hr />
<div
class="p"
style="
min-width: 300px;
height: auto;
width: auto;
margin: 0 auto;
text-align: center;
"
>
<p>Copyright 2015 GS1 China All rights reserved.</p>
<p>
Reproduction in whole or in part without permission is
prohibited.
</p>
</div>
</div>
</div>
</div>
</footer>
</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";
import trodList from "./components/trodList";
import columnFourList from "./components/columnFourList";
export default {
components: { VueSlickCarousel, columnFourList, trodList },
data() {
return {
banner: [], // 首页大轮播图
bannerSettings: {
arrows: true,
autoplay: false,
autoplaySpeed: 4000,
dots: true,
centerMode: true,
centerPadding: "0% 0% 0%",
slidesToShow: 1,
slidesToScroll: 1,
},
};
},
};
</script>
<style lang="scss">
@import "@/assets/css/english";
</style>
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