JSY/jsy-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

。

Browse Source
This commit is contained in:
王丹 2024-09-18 13:08:42 +08:00
parent 75f050768f
commit 68085f74e8
1 changed files with 120 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
pages/index.vue
View File

@ -74,9 +74,7 @@
<view class="u-collapse-content">
<u-row>
<u-col span="3">
<view class="fixed">
<text style="color: #39ac4f;">●</text>
<view>E0000104</view>
</view>
@ -95,7 +93,6 @@
</view>
<text>(12)</text>
</view>
</u-col>
<u-col span="5">
<view class="fixed">
@ -113,7 +110,20 @@
</u-col>
<u-col span="4" align="center">
<view class="fixed">
<view class="signal">
<view class="bar green"></view>
<view class="bar green"></view>
<view class="bar green"></view>
<view class="bar green"></view>
<view class="bar"></view>
<view class="bar-no" style="display: none;">
<u-icon name="close"></u-icon>
</view>
</view>
<text>(12)</text>
<div class="battery-container">
<div class="battery-level battery-level-60"></div>
</div>
</view>
</u-col>
<u-col span="5">
@ -161,7 +171,6 @@
</u-collapse>
</view>
</view>
</view>
</view>
</template>
@ -323,58 +332,7 @@
margin-bottom: 10px;
}
// 信号
.signal {
position: relative;
display: flex;
align-items: flex-end;
height: 17px;
.bar {
width: 2px;
background-color: #999;
border-radius: 2px;
margin-right: 2px;
}
.bar:nth-child(1) {
height: 4px;
background-color: #e60012;
}
.bar:nth-child(2) {
height: 7px;
background-color: #e60012;
}
.bar:nth-child(3) {
height: 10px;
background-color: #ffa200;
}
.bar:nth-child(4) {
height: 13px;
background-color: #39ac4f;
}
.bar:nth-child(5) {
height: 16px;
background-color: #39ac4f;
}
.bar-no {
position: absolute;
left: -2px;
bottom: 3px;
.u-icon__icon {
font-weight: bold;
font-size: 18rpx !important;
}
}
}
}
}
@ -417,4 +375,110 @@
}
}
// 信号
.signal {
position: relative;
display: flex;
align-items: flex-end;
height: 17px;
.bar {
width: 2px;
background-color: #999;
border-radius: 2px;
margin-right: 2px;
}
.bar:nth-child(1) {
height: 4px;
}
.bar:nth-child(2) {
height: 7px;
}
.bar:nth-child(3) {
height: 10px;
}
.bar:nth-child(4) {
height: 13px;
}
.bar:nth-child(5) {
height: 16px;
}
.bar.red {
background-color: #e60012;
}
.bar.orange {
background-color: #ffa200;
}
.bar.green {
background-color: #39ac4f;
}
.bar-no {
position: absolute;
left: -2px;
bottom: 3px;
::v-deep.u-icon__icon {
font-weight: bold;
font-size: 18rpx !important;
}
}
}
// 电池
.battery-container {
position: relative;
width: 30px;
height: 12px;
background-color: #fff;
border-radius: 4px;
}
.battery-level {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background-color: #4CAF50;
border-radius: 4px;
transition: width 0.5s;
}
/* 不同的电量级别 */
.battery-level-100 {
width: 100%;
}
.battery-level-80 {
width: 80%;
}
.battery-level-60 {
width: 60%;
}
.battery-level-40 {
width: 40%;
}
.battery-level-20 {
width: 20%;
}
.battery-level-0 {
width: 0%;
}
</style>