2021-06-10日期默認(rèn)顯示當(dāng)前時(shí)間，且可以查詢下面的船舶信息，且相同船名合并單元格

頁(yè)面顯示部分：

<template>

????<div?class="information">

????????<div?class="infor-top">

???????????<el-date-picker

??????????????v-model="value"

????????????????type="date"

??????????????placeholder="日期"

????????????????value-format="yyyy-MM-dd"

??????????????>

????????????</el-date-picker>

????<button?class="btn"?@click="getTime">查詢</button>

????????</div>

????????<div?class="infor-left">

?????????????<div?class="inforTop"><div?class="information"><div?class="size">出口</div></div></div>

?????????????<div?class="tableLeft">

???????????????????<el-table

?????????????:data="escData"

?????????????style="width:96%;margin-top:34px;margin-left:?10px;"

?????????????:row-class-name="tableClassName"

????????????:span-method="arraySpanMethod"

?????????????>

?????????????????<el-table-column?label="船名/航次"?prop="CM"?width="180"></el-table-column>

?????????????????<el-table-column?label="方案"?prop="BERTH_TER"></el-table-column>

?????????????????<el-table-column?label="箱量"?prop="VEL_TEU"?></el-table-column>

?????????????????<el-table-column?label="艙位記載率">

?????????????????????<template?slot-scope="scope">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="scope.row.VEL_BOOKRATE"?color="#3ad1c1"?class="shipping"></el-progress>

?????????????????????</template>

?????????????????</el-table-column>

?????????????????<el-table-column?label="轉(zhuǎn)碼頭率">

???????????????????????<template?slot-scope="scope">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="scope.row.VEL_TRANRATE"?color="#fedb6f"?class="terminal"></el-progress>

?????????????????????</template>

?????????????????</el-table-column>

?????????????????<el-table-column?label="泊位利用率"?prop="">

???????????????????????<template?slot-scope="scope">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="scope.row.Utilization"?color="#40daff"?class="berth"></el-progress>

?????????????????????</template>

?????????????????</el-table-column>

?????????????????<el-table-column?label="緊急程度"?prop="">

???????????????????????<template?slot-scope="scope">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="scope.row.Emergency"?color="#fc9c55"?class="elProgress"></el-progress>

?????????????????????</template>

?????????????????</el-table-column>???

?????????????</el-table>

?????????????<div?class="sumlist">

?????????????????<div?class="list1">匯總</div>

??????????????????<div?class="list2">航次數(shù):{{sumData.Sum_Voyage???sumData.Sum_Voyage?:?"?"}}?艘次</div>

?????????????????<div?class="list3">{{sumData.Sum_VEL_TEU???sumData.Sum_VEL_TEU?:?"?"}}</div>

????????????????<div?class="list4">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="sumData.Sum_VEL_BOOKRATE"?color="#3ad1c1"?class="shipping4"></el-progress>

????????????????</div>

?????????????????<div?class="list5">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="sumData.Sum_VEL_TRANRATE"?color="#fedb6f"?class="terminal5"></el-progress>

?????????????????</div>

??????????????????<div?class="list6">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="sumData.Sum_The_berth"?color="#40daff"?class="berth6"></el-progress>

??????????????????</div>

?????????????</div>

?????????????</div>

????????</div>

????????<div?class="infor-right">

?????????????<div?class="inforTop"><div?class="information"><div?class="size">進(jìn)口</div></div></div>

?????????????<div?class="tableLeft">

???????????????????<el-table

?????????????:data="ImportData"

?????????????style="width:96%;margin-top:34px;margin-left:?10px;"

?????????????:row-class-name="tableClassName"

????????????:span-method="arraySpanMethod"

?????????????>

?????????????????<el-table-column?label="船名/航次"?prop="CM"?width="180"></el-table-column>

?????????????????<el-table-column?label="方案"?prop="BERTH_TER"></el-table-column>

?????????????????<el-table-column?label="箱量"?prop="VEL_TEU"?></el-table-column>

?????????????????<el-table-column?label="艙位記載率">

?????????????????????<template?slot-scope="scope">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="scope.row.VEL_BOOKRATE"?color="#3ad1c1"?class="shipping"></el-progress>

?????????????????????</template>

?????????????????</el-table-column>

?????????????????<el-table-column?label="轉(zhuǎn)碼頭率">

