981 lines
28 KiB
Vue
981 lines
28 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="text-area">
|
||
<view class="carDetection">
|
||
<view class="header">
|
||
<image src="/static/img/aqjcTitle.png"></image>
|
||
</view>
|
||
<view class="title">
|
||
<span>电池健康度得分</span>
|
||
<span class="smallTitle">DIAN CHI JIAN KANG DU DE FEN</span>
|
||
</view>
|
||
<view class="visualInspection1">
|
||
<circular :apiData='apiData' class="cularBg"></circular>
|
||
<view class="plateNumber">
|
||
<span class="number">{{apiData.plateNo}}</span>
|
||
<span class="carStatus" v-if="carStatus =='normal'">电池健康度正常</span>
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>车辆外观检测情况</span>
|
||
<span class="smallTitle">CHE LIANG WAI GUAN JIAN CE QING KUANG</span>
|
||
</view>
|
||
<view class="visualInspection4">
|
||
<view class="textBg">
|
||
<p>{{evalConclusion.reason}}</p>
|
||
<!-- <p>{{evalConclusion.status}}</p> -->
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>红外检测情况</span>
|
||
<span class="smallTitle">HONG WAI JINA CE QING KUANG</span>
|
||
</view>
|
||
<view class="visualInspection4">
|
||
<view class="textBg">
|
||
<p>{{evalConclusion.reason}}</p>
|
||
<!-- <p>{{evalConclusion.status}}</p> -->
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>紫外检测情况</span>
|
||
<span class="smallTitle">ZI WAI JINA CE QING KUANG</span>
|
||
</view>
|
||
<view class="visualInspection4">
|
||
<view class="textBg">
|
||
<p>{{evalConclusion.reason}}</p>
|
||
<!-- <p>{{evalConclusion.status}}</p> -->
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>声纹检测情况</span>
|
||
<span class="smallTitle">SHENG WEN JIAN CE QING KUANG</span>
|
||
</view>
|
||
<view class="visualInspection4">
|
||
<view class="textBg">
|
||
<p>{{evalConclusion.reason}}</p>
|
||
<!-- <p>{{evalConclusion.status}}</p> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title">
|
||
<span>电池分项得分</span>
|
||
<span class="smallTitle">DIAN CHI FEN XIANG DE FEN</span>
|
||
</view>
|
||
<view class="visualInspection">
|
||
<radarVue :apiData='apiData'></radarVue>
|
||
</view>
|
||
<view class="title">
|
||
<span>电池充电信息</span>
|
||
<span class="smallTitle">DIAN CHI CHONG DIAN XIN XI</span>
|
||
</view>
|
||
<view class="cdxx">
|
||
<view class="chargeInfo">
|
||
<view v-for="(item,index) in chargeData" :key="index" class="chartCard">
|
||
<span>
|
||
<image src="/static/img/jx.png"></image>
|
||
{{item.name}}
|
||
</span>
|
||
<span v-if="item.name != '充电时长'" class="cdValue">{{item.value}}kWh</span>
|
||
<span v-else class="cdValue">{{item.value}}min</span>
|
||
</view>
|
||
</view>
|
||
<view class="batteryInfo">
|
||
<ul class="list">
|
||
<li class="type">{{apiData.batteryType}}</li>
|
||
<li>VIN：{{apiData.vin}}</li>
|
||
<li>
|
||
<image src="/static/img/charging.png"
|
||
style="width: 26px;height: 26px;margin-right: 5px;"></image>
|
||
充电场站：{{apiData.stationName}}
|
||
</li>
|
||
<li>
|
||
<image src="/static/img/station.png"
|
||
style="width: 26px;height: 26px;margin-right: 5px;"></image>
|
||
充电桩：{{apiData.pileName}}
|
||
</li>
|
||
<li>
|
||
<image src="/static/img/time.png" style="width: 26px;height: 26px;margin-right: 5px;">
|
||
</image>
|
||
充电开始时间：{{apiData.chargingStartTime}}
|
||
</li>
|
||
<li>
|
||
<image src="/static/img/time.png" style="width: 26px;height: 26px;margin-right: 5px;">
|
||
</image>
|
||
充电结束时间：{{apiData.chargingEndTime}}
|
||
</li>
|
||
</ul>
|
||
<barVue :apiData='apiData'></barVue>
|
||
</view>
|
||
<view class="comment">
|
||
<view class="pgjl">
|
||
<text class="twoTitle">评估结论</text>
|
||
<p>{{evalConclusion.reason}}</p>
|
||
<!-- <p>{{evalConclusion.status}}</p> -->
|
||
</view>
|
||
<view class="ycjy">
|
||
<text class="twoTitle">用车建议</text>
|
||
<text class="carSuggestions">为了保障您的安全以及电动车的最佳性能，我们为您提供以下建议:\n
|
||
<view class="xh">1</view>
|
||
<span>规律的维护检査:请定期检査电动车的电池、刹车系统、轮胎等关键部位，确保它们处于良好工作状态。<br></span>
|
||
<view class="xh">2</view>
|
||
<span>保持充电习惯:为了延长电池寿命，建议您尽量保持规律的充电习惯，避免电池电量过低或过高。通常建议保持电池电量在30%-80%之间。<br></span>
|
||
<view class="xh">3</view>
|
||
<span>注意天气变化:春秋季节天气变化无常，雨水可能会对电动车造成一定影响。在预期有雨的日子，请尽量避免在雨中充电，并确保电动车在干燥的地方停放。<br></span>
|
||
<view class="xh">4</view>
|
||
<span>避免过度使用:过度使用电动车可能导致电池过热或者电池性能下降。请适当地使用电动车，避免连续长时间的高速驾驶。<br></span>
|
||
<view class="xh">5</view>
|
||
<span>注意车辆异常:如果在行驶或充电过程中发现车辆有异常情况，比如电量突然降低或电池不能正常充电等，建议立即停车检查，如有必要，请联系专业维修人员进行维护。</span>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>充电关键数据</span>
|
||
<span class="smallTitle">CHONG DIAN GUAN JIAN SHU JU</span>
|
||
</view>
|
||
<view class="chargeDataList">
|
||
<view class="item" v-for="(item,index) in chargingKey" :key="index">
|
||
<span>
|
||
<text class="name">{{item.name}}</text>
|
||
<text class="status" v-if="item.status == 'normal'">正常</text>
|
||
<text class="status1" v-else></text>
|
||
</span>
|
||
<span class="value">{{item.details}}：<span class="unit">{{item.value}}</span></span>
|
||
<span class="value" v-if="item.details1"
|
||
:style="{'fontSize':item.name == '极值温度' ?'2.2vw':''}">{{item.details1}}：<span
|
||
class="unit">{{item.value1}}</span></span>
|
||
<span class="value" v-if="item.details2"
|
||
:style="{'fontSize':item.name == '极值温度' ?'2.2vw':''}">{{item.details2}}：<span
|
||
class="unit">{{item.value2}}</span></span>
|
||
</view>
|
||
</view>
|
||
<!-- 充电电压 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>充电电压曲线</span>
|
||
<span class="smallTitle">CHONG DIAN DIAN YA QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电压与需求电压的关系,实际充电电压不应高于需求电压</text> -->
|
||
<view class="visualInspection2">
|
||
<lineVue :apiData='apiData' :lineType="'电压'" :id="'chartRef1'"></lineVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<text class="comStatus">正常</text>
|
||
<!-- <text class="comStatus" v-if="apiData.voltConsistencyState =='normal'">正常</text>
|
||
<text v-else>异常</text> -->
|
||
</view>
|
||
<text class="remind">{{apiData.voltConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 充电电流 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>充电电流曲线</span>
|
||
<span class="smallTitle">CHONG DIAN DIAN LIU QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection3">
|
||
<lineVue :apiData='apiData' :lineType="'电流'" :id="'chartRef2'"></lineVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<text class="comStatus">正常</text>
|
||
</view>
|
||
<text class="remind">{{apiData.currentConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- BMS测量精度曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>BMS测量精度曲线</span>
|
||
<span class="smallTitle">BMS CE LIANG JING DU QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection2">
|
||
<lineVue :apiData='apiData' :id="'chartRef3'" :lineType="'BMS'"></lineVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<!-- <text class="comStatus">正常</text> -->
|
||
<text class="comStatus" v-if="apiData.bmsAccuracyState =='normal'">正常</text>
|
||
<text v-else>异常</text>
|
||
</view>
|
||
<text class="remind">{{apiData.bmsAccuracyConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 充电温差电线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>充电温差电线</span>
|
||
<span class="smallTitle">CHONG DIAN WEN CHA DIAN XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection2">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef4'" :lineType="'充电温差'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<text class="comStatus" v-if="apiData.tempDiffState =='normal'">正常</text>
|
||
<text v-else>异常</text>
|
||
</view>
|
||
<text class="remind">{{apiData.tempDiffConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 充电功率 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>充电功率</span>
|
||
<span class="smallTitle">CHONG DIAN GONG LV</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef5'" :lineType="'充电功率'"></lineOneVue>
|
||
</view>
|
||
<!-- 请注意 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>请注意</span>
|
||
<span class="smallTitle">QING ZHU YI</span>
|
||
</view>
|
||
<view class="visualInspection4">
|
||
<span class="qzy">
|
||
报告仍有最高温度历史曲线、温差历史曲线、最高单体电压历史曲线、 压差历史曲线、开路电压一致性历史曲线、SOC准确度历史曲线、健康度历史曲线等项需要您的爱车
|
||
<span>累计充电4次以上</span>方可提供。
|
||
</span>
|
||
</view>
|
||
<text class="btn">
|
||
预约均衡
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import circular from '../../components/circular.vue'
|
||
import radarVue from '../../components/radar.vue'
|
||
import barVue from '../../components/bar.vue'
|
||
import lineVue from '../../components/lineChart.vue'
|
||
import lineOneVue from '../../components/lineOne.vue'
|
||
import ip from '../../static/config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
detectionReportId: '',
|
||
apiData: {},
|
||
carStatus: '',
|
||
chargeData: [{
|
||
value: '',
|
||
name: '充电度数'
|
||
},
|
||
{
|
||
value: '',
|
||
name: '充电时长'
|
||
},
|
||
{
|
||
value: '',
|
||
name: '标称总能量'
|
||
},
|
||
],
|
||
evalConclusion: {
|
||
reason: '',
|
||
status: ''
|
||
}, //评语结论
|
||
chargingKey: [{
|
||
name: '电池健康度',
|
||
status: 'normal',
|
||
details: '电池健康度',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '告警',
|
||
status: 'normal',
|
||
details: '告警信息',
|
||
value: ''
|
||
},
|
||
{
|
||
name: 'SOC测量精度',
|
||
status: 'normal',
|
||
details: 'SOC精度',
|
||
value: '',
|
||
},
|
||
{
|
||
name: 'BMS测量精度',
|
||
status: 'normal',
|
||
details: '电压精度',
|
||
value: '',
|
||
details1: '电流精度',
|
||
value1: ''
|
||
},
|
||
{
|
||
name: '电池一致性',
|
||
status: 'normal',
|
||
details: '开路电压一致性',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '充电平均功率',
|
||
status: 'normal',
|
||
details: '充电平均功率',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '极值电压',
|
||
status: 'normal',
|
||
details: '电压差',
|
||
value: '',
|
||
details1: '单体最高电压',
|
||
value1: '',
|
||
details2: '单体最低电压',
|
||
value2: ''
|
||
},
|
||
{
|
||
name: '极值温度',
|
||
status: 'normal',
|
||
details: '温度差',
|
||
value: '',
|
||
details1: '最高温差时单体最高温度',
|
||
value1: '',
|
||
details2: '最高温差时单体最低温度',
|
||
value2: ''
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.detectionReportId = options.DetectionReportId
|
||
//获取接口数据
|
||
this.getData()
|
||
},
|
||
components: {
|
||
circular,
|
||
radarVue,
|
||
barVue,
|
||
lineVue,
|
||
lineOneVue
|
||
},
|
||
methods: {
|
||
getData() {
|
||
uni.request({
|
||
url: window.g.API_IP + '/api/GetDetectionReport?DetectionReportId=' + this
|
||
.detectionReportId, // 接口地址
|
||
// url: window.g.API_IP +
|
||
// '/api/GetDetectionReport?DetectionReportId=21ad44647c8a4b9c871af5bae82d160a', // 接口地址
|
||
method: 'GET',
|
||
success: (res) => {
|
||
// 请求成功时执行的回调函数
|
||
console.log('Data received:', res.data.data);
|
||
if (res.data.code == 0) {
|
||
this.apiData = res.data.data; // 将获取的数据存储到data中
|
||
// this.carStatus = this.apiData.evalConclusion[1].split('，')[1]
|
||
this.carStatus = this.apiData.sohState
|
||
this.chargeData[0].value = this.apiData.chargingEnergy
|
||
this.chargeData[1].value = this.apiData.chargingDuration
|
||
this.chargeData[2].value = this.apiData.ratedEnergy
|
||
//时间
|
||
this.apiData.chargingStartTime = new Date(this.apiData.chargingStartTime)
|
||
.toLocaleString();
|
||
this.apiData.chargingEndTime = new Date(this.apiData.chargingEndTime)
|
||
.toLocaleString();
|
||
//结论评语
|
||
this.evalConclusion.reason = this.apiData.evalConclusion.join('')
|
||
// this.evalConclusion.status = this.apiData.evalConclusion[1]
|
||
//充电关键数据
|
||
this.chargingKey[0].value = this.apiData.soh + '%'
|
||
this.chargingKey[0].status = this.apiData.sohState
|
||
this.chargingKey[1].value = this.apiData.alarmNumber + '条'
|
||
this.chargingKey[1].status = this.apiData.alarmState
|
||
this.chargingKey[2].value = this.apiData.socAccuracy + '%'
|
||
this.chargingKey[2].status = this.apiData.socAccuracyState
|
||
this.chargingKey[3].value = this.apiData.bmsVoltAccuracy + '%'
|
||
this.chargingKey[3].value1 = this.apiData.bmsCurrentAccuracy + '%'
|
||
this.chargingKey[3].status = this.apiData.bmsAccuracyState
|
||
this.chargingKey[4].value = this.apiData.voltConsistency + '分'
|
||
this.chargingKey[4].status = this.apiData.voltConsistencyState
|
||
this.chargingKey[5].value = this.apiData.powerAvg + 'kW'
|
||
this.chargingKey[6].value = this.apiData.voltDiff + 'V'
|
||
this.chargingKey[6].value1 = this.apiData.voltMax + 'V'
|
||
this.chargingKey[6].value2 = this.apiData.voltMin + 'V'
|
||
this.chargingKey[6].status = this.apiData.voltDiffState
|
||
this.chargingKey[7].value = this.apiData.tempDiff + '℃'
|
||
this.chargingKey[7].value1 = this.apiData.tempDiffMax + '℃'
|
||
this.chargingKey[7].value2 = this.apiData.tempDiffMin + '℃'
|
||
this.chargingKey[7].status = this.apiData.tempDiffState
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
// 请求失败时执行的回调函数
|
||
console.error('Request failed:', err);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.text-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
background: rgb(21, 21, 33);
|
||
|
||
.carDetection {
|
||
height: auto;
|
||
width: 100%;
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
height: 12%;
|
||
background: url(@/static/img/jkBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 60%;
|
||
height: 9%;
|
||
top: 80%;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
background: url(@/static/img/titleBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 68%;
|
||
height: 1.2%;
|
||
font-size: 5vw;
|
||
font-weight: 550;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: start;
|
||
/* margin-bottom: 10px; */
|
||
margin-top: 10px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding-left: 10px;
|
||
|
||
span:first-child {
|
||
font-family: 'SourceHanSansCN-Heavy';
|
||
font-size: 5vw;
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
.smallTitle {
|
||
font-size: 1.7vw;
|
||
color: #8195AA;
|
||
}
|
||
|
||
}
|
||
|
||
.visualInspection {
|
||
width: 100%;
|
||
height: 5%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/detailBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
padding: 10% 3% 3% 3%;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
|
||
.textBg {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
.visualInspection2 {
|
||
width: 100%;
|
||
height: 8%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/lineBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
padding: 10% 3% 3% 3%;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
|
||
.textBg {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
.visualInspection3 {
|
||
width: 100%;
|
||
height: 9%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/linedlBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
padding: 10% 3% 3% 3%;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
|
||
.textBg {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
.visualInspection4 {
|
||
width: 100%;
|
||
height: 4%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/qzyBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
padding: 10% 3% 3% 3%;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.textBg {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.qzy {
|
||
color: #88A9CD;
|
||
font-size: 3.5vw;
|
||
line-height: 2;
|
||
text-indent: 2em;
|
||
|
||
span {
|
||
color: #28B4FF
|
||
}
|
||
}
|
||
}
|
||
|
||
.cdxx {
|
||
width: 100%;
|
||
/* height: 34%; */
|
||
background: url(@/static/img/dccdxxBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.45%;
|
||
padding: 10% 0;
|
||
box-sizing: border-box;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
}
|
||
|
||
.visualInspection1 {
|
||
width: 100%;
|
||
height: 5%;
|
||
background: url(@/static/img/detailBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around
|
||
}
|
||
|
||
.cularBg {
|
||
background: url(@/static/img/chartBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.plateNumber {
|
||
background: url(@/static/img/numberBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 50%;
|
||
width: 33%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.number {
|
||
font-family: 'SourceHanSansCN-Heavy';
|
||
font-size: 5vw;
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
.carStatus {
|
||
font-size: 4vw;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
}
|
||
}
|
||
|
||
.chargeInfo {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
border-bottom: 1px solid rgba(136, 169, 205, 1);
|
||
justify-content: space-between;
|
||
|
||
.chartCard {
|
||
width: 31%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 8px 0;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
|
||
image {
|
||
height: 26px;
|
||
width: 22px;
|
||
top: 15%;
|
||
}
|
||
|
||
span:first-child {
|
||
font-size: 4vw;
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
color: rgb(173, 184, 212);
|
||
font-size: 4vw;
|
||
}
|
||
|
||
.cdValue {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.batteryInfo {
|
||
margin-top: 5px;
|
||
|
||
.list {
|
||
list-style-type: none;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
color: rgba(136, 169, 205, 1);
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
|
||
.type {
|
||
font-size: 4vw;
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
li {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment {
|
||
margin-top: 8px;
|
||
color: rgb(173, 184, 212);
|
||
padding: 8px;
|
||
font-size: 3vw;
|
||
height: 65%;
|
||
|
||
.pgjl {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
height: 14%;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
|
||
p::before {
|
||
content: "·";
|
||
/* 这里是你要添加的内容 */
|
||
color: rgba(60, 253, 255, 1);
|
||
/* 点的颜色 */
|
||
font-size: 4vw;
|
||
/* 点的尺寸 */
|
||
margin-right: 5px;
|
||
/* 点和文字之间的间距 */
|
||
}
|
||
}
|
||
|
||
.ycjy {
|
||
background: url(@/static/img/ycjybg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
/* height: 14%; */
|
||
font-size: 3.5vw;
|
||
margin-top: 5%;
|
||
}
|
||
}
|
||
|
||
.carSuggestions {
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
letter-spacing: 2px;
|
||
|
||
.xh {
|
||
background: url(@/static/img/xhbg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-family: 'SourceHanSansCN-Heavy';
|
||
height: 23px;
|
||
width: 23px;
|
||
display: inline-block;
|
||
text-align: center;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.twoTitle {
|
||
font-size: 4.5vw;
|
||
color: #fff;
|
||
width: 100%;
|
||
/* margin: 10px 0; */
|
||
background: url(@/static/img/numberBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
display: block;
|
||
|
||
span {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.chargeDataList {
|
||
background: url(@/static/img/cdgjsjBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 10% 3% 6% 3%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
top: -0.45%;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 48%;
|
||
background: url(@/static/img/cdlistBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 10px 10px 0px 10px;
|
||
box-sizing: border-box;
|
||
height: 120px;
|
||
margin-top: 13px;
|
||
line-height: 1.5;
|
||
|
||
span:first-child {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
font-size: 4vw;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
.status {
|
||
background: url(@/static/img/zc.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 15px;
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
span {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.status1 {
|
||
background: url(@/static/img/yc.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 15px;
|
||
color: #D93E3E;
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.value {
|
||
color: #88A9CD;
|
||
margin-top: 5px;
|
||
font-size: 13px;
|
||
/* white-space: nowrap; */
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.unit {
|
||
color: #3CFDFF;
|
||
font-size: 15px;
|
||
font-weight: 550;
|
||
}
|
||
}
|
||
|
||
.value::before {
|
||
content: "·";
|
||
/* 这里是你要添加的内容 */
|
||
color: #88A9CD;
|
||
/* 点的颜色 */
|
||
font-size: 3vw;
|
||
/* 点的尺寸 */
|
||
margin-right: 5px;
|
||
/* 点和文字之间的间距 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.prompt {
|
||
font-size: 18rpx;
|
||
color: rgb(127, 127, 127);
|
||
}
|
||
|
||
.chatResult {
|
||
background: url(@/static/img/pgjgBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 10px 15px;
|
||
box-sizing: border-box;
|
||
|
||
.twoTitle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.comStatus {
|
||
background: url(@/static/img/zc.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 15px;
|
||
width: 20%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
span {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.remind {
|
||
color: #88A9CD;
|
||
font-size: 3vw;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
background: url(@/static/img/button.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 1%;
|
||
width: 60%;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 5vw;
|
||
left: 20%;
|
||
position: relative;
|
||
top: 20px;
|
||
|
||
span {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
</style> |