Skip to content

G
gs1
Commit aa867d2c by 林家欣
Options

修改头部和页脚

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