Skip to content

G
gs1
Commit 67ddf9f1 by 林家欣
Options

fix: 修改首页焦点图显示

parent c52e2b5b
Showing with 229 additions and 108 deletions
src/components/layout/footer.vue
......@@ -73,7 +73,6 @@ export default {
div{
width: 100%;
text-align: center;
}
}
.beian{
......@@ -124,7 +123,7 @@ export default {
display: flex;
flex-wrap: wrap;
justify-content: center;
span {
div {
padding: 0 20px;
&:first-child {
margin: 0;
......
src/views/Business/Training.vue
......@@ -333,6 +333,7 @@ export default {
color: #454545;
padding-left: 30px;
padding-right: 30px;
font-size: 15px;
&.active,
&:hover {
border-bottom: 3px solid #f26335;
......
src/views/Home/index.vue
......@@ -4,7 +4,7 @@
<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">
<div class="banner-item" :style="{background:el.colorBackground}">
<div class="container">
<div class="row">
<div class="col-lg-7 carousel-caption-left">
......@@ -12,15 +12,18 @@
<p class="carousel-note">
{{ el.brief }}
</p>
<button class="carousel-btn" @click="learnMore(i)">
<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-tp d-lg-block">
<img :src="el.picIndexPath" alt="" />
<div class="d-none d-lg-block">
<img :src="el.picIndexPath" alt="" class="banner-tp"/>
</div>
</div>
</div>
......@@ -379,7 +382,7 @@
</div>
<div class="row">
<div class="col offset-2 offset-lg-3">
<button class="spqqsfz-btn" @click="spqqsfzHandelClick">
<button class="spqqsfz-btn blue" @click="spqqsfzHandelClick">
<span>更多商品信息</span
><img src="../../assets/image/home/more-arrow.png" alt="" />
</button>
......@@ -426,15 +429,15 @@
</div>
</div>
</div>
<div class="smallImages">
<div class="smallPCImages pc">
<VueSlickCarousel
v-bind="smallImagesSettings"
v-if="smallImages.length > 0"
ref="smallImages"
v-bind="smallPCImagesSettings"
v-if="smallPCImages.length > 0"
ref="smallPCImages"
>
<div
class="smallImages-item"
v-for="(tmpA, i) in smallImages"
class="smallPCImages-item"
v-for="(tmpA, i) in smallPCImages"
:key="i"
>
<div class="row">
......@@ -465,7 +468,7 @@
<div class="carousel-inner">
<div
:class="['carousel-item', { active: i === 0 }]"
v-for="(tmpA, i) in smallImages"
v-for="(tmpA, i) in smallPCImages"
:key="i"
>
<div class="row">
......@@ -498,6 +501,34 @@
</button>
</div>
</div>
<div class="smallPCImages H5">
<VueSlickCarousel
v-bind="smallH5ImagesSettings"
v-if="smallPCImages.length > 0"
ref="smallPCImages"
>
<div
class="smallPCImages-item"
v-for="(tmpA, i) in smallH5Images"
:key="i"
>
<div class="row">
<div class="col">
<img :src="tmpA.picIndexPath" />
</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>
</div>
<notice />
......@@ -567,7 +598,8 @@ export default {
banner: [], // 首页大轮播图
bannerSettings: {
arrows: true,
autoplay: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
centerMode: true,
centerPadding: "0% 0% 0%",
......@@ -921,14 +953,22 @@ export default {
},
],
},
smallImages: [],
smallImagesSettings: {
smallPCImages: [],
smallH5Images: [],
smallPCImagesSettings: {
arrows: true,
autoplay: false,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
},
smallH5ImagesSettings: {
arrows: true,
autoplay: false,
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
},
};
},
created() {
......@@ -1033,15 +1073,16 @@ export default {
let list = [];
data.forEach((el, i) => {
el.picIndexPath = `http://www.gs1cn.org/img/demo/${el.picIndexPath}`;
this.smallH5Images.push(el);
list.push(el);
if ((i + 1) % 3 === 0) {
this.smallImages.push(list);
this.smallPCImages.push(list);
list = [];
} else if (i === data.length - 1) {
this.smallImages.push(list);
this.smallPCImages.push(list);
}
});
console.log(homeSmallImagesRes, "首页小轮播图");
console.log(this.smallH5Images, homeSmallImagesRes, "首页小轮播图");
}
},
// 首页小轮播图点击跳转
......@@ -1278,7 +1319,7 @@ export default {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, #000000 100%);
}
}
.smallImages {
.smallPCImages {
.slick-arrow {
width: 24px;
height: 50px;
......@@ -1304,6 +1345,48 @@ export default {
}
}
}
&.H5 {
font-size: auto;
.slick-arrow {
&.slick-prev {
top: auto;
bottom: 0;
transform: translate(0, 0);
}
&.slick-next {
top: auto;
bottom: 0;
transform: translate(0, 0);
}
}
.slick-dots {
bottom: 0 !important;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
line-height: 50px;
li {
width: 10px;
height: 10px;
&.slick-active {
.custom-dot {
background: #ffffff;
opacity: 1;
}
}
.custom-dot {
border-radius: 50%;
width: 100%;
height: 100%;
background: #fff;
line-height: 1;
padding: 0;
opacity: 0.5;
}
}
}
}
}
}
@media screen and (min-width: 992px) {
......@@ -1314,10 +1397,10 @@ export default {
}
.slick-arrow {
&.slick-prev {
left: 44%;
left: 38%;
}
&.slick-next {
right: 44%;
right: 38%;
}
}
}
......@@ -1353,10 +1436,21 @@ export default {
margin-top: 30px;
.spqqsfz-cont-left {
.spqqsfz-cont-left-tp {
height: 100%;
position: absolute;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.pc {
display: block;
}
.H5 {
display: none;
}
}
@media screen and (max-width: 992px) {
.banner {
......@@ -1394,6 +1488,12 @@ export default {
width: 100%;
}
}
.pc {
display: none;
}
.H5 {
display: block;
}
}
</style>
<style lang="scss" scoped>
......@@ -1406,14 +1506,21 @@ export default {
height: 100%;
position: relative;
.banner-tp {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
// transform: translateX(-50%);
z-index: 1;
text-align: center;
display: flex !important;
justify-content: center;
}
.container,
.row {
height: 100%;
position: relative;
z-index: 9;
}
.carousel-caption-left {
display: flex;
......@@ -1433,7 +1540,6 @@ export default {
height: 37px;
display: flex;
align-items: center;
background: #0e2c6b;
border-radius: 4px;
font-size: 16px;
color: #ffffff;
......@@ -1441,30 +1547,6 @@ export default {
span {
margin-left: 18px;
}
&:hover {
background: #061a4d;
img {
right: 17px;
}
}
&:focus {
background: #0e2c6b;
img {
right: 20px;
}
}
&:active {
background: #061a4d;
img {
right: 17px;
}
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
}
}
.carousel-caption-right {
......@@ -1485,6 +1567,60 @@ export default {
.bgWhite {
background: $bg-color;
}
.orange {
background: #cd3c0d;
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
&:hover {
background: #a82c05;
img {
right: 17px;
}
}
&:focus {
background: #cd3c0d;
img {
right: 20px;
}
}
&:active {
background: #912305;
img {
right: 17px;
}
}
}
.blue {
background: #0e2c6b;
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
&:hover {
background: #061a4d;
img {
right: 17px;
}
}
&:focus {
background: #0e2c6b;
img {
right: 20px;
}
}
&:active {
background: #061a4d;
img {
right: 17px;
}
}
}
.newsBanner {
position: relative;
.newsBanner-item {
......@@ -1768,12 +1904,12 @@ export default {
> * {
height: 300px;
}
.spqqsfz-cont-left {
img {
width: 100%;
height: 100%;
}
}
// .spqqsfz-cont-left {
// img {
// width: 100%;
// height: 100%;
// }
// }
.spqqsfz-cont-right {
position: relative;
background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat;
......@@ -1809,13 +1945,11 @@ export default {
margin-right: 35px;
}
}
.spqqsfz-btn {
width: 172px;
height: 41px;
display: flex;
align-items: center;
background: #0e2c6b;
border-radius: 4px;
color: #fff;
font-size: 18px;
......@@ -1823,30 +1957,6 @@ export default {
span {
margin-left: 18px;
}
&:hover {
background: #061a4d;
img {
right: 17px;
}
}
&:active {
background: #061a4d;
img {
right: 17px;
}
}
&:focus {
background: #0e2c6b;
img {
right: 20px;
}
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
}
}
}
......@@ -1877,9 +1987,9 @@ export default {
width: 100%;
}
}
.smallImages {
.smallPCImages {
margin: 40px 0;
.smallImages-item {
.smallPCImages-item {
img {
width: 100%;
cursor: pointer;
......
src/views/Home/sousuo.vue
......@@ -195,6 +195,7 @@ export default {
color: #454545;
padding-left: 0;
padding-right: 0;
font-size: 15px;
&.active,
&:hover {
border-bottom: 4px solid #f26335;
......
src/views/Org/GS1Members.vue
......@@ -550,6 +550,7 @@ export default {
color: #454545;
padding-left: 30px;
padding-right: 30px;
font-size: 15px;
&.active,
&:hover {
border-bottom: 3px solid #f26335;
......
src/views/Org/Leadership.vue
......@@ -8,12 +8,12 @@
</div>
<div class="col-lg-9 leadership-right">
<div class="leadership-right-nr">
<div class="name">{{tmp.name}}：</div>
<div class="note">{{tmp.position}}</div>
<div class="name" v-html="tmp.name"></div>
<div class="note" v-if="false">{{ tmp.position }}</div>
</div>
<div class="leadership-right-nr">
<div class="name">工作分工：</div>
<div class="note">{{tmp.work}}。</div>
<div class="note">{{ tmp.work }}</div>
</div>
</div>
</div>
......@@ -35,30 +35,36 @@ export default {
},
list: [
{
photo: require('../../assets/image/org/ZhangChengHai.jpg'),
name: '张成海',
position: '主任、党委副书记',
work: '负责中国物品编码中心全面工作'
photo: require("../../assets/image/org/ZhangChengHai.jpg"),
name: "张成海同志",
position: "主任、党委副书记",
work: "负责编码中心全面工作",
},
{
photo: require('../../assets/image/org/luoqiuke.jpg'),
name: '罗秋科',
position: '副主任',
work: '分管办公室、技术研究部、质量检测部、人力资源部、财务部'
photo: require("../../assets/image/org/luoqiuke.jpg"),
name: "罗秋科同志",
position: "副主任",
work: "负责编码中心生产经营管理工作。分管办公室、技术研究部、人力资源部、财务部。",
},
{
photo: require('../../assets/image/org/LiJianHui.jpg'),
name: '李建辉',
position: '总工程师',
work: '分管编码管理部、应用推广部、信息化部、产品开发运营部、成员服务部'
photo: require("../../assets/image/org/LiJianHui.jpg"),
name: "李建辉同志",
position: "总工程师",
work: "分管编码管理部、应用推广部、产品开发运营部、成员服务部。",
},
{
photo: require('../../assets/image/org/YueShanYong.jpg'),
name: '岳善勇',
position: '纪委书记',
work: '主持中国物品编码中心纪委工作。分管党委办公室（纪委办公室）'
photo: require("../../assets/image/org/chenweiqing.jpg"),
name: "陈伟清同志",
position: "纪委书记",
work: "分管信息化部、质量检测部。",
},
]
{
photo: require("../../assets/image/org/zhengjian.jpg"),
name: "郑&nbsp;&nbsp;&nbsp;&nbsp;健同志",
position: "纪委书记",
work: "主持编码中心纪委工作。分管党委办公室（纪委办公室）。",
},
],
};
},
};
......@@ -72,20 +78,23 @@ export default {
border-radius: 10px 10px 0;
background-color: #ffd;
margin: 20px 0;
.leadership-left{
.leadership-left {
display: flex;
align-items: center;
justify-content: center;
}
.leadership-right{
.leadership-right {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 0 20px 15px;
font-size: 14px;
.note{
.note {
text-indent: 24px;
padding: 10px 0;
color: #999;
}
.name {
line-height: 38px;
}
}
}
......
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