Commit aa867d2c by 林家欣

修改头部和页脚

parent dca77e17
<template> <template>
<div class="foot"> <div class="foot">
<div class="container"> <div class="container">
<div class="row foot-top"> <div class="link">
<div class="col-lg-2"> <div>国家市场监督管理总局</div>
<div class="foot-cate">咨询电话</div> <div>国家标准化管理委员会</div>
<div class="zxdh"> <div>地方编码分支机构</div>
<img src="../../assets/image/foot/dianhua.png" alt="" /> <div>国际物品编码组织(GS1)</div>
<div>国际物品编码组织(GS1)成员网站</div>
</div>
<div class="foot-line"></div>
<div class="row foot-bottom">
<div class="offset-lg-2 col-lg-7 foot-bottom-left">
<div class="copright">
<div>版权所有:中国物品编码中心</div>
<div>咨询电话:400-7000-690</div>
</div> </div>
</div> <div class="beian">
<div class="col-lg-7"> <div>京ICP备11036137号-10</div><span>|</span><div><img src="../../assets/image/foot/beian.png" alt="" />京公网安备11010102001434号</div>
<div class="foot-cate">友情链接</div> </div>
<div class="row link"> <div class="address">
<div class="col-lg-4">国家市场监督管理总局</div> 地址:北京市东城区安定门外大街138号皇城国际大厦座3-6层<span>|</span>邮编:100011
<div class="col-lg-4">国家市场监督管理总局</div>
<div class="col-lg-4">国家市场监督管理总局</div>
<div class="col-lg-4">国家市场监督管理总局</div>
<div class="col-lg-4">国际物品编码组织(<span class="tahoma">GS1</span>)成员网站</div>
</div> </div>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">
...@@ -35,20 +39,6 @@ ...@@ -35,20 +39,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="foot-line"></div>
<div class="row foot-middle">
<div class="col-lg-1">语言</div>
<div class="col col-lg-1 checked">简体中文</div>
<div class="col col-lg-1">English</div>
</div>
<div class="foot-line"></div>
<div class="foot-bottom">
<div>版权所有:中国物品编码中心</div>
<div>
京ICP备<span class="tahoma">11036137</span>号-<span class="tahoma">10</span> | 京公网安备<span class="tahoma">11010102001434</span>
</div>
<div>地址:北京市东城区安定门外大街138号皇</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -72,10 +62,9 @@ export default { ...@@ -72,10 +62,9 @@ export default {
background: #fff; background: #fff;
.foot-cate { .foot-cate {
font-weight: 500; font-weight: 500;
color: #0E2C6B; color: #0e2c6b;
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 30px;
// font-family: PingFangSC-Medium, PingFang SC; // font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
...@@ -84,37 +73,64 @@ export default { ...@@ -84,37 +73,64 @@ export default {
background: rgba(14, 44, 107, 0.13); background: rgba(14, 44, 107, 0.13);
box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.04); box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.04);
} }
.foot-top{ .link {
padding-bottom: 20px;
}
.foot-middle {
padding: 20px 0;
.checked{
color: #F26335;
}
}
.foot-bottom{
padding: 20px 0;
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
div{ padding: 22px 0;
margin-right: 20px; div {
color: #0E2C6B; line-height: 30px;
color: #0e2c6b;
font-size: 14px; font-size: 14px;
// font-family: PingFangSC-Regular, PingFang SC; // font-family: PingFangSC-Regular, PingFang SC;
&:last-child{
margin-right: 0;
}
} }
} }
.link { .foot-bottom {
div { padding: 20px 0;
line-height: 30px; > div {
color: #0E2C6B; display: flex;
font-size: 14px; flex-direction: column;
justify-content: center;
}
.copright {
display: flex;
flex-wrap: wrap;
justify-content: center;
span {
padding: 0 20px;
&:first-child {
margin: 0;
}
}
}
.beian{
display: flex;
justify-content: center;
align-items: center;
span{
padding: 0 20px;
}
}
.address {
span {
padding: 0 5px;
}
}
.foot-bottom-left {
> div {
color: #0e2c6b;
font-size: 14px;
text-align: center;
margin-bottom: 15px;
&:last-child {
margin: 0;
}
}
// font-family: PingFangSC-Regular, PingFang SC; // font-family: PingFangSC-Regular, PingFang SC;
} }
} }
.qrcode { .qrcode {
text-align: center; text-align: center;
} }
......
...@@ -3,16 +3,29 @@ ...@@ -3,16 +3,29 @@
<div class="top-banner"> <div class="top-banner">
<div>全球商业语言</div> <div>全球商业语言</div>
<div class="top-banner-item tb-hover">咨询电话:400-7000-690</div> <div class="top-banner-item tb-hover">咨询电话:400-7000-690</div>
<div class="top-banner-item language">
<el-dropdown class="language-dropdown">
<span class="el-dropdown-link">
中文<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" class="language-dropdown-menu">
<el-dropdown-item>中文</el-dropdown-item>
<el-dropdown-item>英文</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="top-banner-item"> <div class="top-banner-item">
<img src="../../assets/image/head/wx.png" alt=""/> <img src="../../assets/image/head/wx.png" alt="" />
<a class="tb-hover" target="_blank" href="/gs1cnweixin">官方微信</a> <a class="tb-hover" target="_blank" href="/gs1cnweixin">官方微信</a>
</div> </div>
<div class="top-banner-item"> <div class="top-banner-item">
<img src="../../assets/image/head/xlwb.png" alt=""> <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>
<div class="top-banner-item tb-hover"> <div class="top-banner-item tb-hover">
<img src="../../assets/image/head/search.png" alt=""> <img src="../../assets/image/head/search.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -20,15 +33,21 @@ ...@@ -20,15 +33,21 @@
<script> <script>
export default { export default {
name: "topBanner" name: "topBanner",
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.language {
.el-dropdown {
font-size: 12px;
color: #414345;
}
}
.top-banner { .top-banner {
height: 30px; height: 30px;
width: 100%; width: 100%;
background: #F0F5FA; background: #f0f5fa;
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
font-weight: 400; font-weight: 400;
...@@ -36,14 +55,13 @@ export default { ...@@ -36,14 +55,13 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
.tb-hover:hover { .tb-hover:hover {
cursor: pointer; cursor: pointer;
color: #0E2C6B; color: #0e2c6b;
} }
.top-banner-item { .top-banner-item {
color: #00799E; color: #00799e;
> img { > img {
width: 12px; width: 12px;
...@@ -53,7 +71,7 @@ export default { ...@@ -53,7 +71,7 @@ export default {
> a { > a {
text-decoration: none; text-decoration: none;
color: #00799E; color: #00799e;
} }
} }
......
...@@ -26,18 +26,16 @@ ...@@ -26,18 +26,16 @@
</div> </div>
</div> </div>
</div> </div>
<template #prevArrow>
<div class="custom-arrow"></div>
</template>
<template #customPaging> <template #customPaging>
<div class="custom-dot"></div> <div class="custom-dot"></div>
</template> </template>
<!-- <template #prevArrow="arrowOption"> <template #nextArrow>
<div class="custom-arrow"> <div class="custom-arrow"></div>
<img </template>
src="../../assets/image/home/prev.png"
class="d-block w-100"
alt="..."
/>
</div>
</template> -->
</VueSlickCarousel> </VueSlickCarousel>
</div> </div>
<!-- 要闻、中心、地方、国际 --> <!-- 要闻、中心、地方、国际 -->
...@@ -218,7 +216,7 @@ ...@@ -218,7 +216,7 @@
<div class="row"> <div class="row">
<template v-for="(tmp, i) in dzfw"> <template v-for="(tmp, i) in dzfw">
<div <div
class="col-lg-4 dzfw-li" class="col-6 col-lg-4 dzfw-li"
:key="i" :key="i"
v-if="tmp.isChecked" v-if="tmp.isChecked"
@click="dzfwHandelClick(i)" @click="dzfwHandelClick(i)"
...@@ -445,15 +443,15 @@ ...@@ -445,15 +443,15 @@
:key="i" :key="i"
> >
<div class="row"> <div class="row">
<div <div
class="col-lg-4" class="col-lg-4"
v-for="(tmpB, ii) in tmpA" v-for="(tmpB, ii) in tmpA"
:key="ii" :key="ii"
@click="handelSmallImagesClick(tmpB)" @click="handelSmallImagesClick(tmpB)"
> >
<img :src="tmpB.picIndexPath" /> <img :src="tmpB.picIndexPath" />
</div>
</div> </div>
</div>
</div> </div>
<template #prevArrow> <template #prevArrow>
<div class="custom-arrow"></div> <div class="custom-arrow"></div>
...@@ -573,8 +571,8 @@ export default { ...@@ -573,8 +571,8 @@ export default {
keywords: "", keywords: "",
banner: [], // 首页大轮播图 banner: [], // 首页大轮播图
bannerSettings: { bannerSettings: {
arrows: false, arrows: true,
autoplay: true, autoplay: false,
dots: true, dots: true,
centerMode: true, centerMode: true,
centerPadding: "0% 0% 0%", centerPadding: "0% 0% 0%",
...@@ -1179,7 +1177,7 @@ export default { ...@@ -1179,7 +1177,7 @@ export default {
&::before { &::before {
background: url("../../assets/image/home/prevArrow-hover.png") background: url("../../assets/image/home/prevArrow-hover.png")
no-repeat; no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
} }
...@@ -1197,7 +1195,7 @@ export default { ...@@ -1197,7 +1195,7 @@ export default {
&::before { &::before {
background: url("../../assets/image/home/nextArrow-hover.png") background: url("../../assets/image/home/nextArrow-hover.png")
no-repeat; no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
} }
...@@ -1206,6 +1204,21 @@ export default { ...@@ -1206,6 +1204,21 @@ export default {
} }
} }
.banner { .banner {
.slick-arrow {
margin: 0 10px;
&.slick-prev {
&::before {
width: 10px;
height: 18px;
}
}
&.slick-next {
&::before {
width: 10px;
height: 18px;
}
}
}
.slick-dots { .slick-dots {
bottom: 25px !important; bottom: 25px !important;
li { li {
...@@ -1275,6 +1288,12 @@ export default { ...@@ -1275,6 +1288,12 @@ export default {
} }
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.banner {
.carousel-title {
font-size: 50px;
line-height: 60px;
}
}
.dzfwDialog-width { .dzfwDialog-width {
width: 980px; width: 980px;
margin: 0 auto; margin: 0 auto;
...@@ -1293,6 +1312,12 @@ export default { ...@@ -1293,6 +1312,12 @@ export default {
} }
} }
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.banner {
.carousel-title {
font-size: 25px;
line-height: 30px;
}
}
.dzfwDialog-width { .dzfwDialog-width {
width: 140px; width: 140px;
margin: 0 auto; margin: 0 auto;
...@@ -1331,8 +1356,6 @@ export default { ...@@ -1331,8 +1356,6 @@ export default {
justify-content: center; justify-content: center;
.carousel-title { .carousel-title {
color: #ffffff; color: #ffffff;
line-height: 60px;
font-size: 50px;
} }
.carousel-note { .carousel-note {
font-size: 16px; font-size: 16px;
...@@ -1755,7 +1778,6 @@ export default { ...@@ -1755,7 +1778,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
} }
} }
......
<template> <template>
<div class="pages"> <div class="pages">
<div class="pages-left"> <div class="pages-left">
<div class="total">共533条,第1/34页</div> <div class="total" v-if="false">共533条,第1/34页</div>
<div class="sizes"> <div class="sizes" v-if="false">
<span>每页显示</span> <span>每页显示</span>
<el-select v-model="pages.size" size="mini"> <el-select v-model="pages.size" size="mini">
<el-option <el-option
...@@ -16,17 +16,20 @@ ...@@ -16,17 +16,20 @@
</div> </div>
</div> </div>
<div class="pages-middle"> <div class="pages-middle">
<button class="pages-btn">首页</button> <button class="pages-btn" v-if="false">首页</button>
<el-pagination <el-pagination
:page-size="20" :page-size="20"
:pager-count="5" :pager-count="5"
layout="prev, pager, next" layout="prev, pager, next"
:total="1000" :total="1000"
background
> >
<span>1111</span>
</el-pagination> </el-pagination>
<button class="pages-btn">尾页</button> <button class="pages-btn" v-if="false">尾页</button>
</div> </div>
<div class="pages-right"> <div class="pages-right" v-if="false">
<span>跳转至</span> <span>跳转至</span>
<div class="jumper"> <div class="jumper">
<input type="text" /> <input type="text" />
...@@ -58,17 +61,54 @@ export default { ...@@ -58,17 +61,54 @@ export default {
line-height: 30px; line-height: 30px;
} }
} }
.el-pager { .el-pagination {
li { &.is-background {
font-size: 12px; button {
padding: 0 2px; margin: 0;
min-width: 30px; box-sizing: border-box;
&.active { width: 36px;
color: #f26335; height: 36px;
border: 1px solid #f26335; line-height: 36px;
color: #0e2c6b;
}
.btn-prev {
border-right: 1px solid #d5e3f2;
border-radius: 4px 0px 0px 4px;
}
.btn-next {
border-left: 1px solid #d5e3f2;
border-radius: 0px 4px 4px 0px;
}
.el-pager {
li {
font-size: 12px;
width: 36px;
height: 36px;
line-height: 36px;
color: #0e2c6b;
border-radius: 0;
margin: 0;
border-right: 1px solid #d5e3f2;
box-sizing: border-box;
background: #f0f5fa;
}
li {
&:not(.disabled).active {
background: #c4d7ed;
color: #0e2c6b;
}
&:hover {
color: #0e2c6b;
background: #e5f0fc;
}
&:last-child {
border: 0;
}
}
} }
} }
} }
button { button {
font-size: 12px; font-size: 12px;
background: #ffffff; background: #ffffff;
...@@ -84,7 +124,7 @@ export default { ...@@ -84,7 +124,7 @@ export default {
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 12px; font-size: 12px;
>div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -112,16 +152,16 @@ export default { ...@@ -112,16 +152,16 @@ export default {
} }
.pages-right { .pages-right {
margin-left: 10px; margin-left: 10px;
span{ span {
margin-right: 10px; margin-right: 10px;
} }
.jumper { .jumper {
border: 1px solid #cccccc; border: 1px solid #cccccc;
.pages-btn { .pages-btn {
border-left: 1px solid #cccccc; border-left: 1px solid #cccccc;
} }
input{ input {
width: 40px; width: 40px;
} }
} }
} }
......
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