Commit 6799218b by ahxiangkui

liwj提交。4个应用领域,加悬浮的交互效果,4个应用领域详情页,标题和正文间,加领域颜色,位置参考如下,颜色以领域颜色为准

parent 05ca8126
...@@ -35,6 +35,45 @@ ol ol { ...@@ -35,6 +35,45 @@ ol ol {
margin-bottom: 30px; margin-bottom: 30px;
} }
.myCard {
background-color: #fff;
border-radius: 4px;
border: 1px solid rgba(197, 216, 238, .5);
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease
}
.myCard:hover {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
-webkit-box-shadow: 0 10px 30px 0 rgba(165, 165, 167, .6);
box-shadow: 0 10px 30px 0 rgba(165, 165, 167, .6);
cursor: pointer;
}
.listBorder {
padding-bottom: 20px;
}
.greenBorder {
border-bottom: 7px solid rgb(122, 193, 67);
}
.green2Border {
border-bottom: 7px solid rgb(113, 183, 144)
}
.blueBorder {
border-bottom: 7px solid rgb(0, 182, 222)
}
.pinkBorder {
border-bottom: 7px solid rgb(240, 85, 135);
}
.toolkit .section-spacing h4 { .toolkit .section-spacing h4 {
margin-top: 30px; margin-top: 30px;
font-weight: 400; font-weight: 400;
......
<template> <template>
<div class="header-btn move-btn header-btn-english"> <div class="header-btn move-btn header-btn-english">
<a href="http://www.gs1.org/search/gss" target="_blank"> <a href="http://www.gs1.org/search/gss" target="_blank">
<el-button type="primary" style="padding: 9px 30px;margin-right: 6px" size="small">Search <!-- <el-button type="primary" style="padding: 9px 30px;margin-right: 6px" size="small">Search
</el-button> </el-button> -->
</a> </a>
</div> </div>
</template> </template>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
safety</a> safety</a>
</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" style="padding: 0px; background-color: #002c6c"> <div class="content-module content-module-padding myCard" style="padding: 0px; background-color: #002c6c">
<img src="@/assets/image/english/Food-satety.jpg" alt="" class="img-responsive" /> <img src="@/assets/image/english/Food-satety.jpg" alt="" class="img-responsive" />
<p class="small" style="padding: 20px"> <p class="small" style="padding: 20px">
<a @click="handleGo('/IndustryPromotion/FoodSafety')" style="color: #fff; text-decoration: none">Barcode <a @click="handleGo('/IndustryPromotion/FoodSafety')" style="color: #fff; text-decoration: none">Barcode
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
style="text-decoration: none; color: #002c6c">Healthcare</a> style="text-decoration: none; color: #002c6c">Healthcare</a>
</h4> </h4>
<div class="content-module-wrapper" style="border-top: 7px solid #00b6de"></div> <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"> <div class="content-module content-module-padding myCard" style="padding: 0px; background-color: #002c6c">
<img src="@/assets/image/english/Healthcare.jpg" alt="" class="img-responsive" /> <img src="@/assets/image/english/Healthcare.jpg" alt="" class="img-responsive" />
<p class="small" style="padding: 20px"> <p class="small" style="padding: 20px">
<a @click="handleGo('/IndustryPromotion/Healthcare')" style="color: #fff; text-decoration: none">GS1 China <a @click="handleGo('/IndustryPromotion/Healthcare')" style="color: #fff; text-decoration: none">GS1 China
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<a @click="handleGo('/SecondaryMenu/ECommerce')" style="text-decoration: none; color: #002c6c">ECommerce</a> <a @click="handleGo('/SecondaryMenu/ECommerce')" style="text-decoration: none; color: #002c6c">ECommerce</a>
</h4> </h4>
<div class="content-module-wrapper" style="border-top: 7px solid #f05587"></div> <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"> <div class="content-module content-module-padding myCard" style="padding: 0px; background-color: #002c6c">
<img src="@/assets/image/english/ECommerce.jpg" alt="" class="img-responsive" /> <img src="@/assets/image/english/ECommerce.jpg" alt="" class="img-responsive" />
<p class="small" style="padding: 20px"> <p class="small" style="padding: 20px">
<a @click="handleGo('/SecondaryMenu/ECommerce')" style="color: #fff; text-decoration: none">GS1 standard <a @click="handleGo('/SecondaryMenu/ECommerce')" style="color: #fff; text-decoration: none">GS1 standard
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<a @click="handleGo('/SecondaryMenu/GDSN')" style="text-decoration: none; color: #002c6c">GDSN</a> <a @click="handleGo('/SecondaryMenu/GDSN')" style="text-decoration: none; color: #002c6c">GDSN</a>
</h4> </h4>
<div class="content-module-wrapper" style="border-top: 7px solid #71b790"></div> <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"> <div class="content-module content-module-padding myCard" style="padding: 0px; background-color: #002c6c">
<img src="@/assets/image/english/GDSN.jpg" alt="" class="img-responsive" /> <img src="@/assets/image/english/GDSN.jpg" alt="" class="img-responsive" />
<p class="small" style="padding: 20px"> <p class="small" style="padding: 20px">
<a @click="handleGo('/SecondaryMenu/GDSN')" style="color: #fff; text-decoration: none">GS1 <a @click="handleGo('/SecondaryMenu/GDSN')" style="color: #fff; text-decoration: none">GS1
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</div> </div>
</section> </section>
<section> <section>
<h1>ECommerce</h1> <h1 class="listBorder pinkBorder">ECommerce</h1>
<div class="row"> <div class="row">
<div class="col-lsm-9"> <div class="col-lsm-9">
<p class="small" style="padding-top: 20px; line-height:30px"> <p class="small" style="padding-top: 20px; line-height:30px">
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</div> </div>
</section> </section>
<section> <section>
<h1>Global Data Synchronisation Network(GDSN)</h1> <h1 class="listBorder green2Border">Global Data Synchronisation Network(GDSN)</h1>
<div class="row"> <div class="row">
<div class="col-lsm-9"> <div class="col-lsm-9">
<p class="small" style="padding-top: 20px; line-height:30px"> <p class="small" style="padding-top: 20px; line-height:30px">
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<section> <section>
<div class="row"> <div class="row">
<div class="col-lsm-9"> <div class="col-lsm-9">
<h1>Food safety</h1> <h1 class="listBorder greenBorder">Food safety</h1>
<p class="small" style="padding-top: 20px"> <p class="small" style="padding-top: 20px">
In recent years, food safety standards received widespread concern In recent years, food safety standards received widespread concern
throughout the world. Through efforts, GS1 China obtained throughout the world. Through efforts, GS1 China obtained
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<section> <section>
<div class="row"> <div class="row">
<div class="col-lsm-9"> <div class="col-lsm-9">
<h1>Healthcare</h1> <h1 class="listBorder blueBorder">Healthcare</h1>
<p class="small" style="padding-top: 20px"> <p class="small" style="padding-top: 20px">
In order to address to the domestic demand of healthcare safety, In order to address to the domestic demand of healthcare safety,
GS1 China strengthened and broadened the use of barcode technology GS1 China strengthened and broadened the use of barcode technology
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
</template> </template>
<script> <script>
import TopBanner from '@/components/layout/topBanner.vue' import TopBanner from '@/components/layout/englishTopBanner'
import Header from '@/components/layout/englishHeader' import Header from '@/components/layout/englishHeader'
import Footer from "@/components/layout/englishFoot.vue" import Footer from "@/components/layout/englishFoot.vue"
export default { export default {
......
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