Skip to content

G
gs1
Commit 05ca8126 by ahxiangkui
Options

英文版顶部调整，banner更多按钮调整，底部调整

parent 81549f47
Showing with 263 additions and 43 deletions
src/assets/css/english.scss
......@@ -278,6 +278,10 @@ h4,
font-weight: 300;
}
.toolkit footer a:hover {
text-decoration: underline;
}
.toolkit section {
margin-top: 30px;
margin-bottom: 30px;
......@@ -442,10 +446,67 @@ small,
background-color: #f26334;
}
.toolkit .bg-blue {
background-color: #002c6c !important;
.toolkit button.bg-blue {
background-color: #002c6c;
position: relative;
display: flex;
align-items: center;
border-radius: 4px;
font-size: 16px;
color: #ffffff;
padding: 5px 5px 5px !important;
}
.toolkit .bg-blue span {
margin-left: 18px;
}
.toolkit .bg-blue img {
position: absolute;
right: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.bg-blue {
background: #0e2c6b;
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
&:hover {
background: #061a4d !important;
img {
right: 17px;
}
}
&:focus {
background: #0e2c6b !important;
img {
right: 20px;
}
}
&:active {
background: #061a4d !important;
img {
right: 17px;
}
}
}
.toolkit .btn-primary,
.toolkit .btn-secondary {
padding: 5px 30px 5px;
......
src/components/englishMain.vue
......@@ -10,7 +10,7 @@
</template>
<script>
import TopBanner from './layout/topBanner.vue'
import TopBanner from './layout/englishTopBanner.vue'
import Header from "./layout/englishHeader/index.vue";
import Footer from "./layout/englishFoot.vue"
export default {
......
src/components/layout/englishFoot.vue
......@@ -4,7 +4,7 @@
<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">
<div class="col-xs-12 col-sm-6 col-md-2">
<a @click="handleGo('/EnglishHome')">
<h4>Home</h4>
</a>
......@@ -47,7 +47,7 @@
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="col-xs-12 col-sm-6 col-md-2">
<h4>Training &amp; Learning</h4>
<ul>
<li>
......@@ -58,7 +58,7 @@
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-1">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="http://www.gs1.org/news-events" target="_blank">
<h4>Events</h4>
</a>
......
src/components/layout/englishTopBanner.vue 0 → 100644
<template>
<div class="container d-none d-xl-block d-lg-block">
<div class="top-banner">
<div>The Global Language of Business</div>
<div class="top-banner-item language">
<el-dropdown class="language-dropdown" @command="handleClick">
<span class="el-dropdown-link">
{{ languageTxt }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" class="language-dropdown-menu">
<el-dropdown-item command="中文">中文</el-dropdown-item>
<el-dropdown-item command="EN">EN</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="top-banner-item tb-hover"></div>
<div class="top-banner-item">
</div>
<div class="top-banner-item">
</div>
<div class="top-banner-item tb-hover" @click="handleSearch">
<!-- <img src="../../assets/image/head/search.png" alt="" /> -->
<i class="bi bi-search"></i>
</div>
<div @click="toAdmin" style="
color: #00799e;
display: flex;
align-items: center;
cursor: pointer;
margin-left: 14px;
" v-if="user.username">
<img style="width: 22px" src="../../assets/image/mymanage/pic_touxiang.png" alt="" />
<!-- <span style="">个人中心:</span>-->
<span class="gs-hover" style="margin-left: 4px; font-weight: bold">{{
user.username
}}</span>
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "topBanner",
computed: {
...mapState(["urls"]),
},
watch: {
// $route: {
// handler (val) {
// const currentRouterComp = val.meta.language;
// if (currentRouterComp && currentRouterComp.indexOf("EN") !== -1) {
// this.languageTxt = "EN";
// } else {
// this.languageTxt = "中文";
// }
// },
// immediate: true,
// },
},
created () {
this.user = localStorage.getItem("loginInfo")
? JSON.parse(localStorage.getItem("loginInfo"))
: {};
// console.log(this.user);
},
data () {
return {
user: {},
languageTxt: "EN",
};
},
methods: {
toAdmin () {
if (
(this.user.userType === 1 && this.user.isXT !== 1) ||
(this.user.userType === 2 && this.user.isXT !== 1) ||
(this.user.userType === 3 && this.user.levels === null)
) {
this.$router.push({ path: "/MyManage/UnVerify/index" });
} else if (this.user.isXT === 1) {
this.$router.push({ path: "/MyManage/SystemMember/index" });
} else if (this.user.levels === 0) {
this.$router.push({ path: "/MyManage/admin/check" });
} else if (this.user.levels === 1) {
this.$router.push({ path: "/MyManage/admin/check" });
} else if (String(this.user.levels).length === 4) {
this.$router.push({ path: "/MyManage/admin/check" });
}
},
handleSearch () {
this.$router.push({
path: "/Home/sousuo",
});
},
handleClick (val) {
console.log(val, "val");
this.languageTxt = val;
if (val == "中文") {
this.$router.push({
path: "/Home",
});
} else {
this.$router.push({
path: "/EnglishHome",
});
}
},
},
};
</script>
<style lang="scss">
.language {
.el-dropdown {
font-size: 12px;
color: #414345;
}
}
.top-banner {
height: 30px;
width: 100%;
background: #f0f5fa;
font-size: 12px;
line-height: 30px;
font-weight: 400;
color: #414345;
display: flex;
align-items: center;
justify-content: flex-end;
.tb-hover:hover {
cursor: pointer;
color: #0e2c6b;
}
.top-banner-item {
color: #00799e;
> img {
width: 12px;
height: 12px;
margin-right: 6px;
}
> a {
text-decoration: none;
color: #00799e;
}
}
> div + div {
margin-left: 24px;
}
}
</style>
src/components/layout/topBanner.vue
......@@ -13,45 +13,30 @@
</select> -->
<el-dropdown-menu slot="dropdown" class="language-dropdown-menu">
<el-dropdown-item command="中文">中文</el-dropdown-item>
<el-dropdown-item command="英文">英文</el-dropdown-item>
<el-dropdown-item command="英文">EN</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="top-banner-item tb-hover">咨询电话：400-7000-690</div>
<div class="top-banner-item">
<img src="../../assets/image/head/wx.png" alt="" />
<a
class="tb-hover"
target="_blank"
:href="`${urls.ancc}gs1cnweixin.aspx`"
>官方微信</a
>
<a class="tb-hover" target="_blank" :href="`${urls.ancc}gs1cnweixin.aspx`">官方微信</a>
</div>
<div class="top-banner-item">
<img src="../../assets/image/head/xlwb.png" alt="" />
<a class="tb-hover" target="_blank" href="https://weibo.com/gs1cn"
>官方微博</a
>
<a class="tb-hover" target="_blank" href="https://weibo.com/gs1cn">官方微博</a>
</div>
<div class="top-banner-item tb-hover" @click="handleSearch">
<img src="../../assets/image/head/search.png" alt="" />
</div>
<div
@click="toAdmin"
style="
<div @click="toAdmin" style="
color: #00799e;
display: flex;
align-items: center;
cursor: pointer;
margin-left: 14px;
"
v-if="user.username"
>
<img
style="width: 22px"
src="../../assets/image/mymanage/pic_touxiang.png"
alt=""
/>
" v-if="user.username">
<img style="width: 22px" src="../../assets/image/mymanage/pic_touxiang.png" alt="" />
<!-- <span style="">个人中心:</span>-->
<span class="gs-hover" style="margin-left: 4px; font-weight: bold">{{
user.username
......@@ -71,10 +56,10 @@ export default {
},
watch: {
$route: {
handler(val) {
handler (val) {
const currentRouterComp = val.meta.language;
if (currentRouterComp && currentRouterComp.indexOf("英文") !== -1) {
this.languageTxt = "英文";
if (currentRouterComp && currentRouterComp.indexOf("EN") !== -1) {
this.languageTxt = "EN";
} else {
this.languageTxt = "中文";
}
......@@ -82,20 +67,20 @@ export default {
immediate: true,
},
},
created() {
created () {
this.user = localStorage.getItem("loginInfo")
? JSON.parse(localStorage.getItem("loginInfo"))
: {};
// console.log(this.user);
},
data() {
data () {
return {
user: {},
languageTxt: "中文",
};
},
methods: {
toAdmin() {
toAdmin () {
if (
(this.user.userType === 1 && this.user.isXT !== 1) ||
(this.user.userType === 2 && this.user.isXT !== 1) ||
......@@ -112,12 +97,12 @@ export default {
this.$router.push({ path: "/MyManage/admin/check" });
}
},
handleSearch() {
handleSearch () {
this.$router.push({
path: "/Home/sousuo",
});
},
handleClick(val) {
handleClick (val) {
console.log(val, "val");
this.languageTxt = val;
if (val == "中文") {
......
src/views/English/Home/index.vue
......@@ -18,8 +18,9 @@
China.
</p>
<a @click="handleGo('SecondaryMenu/Introduction')">
<button type="button" class="btn-primary btn-margin bg-blue">
More About GS1 China
<button type="button" class="btn-primary btn-margin bg-blue width250">
<span>More About GS1 China</span>
<img src="../../../assets/image/home/more-arrow.png" alt="" />
</button></a>
</div>
</div>
......@@ -36,8 +37,9 @@
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 type="button" class="btn-primary btn-margin bg-blue width220">
<span style="color:red;">More About GS1</span>
<img src="../../../assets/image/home/more-arrow.png" alt="" />
</button></a>
</div>
</div>
......@@ -61,8 +63,9 @@
</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 type="button" class="btn-primary btn-margin bg-blue width200">
<span>View More</span>
<img src="../../../assets/image/home/more-arrow.png" alt="" />
</button></a>
</div>
</div>
......@@ -90,8 +93,9 @@
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 type="button" class="btn-primary btn-margin bg-blue width200">
<span>View More</span>
<img src="../../../assets/image/home/more-arrow.png" alt="" />
</button></a>
</div>
</div>
......@@ -148,6 +152,15 @@ export default {
</script>
<style scoped lang="scss">
@import "@/assets/css/english";
.width200 {
width: 140px;
}
.width250 {
width: 230px;
}
.width220 {
width: 180px;
}
.carousel-inner {
height: 400px;
}
......
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