<template>
|
<div class="line-box">
|
<div class="selector-wrap">
|
<el-form v-show="$store.state.parentCompany" class="g-table-filter">
|
<el-form-item>
|
<el-select v-model="companyId" style="width: 154px" @change="companyIdChange">
|
<el-option
|
v-for="item in companyList"
|
:key="item.companyNum"
|
:value="item.companyNum"
|
:label="item.companyName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="flex container-ec ju-sb">
|
|
<div class="ec-size box-line2 relative">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">线路占比</div>
|
<div class="flex align-c more" @click="checkMore(3, 'flag')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
|
<div class="flex1 mt20">
|
<dv-active-ring-chart :config="linePercentConfig" :style="{width:width3,height:height3}"/>
|
<div class="colorfff flex ju-c mt10">
|
<div v-for="(item, index) in linePercentConfig.data" :key="index">
|
<span class="_xl-icon" :style="{
|
background: linePercentConfig.color[index],
|
marginLeft: index != 0 ? '20px' : 0
|
}" />
|
{{item.name}}{{item.value}}
|
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
<div class="ec-size box-pei1">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">线路长度</div>
|
<div class="flex align-c more" @click="checkMore(3, 'length')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
|
<div class="content flex line-length">
|
<div class="pie-chart bg-pies">
|
<dv-decoration-9 style="width:200px;height:200px;" :dur="6">
|
<dv-active-ring-chart :config="lengthPercentConfig" style="width: 188px; height: 188px"/>
|
</dv-decoration-9>
|
|
<div class="total-wrap">
|
<div class="digi font24" style="color: #1dffff">
|
</div>
|
<div class="font12" style="color: #fff">{{ maxLineLength }}</div>
|
</div>
|
</div>
|
<div class="age-p-bar-wrap">
|
<div
|
class="bar-wrap"
|
v-for="(item, index) in lineLengthList"
|
:key="index"
|
>
|
<div class="bar-label">{{ item.name }}</div>
|
<div class="bar">
|
<div
|
class="inner-bar"
|
:style="{
|
'background-color': colors[index],
|
'width': item.value,
|
}"
|
></div>
|
<div class="bar-end"></div>
|
<div class="font16" :style="{'margin-left': '8px', 'color': '#FFF'}">{{item.amount}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="ec-size box-pie3">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">发车准点率</div>
|
<el-date-picker
|
v-model="month1"
|
:clearable="false"
|
value-format="yyyy-MM"
|
@change="getOnTimeRate"
|
type="month">
|
</el-date-picker>
|
<div class="flex align-c more" @click="checkMore(3, 'onTimeRate')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
|
|
<div class="flex1 flex-col">
|
<div class="fache_bg">
|
<span v-if="onTimeRateList.length > 0" class="digi time_yellow" >{{onTimeRateList[1].ratio}}%</span>
|
<span v-if="onTimeRateList.length > 0" class="digi time_red" >{{onTimeRateList[0].ratio}}%</span>
|
<span v-if="onTimeRateList.length > 0" class="digi time_green" >{{onTimeRateList[2].ratio}}%</span>
|
|
<span v-if="onTimeRateList.length > 0" class="digi time_yellow font12 colorfff" style="top: 40%">{{onTimeRateList[1].lineName}}</span>
|
<span v-if="onTimeRateList.length > 0" class="digi time_red font12 colorfff" style="top: 6%">{{onTimeRateList[0].lineName}}</span>
|
<span v-if="onTimeRateList.length > 0" class="digi time_green font12 colorfff" style="top: 40%">{{onTimeRateList[2].lineName}}</span>
|
|
</div>
|
<!-- <div class="flex ju-sa color-white kl-item" v-for="(item,index) in onTimeRateList.slice(3, 8)" :key="index">-->
|
<!-- <div :class="`ranking${index+4}`" class="ranking" >{{index +4}}</div>-->
|
<!-- <div style="width: 100px; text-align: center">{{item.lineName}}</div>-->
|
<!-- <div style="color: #28D5B7">{{item.ratio}}%</div>-->
|
<!-- </div>-->
|
<dv-scroll-board :config="onTimeRateConfig" style="width:100%;height:16vh" />
|
</div>
|
</div>
|
</div>
|
<!-- 第二行 -->
|
<div class="flex container-ec ju-sb mt23">
|
<div class="ec-size box-bar1">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">班次完成率</div>
|
<el-date-picker
|
v-model="day1"
|
:clearable="false"
|
value-format="yyyy-MM-dd"
|
@change="getBuzheng"
|
type="date">
|
</el-date-picker>
|
<div class="flex align-c more" @click="checkMore(3, 'completionRate', 'ascending')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
|
|
<div class="flex1 flex-col _pd-t-10 mt5">
|
<rollList
|
v-if="buzhengList.length > 0"
|
:data="buzhengList"
|
height="30vh"
|
:column-height="44"
|
:wait-time="2000"
|
>
|
<template #default="{ row, index }">
|
<div class="flex ju-sb">
|
<div class="flex color-white ju-sb ls item-center">
|
<div :class="`ranking${index+1}`" class="ranking mr10">{{index + 1}}</div>
|
<div class="rankingline text_clamp_1">{{row.lineName}}</div>
|
</div>
|
<div class="barIndex">
|
<div :class="index==0?'el1': index==1?'el2':index==2?'el3':'el'" :style="{width:row.ratio + '%'}"></div>
|
<div class="wb-el"></div>
|
<div class="color-white ml10">{{row.ratio}}%</div>
|
</div>
|
</div>
|
</template>
|
</rollList>
|
<!-- <dv-scroll-ranking-board :config="completeRateConfig" style="width:100%;height:28vh" /> -->
|
</div>
|
</div>
|
<div class="ec-size box-bar2">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">客流总量排名</div>
|
<el-date-picker
|
v-model="day2"
|
:clearable="false"
|
value-format="yyyy-MM-dd"
|
@change="getPassengerFlow"
|
type="date">
|
</el-date-picker>
|
<div class="flex align-c more" @click="checkMore(3, 'sumVolumePeople')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
<div class="flex1 flex-col" style="height:100%; margin-top: -10px">
|
<dv-scroll-board :config="customerSumRateConfig" style="width:100%;height:30vh" />
|
</div>
|
</div>
|
<div class="ec-size box-bar3">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">首末班准点率</div>
|
<el-date-picker
|
v-model="month2"
|
:clearable="false"
|
value-format="yyyy-MM"
|
@change="getOntimeRateFL"
|
type="month">
|
</el-date-picker>
|
<div class="flex align-c more" @click="checkMore(7)">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
<div class="flex1 flex-col _pd-t-10" style="margin-top: 5px;">
|
<rollList
|
v-if="rankData.length > 0"
|
:data="rankData"
|
height="30vh"
|
:column-height="44"
|
:wait-time="2000"
|
>
|
<template #default="{ row, index }">
|
<div class="flex ju-sb">
|
<div class="flex color-white ju-sb ls item-center">
|
<div :class="`ranking${index+1}`" class="ranking mr10">{{index + 1}}</div>
|
<div class="rankingline text_clamp_1">{{row.lineName}}</div>
|
</div>
|
<div class="barIndex">
|
<div :class="index==0?'el1': index==1?'el2':index==2?'el4':'el'" :style="{width:row.ratio + '%'}"></div>
|
<div class="wb-el"></div>
|
<div class="color-white ml10">{{row.ratio}}%</div>
|
</div>
|
</div>
|
</template>
|
</rollList>
|
<!-- <dv-scroll-ranking-board :config="flOntimeRateConfig" style="width:100%;height:28vh" /> -->
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
import moment from "moment";
|
import pie3d from '../../components/echart/pie3d';
|
import rollList from '../../components/common/animation/rollList.vue'
|
|
export default {
|
name:'',
|
components:{pie3d, rollList},
|
data(){
|
return{
|
invalid:'',
|
id1:'line_id1',
|
id2:'line_id2',
|
id3:'line_id3',
|
height3:'24vh',
|
width3:'90%',
|
showFlag:false,
|
colors: ["#009f89", "#57b4e9", "#c46d56", "#bca983","#bca983"],
|
lineLengthList: [
|
{ name: "20以下", value: '' },
|
{ name: "20~30KM", value: '' },
|
{ name: "30~40KM", value: '' },
|
{ name: "40-50KM", value: '' },
|
{ name: "50KM以上", value: '' },
|
],
|
maxLineLength: '',
|
maxLineLengthRatio: '',
|
driverSum: 180,
|
month1: moment().format("yyyy-MM"),
|
month2: moment().format("yyyy-MM"),
|
day1: moment().subtract(1, 'day').format("yyyy-MM-DD"),
|
day2: moment().subtract(1, 'day').format("yyyy-MM-DD"),
|
onTimeRateList: [],
|
buzhengList: [],
|
passerengerFlowList: [],
|
linePercentConfig: {
|
data: [],
|
color: ['#31CF92', '#F0CFA0', '#e8a3a5', '#98a9e7'],
|
radius: '70%',
|
activeRadius: '75%',
|
lineWidth: '22'
|
},
|
flOntimeRateConfig: {
|
data: [],
|
unit: '%',
|
rowNum: 6,
|
sort: false
|
},
|
lengthPercentConfig: {
|
data: [],
|
color: ["#009f89", "#57b4e9", "#c46d56", "#bca983","#bca983"],
|
radius: '70%',
|
activeRadius: '75%',
|
lineWidth: '20',
|
activeTimeGap: 4000,
|
digitalFlopStyle: {
|
fontSize: 18
|
}
|
},
|
completeRateConfig: {
|
data: [],
|
unit: '%',
|
sort: false,
|
rowNum: 6
|
},
|
onTimeRateConfig: {
|
data: [],
|
rowNum: 4,
|
align: ['center', 'center', 'center'],
|
oddRowBGC: '#161e2f',
|
evenRowBGC: '#182237'
|
},
|
customerSumRateConfig: {
|
data: [],
|
align: ['center', 'center', 'center'],
|
rowNum: 7,
|
oddRowBGC: '#161e2f',
|
evenRowBGC: '#182237'
|
},
|
companyList: [],
|
companyId: '',
|
rankData: [],
|
totalLine: 0
|
}
|
},
|
watch:{
|
lineLengthList: {
|
handler(newVal, oldVal) {
|
if(newVal) {
|
// this.initPieChart();
|
}
|
},
|
deep: true,
|
},
|
},
|
methods:{
|
checkMore(type, prop, order){
|
this.$router.push(`/branchOfficeResource?sence=${type}${prop? '&order='+ (order? order : 'descending') + '&prop='+prop : ''}`)
|
},
|
// initPieChart() {
|
// const pieChart = echarts.init(document.getElementById("jlfbChart"));
|
// let dataEsc=this.lineLengthList.map(item=>{
|
// return {value:item.amount,name:item.name}
|
// });
|
// const option = {
|
// legend: {
|
// show: false,
|
// },
|
// title: {
|
// text: "",
|
// },
|
// tooltip:{
|
// show:true,
|
// backgroundColor: "transparent", //设置背景图片 rgba格式
|
// color: "#fff",
|
// borderColor: "transparent", //设置边框颜色
|
// textStyle: {
|
// color: "#fff", //设置文字颜色
|
// },
|
// formatter(params){
|
// return (
|
// `<p style="border-top: 1px solid #3BFFE6;background-color:rgba(37,61,80,0.6);padding:10px;">${params.name}<br/>` +
|
// `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
|
// `${params.percent}%</p>`
|
// );
|
// }
|
// },
|
// grid: {
|
// left: 0,
|
// right: 0,
|
// bottom: 0,
|
// top: 0,
|
// },
|
// series: [
|
// {
|
// name: '',
|
// type: "pie",
|
// radius: ["76%", "90%"],
|
// avoidLabelOverlap: false,
|
// label: {
|
// show: false,
|
// position: "center",
|
// },
|
// emphasis: {
|
// label: {
|
// show: false,
|
// fontSize: "20",
|
// fontWeight: "bold",
|
// },
|
// },
|
// labelLine: {
|
// show: false,
|
// },
|
// data: dataEsc,
|
// },
|
// ],
|
// };
|
// pieChart.setOption(option);
|
// window.addEventListener("resize", pieChart.resize);
|
// },
|
getLineType(){
|
let that = this;
|
this.$axios.get(this.$Interface.line.getLineType, {
|
params: {
|
companyId: this.companyId
|
}
|
}).then(res => {
|
// this.optionData = res.data.lines;
|
const temp = [];
|
that.totalLine=0;
|
res.data.lines.forEach(function(item){
|
// item.value = item.amount;
|
// item.itemStyle = {};
|
// that.totalLine = that.totalLine + item.amount;
|
temp.push({
|
name: item.name,
|
value: item.amount
|
})
|
});
|
this.linePercentConfig.data = temp;
|
this.linePercentConfig = {...this.linePercentConfig}
|
})
|
},
|
getLineLength(){
|
let that = this;
|
this.$axios.get(this.$Interface.line.getLineLength, {
|
params: {
|
companyId: this.companyId
|
}
|
}).then(res => {
|
const data = res.data;
|
const temp = [];
|
this.maxLineLengthRatio = data[0].ratio;
|
this.lineLengthList.forEach(function(item, idx){
|
item.amount = data[idx].amount;
|
item.value = (data[idx].ratio * 100) + '%';
|
if(data[idx].ratio > that.maxLineLengthRatio){
|
that.maxLineLengthRatio = data[idx].ratio;
|
that.maxLineLength = item.name;
|
}
|
temp.push({
|
name: item.name,
|
value: item.amount
|
})
|
})
|
// this.initPieChart();
|
this.lengthPercentConfig.data = temp;
|
this.lengthPercentConfig = {...this.lengthPercentConfig}
|
})
|
},
|
getOnTimeRate(){
|
let that = this;
|
this.$axios.get(this.$Interface.line.getOnTimeRate, {
|
params: {
|
statDate: this.month1,
|
companyId: this.companyId
|
},
|
}).then(res => {
|
if(res.code == 0){
|
if(res.data && res.data.length >0){
|
this.onTimeRateList = res.data;
|
const temp = res.data.slice(2, res.data.length);
|
const _data = [];
|
temp.forEach((item, index) => {
|
_data.push([
|
index+4,
|
item.lineName,
|
item.ratio + '%'
|
])
|
});
|
this.onTimeRateConfig.data = _data;
|
this.onTimeRateConfig = {...this.onTimeRateConfig};
|
} else {
|
this.$message({
|
message: '获取数据为空',
|
type: 'warning'
|
});
|
return;
|
}
|
} else {
|
this.$message({
|
message: '服务器获取数据异常',
|
type: 'error'
|
});
|
return;
|
}
|
})
|
},
|
getBuzheng(){
|
this.$axios.get(this.$Interface.line.getBuzheng,{
|
params: {
|
statDate: this.day1,
|
companyId: this.companyId
|
}
|
}).then(res => {
|
if(res.code == 0){
|
const temp = [];
|
if(res.data && res.data.length >0){
|
for (let index = 0; index < res.data.length; index++) {
|
let element = res.data[index];
|
// if(index == 0) tatle = element.ratio;
|
// element.num = (element.ratio / tatle) * 100
|
if(element.ratio>100){
|
element.ratio = 100
|
}
|
temp.push({
|
name: element.lineName,
|
value: element.ratio
|
});
|
}
|
this.buzhengList = res.data;
|
this.completeRateConfig.data = temp;
|
this.completeRateConfig = {...this.completeRateConfig};
|
|
} else {
|
this.$message({
|
message: '获取数据为空',
|
type: 'warning'
|
});
|
return;
|
}
|
} else {
|
this.$message({
|
message: '服务器获取数据异常',
|
type: 'error'
|
});
|
return;
|
}
|
})
|
},
|
getPassengerFlow(){
|
this.$axios.get(this.$Interface.line.getPassengerFlow,{
|
params: {
|
statDate: this.day2,
|
companyId: this.companyId
|
}
|
}).then(res => {
|
if(res.code == 0){
|
if(res.data && res.data.length > 0){
|
this.passerengerFlowList = res.data;
|
const _data = [];
|
res.data.forEach((item, index) => {
|
_data.push([
|
index + 1,
|
item.lineName,
|
item.amount
|
]);
|
});
|
this.customerSumRateConfig.data = _data;
|
this.customerSumRateConfig = {...this.customerSumRateConfig};
|
} else {
|
this.$message({
|
message: '获取数据为空',
|
type: 'warning'
|
});
|
return;
|
}
|
} else {
|
this.$message({
|
message: '服务器获取数据异常',
|
type: 'error'
|
});
|
return;
|
}
|
})
|
},
|
|
getOntimeRateFL(){
|
this.$axios.get(this.$Interface.line.getOntimeRateFL,{
|
params: {
|
statDate: this.month2,
|
companyId: this.companyId
|
}
|
}).then(res => {
|
if(res.code == 0){
|
if(res.data && res.data.length >0){
|
this.rankData = res.data;
|
const _data = []
|
res.data.forEach((item, index) => {
|
_data.push({
|
name: item.lineName,
|
value: item.ratio
|
});
|
})
|
this.flOntimeRateConfig.data = _data;
|
this.flOntimeRateConfig = {...this.flOntimeRateConfig}
|
} else {
|
this.$message({
|
message: '获取数据为空',
|
type: 'warning'
|
});
|
return;
|
}
|
} else {
|
this.$message({
|
message: '服务器获取数据异常',
|
type: 'error'
|
});
|
return;
|
}
|
})
|
},
|
|
getCompanyList() {
|
this.$axios.get(this.$Interface.companyList).then((res) => {
|
for(let i=0; i<res.data.length; i++){
|
if(res.data[i].companyNum == 1){
|
res.data.splice(i, 1);
|
i--;
|
}
|
}
|
this.companyList = res.data;
|
this.companyList.unshift({companyNum:"", companyName:"总公司"})
|
});
|
},
|
companyIdChange() {
|
this.getLineType(); // 获取线路占比
|
this.getLineLength(); // 获取线路长度
|
this.getOnTimeRate(); // 获取发车准点率
|
this.getBuzheng(); // 获取班次完成率
|
this.getPassengerFlow(); // 获取客流总量排名
|
this.getOntimeRateFL(); // 获取首末班准点率
|
}
|
|
},
|
activated() {
|
this.companyId=this.$store.state.companyId;
|
// const date = new Date();
|
// this.month1 = date.getFullYear()+ '-' + (date.getMonth() + 1);
|
// this.month2 = date.getFullYear()+ '-' + (date.getMonth() + 1);
|
this.getLineType(); // 获取线路占比
|
this.getLineLength(); // 获取线路长度
|
this.getOnTimeRate(); // 获取发车准点率
|
this.getBuzheng(); // 获取班次完成率
|
this.getPassengerFlow(); // 获取客流总量排名
|
this.getOntimeRateFL(); // 获取首末班准点率
|
this.getCompanyList();
|
},
|
}
|
</script>
|
<style scoped lang="less">
|
.line-box{width:94%;margin:0 auto;}
|
._lh-34 {
|
line-height: 34px;
|
}
|
._xl-icon {
|
width: 30px;
|
display: inline-block;
|
height: 12px;
|
}
|
.dropdown{position:relative;width: 154px;
|
margin:37px auto 23px;
|
height: 32px;
|
background: #010e25;
|
border: 1px solid #56afe9;
|
box-shadow: 0 0 10px 0 rgba(16,177,239,0.50) inset; margin-right: 0!important;}
|
.item-box{width:100%;max-height:200px;overflow-y: scroll;color:#fff;
|
scrollbar-width: none; /* firefox */
|
-ms-overflow-style: none; /* IE 10+ */
|
border: 1px solid #56afe9;
|
|
}
|
._pd-t-10 {
|
padding-top: 10px;
|
}
|
|
.item-box::-webkit-scrollbar {
|
display: none;
|
}
|
.pl20{padding-left:15px;}
|
.detinline{height:30px;line-height:30px;color:white;width:80%;margin:0 auto;}
|
.icon-more-s{width:13px;height:10px;}
|
.container-ec{
|
|
}
|
.ec-size{width:30vw;height:33vh;}
|
.bg-box{width: 217px;height: 217px;background: url('../../assets/png/circle_bg.png'); background-size: 100% 100%;}
|
.pie-box{width:148px;height:148px;}
|
.max-height{height:100%;}
|
.flex-y-line{display: flex;justify-content: space-between;flex-direction: column;}
|
.flex1{height:30vh;width:100%;}
|
.ls{width:22%;}
|
.rankingline{
|
width: 70px; white-space: nowrap;
|
}
|
.kl-item{background:rgba(44,125,206,0.1)}
|
.kl-item>div{
|
width: 100px;
|
text-align: center;
|
}
|
.kl-item .ranking{
|
width: 25px!important;
|
}
|
.fache_bg {
|
width: 420px;
|
margin: 0 auto;
|
height: 116px;
|
background: url('../../assets/png/ranking_bg.png');
|
background-size: 100% 100%;
|
font-size: 22px;
|
position: relative;
|
margin-top: 25px;
|
margin-bottom: 10px;
|
animation: scale 2s linear alternate infinite;
|
}
|
@keyframes scale {
|
from {
|
transform: scale(1)
|
}
|
to {
|
transform: scale(0.9)
|
}
|
}
|
.barIndex {
|
height: 34px;
|
}
|
.time_yellow {color: rgba(241,206,124,1); position: absolute;left: -2%;top: 14%;}
|
.time_red{color: rgba(255,104,100,1);position: absolute;left: 38%;top: -22%}
|
.time_green{color: rgba(90,240,255,1);position: absolute;left: 78%;top: 14%}
|
.pie-chart {
|
width: 217px;
|
height: 217px;
|
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
margin-top: 30px;
|
.total-wrap {
|
position: absolute;
|
width: 100px;
|
text-align: center;
|
}
|
}
|
.age-p-bar-wrap {
|
margin-left: 12px;
|
margin-top: 32px;
|
flex:1;
|
.bar-wrap {
|
display: flex;
|
align-items: center;
|
margin-bottom: 24px;
|
}
|
.bar-label {
|
width: 80px;
|
text-align: right;
|
padding-right: 6px;
|
color: rgb(255, 255, 255, .8);
|
}
|
.bar {
|
flex:1;
|
height: 24px;
|
// opacity: 0.1;
|
display: flex;
|
align-items: center;
|
background: linear-gradient(
|
270deg,
|
rgba(87, 180, 233, 0.11),
|
rgba(44, 125, 206, 0)
|
);
|
border-left: 2px solid #fff;
|
border-right: 2px solid #fff;
|
position: relative;
|
.inner-bar {
|
height: 4px;
|
}
|
}
|
}
|
// 去掉下拉列表默认样式
|
/deep/.el-input--prefix .el-input__inner {
|
background-color: transparent;
|
border: 1px solid transparent;
|
color: #fff
|
}
|
/deep/.el-date-editor.el-input, .el-date-editor.el-input__inner {
|
width: 186px;
|
}
|
.line-length {
|
justify-content: space-between;
|
}
|
.selector-wrap {
|
margin: 10px 0;
|
width: 94vw;
|
height: 40px;
|
}
|
.title-box {
|
max-width: 600px;
|
}
|
.pie3d-center {
|
position: absolute;
|
left: 45%;
|
top: 46%;
|
color: #fff;
|
width: 100px;
|
text-align: center;
|
}
|
.text_clamp_1{
|
display: block;
|
}
|
.digi{
|
width: 100px!important;
|
text-align: center;
|
}
|
.colorfff{
|
color: #ffffff!important;
|
}
|
</style>
|
