<template>
|
<div class="v-views-data-board">
|
<div class="_centent">
|
<img src="../../assets/driverappraise/data_left_bg.png" class="_left-bg" />
|
<Header/>
|
<div class="_main">
|
<LeftBox class="_left-box"/>
|
<CenterBox class="_center-box" />
|
</div>
|
</div>
|
<div class="_right-box">
|
<img src="../../assets/driverappraise/data_right_bg.png" class="_right-bg" />
|
<RightBox />
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
import moment from "moment";
|
import Header from '@/components/data/board/header'
|
import LeftBox from "@/components/data/board/leftBox";
|
import CenterBox from "@/components/data/board/centerBox";
|
import RightBox from "@/components/data/board/rightBox";
|
|
export default {
|
name:'',
|
components:{ LeftBox, CenterBox, RightBox, Header },
|
data(){
|
return{
|
|
}
|
},
|
watch:{
|
|
},
|
methods:{
|
|
|
|
},
|
activated() {
|
|
},
|
}
|
</script>
|
<style lang="less">
|
.v-views-data-board {
|
display: flex;
|
._detail-btn {
|
padding: 0 8px;
|
background: #1185E2;
|
border-radius: 4px;
|
line-height: 32px;
|
height: 32px;
|
text-align: center;
|
color: #fff;
|
font-family: 'PingFangSC';
|
cursor: pointer;
|
|
}
|
._left-box, ._right-box {
|
width: 26vw;
|
min-width: 346px;
|
padding: 0 24px;
|
position: relative;
|
z-index: 10
|
}
|
._right-box {
|
// background: url("../../assets/driverappraise/data_right_bg.png") no-repeat top / 100%;
|
margin-right: 10px;
|
position: relative;
|
z-index: 10;
|
transform:translate(0,0);
|
}
|
._drive-detail {
|
color: #fff;
|
margin-left: 10px;
|
flex: 1;
|
._icon {
|
width: 10px;
|
height: 10px;
|
margin-right: 10px;
|
}
|
&>div{
|
align-items: center;
|
}
|
}
|
._left-bg, ._right-bg {
|
position: fixed;
|
z-index: 0;
|
top: 0;
|
left: 10px;
|
height: 85vh;
|
width: calc(74vw - 20px)
|
}
|
._right-bg {
|
width: calc(26vw - 10px);
|
left: 0px;
|
}
|
._num {
|
color: #4ABAF6;
|
font-family: "Digital";
|
|
}
|
._font-Digital {
|
font-family: "Digital";
|
}
|
|
._centent {
|
padding: 20px 16px 0;
|
width: 74vw;
|
position: relative;
|
transform:translate(0,0);
|
z-index: 10;
|
|
}
|
._center-box {
|
width: 48vw;
|
min-width: 638px;
|
}
|
._ws-te {
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
|
}
|
._main {
|
display: flex;
|
|
}
|
._icon-1, ._icon-2, ._icon-3, ._icon-more {
|
width: 16px;
|
height: 16px;
|
background: #BEBCF1;
|
color: #000004;
|
border-radius: 50%;
|
line-height: 16px;
|
text-align: center
|
|
}
|
._icon-2 {
|
background: #00FFFF;
|
}
|
._icon-3 {
|
background: #D8A440;
|
}
|
._icon-more {
|
background: #389BC7;
|
}
|
.flex-1 {
|
flex: 1
|
}
|
._large-title {
|
font-family: 'PangMenZhengDao';
|
font-weight: 3;
|
text-align: left;
|
color: #b8e8ff;
|
line-height: 23px;
|
font-size: 20px;
|
text-shadow: 0px 0 14px rgba(0,171,250,0.70);
|
}
|
}
|
</style>
|
