Final result picture:
background:
Recently, I have been stuck on the project data large screen style. The reason is that the UI design wants the button border to have rounded corners and a transparent gradient. I searched a lot of information and asked questions in the Q&A, but the initial style was not implemented. The reason is that if you want to use a gradient border, you will use the attribute border-image. This attribute has a bug and cannot be used with border-radius rounded corners. I have tried using pseudo-classes and boxes. If you want to do it through pseudo-classes or boxes, the background cannot be transparent. Therefore, I discussed with the UI design and changed it to an opaque background style, which is the box I used. It is recommended that if you are in my situation, you should either avoid gradient borders and rounded corners, or gradient rounded borders without a transparent background.
Code:
<div class="btn-container">
<!--按钮组-->
<div class="btn-group">
<div class="btn-left" :class="activeCountNum===1?'active':''" @click="handleCount(1)">
<div class="btn">按城市</div>
</div>
<div class="btn-center" :class="activeCountNum===2?'active':''" @click="handleCount(2)">
<div class="btn">按空间</div>
</div>
<div class="btn-right" :class="activeCountNum===3?'active':''" @click="handleCount(3)">
<div class="btn">按产品</div>
</div>
</div>
<!--导出-->
<div class="btn-export" @click="exportFile">
<div class="export">导出</div>
</div>
</div>
handleCount(value){
this.activeCountNum=Number(value)
},
.btn-container{
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
margin:10px 20px 0 20px;
.btn-group{
display: flex;
flex-direction: row;
height: 32px;
.btn-left,.btn-center,.btn-right{
box-sizing: border-box;
padding: 1px;
background-image:linear-gradient(180deg, #4DAAFA 0%, #074B98 100%);
.btn{
margin-right: 1px;
color: #ffffff;
font-size: 14px;
line-height: 30px;
text-align: center;
background: linear-gradient(180deg, #11498B 0%, #082F67 100%);
padding:0 10px;
}
&:hover,&:active{
.btn{
background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
}
}
}
.btn-left{
border-radius: 4px 0 0 4px;
padding-right: 0px;
.btn{
border-radius: 4px 0 0 4px;
padding: 0 14px;
}
}
.btn-right{
border-radius: 0 4px 4px 0;
padding-left: 0px;
.btn{
border-radius: 0 4px 4px 0;
}
}
.active{
.btn{
background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
}
}
}
.btn-export{
width: 70px;
height: 32px;
box-sizing: border-box;
padding: 1px;
border-radius: 4px;
background-image:linear-gradient(180deg, #4DAAFA 0%, #074B98 100%);
.export{
width: 100%;
height: 100%;
color: #ffffff;
font-size: 14px;
line-height: 30px;
text-align: center;
border-radius: 4px;
background: linear-gradient(180deg, #11498B 0%, #082F67 100%);
}
&:hover,&:active{
.export{
background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
}
}
}
}