???????????????????????<template?slot-scope="scope">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="scope.row.VEL_TRANRATE"?color="#fedb6f"?class="terminal"></el-progress>

?????????????????????</template>

?????????????????</el-table-column>

?????????????????<el-table-column?label="泊位利用率"?prop="">

???????????????????????<template?slot-scope="scope">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="scope.row.Utilization"?color="#40daff"?class="berth"></el-progress>

?????????????????????</template>

?????????????????</el-table-column>

?????????????????<el-table-column?label="緊急程度"?prop="">

???????????????????????<template?slot-scope="scope">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="scope.row.Emergency"?color="#fc9c55"?class="elProgress"></el-progress>

?????????????????????</template>

?????????????????</el-table-column>

?????????????</el-table>

?????????????<div?class="sumlist"?>

?????????????????<div?class="list1">匯總</div>

??????????????<div?class="list2">航次數(shù):{{SumData.Sum_Voyage???SumData.Sum_Voyage?:?"?"}}?艘次</div>

?????????????????<div?class="list3">{{SumData.Sum_VEL_TEU???SumData.Sum_VEL_TEU?:?"?"}}</div>

????????????????<div?class="list4">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="SumData.Sum_VEL_BOOKRATE"?color="#3ad1c1"?class="shipping4"></el-progress>

????????????????</div>

?????????????????<div?class="list5">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="SumData.Sum_VEL_TRANRATE"?color="#fedb6f"?class="terminal5"></el-progress>

?????????????????</div>

??????????????????<div?class="list6">

????????????????????????<el-progress?:text-inside="true"?:stroke-width="26"?:percentage="SumData.Sum_The_berth"?color="#40daff"?class="berth6"></el-progress>

??????????????????</div>

?????????????</div>

?????????????</div>

????????</div>

????</div>

</template>

js部分：

<script>

import?Api?from?"@/api/information/index.js";? ? //引入接口文檔文件(以項(xiàng)目文件路徑為準(zhǔn))

export?default?{

????name:"information",

????data?()?{

????????return?{

????????????//?日期

????????????value:?"",

????????????escData:[],

????????????sumData:[],

????????????ImportData:[],

????????????SumData:[],

????????}

????},

????created(){this.getNowTime()},

?????mounted()?{},

????methods:{

//獲取當(dāng)前時(shí)間并賦值給日期選擇的value上面

?????????getNowTime()?{??

???????let?now?=?new?Date();

???????let?year?=?now.getFullYear();?//得到年份

???????let?month?=?now.getMonth()+1;?//得到月份

???????let?date?=?now.getDate();?//得到日期

????return?this.value?=?year+"-"+month+"-"+date;

???},

????????//?查詢時(shí)間

????????getTime(){

???????????this.getExit()

???????????this.getImport()

????????},

????????//?合并單元格后只展示下邊框

????????tableClassName?({row,?rowIndex})?{

????????????if?(row.colSpan)?{

????????????????return?'border_top'

????????????}

????????},

????????//?合并單元格

??????????arraySpanMethod({?row,?column,?rowIndex,?columnIndex?})?{

????????if?(columnIndex?===?0)?{

??????????if?(row.colSpan)?{

????????????return?[row.colSpan,?1]

??????????}?else?{

????????????return?[0,?0]

??????????}

????????}

??????},

????????//?出口信息

????????getExit(){

????????????let?that=this

????????????Api.GetExit(this.value).then((res)=>{

???????????????that.escData=res.data.data.listData

???????????????if(!res.data.data.SummaryData){

???????????????????that.sumData=[]

???????????????}else{

????????????????????that.sumData=res.data.data.SummaryData

???????????????}

????????????//????合并單元格

???????????????let?perName=that.escData[0]???that.escData[0].CM?:?'?'

???????????????let?diffIndex?=?0

???????????????let?sum?=?0

???????????????that.escData.push({CM:null})

???????????????that.escData.forEach((item,index)=>{

???????????????????if(item.CM?!==?perName){

???????????????????????that.escData[diffIndex].colSpan?=?sum

???????????????????????perName?=?item.CM

???????????????????????diffIndex?=?index

???????????????????????sum?=?1

???????????????????}else{

???????????????????????sum++

???????????????????}

???????????????})

???????????????that.escData.pop()

????????????})

????????},

????????//?進(jìn)口信息

???????????getImport(){

????????????Api.GetImport(this.value).then((res)=>{

???????????????this.ImportData?=?res.data.data.listData

???????????????if(!res.data.data.SummaryData){

???????????????????this.SumData=[]

???????????????}else{

????????????????????this.SumData=res.data.data.SummaryData

???????????????}

????????????//????合并單元格

???????????????let?perName?=?this.ImportData[0]???this.ImportData[0].CM?:?'?'

???????????????let?diffIndex?=?0

???????????????let?sum?=?0

??????????????this.ImportData.push({CM:null})

???????????????this.ImportData.forEach((item,index)=>{

???????????????????if(item.CM?!==?perName){

???????????????????????this.ImportData[diffIndex].colSpan?=?sum

???????????????????????perName?=?item.CM

???????????????????????diffIndex?=?index

???????????????????????sum?=?1

???????????????????}else{

???????????????????????sum++

???????????????????}

???????????????})

???????????????this.ImportData.pop()

????????????})

????????}


????}

}

