Skip to content

G
gs1
Commit 40e93487 by 林家欣
Options

fix: 修改带箭头button样式

parent 0f8027f1
Showing with 62 additions and 28 deletions
src/views/Home/comps/list.vue
...@@ -73,13 +73,25 @@ export default { ...@@ -73,13 +73,25 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
background: #F26335; background: #CD3C0D;
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
&:hover{ &:hover{
background: #A82C04; background: #A82C05;
img{ img{
right: 14px; right: 17px;
}
}
&:focus{
background: #CD3C0D;
img{
right: 20px;
}
}
&:active{
background: #912305;
img{
right: 17px;
} }
} }
span{ span{
......
src/views/Home/index.vue
...@@ -13,10 +13,8 @@ ...@@ -13,10 +13,8 @@
{{ el.brief }} {{ el.brief }}
</p> </p>
<button class="carousel-btn" @click="learnMore(i)"> <button class="carousel-btn" @click="learnMore(i)">
<span>了解更多</span><img <span>了解更多</span
src="../../assets/image/home/more-arrow.png" ><img src="../../assets/image/home/more-arrow.png" alt="" />
alt=""
/>
</button> </button>
</div> </div>
<div class="col-5 carousel-caption-right d-lg-block"> <div class="col-5 carousel-caption-right d-lg-block">
...@@ -360,7 +358,9 @@ ...@@ -360,7 +358,9 @@
</div> </div>
<div class="spqqsfz-cont row"> <div class="spqqsfz-cont row">
<div class="spqqsfz-cont-left col-lg-2"> <div class="spqqsfz-cont-left col-lg-2">
<div class="spqqsfz-cont-left-tp"><img :src="spqqsfz.surl" alt="" /></div> <div class="spqqsfz-cont-left-tp">
<img :src="spqqsfz.surl" alt="" />
</div>
</div> </div>
<div class="spqqsfz-cont-right col-lg-10"> <div class="spqqsfz-cont-right col-lg-10">
<!-- <img src="../../assets/image/home/spqqsfz-bj2.png" alt="" /> --> <!-- <img src="../../assets/image/home/spqqsfz-bj2.png" alt="" /> -->
...@@ -382,10 +382,8 @@ ...@@ -382,10 +382,8 @@
<div class="row"> <div class="row">
<div class="col offset-2 offset-lg-3"> <div class="col offset-2 offset-lg-3">
<button class="spqqsfz-btn" @click="spqqsfzHandelClick"> <button class="spqqsfz-btn" @click="spqqsfzHandelClick">
<span>更多商品信息</span><img <span>更多商品信息</span
src="../../assets/image/home/more-arrow.png" ><img src="../../assets/image/home/more-arrow.png" alt="" />
alt=""
/>
</button> </button>
</div> </div>
</div> </div>
...@@ -1316,7 +1314,7 @@ export default { ...@@ -1316,7 +1314,7 @@ export default {
} }
} }
} }
.ywzxdfgj{ .ywzxdfgj {
padding: 30px 0; padding: 30px 0;
} }
.dzfwDialog-width { .dzfwDialog-width {
...@@ -1336,8 +1334,8 @@ export default { ...@@ -1336,8 +1334,8 @@ export default {
width: 24.4%; width: 24.4%;
} }
} }
.spqqsfz-cont-left{ .spqqsfz-cont-left {
.spqqsfz-cont-left-tp{ .spqqsfz-cont-left-tp {
position: absolute; position: absolute;
} }
} }
...@@ -1399,23 +1397,35 @@ export default { ...@@ -1399,23 +1397,35 @@ export default {
height: 37px; height: 37px;
display: flex; display: flex;
align-items: center; align-items: center;
background: #0e2c6b; background: #0E2C6B;
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
position: relative; position: relative;
span{ span {
margin-left: 18px; margin-left: 18px;
} }
&:hover{ &:hover {
background: #061A4D;
img {
right: 17px;
}
}
&:focus {
background: #0E2C6B;
img {
right: 20px;
}
}
&:active {
background: #061A4D; background: #061A4D;
img{ img {
right: 10px; right: 17px;
} }
} }
img { img {
position: absolute; position: absolute;
right: 15px; right: 20px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
...@@ -1652,7 +1662,7 @@ export default { ...@@ -1652,7 +1662,7 @@ export default {
justify-content: center; justify-content: center;
border-top: 1px solid #f0f5fa; border-top: 1px solid #f0f5fa;
} }
.dzfw-tp{ .dzfw-tp {
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1782,18 +1792,30 @@ export default { ...@@ -1782,18 +1792,30 @@ export default {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
position: relative; position: relative;
span{ span {
margin-left: 18px; margin-left: 18px;
} }
&:hover{ &:hover {
background: #061a4d; background: #061A4D;
img{ img {
right: 10px; right: 17px;
}
}
&:active {
background: #061A4D;
img {
right: 17px;
}
}
&:focus {
background: #0E2C6B;
img {
right: 20px;
} }
} }
img { img {
position: absolute; position: absolute;
right: 14px; right: 20px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
......
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