Skip to content

G
gs1
Commit 3e8b508e by 林家欣
Options

修改首页商品全球身份认证和业务大厅样式

parent 52139722
Showing with 96 additions and 56 deletions
src/views/Home/index.vue
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
<div class="cate">业务大厅</div> <div class="cate">业务大厅</div>
<div class="row"> <div class="row">
<div class="col-lg-6 wbsxtcy bgWhite"> <div class="col-lg-6 wbsxtcy bgWhite">
<div class="ywdt-cate"> <div class="ywdt-cate ywdt-cate-bj1">
<span>我还不是系统成员</span> <span>我还不是系统成员</span>
<span>（企业初次申请）</span> <span>（企业初次申请）</span>
</div> </div>
...@@ -284,7 +284,7 @@ ...@@ -284,7 +284,7 @@
</div> </div>
</div> </div>
<div class="col-lg-6 wsxtcy bgWhite"> <div class="col-lg-6 wsxtcy bgWhite">
<div class="ywdt-cate"> <div class="ywdt-cate ywdt-cate-bj2">
<span>我是系统成员</span> <span>我是系统成员</span>
<span>（成员专区）</span> <span>（成员专区）</span>
</div> </div>
...@@ -303,7 +303,7 @@ ...@@ -303,7 +303,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6 wsylqy bgWhite"> <div class="col-lg-6 wsylqy bgWhite">
<div class="ywdt-cate"> <div class="ywdt-cate ywdt-cate-bj1">
<span>我是医疗企业</span> <span>我是医疗企业</span>
</div> </div>
<div class="row ywdt-kj"> <div class="row ywdt-kj">
...@@ -319,7 +319,7 @@ ...@@ -319,7 +319,7 @@
</div> </div>
</div> </div>
<div class="col-lg-6 kjywblzq bgWhite"> <div class="col-lg-6 kjywblzq bgWhite">
<div class="ywdt-cate"> <div class="ywdt-cate ywdt-cate-bj2">
<span>跨境业务办理专区</span> <span>跨境业务办理专区</span>
</div> </div>
<div class="row ywdt-kj"> <div class="row ywdt-kj">
...@@ -481,22 +481,32 @@ ...@@ -481,22 +481,32 @@
<div class="spqqsfz-cate-left">商品全球身份证</div> <div class="spqqsfz-cate-left">商品全球身份证</div>
<div class="spqqsfz-cate-right">更多></div> <div class="spqqsfz-cate-right">更多></div>
</div> </div>
<div class="spqqsfz-cont"> <div class="spqqsfz-cont row">
<div class="row"> <div class="spqqsfz-cont-left col-lg-3">
<div class="col offset-lg-4">kiddy color重彩油画棒A14018</div> <img src="../../assets/image/home/spqqsfz-tp.png" alt="" />
</div> </div>
<div class="row"> <div class="spqqsfz-cont-right col-lg-9">
<div class="col-8 offset-lg-4"> <img src="../../assets/image/home/spqqsfz-bj2.png" alt="" />
<div class="pp">品牌：kiddy color</div> <div class="right-cont">
<div class="jhl">净含量：一盒</div> <div class="row">
</div> <div class="col offset-2 offset-lg-3">
<div class="col-8 offset-lg-4"> kiddy color重彩油画棒A14018
公司名称：梁介福(广东)药业有限公司 </div>
</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-8 offset-2 offset-lg-3">
<div class="col offset-lg-4"> <div class="pp">品牌：kiddy color</div>
<button>更多商品信息</button> <div class="jhl">净含量：一盒</div>
</div>
<div class="col-8 offset-2 offset-lg-3">
公司名称：梁介福(广东)药业有限公司
</div>
</div>
<div class="row">
<div class="col offset-2 offset-lg-3">
<button>更多商品信息</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -1001,10 +1011,16 @@ export default { ...@@ -1001,10 +1011,16 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
background: url("../../assets/image/home/ywdt-cate.png") no-repeat 100%
100%;
height: 73px; height: 73px;
padding-left: 24px; padding-left: 24px;
&.ywdt-cate-bj1 {
background: url("../../assets/image/home/ywdt-cate-bj1.png") no-repeat;
background-size: cover;
}
&.ywdt-cate-bj2 {
background: url("../../assets/image/home/ywdt-cate-bj2.png") no-repeat;
background-size: cover;
}
span { span {
&:nth-child(1) { &:nth-child(1) {
color: #0e2c6b; color: #0e2c6b;
...@@ -1118,8 +1134,8 @@ export default { ...@@ -1118,8 +1134,8 @@ export default {
} }
.spqqsfz { .spqqsfz {
background: #2f579c url("../../assets/image/home/spqqsfz-bj.png") no-repeat; background: #2f579c url("../../assets/image/home/spqqsfz-bj.png") no-repeat;
height: 433px; padding: 30px 0;
background-size: auto 100%; // height: 433px;
background-position: center; background-position: center;
.spqqsfz-cate { .spqqsfz-cate {
display: flex; display: flex;
...@@ -1127,44 +1143,68 @@ export default { ...@@ -1127,44 +1143,68 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
color: #ffffff; color: #ffffff;
font-size: 24px; font-size: 24px;
padding: 30px 0; margin-bottom: 30px;
} }
.spqqsfz-cont { .spqqsfz-cont {
background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat; // background: #fff url("../../assets/image/home/spqqsfz-bj2.png") no-repeat;
height: 300px; position: relative;
background-size: 100% 100%; background: #fff;
background-position: center; border-radius: 6px;
display: flex; > * {
flex-direction: column; padding: 0;
justify-content: space-around; height: 300px;
.row { }
color: #ffffff; .spqqsfz-cont-left {
&:nth-child(1) { img {
font-size: 24px; width: 100%;
height: 100%;
} }
&:nth-child(2) { }
font-size: 16px; .spqqsfz-cont-right {
> div { position: relative;
display: flex; img {
align-items: center; width: 100%;
flex-wrap: wrap; height: 100%;
}
.right-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
.row {
color: #ffffff;
&:nth-child(1) {
font-size: 24px;
}
&:nth-child(2) { &:nth-child(2) {
margin-top: 10px; font-size: 16px;
> div {
display: flex;
align-items: center;
flex-wrap: wrap;
&:nth-child(2) {
margin-top: 10px;
}
}
.pp {
font-size: 18px;
margin-right: 35px;
}
}
&:nth-child(3) {
button {
width: 156px;
height: 41px;
background: #ffffff;
border-radius: 4px;
color: #f26335;
font-size: 18px;
}
} }
}
.pp {
font-size: 18px;
margin-right: 35px;
}
}
&:nth-child(3) {
button {
width: 156px;
height: 41px;
background: #ffffff;
border-radius: 4px;
color: #f26335;
font-size: 18px;
} }
} }
} }
......
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