HTML:
<ul class="power">
<li>
<span>实时功耗：</span>
<span>{{ shaminerObj.power | powerFormate }}</span>
</li>
<li>
<span>预估日电费：</span>
<span>{{ shaminerObj.electricCost / 100 }}</span>
</li>
</ul>
CSS:
.power{
height: 28px;
overflow: hidden;
>li{
transition: all 0.5s;
display: flex;
align-items: center;
}
&:hover{
>li:first-child{
margin-top: -28px;
}
}
}
悬浮前正常显示的内容
悬浮后内容自动显示算力曲线
