xzzn/emsapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
白菜
2026-01-15 17:51:09 +08:00
parent b558282529
commit 2f1e29dccd
14 changed files with 501 additions and 717 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
pages/work/dtdc/index.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="container">
<view class="search-icon" @click="openSearch">
<uni-icons type="search" size="40" color="#fff"></uni-icons>
<uni-icons type="search" size="25" color="#fff"></uni-icons>
</view>
<view class="list-container">
<view class="no-data" v-if="list.length === 0">暂无数据</view>
@ -10,7 +10,7 @@
<template v-slot:header>
<view class="list-header">
单体编号:{{item.deviceId}}
<button type="primary" size="mini" class="charts" @click="toDetail(item)">图表</button>
<button type="primary" size="mini" class="charts-btn" @click="toDetail(item)">图表</button>
</view>
</template>
<template v-slot:body>
@ -19,16 +19,17 @@
<uni-col :span="8">
<view>簇号</view>
</uni-col>
<uni-col :span="14">
<view class="right">{{item.clusterDeviceId}}</view>
<uni-col :span="16">
<view class="right">{{item.clusterDeviceId || '-'}}</view>
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="8">
<view>电压（V）</view>
</uni-col>
<uni-col :span="14">
<view class="right color" @click="toDetail(item,'voltage')">{{item.voltage}}
<uni-col :span="16">
<view class="right color">
<text @click="toDetail(item,'voltage')">{{item.voltage | formatNumber}}</text>
</view>
</uni-col>
</uni-row>
@ -36,9 +37,10 @@
<uni-col :span="8">
<view>温度（℃）</view>
</uni-col>
<uni-col :span="14">
<view class="right color" @click="toDetail(item,'temperature')">
{{item.temperature}}
<uni-col :span="16">
<view class="right color">
<text
@click="toDetail(item,'temperature')">{{item.temperature | formatNumber}}</text>
</view>
</uni-col>
</uni-row>
@ -46,16 +48,20 @@
<uni-col :span="8">
<view>SOC（%）</view>
</uni-col>
<uni-col :span="14">
<view class="right color" @click="toDetail(item,'soc')">{{item.soc}}</view>
<uni-col :span="16">
<view class="right color">
<text @click="toDetail(item,'soc')">{{item.soc | formatNumber}}</text>
</view>
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="8">
<view>SOH（%）</view>
</uni-col>
<uni-col :span="14">
<view class="right color" @click="toDetail(item,'soh')">{{item.soh}}</view>
<uni-col :span="16">
<view class="right color">
<text @click="toDetail(item,'soh')">{{item.soh | formatNumber}}</text>
</view>
</uni-col>
</uni-row>
</view>
@ -382,21 +388,18 @@
<style lang="scss" scoped>
.container {
position: relative;
background: #f5f5f5;
// position: fixed;
// width: 100%;
// height: 100%;
// overflow-y: auto;
.search-icon {
position: fixed;
bottom: 20px;
right: 20px;
bottom: 40rpx;
right: 40rpx;
z-index: 1;
height: 50px;
width: 50px;
height: 60rpx;
width: 60rpx;
background-color: #007aff;
border-radius: 100%;
line-height: 50px;
line-height: 60rpx;
text-align: center;
}
@ -407,20 +410,26 @@
}
.list-container {
// z-index: 10;
padding-top: 20px;
padding-bottom: 50px;
background: #ffffff;
padding-top: 40rpx;
padding-bottom: 100rpx;
background: transparent;
::v-deep {
.uni-list {
background: transparent;
}
.uni-list-item {
padding: 12px 15px;
padding: 10rpx 30rpx;
background-color: transparent !important;
}
.uni-list-item__container {
background-color: #ffffff;
padding: 0;
display: block;
box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
border-radius: 10rpx;
box-shadow: 0 1px 16rpx 1px rgba($color: #a5a5a5, $alpha: 0.2);
}
.uni-list--border-top,
@ -431,61 +440,63 @@
}
.list-header {
background-color: #05AEA3;
color: #fff;
padding: 10px 15px;
border-radius: 5px 5px 0 0;
border-radius: 14rpx 14rpx 0 0;
border-bottom: 1px solid #eee;
padding: 20rpx 30rpx;
font-weight: 700;
position: relative;
color: #333;
.charts {
.charts-btn {
position: absolute;
top: 50%;
right: 15px;
right: 20rpx;
transform: translateY(-50%);
// background-color: #ff7300;
background-color: #4c7af3;
}
}
.list-body {
padding: 10px 15px;
border: 1px solid #eee;
border-top: none;
border-radius: 0 0 5px 5px;
font-size: 14px;
color: #666;
padding: 10rpx 0;
.right {
>.uni-row {
font-size: 26rpx;
line-height: 36rpx;
color: #000;
}
padding: 12rpx 30rpx;
.color {
color: #007aff;
}
.left {
color: #333;
text-align: left;
}
.uni-row {
margin-bottom: 10px;
.right {
text-align: right;
&:last-child {
margin-bottom: 0;
&.color {
color: #4c7af3;
font-weight: 700;
}
}
}
}
}
.chart-popup {
width: 360px;
width: 720rpx;
background-color: #fff;
padding: 10px 15px;
padding: 20rpx 30rpx;
.chart-container {
width: 100%;
height: 250px;
margin-top: 20px;
height: 500rpx;
margin-top: 40rpx;
}
::v-deep {
uni-canvas {
height: 250px;
height: 500rpx;
width: 100%;
}
}