</script>

樣式部分：

<style?lang="scss"?scoped>

????.information?{

?????????display:?flex;

????????position:?relative;

????????width:?100%;

????????height:?100vh;

????????background:?#000000?url('~@/assets/images/integrated/bg.png')?no-repeat;

????????background-size:?100%?100%;

????????.infor-top{

????????????position:?absolute;

????????????top:?4%;

????????????left:?4%;

????????????width:?20%;

????????????height:?7%;

????????????border:?1px?solid?#3ed3f7;

????????.btn{

????????????width:?150px;

????????????height:?60px;

????????????margin:?auto?20px;

????????????align-content:?center;

????????????background-color:?#3ed3f7;

????????????font-size:?30px;

????????????color:?#ffffff;

????????}

????????}

????????.infor-top?/deep/?.el-input__inner?{

????????????margin:?5%;

????????????width:?65%;

????????????height:?70px;

????????????color:?#ffffff;

????????????font-size:?35px;

???????????border-radius:?30px;

???????????border:1px?solid?#3ed3f7;

????????????background:?#002e3c;

?????????????@include?placeholder()

????????}

?????????.infor-top?/deep/?.el-input__suffix?{

?????????????position:?absolute;

????????????left:?150px;

????????????top:?2px;

????????????transition:?all?.3s;

????????}

????????.infor-top?/deep/?.el-input__prefix?{

????????????display:?none;

????????}

????????.infor-left{

????????????margin:?2%;

????????????margin-left:?1%;

????????????position:?absolute;

????????????top:?12%;

????????????width:?48%;

????????????height:?83%;

????????????border:?1px?solid?#1489b4;

?????????????.inforTop{

????????????????position:?absolute;

????????????????top:?-49px;

????????????????left:?100px;

????????????????width:?250px;

????????????????height:?100px;

?????????????????.information{

?????????????????width:?350px;

?????????????????height:?100px;

????????????????line-height:?100px;

????????????????background:?url('~@/assets/images/monitoring/path.png')?no-repeat;

????????????????background-size:?100%?100%;

?????????????????.size?{

????????????????????color:?#fff;

????????????????????margin-left:?130px;

????????????????????font-size:?35px;

????????????????????text-align:?center;

????????????????align-items:?center;

????????????????}

????????????????????????????}

????????????}


????????.tableLeft?/deep/?.el-table--enable-row-hover?.el-table__body?tr:hover?>?td{

????????????????????background:?transparent;

????????}

????????.tableLeft?/deep/?.el-table::before?{

????????????width:?0;

????????????height:?0;

????????}

??????.tableLeft?/deep/??.el-table?th.is-leaf?{

????????????border-bottom:?none;

????????}

????????.tableLeft?/deep/?.el-table?th,?.el-table?tr?{

????????????????width:?100%;

????????????????background:?#1489b4;

????????????????color:?#cde6ef;


????????}

?????????.tableLeft?/deep/?.el-table__body-wrapper?{

????????????????background:?#002b3c;

????????????????color:?#fff;

????????}

????????.tableLeft?/deep/?.el-table__row?{

????????????background-color:?#002b3c;

????????}

????????.tableLeft?/deep/?.el-table?td,?.el-table?th?.is-leaf?{

????????????border-bottom:?none;

????????}

?????????.tableLeft?/deep/?.border_top?{

?????????????&:not(:first-child)?{

?????????????????td?{

?????????????????????border-top:?1px?solid?#00516b;

?????????????????}

?????????????}

????????}

????????.tableLeft{

????????????.shipping{??????????????????

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.shipping?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#3ad1c1;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.shipping?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????//?轉(zhuǎn)碼頭率

?????????????.terminal{??????

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.terminal?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#fedb6f;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.terminal?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????//?泊位利用率

?????????????.berth{

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.berth?/deep/?.el-progress-bar__outer?{

???????????????border:?1px?solid?#40daff;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.berth?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????//?緊急程度

?????????????.elProgress{

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.elProgress?/deep/?.el-progress-bar__outer?{

???????????????border:?1px?solid?#fc9c55;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.elProgress?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????.sumlist{

????????????????display:?flex;

????????????????width:?96%;

????????????????height:?100px;

????????????????margin-left:?1%;

????????????????background:?#005974;

????????????????.list1{

????????????????????width:?7%;

????????????????????height:?100%;

????????????????????font-size:?35px;

????????????????????line-height:?100px;

????????????????????text-align:?center;

????????????????????align-items:?center;

????????????????????margin-right:?150px;

????????????????}

????????????????.list2{

????????????????????width:?12%;

????????????????????height:?100%;

?????????????????????font-size:?35px;

????????????????????line-height:?100px;

????????????????????text-align:?center;

????????????????????align-items:?center;

????????????????????margin-right:?20px;

????????????????}

?????????????????.list3{

????????????????????width:?15%;

????????????????????height:?100%;

?????????????????????font-size:?40px;

????????????????????line-height:?100px;

????????????????????text-align:?center;

????????????????????align-items:?center;

????????????????????margin-right:?20px;

????????????????}

????????????????.list4{

????????????????????width:?12%;

????????????????????height:?100%;

?????????????????????font-size:?40px;

????????????????????line-height:?100px;

?????????????????????margin-left:?80px;

????????????????????margin-top:?20px;

??????????????????????.shipping4{??????????????????

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.shipping4?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#3ad1c1;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.shipping4?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????????}

?????????????????.list5{

????????????????????width:?12%;

????????????????????height:?100%;

?????????????????????font-size:?40px;

????????????????????line-height:?100px;

?????????????????????margin-left:?40px;

????????????????????margin-top:?20px;

?????????????????????//?轉(zhuǎn)碼頭率

?????????????.terminal5{??????

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.terminal5?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#fedb6f;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.terminal5?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????????}

?????????????????.list6{

????????????????????width:?12%;

????????????????????height:?100%;

?????????????????????font-size:?40px;

????????????????????line-height:?100px;

????????????????????margin-left:?50px;

????????????????????margin-top:?20px;

?????????????????????//?泊位利用率

????????????????.berth6{

????????????????border-radius:?38px;

????????????????background:?#002e3c;?

????????????????//?text-align:?center;

????????????????//?align-items:?center;

????????????????}

????????????????.berth6?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#40daff;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????????.berth6?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????????}

????????????}

????????}

????????}

????????.infor-right{

????????????margin-left:?51%;

????????????position:?absolute;

????????????margin-right:?1%;

????????????margin-top:?2%;

????????????top:?12%;

????????????width:?48%;

????????????height:?83%;

????????????border:?1px?solid?#1489b4;

?????????????.inforTop{

????????????????position:?absolute;

????????????????top:?-49px;

????????????????left:?100px;

????????????????width:?250px;

????????????????height:?100px;

????????????.information{

?????????????????width:?350px;

?????????????????height:?100px;

????????????????line-height:?100px;

????????????????background:?url('~@/assets/images/monitoring/path.png')?no-repeat;

????????????????background-size:?100%?100%;

?????????????????.size?{

????????????????????color:?#fff;

????????????????????margin-left:?130px;

????????????????????text-align:?center;

????????????????????font-size:?35px;

????????????????????align-items:?center;

????????????????}

????????????}

????????????}

?????????????.tableLeft?/deep/?.border_top?{

?????????????&:not(:first-child)?{

?????????????????td?{

?????????????????????border-top:?1px?solid?#00516b;

?????????????????}

?????????????}

????????}

????????.tableLeft?/deep/?.el-table--enable-row-hover?.el-table__body?tr:hover?>?td{

????????????????????background:?transparent;

????????}

????????.tableLeft?/deep/?.el-table::before?{

????????????width:?0;

????????????height:?0;

????????}

??????.tableLeft?/deep/??.el-table?th.is-leaf?{

????????????border-bottom:?none;

????????}

????????.tableLeft?/deep/?.el-table?th,?.el-table?tr?{

????????????????width:?100%;

????????????????background:?#1489b4;

????????????????color:?#cde6ef;

????????}

?????????.tableLeft?/deep/?.el-table__body-wrapper?{

????????????????background:?#002b3c;

????????????????color:?#fff;

????????}

????????.tableLeft?/deep/?.el-table__row?{

????????????background-color:?#002b3c;

????????}

????????.tableLeft?/deep/?.el-table?td,?.el-table?th.is-leaf?{

????????????border-bottom:?none;

????????}

????????.tableLeft{

????????????.shipping{??????????????????

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.shipping?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#3ad1c1;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.shipping?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????//?轉(zhuǎn)碼頭率

?????????????.terminal{??????

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.terminal?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#fedb6f;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.terminal?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????//?泊位利用率

?????????????.berth{

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.berth?/deep/?.el-progress-bar__outer?{

???????????????border:?1px?solid?#40daff;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.berth?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????//?緊急程度

?????????????.elProgress{

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.elProgress?/deep/?.el-progress-bar__outer?{

???????????????border:?1px?solid?#fc9c55;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.elProgress?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????.sumlist{

????????????????display:?flex;

????????????????width:?96%;

????????????????height:?100px;

????????????????margin-left:?1%;

????????????????background:?#005974;

????????????????.list1{

????????????????????width:?10%;

????????????????????height:?100%;

????????????????????font-size:?35px;

????????????????????line-height:?100px;

????????????????????text-align:?center;

????????????????????align-items:?center;

????????????????????margin-right:?130px;

????????????????}

????????????????.list2{

????????????????????width:?12%;

????????????????????height:?100%;

?????????????????????font-size:?35px;

????????????????????line-height:?100px;

????????????????????text-align:?center;

????????????????????align-items:?center;

????????????????????margin-right:?5px;

????????????????}

?????????????????.list3{

????????????????????width:?15%;

????????????????????height:?100%;

?????????????????????font-size:?40px;

????????????????????line-height:?100px;

????????????????????text-align:?center;

????????????????????align-items:?center;

????????????????????margin-right:?29px;

????????????????}

????????????????.list4{

????????????????????width:?12%;

????????????????????height:?100%;

?????????????????????font-size:?40px;

????????????????????line-height:?100px;

?????????????????????margin-left:?60px;

????????????????????margin-top:?20px;

??????????????????????.shipping4{??????????????????

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.shipping4?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#3ad1c1;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.shipping4?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????????}

?????????????????.list5{

????????????????????width:?12%;

????????????????????height:?100%;

?????????????????????font-size:?40px;

????????????????????line-height:?100px;

?????????????????????margin-left:?40px;

????????????????????margin-top:?20px;

?????????????????????//?轉(zhuǎn)碼頭率

?????????????.terminal5{??????

????????????????border-radius:?38px;

????????????????background:?#002e3c;???

????????????}

???????????.terminal5?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#fedb6f;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????.terminal5?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????????}

?????????????????.list6{

????????????????????width:?12%;

????????????????????height:?100%;

?????????????????????font-size:?40px;

????????????????????line-height:?100px;

????????????????????margin-left:?40px;

????????????????????margin-top:?20px;

?????????????????????//?泊位利用率

????????????????.berth6{

????????????????border-radius:?38px;

????????????????background:?#002e3c;?

????????????????//?text-align:?center;

????????????????//?align-items:?center;

????????????????}

????????????????.berth6?/deep/?.el-progress-bar__outer?{

?????????????????border:?1px?solid?#40daff;

????????????????height:?46px?!important;

?????????????????background:?#002e3c;

????????????}

????????????????.berth6?/deep/?.el-progress-bar__innerText?{

????????????????color:?#000;

????????????}

????????????????}

????????????}

????????}

????????}

????}

</style>

展示效果部分：


最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容