有时候一些框架的组件样式并不太美观但是很通用，如果你想要把它变美观些就必须要重置框架组件的样式代码，那么问题来了重置样式有时候是一件特别费事的工作，而且还可能达不到你想要的效果，这时候自己手写是一个很好的办法。（前提是你的组件功能不是很复杂）
效果：
梯形tag.png
怎么实现呢?
请往下阅读
html部分：
<div class="left-tab">
<div class="tab_card">
<div class="tab_bth"
v-for="(val, index) in tagText"
:key="index"
:class="[activeTabbtn === val.id ? 'active_tab_bth' : '']"
@click="changeTag(val.id)"
>
{{val.name}}
</div>
<!-- <div class="tab_bth"></div>-->
</div>
<p style="width: 200px; height: 1px; background: #fff; position: relative; top: 0; z-index: 2"></p>
<div class="tab_wapper">
<transition name="fade">
<div class="freezeWater" v-if="activeTabbtn === 1">
<div class="params"
v-for="(param, index) in freezeParam"
:key="index"
@click="paramsDetMod(param)"
:class="[param.status === 0 ? 'unnormal' : '']">
<div class="param_name">{{param.name}}</div>
<div class="param_num">{{param.num}}</div>
</div>
</div>
<div class="coolWater freezeWater" v-if="activeTabbtn === 2">
<div class="params"
v-for="(param, index) in coolParam"
:key="index"
:class="[param.status === 0 ? 'unnormal' : '']"
>
<div class="param_name">{{param.name}}</div>
<div class="param_num">{{param.num}}</div>
</div>
</div>
</transition>
</div>
</div>
css部分：
.left-tab {
width: 200px;
height: 860px;
margin-right: 20px;
.tab_card {
display: flex;
padding-left: 5px;
padding-right: 5px;
z-index: 20;
.tab_bth {
box-shadow: 0 0 2px 0 rgba(46, 84, 200, 0.2);
position: relative;
width: 74px;
height: 56px;
margin-right: 12px;
margin-left: 12px;
background: #ccd8ff;
border-radius: 6px 6px 0 0;
font-size: 16px;
color: #666666;
text-align: center;
line-height: 56px;
&:hover {
cursor: pointer;
}
}
.tab_bth:before{
content: '';
display: block;
width: 20px;
height: 56px;
position: absolute;
-webkit-transform: skewX(-10deg);
box-shadow: -1px 0 2px 0 rgba(46, 84, 200, 0.2);
transform: skewX(-10deg);
background: #ccd8ff;
border-top-left-radius: 4px;
left: -12px;
top: 0;
}
.tab_bth:after{
content: '';
display: block;
width: 20px;
height: 56px;
position: absolute;
-webkit-transform: skewX(10deg);
box-shadow: 1px 0 2px 0 rgba(46, 84, 200, 0.2);
transform: skewX(10deg);
background: #ccd8ff;
border-top-right-radius:4px;
top:0;
right:-12px;
}
.active_tab_bth {
background: rgba(255,255,255,1);
color: rgba(61, 108, 253, 1);
/*box-shadow: 0px -1px 2px 0px rgba(46, 84, 200, 0.2);*/
}
.active_tab_bth:before{
content: '';
display: block;
width: 20px;
height: 56px;
position: absolute;
box-shadow: -1px 0 2px 0 rgba(46, 84, 200, 0.2);
-webkit-transform: skewX(-10deg);
transform: skewX(-10deg);
background: rgba(255,255,255,1);
border-top-left-radius: 4px;
left: -12px;
top: 0;
}
.active_tab_bth:after{
content: '';
display: block;
width: 20px;
height: 56px;
position: absolute;
z-index: 1;
box-shadow: 1px 0 2px 0 rgba(46, 84, 200, 0.2);
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
background: rgba(255,255,255,1);
border-top-right-radius:4px;
top:0;
right:-12px;
}
}
.tab_wapper{
height:804px;
background: rgba(255,255,255,1);
box-shadow:0 0 4px 0 rgba(46,84,200,0.2);
border-radius:0 0 4px 4px;
padding: 0px 10px 18px;
.freezeWater {
height:804px;
display: flex;
flex-direction: column;
justify-content: space-around;
.params {
width:180px;
height:120px;
background:rgba(62,108,253,1);
border-radius:4px;
color: rgba(255, 255, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
&:hover {
cursor: pointer;
box-shadow:0 0 7px 1px rgba(24,61,178,0.6);
}
.param_name {
padding-top: 10px;
padding-left: 10px;
font-size: 14px;
}
.param_num {
text-align: center;
font-size: 30px;
margin-top: 20px;
}
}
.unnormal {
background: rgba(244, 110, 100, 1);
&:hover {
cursor: pointer;
box-shadow:0 0 7px 1px rgba(185,24,12,0.6);
}
}
.params:first-child {
margin-top: 10px;
}
.params:last-child {
margin-bottom: 10px;
}
}
.coolWater {}
}
}
js部分：
data () {
return {
activeTabbtn: 1,
tagText: [ { name: '冷冻水', id: 1 }, { name: '冷却水', id: 2 } ],
freezeParam: [
{ name: '瞬时流量(m³)', num: 26546, status: 1 },
{ name: '瞬时冷量(m³)', num: 26546, status: 0 },
{ name: '供水压力(Mpa)', num: 26546, status: 1 },
{ name: '回水压力(Mpa)', num: 26546, status: 1 },
{ name: '供水温度(℃)', num: 26546, status: 1 },
{ name: '回水温度(℃)', num: 26546, status: 1 },
{ name: '回水温度(℃)', num: 26546, status: 1 }
],
coolParam: [
{ name: '瞬时流量(m³)', num: 26546, status: 1 },
{ name: '瞬时冷量(m³)', num: 26546, status: 1 },
{ name: '供水压力(Mpa)', num: 26546, status: 0 },
{ name: '回水压力(Mpa)', num: 26546, status: 1 },
{ name: '供水温度(℃)', num: 26546, status: 1 },
{ name: '回水温度(℃)', num: 26546, status: 0 }
],
}
},
methods: {
changeTag (val) {
if (this.activeTabbtn === val) return false
this.activeTabbtn = val
},
// 参数详情弹框
paramsDetMod (item) {
this.paramsDetModal = true
this.paramsTitle = item.name
}
}
网友评论