大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
效果如图所示:竖列的我用的旋转横列90度实现的
wxml:
<view class=”complex”>
<view data-charge=’0′ class=”battery”></view>
<view data-charge=’1′ class=”battery”></view>
<view data-charge=’2′ class=”battery”></view>
<view data-charge=’3′ class=”battery”></view>
<view data-charge=’4′ class=”battery”></view>
<view data-charge=’5′ class=”battery”></view>
<view data-charge=’6′ class=”battery”></view>
<view data-charge=’7′ class=”battery”></view>
<view data-charge=’8′ class=”battery”></view>
<view data-charge=’9′ class=”battery”></view>
<view data-charge=’10’ class=”battery”></view>
</view>
<view class=”complex”>
<view data-charge=’0′ class=”battery1″></view>
<view data-charge=’1′ class=”battery1″></view>
<view data-charge=’2′ class=”battery1″></view>
<view data-charge=’3′ class=”battery1″></view>
<view data-charge=’4′ class=”battery1″></view>
<view data-charge=’5′ class=”battery1″></view>
<view data-charge=’6′ class=”battery1″></view>
<view data-charge=’7′ class=”battery1″></view>
<view data-charge=’8′ class=”battery1″></view>
<view data-charge=’9′ class=”battery1″></view>
<view data-charge=’10’ class=”battery1″></view>
</view>
wxss:
.battery {
color: #34495e;
border: 1px solid currentColor;
display: inline-block;
width: 50px;
height: 20px;
position: relative;
border-radius: 2px;
display: border-box;
margin: 5px;
}
.battery::before,
.battery::after {
content: “”;
position: absolute;
}
.battery::before {
top: 2px;
bottom: 2px;
right: -3px;
width: 1px;
display: border-box;
border: 1px solid currentColor;
border-left: 0;
}
.battery::after {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 1px;
border-radius: 1px;
background-color: currentColor;
transition: right 500ms;
}
.battery.low {
color: #c0392b;
}
.battery.low::after {
right: 80%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.battery.med {
color: #f39c12;
}
.battery.med::after {
right: 40%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.battery.full {
color: #27ae60;
}
.battery[data-charge=’0′],
.battery[data-charge=’1′],
.battery[data-charge=’2′],
.battery[data-charge=’3′] {
color: #c0392b;
}
.battery[data-charge=’4′],
.battery[data-charge=’5′],
.battery[data-charge=’6′] {
color: #f39c12;
}
.battery[data-charge=’7′],
.battery[data-charge=’8′],
.battery[data-charge=’9′],
.battery[data-charge=’10’] {
color: #27ae60;
}
.battery[data-charge=’0′]::after {
right: 100%;
}
.battery[data-charge=’1′]::after {
right: 85%;
}
.battery[data-charge=’2′]::after {
right: 80%;
}
.battery[data-charge=’3′]::after {
right: 70%;
}
.battery[data-charge=’4′]::after {
right: 60%;
}
.battery[data-charge=’5′]::after {
right: 50%;
}
.battery[data-charge=’6′]::after {
right: 40%;
}
.battery[data-charge=’7′]::after {
right: 30%;
}
.battery[data-charge=’8′]::after {
right: 20%;
}
.battery[data-charge=’9′]::after {
right: 10%;
}
.battery[data-charge=’10’]::after {
right: 0%;
}
/*纵向*/
.battery1 {
color: #34495e;
border: 1px solid currentColor;
display: inline-block;
width: 50px;
height: 20px;
position: relative;
border-radius: 2px;
display: border-box;
margin: 30px;
transform: rotate(-90deg);
/* transition: color 500ms; */
}
.battery1::before,
.battery1::after {
content: “”;
position: absolute;
}
.battery1::before {
top: 2px;
bottom: 2px;
right: -3px;
width: 1px;
display: border-box;
border: 1px solid currentColor;
border-left: 0;
}
.battery1::after {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 1px;
border-radius: 1px;
background-color: currentColor;
transition: right 500ms;
}
.battery1.low {
color: #c0392b;
}
.battery1.low::after {
right: 80%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.battery1.med {
color: #f39c12;
}
.battery1.med::after {
right: 40%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.battery1.full {
color: #27ae60;
}
.battery1[data-charge=’0′],
.battery1[data-charge=’1′],
.battery1[data-charge=’2′],
.battery1[data-charge=’3′] {
color: #c0392b;
}
.battery1[data-charge=’4′],
.battery1[data-charge=’5′],
.battery1[data-charge=’6′] {
color: #f39c12;
}
.battery1[data-charge=’7′],
.battery1[data-charge=’8′],
.battery1[data-charge=’9′],
.battery1[data-charge=’10’] {
color: #27ae60;
}
.battery1[data-charge=’0′]::after {
right: 100%;
}
.battery1[data-charge=’1′]::after {
right: 85%;
}
.battery1[data-charge=’2′]::after {
right: 80%;
}
.battery1[data-charge=’3′]::after {
right: 70%;
}
.battery1[data-charge=’4′]::after {
right: 60%;
}
.battery1[data-charge=’5′]::after {
right: 50%;
}
.battery1[data-charge=’6′]::after {
right: 40%;
}
.battery1[data-charge=’7′]::after {
right: 30%;
}
.battery1[data-charge=’8′]::after {
right: 20%;
}
.battery1[data-charge=’9′]::after {
right: 10%;
}
.battery1[data-charge=’10’]::after {
right: 0%;
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171046.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...