Skip to content

G
gs1
Commit 1f8ce75f by Lyan
Options

首页样式调试修改

parent f7dd0be5
Showing with 117 additions and 40 deletions
src/views/Home/index.vue
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="d-none d-lg-block banner-tp">--> <!-- <div class="d-none d-lg-block banner-tp">
<!-- <img :src="el.picIndexPath" alt="" class="container"/>--> <img :src="el.picIndexPath" alt="" class="container"/>
<!-- </div>--> </div> -->
<div class="banner-bg"> <div class="banner-bg">
<img :src="el.picIndexPath" alt="" /> <img :src="el.picIndexPath" alt="" />
</div> </div>
...@@ -235,6 +235,11 @@ ...@@ -235,6 +235,11 @@
<span>产品信息</span> <span>产品信息</span>
</button> </button>
</li> </li>
<li class="nav-item col-lg-2" role="presentation">
<button class="nav-link" href="#external-tab" data-toggle="pill">
<span>境外条码查询</span>
</button>
</li>
</ul> </ul>
<div class="tab-content" id="myTabContent"> <div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab"> <div class="tab-pane fade show active" id="home-tab">
...@@ -302,6 +307,31 @@ ...@@ -302,6 +307,31 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane fade" id="external-tab">
<div class="chaxun">
<div class="chaxun-kj">
<div class="row">
<div class="col-lg-9 chaxun-middle">
<el-input
placeholder="请输入正确的境外商品条码"
v-model="chaxun2.keywords"
clearable
>
</el-input>
</div>
<div class="col-lg-3 chaxun-right">
<button
@click="
tojwSearch(chaxun2.keywords)
"
>
境外条码查询
</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -380,7 +410,7 @@ ...@@ -380,7 +410,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> --> </div>
<!-- 商品全球身份证 --> <!-- 商品全球身份证 -->
<div class="spqqsfz"> <div class="spqqsfz">
<div class="container"> <div class="container">
...@@ -425,6 +455,7 @@ ...@@ -425,6 +455,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="row"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -693,6 +724,9 @@ export default { ...@@ -693,6 +724,9 @@ export default {
options2: [], options2: [],
keywords: "", keywords: "",
}, },
chaxun2:{
keywords: "",
},
whbsxtcy: [ whbsxtcy: [
{ {
ico: require("../../assets/image/home/wbsxtcy-ico1.png"), ico: require("../../assets/image/home/wbsxtcy-ico1.png"),
...@@ -1099,6 +1133,14 @@ export default { ...@@ -1099,6 +1133,14 @@ export default {
}, },
}); });
}, },
tojwSearch(keyword) {
this.$router.push({
path: "/search/external",
query: {
keyword,
},
});
},
getCustomService() { getCustomService() {
let service = localStorage.getItem("gs-custom-service") || ""; let service = localStorage.getItem("gs-custom-service") || "";
// console.log("getCustomService-----------", service); // console.log("getCustomService-----------", service);
...@@ -1552,31 +1594,49 @@ export default { ...@@ -1552,31 +1594,49 @@ export default {
.banner { .banner {
.slick-arrow { .slick-arrow {
margin: 0 10px; // margin: 0 10px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
&:hover{
border: 1.5px solid #0E2C6B;
box-shadow: 0px 3px 6px 0px rgba(14,44,107,0.21);
}
&.slick-prev { &.slick-prev {
justify-content: center;
top: auto; top: auto;
bottom: 25px; bottom: 31px;
transform: translate(0, 0); transform: translate(0, 0);
// left: 76%!important;
left: auto!important;
right: 22%!important;
&::before { &::before {
width: 10px; width: 24px;
height: 18px; height: 24px;
background: url("../../assets/image/home/prevArrow-hover.png") background: url("../../assets/image/home/prevArrow-hover1.png")
no-repeat; no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
&.slick-next { &.slick-next {
justify-content: center;
top: auto; top: auto;
bottom: 25px; bottom: 25px;
transform: translate(0, 0); transform: translate(0, 0);
right: 17.1%!important;
@media screen and (max-width: 1200px) {
right: 15%!important;
}
@media screen and (max-width: 920px) {
right: 10%!important;
}
&::before { &::before {
width: 10px; width: 24px;
height: 18px; height: 24px;
background: url("../../assets/image/home/nextArrow-hover.png") background: url("../../assets/image/home/nextArrow-hover1.png")
no-repeat; no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
...@@ -1584,6 +1644,7 @@ export default { ...@@ -1584,6 +1644,7 @@ export default {
} }
.slick-dots { .slick-dots {
display: none !important;
bottom: 25px !important; bottom: 25px !important;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1655,22 +1716,31 @@ export default { ...@@ -1655,22 +1716,31 @@ export default {
} }
.newsBannerB { .newsBannerB {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, #000000 100%); // background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, #000000 100%);
background: linear-gradient(180deg, rgba(0,0,0,0.01) 0%, #000000 100%);
} }
} }
.smallPCImages { .smallPCImages {
.slick-arrow { .slick-arrow {
width: 24px; width: 28px;
height: 50px; height: 28px;
margin: 0 10px; margin: 0 10px;
background: #fff;
border-radius: 50%;
justify-content: center;
&:hover{
border: 1.5px solid #0E2C6B;
box-shadow: 0px 3px 6px 0px rgba(14,44,107,0.21);
}
&.slick-prev { &.slick-prev {
// position: relative; // position: relative;
&::before { &::before {
width: 24px; width: 16px;
height: 50px; height: 16px;
background: url("../../assets/image/home/prevArrow-hover2.png") background: url("../../assets/image/home/prevArrow-hover1.png")
no-repeat; no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
...@@ -1679,9 +1749,9 @@ export default { ...@@ -1679,9 +1749,9 @@ export default {
&.slick-next { &.slick-next {
// position: relative; // position: relative;
&::before { &::before {
width: 24px; width: 16px;
height: 50px; height: 16px;
background: url("../../assets/image/home/nextArrow-hover2.png") background: url("../../assets/image/home/nextArrow-hover1.png")
no-repeat; no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
...@@ -1747,11 +1817,11 @@ export default { ...@@ -1747,11 +1817,11 @@ export default {
.slick-arrow { .slick-arrow {
&.slick-prev { &.slick-prev {
left: 38%; left: 22%;
} }
&.slick-next { &.slick-next {
right: 38%; right: 17.1%;
} }
} }
} }
...@@ -1860,7 +1930,7 @@ export default { ...@@ -1860,7 +1930,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
.banner { .banner {
height: 420px; height: 360px;
position: relative; position: relative;
// background: #f26335; // background: #f26335;
.banner-item { .banner-item {
...@@ -2411,7 +2481,7 @@ export default { ...@@ -2411,7 +2481,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
color: #ffffff; color: #ffffff;
font-size: 18px; font-size: 18px;
margin-bottom: 30px; margin-bottom: 20px;
@media screen and (max-width: 765px) { @media screen and (max-width: 765px) {
margin-bottom: 15px; margin-bottom: 15px;
} }
...@@ -2434,7 +2504,7 @@ export default { ...@@ -2434,7 +2504,7 @@ export default {
} }
> * { > * {
height: 300px; height: 240px;
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
height: 240px; height: 240px;
} }
...@@ -2457,7 +2527,7 @@ export default { ...@@ -2457,7 +2527,7 @@ export default {
position: relative; position: relative;
background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat; background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 30px 0 38px;
.right-cont { .right-cont {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -2466,7 +2536,7 @@ export default { ...@@ -2466,7 +2536,7 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-evenly;
.row { .row {
color: #ffffff; color: #ffffff;
...@@ -2546,6 +2616,11 @@ export default { ...@@ -2546,6 +2616,11 @@ export default {
border: 1px solid rgba(197, 216, 238, 0.5000); border: 1px solid rgba(197, 216, 238, 0.5000);
margin-top: 30px; margin-top: 30px;
border-radius: 8px; border-radius: 8px;
&:hover{
transform: translateY(-4px);
box-shadow: 0 10px 30px 0 rgba(165, 165, 167, 0.6);
cursor: pointer;
}
.top-p{ .top-p{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -2589,10 +2664,7 @@ export default { ...@@ -2589,10 +2664,7 @@ export default {
margin: 0 20px 0 20px; margin: 0 20px 0 20px;
} }
} }
&:hover{
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.14);
cursor: pointer;
}
} }
...@@ -2612,7 +2684,7 @@ export default { ...@@ -2612,7 +2684,7 @@ export default {
} }
img{ img{
height: 166px; height: 130px;
} }
.home-bottom-cont { .home-bottom-cont {
...@@ -2639,7 +2711,7 @@ export default { ...@@ -2639,7 +2711,7 @@ export default {
} }
.smallPCImages { .smallPCImages {
margin: 40px 0; margin: 20px 0 30px;
.smallPCImages-item { .smallPCImages-item {
img { img {
......
src/views/News/msg.vue
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<div class="xglj"> <div class="xglj">
<div class="container"> <div class="container">
<div class="cate"> <div class="cate">
<span>相关连接</span> <span>相关链接</span>
<!-- <span>更多>></span> --> <!-- <span>更多>></span> -->
</div> </div>
<list :list="xgljListArr" @getInfo="getInfo" /> <list :list="xgljListArr" @getInfo="getInfo" />
......
src/views/News/msgVideo.vue
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<div class="xglj"> <div class="xglj">
<div class="container"> <div class="container">
<div class="cate"> <div class="cate">
<span>相关连接</span> <span>相关链接</span>
<!-- <span>更多>></span> --> <!-- <span>更多>></span> -->
</div> </div>
<list :list="xgljListArr" @getInfo="getInfo" /> <list :list="xgljListArr" @getInfo="getInfo" />
......
src/views/Search/external.vue
...@@ -96,6 +96,11 @@ export default { ...@@ -96,6 +96,11 @@ export default {
file: '', file: '',
}; };
}, },
created() {
if (this.$route.query.keyword) {
this.search.code=this.$route.query.keyword
}
},
computed: { computed: {
...mapState(["urls"]), ...mapState(["urls"]),
}, },
......
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