123
This commit is contained in:
caolc
936
Financial/pages/details/index.vue
Normal file
936
Financial/pages/details/index.vue
Normal file
@@ -0,0 +1,936 @@
|
||||
<template>
|
||||
<view class="details_body">
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-zj-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">评估报告</block>
|
||||
</cu-custom>
|
||||
<view class="details_container_bg"></view>
|
||||
<view class="details_container">
|
||||
<seleBar moveBackground='rgba(255, 103, 0, 0.7);' @seleBarFn='seleBarFn' :seleBarData='seleBarData' />
|
||||
<swiper :current="current" class="details_swiper" circular>
|
||||
<swiper-item v-if="scoreData" @touchmove.stop class="swiper_item">
|
||||
<view class="fractionCar flex column">
|
||||
<view class="fractionCar_top flex">
|
||||
<view class="fractionCar_top_left">
|
||||
<view class="fractionCar_plateNumber">
|
||||
{{ formatCarNumber(scoreData.platenumOrVinnum,0) }}</view>
|
||||
<view class="fractionCar_time smallText flex ac">
|
||||
{{scoreData.queryDate}}
|
||||
<view class="estimate_plate"> 近{{scoreData.statype}}个月</view>
|
||||
<br />
|
||||
</view>
|
||||
<view class="smallText">
|
||||
评估时间 {{scoreData.createTime}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fractionCar_top_right">
|
||||
<view class="fractionCar_top_right_label"> {{displayChange?'综合等级':'综合分数'}}</view>
|
||||
<view @click="displayChange=true" v-if="!displayChange"
|
||||
class="fractionCar_top_right_rank">
|
||||
{{scoreData.rate?Number((scoreData.rate)*100).toFixed(1).split('.')[0]:'-'}}
|
||||
<text style="color: #FF6700;"
|
||||
class="smallText ">.{{scoreData.rate?(Number(scoreData.rate)*100).toFixed(1).split('.')[1]:'-'}}</text>
|
||||
</view>
|
||||
<view @click="displayChange=false" v-else class="fractionCar_top_right_rank">
|
||||
{{displayChangeFn(Number(scoreData.rate)*100)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fractionCar_footer flex">
|
||||
<view v-for="(item,index) in footerList" :key='index'
|
||||
class="fractionCar_footer_item flex column">
|
||||
<view class="fractionCar_footer_item_label">{{item.label}}</view>
|
||||
<view class="fractionCar_footer_item_value flex ac jc">
|
||||
前 <text class="subjectColor"><text style="margin-left: 10rpx;" class="bigText ">
|
||||
{{ scoreData[item.field]?Number(scoreData[item.field]).toFixed(2).split('.')[0]:'0' }}</text>
|
||||
.{{ scoreData[item.field]?Number(scoreData[item.field]).toFixed(2).split('.')[1]:'00' }}
|
||||
%
|
||||
<!-- .6% -->
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="voitureCar flex">
|
||||
<view class="voitureCar_item">
|
||||
<view class="voitureCar_item_label labelColor">车辆类型</view>
|
||||
<view class="voitureCar_item_value subjectColor">{{scoreData.f12}}</view>
|
||||
</view>
|
||||
<view class="voitureCar_item">
|
||||
<view class="voitureCar_item_label labelColor">车辆评分基础</view>
|
||||
<view class="voitureCar_item_value subjectColor">{{scoreData.esc||'---'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detailsCar flex">
|
||||
<view v-for="(item,index) in detailsList" :key='index' class="detailsCar_item">
|
||||
<view class="detailsCar_item_label labelColor">{{item.label}}</view>
|
||||
<view class="detailsCar_item_value subjectColor"> <text
|
||||
class="bigText">{{Number(scoreData[item.field]).toFixed(1)}}</text> {{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item v-if="proposal" @touchmove.stop class="swiper_item flex column">
|
||||
<view class="fractionCar flex column">
|
||||
<view class="fractionCar_top flex">
|
||||
<view class="fractionCar_top_left">
|
||||
<view class="fractionCar_plateNumber">
|
||||
{{ formatCarNumber(proposal.homeRiskVo.platenumOrVinnum,0)}}</view>
|
||||
<view class="fractionCar_time smallText flex ac">
|
||||
{{proposal.homeRiskVo.safeinfoQueryDate}}
|
||||
<view class="estimate_plate"> 近{{proposal.homeRiskVo.safeinfoStatype}}个月</view>
|
||||
<br />
|
||||
</view>
|
||||
<view class="smallText">
|
||||
评估时间 {{proposal.homeRiskVo.safeinfoCreateTime||'---'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fractionCar_top_right flex column bw ">
|
||||
<view class="fractionCar_top_right_label">改善建议</view>
|
||||
<view @click="$refs.popup.open('center')"
|
||||
class="fractionCar_top_right_suggest flex ac jc ">
|
||||
查看等级说明
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fractionCar_footer flex bw" style="padding-bottom: 10rpx;margin-top: 40rpx;">
|
||||
<view @click="item2Index=0"
|
||||
:class="item2Index==0?'fractionCar_footer_item2_select':'fractionCar_footer_item2_' "
|
||||
class=" flex column">
|
||||
<view>
|
||||
<image style="width: 60rpx;height: 60rpx;" :src="imgURL + 'zjsteering .png'">
|
||||
</image>
|
||||
</view>
|
||||
<view>驾驶风险</view>
|
||||
<view style="margin-bottom: 10rpx;">有 <text
|
||||
class="subjectColor">{{proposal.homeRiskVo.drivingRiskCoefficient||0}}</text>
|
||||
项风险</view>
|
||||
</view>
|
||||
<view @click="item2Index=1"
|
||||
:class="item2Index==1?'fractionCar_footer_item2_select':'fractionCar_footer_item2_' "
|
||||
class=" flex column">
|
||||
<view>
|
||||
<image style="width: 60rpx;height: 60rpx;" :src="imgURL + 'zjtruck.png'"></image>
|
||||
</view>
|
||||
<view>运营风险</view>
|
||||
<view style="margin-bottom: 10rpx;">有 <text
|
||||
class="subjectColor">{{proposal.homeRiskVo.operationalRiskCoefficient||0}}</text>
|
||||
项风险</view>
|
||||
</view>
|
||||
<view @click="item2Index=2"
|
||||
:class="item2Index==2?'fractionCar_footer_item2_select':'fractionCar_footer_item2_' "
|
||||
class=" flex column">
|
||||
<view>
|
||||
<image style="width: 60rpx;height: 60rpx;" :src="imgURL + 'zjroad.png'"></image>
|
||||
</view>
|
||||
<view>道路风险</view>
|
||||
<view style="margin-bottom: 10rpx;">有 <text
|
||||
class="subjectColor">{{proposal.homeRiskVo.roadRiskCoefficient}}</text> 项风险
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="riskCar">
|
||||
<scroll-view class="riskCar_scroller" :scroll-into-view="toView" scroll-y="true"
|
||||
scroll-with-animation="true">
|
||||
<view :id="item.id" class="riskCar_scroller_item" v-for="(item,index) in riskData">
|
||||
<view class="riskCar_scroller_item_title flex bw">
|
||||
<text style="color: #BBBBBB;">{{item.title}}</text>
|
||||
<text class="subjectColor">{{proposal.transdisrto||'--'}}</text>
|
||||
</view>
|
||||
<view class="riskCar_scroller_item_progress_container">
|
||||
<view v-for="(progressItem,progressIndex) in item.progress" class="progress flex">
|
||||
<view class="progress_label">{{progressItem[0]}}</view>
|
||||
<view class="progress_right flex">
|
||||
<view :style="{width:`${(proposal[item.id][progressItem[1]] / 1.25)*100}%`}" class="progressBar">
|
||||
<view :style="{color:progressItem[2].color}" class="progressBar_tip">
|
||||
{{progressItem[2].label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="proposal.homeRiskVo[item.suggested].length!==0"
|
||||
class="riskCar_scroller_item_propose">
|
||||
<view class="riskCar_scroller_item_propose_title subjectColor">
|
||||
风险改善建议
|
||||
</view>
|
||||
<view class="riskCar_scroller_item_propose_data">
|
||||
<view style="margin-bottom: 10rpx;"
|
||||
v-if="proposal.homeScoreVo[item.suggested].length!==0"
|
||||
v-for="(suggestedItem,suggestedIndex) in proposal.homeRiskVo[item.suggested]"
|
||||
:key='suggestedIndex' class="riskCar_scroller_item_propose_data_item">
|
||||
{{suggestedIndex+1}}.<text>{{suggestedItem}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="riskCar_scroller_item_propose subjectColor" style="text-align: center;"
|
||||
v-else>
|
||||
暂无建议
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- <view class="details_footer">
|
||||
<view class="sendMail flex ac jc">发送邮件</view>
|
||||
<view class="download flex ac jc">下载PDF到手机</view>
|
||||
</view> -->
|
||||
<uni-popup ref="popup" @change="change">
|
||||
<view class="popup_explain flex column">
|
||||
<view class="indicatorBar"></view>
|
||||
<view class="indicatorBarGrade flex column jc">
|
||||
<view v-for="(item,index) in indicatorBar" :key='index' class="indicatorBarGrade_item flex jc ac">
|
||||
<view :style="{color:item.color}" class="indicatorBarGrade_item_label">{{item.label}}</view>
|
||||
<view class="indicatorBarGrade_item_value">{{item.value}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="$refs.popup.close()" class="popup_explain_footer flex jc ac">
|
||||
返回
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import seleBar from '../../components/seleBar.vue'
|
||||
import Financial from '@/api/Financial.js'
|
||||
export default {
|
||||
options: {
|
||||
styleIsolation: 'shared', // 解除样式隔离
|
||||
},
|
||||
components: {
|
||||
seleBar
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
displayChange: false,
|
||||
imgURL: this.global.newImgURL,
|
||||
item2Index: 0,
|
||||
detailsList: [{
|
||||
label: '车辆载重',
|
||||
field: 'f9',
|
||||
unit: 't'
|
||||
},
|
||||
{
|
||||
label: '总运营率',
|
||||
field: 'f10',
|
||||
unit: '%'
|
||||
},
|
||||
{
|
||||
label: '第一常跑路线%',
|
||||
field: 'f11',
|
||||
unit: '%'
|
||||
},
|
||||
{
|
||||
label: '轨迹完整率',
|
||||
field: 'f0',
|
||||
unit: '%'
|
||||
},
|
||||
{
|
||||
label: '平均速度',
|
||||
field: 'f1',
|
||||
unit: 'km/s'
|
||||
},
|
||||
{
|
||||
label: '日疲劳时长偏差',
|
||||
field: 'f2',
|
||||
unit: 'h'
|
||||
},
|
||||
{
|
||||
label: '日运营时长',
|
||||
field: 'f3',
|
||||
unit: 'h'
|
||||
},
|
||||
{
|
||||
label: '日均清晨运营时长',
|
||||
field: 'f4',
|
||||
unit: 'h'
|
||||
},
|
||||
{
|
||||
label: '夜间里程%',
|
||||
field: 'f5',
|
||||
unit: '%'
|
||||
},
|
||||
{
|
||||
label: '高速里程%',
|
||||
field: 'f6',
|
||||
unit: '%'
|
||||
},
|
||||
{
|
||||
label: '超速里程%',
|
||||
field: 'f7',
|
||||
unit: '%'
|
||||
},
|
||||
{
|
||||
label: '严重超速时长%',
|
||||
field: 'f8',
|
||||
unit: '%'
|
||||
}
|
||||
],
|
||||
footerList: [{
|
||||
label: '全国排名',
|
||||
field: 'natrnk'
|
||||
},
|
||||
{
|
||||
label: '全省排名',
|
||||
field: 'prornk'
|
||||
},
|
||||
{
|
||||
label: '加权赔付率',
|
||||
field: 'wtlossrto'
|
||||
}
|
||||
],
|
||||
carryData: null,
|
||||
indicatorBar: [{
|
||||
label: '优秀',
|
||||
value: '[0.00,0.85)',
|
||||
color: '#17A00E'
|
||||
}, {
|
||||
label: '良好',
|
||||
value: '[0.85,0.95)',
|
||||
color: '#5DD425'
|
||||
}, {
|
||||
label: '正常',
|
||||
value: '[0.95,1.05)',
|
||||
color: '#2866FF'
|
||||
}, {
|
||||
label: '轻危',
|
||||
value: '[1.05,1.15)',
|
||||
color: '#FFB730'
|
||||
}, {
|
||||
label: '危险',
|
||||
value: '[1.15,1.25)',
|
||||
color: '#BC853B'
|
||||
}, {
|
||||
label: '高危',
|
||||
value: '[1.25,MAX)',
|
||||
color: '#EE0113'
|
||||
}],
|
||||
riskData: [{
|
||||
id: 'drive',
|
||||
title: '驾驶风险',
|
||||
suggested: 'drivingRecommendations',
|
||||
progress: [
|
||||
['疲劳驾驶', 'rftdrivrto'],
|
||||
['超速行驶', 'ovsprto'],
|
||||
['低速行驶', 'lowsprto'],
|
||||
['路口超速', 'crossovsprto'],
|
||||
['路口急加速', 'rapdspuprto'],
|
||||
['路口急减速', 'rapdspdownrto'],
|
||||
['急转弯', 'sharpturn'],
|
||||
['驾驶平稳度', 'drivsteadyrto'],
|
||||
['刹车灵敏度', 'brakesensrto']
|
||||
]
|
||||
}, {
|
||||
id: 'operation',
|
||||
title: '运营风险',
|
||||
suggested: 'operationalRecommendations',
|
||||
progress: [
|
||||
['运营时长', 'rundurrto'],
|
||||
['行驶里程', 'runmilerto'],
|
||||
['运营频次', 'runcountrto'],
|
||||
['夜间行驶', 'nightdrivrto'],
|
||||
['常跑路线', 'regularlinerto'],
|
||||
['轨迹完整率', 'trateintgrto'],
|
||||
['车辆及运营类型', 'optyperto'],
|
||||
// ['运输距离', 'transdisrto']
|
||||
]
|
||||
}, {
|
||||
id: 'road',
|
||||
title: '道路风险',
|
||||
suggested: 'roadRecommendation',
|
||||
progress: [
|
||||
['高速公路占比', 'hwayrto'],
|
||||
['危险路段', 'dngroadrto'],
|
||||
['危险路口', 'dngcrossrto'],
|
||||
['道路拥堵程度', 'roadfreerto'],
|
||||
['路口拥堵程度', 'crossfreerto']
|
||||
]
|
||||
}],
|
||||
toView: '',
|
||||
current: 0,
|
||||
seleBarData: [],
|
||||
scoreData: null,
|
||||
proposal: null
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.carryData = JSON.parse(e.data);
|
||||
this.initData()
|
||||
},
|
||||
watch: {
|
||||
item2Index: function(n, o) {
|
||||
this.toView = this.riskData[n].id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatCarNumber(carnum, isAuth) {
|
||||
if (carnum) {
|
||||
if (isAuth == 1) {
|
||||
const numBegin = carnum.substring(0, 2);
|
||||
const numEnd = carnum.substring(2);
|
||||
return numBegin + '·' + numEnd;
|
||||
} else {
|
||||
const numBegin = carnum.substring(0, 3);
|
||||
const numEnd = carnum.substring(4, 5);
|
||||
return numBegin + '***' + numEnd;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
},
|
||||
displayChangeFn(e) {
|
||||
console.log('========')
|
||||
e = e !== '' ? Number(e) : 0;
|
||||
if (Number(e) >= 80 && Number(e) < 100) {
|
||||
return 'A'
|
||||
} else if (Number(e) >= 60 && Number(e) < 80) {
|
||||
return 'B'
|
||||
} else if (Number(e) >= 40 && Number(e) < 60) {
|
||||
return 'C'
|
||||
} else if (Number(e) >= 20 && Number(e) < 40) {
|
||||
return 'D'
|
||||
} else if (Number(e) >= 0 && Number(e) < 20) {
|
||||
return 'E'
|
||||
} else {
|
||||
return '--'
|
||||
}
|
||||
},
|
||||
colorClassification(e) {
|
||||
e = e !== '' ? Number(e) : '';
|
||||
console.log(e, e > 0.95 && e <= 1.05, 'colorClassification')
|
||||
if (e >= 0 && e < 0.85) {
|
||||
return {
|
||||
color: '#17A00E',
|
||||
label: '优秀'
|
||||
}
|
||||
} else if (e >= 0.85 && e < 0.95) {
|
||||
return {
|
||||
color: '#5DD425',
|
||||
label: '良好'
|
||||
}
|
||||
} else if (e >= 0.95 && e < 1.05) {
|
||||
return {
|
||||
color: '#2866FF',
|
||||
label: '正常'
|
||||
}
|
||||
} else if (e >= 1.05 && e < 1.15) {
|
||||
return {
|
||||
color: '#FFB730',
|
||||
label: '轻危'
|
||||
}
|
||||
} else if (e >= 1.15 && e < 1.25) {
|
||||
return {
|
||||
color: '#BC853B',
|
||||
label: '危险'
|
||||
}
|
||||
} else if (e > 1.25) {
|
||||
return {
|
||||
color: '#EE0113',
|
||||
label: '高危'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
color: '#EE0113',
|
||||
label: '---'
|
||||
}
|
||||
}
|
||||
console.log(e, '===')
|
||||
},
|
||||
initData() {
|
||||
switch (this.carryData.type) {
|
||||
case 0:
|
||||
this.getScore();
|
||||
this.getProposal();
|
||||
break;
|
||||
case 1:
|
||||
this.getScore();
|
||||
break;
|
||||
case 2:
|
||||
this.getProposal();
|
||||
break;
|
||||
}
|
||||
},
|
||||
getScore() {
|
||||
this.seleBarData.push({
|
||||
lable: '综合评分',
|
||||
value: 0,
|
||||
open: true
|
||||
})
|
||||
Financial.xoilSinoiovCustomerRiskevalReport({
|
||||
id: this.carryData.id
|
||||
}).then(res => {
|
||||
this.scoreData = res.data;
|
||||
|
||||
})
|
||||
},
|
||||
getProposal() {
|
||||
this.seleBarData.push({
|
||||
lable: '改善建议',
|
||||
value: 1,
|
||||
open: true
|
||||
})
|
||||
Financial.getEvaluationReportById({
|
||||
id: this.carryData.homeRiskVoId
|
||||
}).then(res => {
|
||||
this.proposal = res.data;
|
||||
this.proposal['transdisrto'] = res.data.drive?.transdisrto||res.data.operation?.transdisrto||res.data.road?.transdisrto;
|
||||
Object.keys(this.proposal).forEach(item=>{
|
||||
if( typeof this.proposal[item] == 'object' && this.proposal[item]?.transdisrto ){
|
||||
delete this.proposal[item].transdisrto;
|
||||
}
|
||||
})
|
||||
this.proposalSort()
|
||||
})
|
||||
},
|
||||
proposalSort() {
|
||||
let driveProgress = Object.keys(this.proposal.drive).map(item => {
|
||||
let data = null
|
||||
this.riskData[0].progress.forEach(x => {
|
||||
if (x[1] == item) {
|
||||
data = x;
|
||||
x.push(this.colorClassification(this.proposal.drive[item]))
|
||||
}
|
||||
})
|
||||
return data
|
||||
})
|
||||
let operationProgress = Object.keys(this.proposal.operation).map(item => {
|
||||
let data
|
||||
this.riskData[1].progress.forEach(x => {
|
||||
if (x[1] == item) {
|
||||
data = x;
|
||||
x.push(this.colorClassification(this.proposal.operation[item]))
|
||||
}
|
||||
})
|
||||
return data
|
||||
})
|
||||
let roadProgress = Object.keys(this.proposal.road).map(item => {
|
||||
let data
|
||||
this.riskData[2].progress.forEach(x => {
|
||||
if (x[1] == item) {
|
||||
data = x;
|
||||
x.push(this.colorClassification(this.proposal.road[item]))
|
||||
}
|
||||
})
|
||||
return data
|
||||
});
|
||||
this.riskData[0].progress = driveProgress;
|
||||
this.riskData[1].progress = operationProgress;
|
||||
this.riskData[2].progress = roadProgress;
|
||||
},
|
||||
change() {},
|
||||
scroll() {},
|
||||
seleBarFn(e) {
|
||||
if (this.seleBarData.length <= 1) return;
|
||||
this.current = e.value
|
||||
console.log(e, this.scoreData, this.proposal, 'seleBarFn')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.samall_text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.popup_explain_footer {
|
||||
width: 100%;
|
||||
background-color: #BBBBBB;
|
||||
border-radius: 20rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
height: 80rpx;
|
||||
/* position: absolute;
|
||||
bottom: 0; */
|
||||
}
|
||||
|
||||
.indicatorBarGrade_item_value {
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.indicatorBarGrade_item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.indicatorBarGrade_item {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.indicatorBarGrade {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.indicatorBar {
|
||||
background: linear-gradient(to right, #17A00E, #5DD425, #2866FF, #FFB730, #BC853B, #EE0113);
|
||||
width: 74rpx;
|
||||
height: 20rpx;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.popup_explain {
|
||||
width: 574rpx;
|
||||
height: 680rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 50rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item_propose_data_item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.progressBar_tip {
|
||||
position: absolute;
|
||||
top: -38rpx;
|
||||
right: 0;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item_propose_title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item_propose {
|
||||
font-size: 28rpx;
|
||||
background-color: #F0F0F0;
|
||||
width: 100%;
|
||||
padding: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item_progress_container .progressBar {
|
||||
background: #F0F0F0;
|
||||
min-width: 15%;
|
||||
height: 8rpx;
|
||||
position: relative;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item_progress_container .progress_label {
|
||||
width: 140rpx;
|
||||
text-align: right;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item_progress_container .progress_right {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item_progress_container .progress {
|
||||
margin-bottom: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.labelColor {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.detailsCar_item_label {}
|
||||
|
||||
.detailsCar_item_value {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.detailsCar_item {
|
||||
width: 28%;
|
||||
text-align: center;
|
||||
/* background-color: #007AFF; */
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.voitureCar_item_value {
|
||||
font-size: 28rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.voitureCar_item {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.voitureCar {
|
||||
padding: 40rpx 50rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
}
|
||||
|
||||
.subjectColor {
|
||||
color: #FF6700;
|
||||
}
|
||||
|
||||
.fractionCar_footer {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.fractionCar_top {}
|
||||
|
||||
.bigText {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.fractionCar_footer_item2_select {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
width: calc((100% / 3) - 20rpx);
|
||||
border-bottom: solid #FF6700 2px;
|
||||
}
|
||||
|
||||
.fractionCar_footer_item2_ {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
width: calc((100% / 3) - 20rpx);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.fractionCar_footer_item {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.fractionCar_footer_item_value {}
|
||||
|
||||
.fractionCar_top_right_label {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.fractionCar_top_left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fractionCar_top_right {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fractionCar_top_right_rank {
|
||||
font-weight: 400;
|
||||
font-size: 106rpx;
|
||||
line-height: 112rpx;
|
||||
color: #FF6700;
|
||||
}
|
||||
|
||||
.smallText {
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fractionCar_time {
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.estimate_plate {
|
||||
/* display: block; */
|
||||
background: #F0F0F0;
|
||||
padding: 0 10rpx;
|
||||
margin-left: 20rpx;
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
/* height: 40rpx; */
|
||||
display: inline-block;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.fractionCar_plateNumber {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 48rpx;
|
||||
line-height: 56rpx;
|
||||
color: #FF6700;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.riskCar_scroller {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bw {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.riskCar_scroller_item_title {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.fractionCar_top_right_suggest {
|
||||
background: #FF6700;
|
||||
border-radius: 5px;
|
||||
height: 60rpx;
|
||||
width: 236rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.riskCar {
|
||||
width: calc(100% - 54rpx);
|
||||
/* height: 920rpx; */
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
margin: 40rpx auto;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: #FFFFFF;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.detailsCar {
|
||||
width: calc(100% - 54rpx);
|
||||
height: calc(100% - 710rpx);
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
padding: 40rpx 50rpx;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.voitureCar {
|
||||
width: calc(100% - 54rpx);
|
||||
height: 160rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
margin: 40rpx auto;
|
||||
|
||||
}
|
||||
|
||||
/* .swiper_item:last-child{
|
||||
overflow-y: auto !important;
|
||||
} */
|
||||
.swiper_item {
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
.details_swiper {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
.scroll-view-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scroll-x {
|
||||
background-color: #007AFF;
|
||||
height: 380rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.details_data_container {
|
||||
flex: 1;
|
||||
/* background-color: #007AFF; */
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fractionCar {
|
||||
width: calc(100% - 54rpx);
|
||||
min-height: 380rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
margin-top: 50rpx;
|
||||
padding: 50rpx;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ac {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jc {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: #FF6700;
|
||||
}
|
||||
|
||||
.sendMail {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: #17A00E;
|
||||
}
|
||||
|
||||
.details_footer {
|
||||
width: 100vw;
|
||||
background-color: #007AFF;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.details_container_bg {
|
||||
width: 180%;
|
||||
background: #FF6700;
|
||||
border-radius: 0 0 50% 50%;
|
||||
position: absolute;
|
||||
height: calc(76rpx + 190px + 20rpx + 340rpx + 45rpx + 90rpx + 20rpx);
|
||||
z-index: 0;
|
||||
left: -40%;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.details_container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* padding: 0 54rpx; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.details_body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #E5E5E5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user