新版式
This commit is contained in:
@@ -30,16 +30,17 @@
|
||||
|
||||
const init = () => {
|
||||
if (!params) {
|
||||
let center = ['25%', '50%']
|
||||
let center = ['50%', '30%']
|
||||
params = {
|
||||
color: ['#00B1FF', '#00FFFF', '#FF3737', '#DD5627', '#D3F0FE'],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
y: 'center',
|
||||
// right: 0,
|
||||
y: '54%',
|
||||
bottom:20,
|
||||
itemHeight: fitChartSize(8),
|
||||
itemWidth: fitChartSize(8),
|
||||
itemGap: fitChartSize(10),
|
||||
itemGap: fitChartSize(12),
|
||||
formatter: function (name) {
|
||||
let obj = props.list.find((item) => item.name == name)
|
||||
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
|
||||
@@ -72,7 +73,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
color: '#D3F0FE',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(14)
|
||||
},
|
||||
data: props.list || []
|
||||
},
|
||||
@@ -90,7 +91,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
color: '#D3F0FE',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(14)
|
||||
},
|
||||
data: props.list
|
||||
},
|
||||
@@ -136,7 +137,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.age {
|
||||
width: vw(300);
|
||||
height: vh(150);
|
||||
width: 90%;
|
||||
height: vh(420);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
</div>
|
||||
<div class="pt-20">
|
||||
<Line
|
||||
:width="370"
|
||||
:height="140"
|
||||
width="95%"
|
||||
:height="120"
|
||||
:config="{ legend: false }"
|
||||
:data="scenicQueueList"
|
||||
:xAxisData="scenicQueueXAxisData"
|
||||
@@ -59,8 +59,8 @@
|
||||
<Title3 title="今日景区承载量" />
|
||||
<div class="pt-20">
|
||||
<Line
|
||||
:width="370"
|
||||
:height="140"
|
||||
width="95%"
|
||||
:height="120"
|
||||
:config="{ legend: false }"
|
||||
:data="scenicBearList"
|
||||
:xAxisData="scenicBearXAxisData"
|
||||
@@ -121,12 +121,12 @@
|
||||
|
||||
<div class="box-1">
|
||||
<Title3 title="客源地TOP5" />
|
||||
<RegionTop :list="homeStore.userPortraitData.provinceRate" :width="230" :height="260" />
|
||||
<RegionTop :list="homeStore.userPortraitData.provinceRate" width="100%" :height="150" />
|
||||
</div>
|
||||
|
||||
<div class="box-1">
|
||||
<Title3 title="购票渠道" />
|
||||
<TicketSource :list="homeStore.userPortraitData.channel" :width="230" :height="260" />
|
||||
<TicketSource :list="homeStore.userPortraitData.channel" width="100%" :height="150" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -192,12 +192,12 @@
|
||||
.select-box {
|
||||
width:vw(200);
|
||||
height:vh(30);
|
||||
font-size:vw(16);
|
||||
font-size: font-vw(16);
|
||||
}
|
||||
.box-2 {
|
||||
margin-top: vh(120);
|
||||
width: vw(800);
|
||||
height: vh(953);
|
||||
width: vw(1200);
|
||||
// height: vh(953);
|
||||
padding: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-2.png');
|
||||
@@ -209,11 +209,11 @@
|
||||
z-index: 990;
|
||||
}
|
||||
.list {
|
||||
height: vh(72);
|
||||
height: vh(104);
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
height: vh(52);
|
||||
height: vh(104);
|
||||
margin: 0 vh(10);
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
@@ -223,35 +223,35 @@
|
||||
&-icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
// height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
&-label {
|
||||
position: absolute;
|
||||
left: vw(70);
|
||||
top: vh(-10);
|
||||
left: vw(120);
|
||||
top: vh(-20);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
&-value {
|
||||
position: absolute;
|
||||
left: vw(70);
|
||||
left: vw(120);
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.unit {
|
||||
color: #02f9fa;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
.box {
|
||||
width: vw(384);
|
||||
height: vh(320);
|
||||
width: 50%;
|
||||
// height: vh(820);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(1) {
|
||||
@@ -262,7 +262,7 @@
|
||||
display: flex;
|
||||
margin-top: vh(12);
|
||||
width: 100%;
|
||||
height: vh(88);
|
||||
height: vh(150);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
&-item {
|
||||
@@ -274,20 +274,20 @@
|
||||
cursor:pointer;
|
||||
}
|
||||
&-title {
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(18);
|
||||
color: #fff;
|
||||
}
|
||||
&-value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(20);
|
||||
font-size: font-vw(20);
|
||||
color: #02f9fa;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
|
||||
}
|
||||
.active{
|
||||
@@ -295,14 +295,14 @@
|
||||
}
|
||||
.prefix,
|
||||
.suffix {
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(12);
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.age-box {
|
||||
width: vw(320);
|
||||
height: vh(303);
|
||||
width: vw(400);
|
||||
height: vh(693);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(1) {
|
||||
@@ -310,8 +310,9 @@
|
||||
}
|
||||
}
|
||||
.box-1 {
|
||||
width: vw(230);
|
||||
height: vh(303);
|
||||
width: vw(400);
|
||||
height: 100%;
|
||||
height: vh(693);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(2) {
|
||||
@@ -322,7 +323,7 @@
|
||||
margin: vh(10) vw(20) 0 vw(20);
|
||||
height: vh(24);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -350,7 +351,7 @@
|
||||
}
|
||||
.text {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.progress {
|
||||
@@ -362,13 +363,13 @@
|
||||
}
|
||||
.man {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #02f9fa;
|
||||
margin-left: vw(10);
|
||||
}
|
||||
.woman {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #f15a25;
|
||||
margin-left: vw(10);
|
||||
}
|
||||
@@ -376,7 +377,7 @@
|
||||
.ticket-box {
|
||||
margin-top: vh(20);
|
||||
width: 100%;
|
||||
height: vh(106);
|
||||
// height: vh(106);
|
||||
background: linear-gradient(to right, rgba(0, 77, 136, 0) 0%, rgba(0, 77, 136, 0.6) 100%);
|
||||
.title {
|
||||
width: vw(253);
|
||||
@@ -388,7 +389,7 @@
|
||||
& > span {
|
||||
padding-left: vw(22);
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(15);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@@ -398,12 +399,13 @@
|
||||
}
|
||||
}
|
||||
.ticket-wrap {
|
||||
margin-top: vh(8);
|
||||
// margin-top: vh(18);
|
||||
// margin-bottom: vh(18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
& > img {
|
||||
width: vw(74);
|
||||
width: vw(124);
|
||||
height: auto;
|
||||
}
|
||||
& > div {
|
||||
@@ -417,12 +419,12 @@
|
||||
.label {
|
||||
padding-left: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,9 +49,55 @@
|
||||
<div class="map" id="map" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<div class="flex">
|
||||
<!-- <div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div> -->
|
||||
<div class="flex-1" >
|
||||
<Title1 title="酒店信息" class="title1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel" >
|
||||
|
||||
<div>
|
||||
<div class="item">
|
||||
<div class="label">接入总数</div>
|
||||
<countup class="value" :end-val="homeStore.hotelData?.info?.hotel_count || 0" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">房间总数</div>
|
||||
<countup class="value" :end-val="homeStore.hotelData?.info?.total_room_count || 0" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">当前入住总数</div>
|
||||
<countup
|
||||
class="value success"
|
||||
:end-val="homeStore.hotelData?.info?.total_guest_count || 0"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">当前入住率</div>
|
||||
<div class="flex align-center">
|
||||
<countup
|
||||
class="value success"
|
||||
:end-val="homeStore.hotelData?.info?.occupancy_rate || 0"
|
||||
/>
|
||||
<span class="suffix">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="occupancy">
|
||||
<Title3 title="酒店入住率" />
|
||||
</div>
|
||||
<occupancy :list="homeStore.hotelData?.list" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="left" v-if="false">
|
||||
<div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<div class="flex justify-center pt-30">
|
||||
<div class="item">
|
||||
<p class="label">今日工单总条数</p>
|
||||
<countup :end-val="homeStore.wordkOrderData.toDayData.count" />
|
||||
@@ -95,7 +141,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="false">
|
||||
<vue3-seamless-scroll
|
||||
class="right"
|
||||
:list="homeStore.wordkOrderList"
|
||||
@@ -126,7 +172,7 @@
|
||||
|
||||
import ScrollNumber from '@/components/ScrollNumber/index.vue'
|
||||
import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
|
||||
|
||||
import occupancy from './occupancy'
|
||||
import icon8 from '@/assets/images/icon-8.png'
|
||||
import icon9 from '@/assets/images/icon-9.png'
|
||||
import icon10 from '@/assets/images/icon-10.png'
|
||||
@@ -358,11 +404,60 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hotel {
|
||||
flex:1;
|
||||
margin: 0 vw(6);
|
||||
.occupancy{
|
||||
height:100%;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
display: flex;
|
||||
// width: vw(360);
|
||||
height: vh(120);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: font-vw(18);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
}
|
||||
.success {
|
||||
color: #02f9fa;
|
||||
}
|
||||
.suffix {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
color: #02f9fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
padding-top: vh(6);
|
||||
margin-top: vh(6);
|
||||
// width: vw(360);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.workorder-empty{
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: vh(90);
|
||||
font-size: vw(20);
|
||||
font-size: font-vw(20);
|
||||
}
|
||||
.coll-box{
|
||||
width:initial !important;
|
||||
@@ -380,15 +475,17 @@
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: vh(700);
|
||||
height: vh(1130);
|
||||
background-color: transparent;
|
||||
}
|
||||
.box-3 {
|
||||
width: vw(1614);
|
||||
height: vh(950);
|
||||
// width: vw(1400);
|
||||
// height: vh(2050);
|
||||
height:100%;
|
||||
flex:1;
|
||||
margin-top: vh(120);
|
||||
.header {
|
||||
width: vw(1614);
|
||||
// width: vw(1400);
|
||||
height: vh(128);
|
||||
padding: 0 vw(90);
|
||||
box-sizing: border-box;
|
||||
@@ -417,12 +514,12 @@
|
||||
.label {
|
||||
margin-bottom: vh(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(18);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
line-height: vh(33);
|
||||
&--error {
|
||||
@extend .value;
|
||||
@@ -444,7 +541,7 @@
|
||||
margin-right: vw(4);
|
||||
border-radius: vw(4);
|
||||
color: #ffffff;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -462,7 +559,7 @@
|
||||
height: vw(40);
|
||||
margin-right: vw(4);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -496,18 +593,22 @@
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
margin-top: vh(4);
|
||||
display: flex;
|
||||
height: vh(120);
|
||||
margin-top: vh(8);
|
||||
// display: flex;
|
||||
// height: vh(500);
|
||||
height:100%;
|
||||
background-image: url('@/assets/images/bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
flex-wrap: wrap;
|
||||
.left {
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
margin-top: vh(4);
|
||||
margin-top: vh(14);
|
||||
width:100%;
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(110);
|
||||
height: vh(180);
|
||||
// height:100%;
|
||||
margin-right: vw(6);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -517,16 +618,17 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// padding-top:vh(50);
|
||||
}
|
||||
.label {
|
||||
margin-bottom: vh(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
.error {
|
||||
@@ -543,13 +645,13 @@
|
||||
.text {
|
||||
margin-right: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
.progress {
|
||||
width: vw(100);
|
||||
:deep(.el-progress-bar__outer) {
|
||||
height: vh(4) !important;
|
||||
height: vh(8) !important;
|
||||
background-color: #0858ae !important;
|
||||
}
|
||||
}
|
||||
@@ -568,7 +670,7 @@
|
||||
.value {
|
||||
margin-left: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
@@ -577,16 +679,17 @@
|
||||
.right {
|
||||
margin-top: vh(4);
|
||||
padding: vh(10) vw(10);
|
||||
height: vh(106);
|
||||
width: vw(1040);
|
||||
// height: vh(106);
|
||||
height:100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: vh(10);
|
||||
&-tag {
|
||||
padding: 0 vw(16);
|
||||
padding:vw(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -608,14 +711,16 @@
|
||||
.content {
|
||||
margin-left: vw(4);
|
||||
padding: 0 vw(10);
|
||||
width: vw(950);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
width: vw(1350);
|
||||
flex:1;
|
||||
padding:vw(15);
|
||||
// height: vh(44);
|
||||
// line-height: vh(44);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
border-radius: vw(2);
|
||||
background: rgba(0, 150, 255, 0.28);
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<Line
|
||||
:width="250"
|
||||
:height="150"
|
||||
width="95%"
|
||||
:height="100"
|
||||
:config="{ legend: false }"
|
||||
:data="congestionData"
|
||||
:xAxisData="congestionXAxisData"
|
||||
@@ -91,8 +91,8 @@
|
||||
<Title3 title="停车场车流量" />
|
||||
<div class="pt-10">
|
||||
<Line
|
||||
:width="250"
|
||||
:height="150"
|
||||
width="95%"
|
||||
:height="100"
|
||||
:config="{ legend: false }"
|
||||
:data="parkData"
|
||||
:xAxisData="parkXAxisData"
|
||||
@@ -125,9 +125,9 @@
|
||||
<div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<!-- <div class="flex-1" >
|
||||
<Title1 title="酒店信息" class="title1" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
@@ -209,7 +209,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel">
|
||||
<div class="hotel" v-if="false">
|
||||
<div>
|
||||
<div class="item">
|
||||
<div class="label">接入总数</div>
|
||||
@@ -299,45 +299,47 @@
|
||||
}
|
||||
.box-3 {
|
||||
margin-top: vh(120);
|
||||
width: vw(774);
|
||||
height: vh(956);
|
||||
width: vw(1200);
|
||||
height:100%;
|
||||
// height: vh(2056);
|
||||
padding-left: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-5.png');
|
||||
background-size: 100% 100%;
|
||||
.traffic-info {
|
||||
height: vh(80);
|
||||
// height: vh(80);
|
||||
}
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: vw(64);
|
||||
width: vw(124);
|
||||
height: auto;
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 9px #0096ff;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(18);
|
||||
margin-top: vh(10);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
.box {
|
||||
width: vw(250);
|
||||
height: vh(200);
|
||||
width: 33%;
|
||||
// height: vh(200);
|
||||
margin-right: vw(8);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box-1 {
|
||||
width: vw(250);
|
||||
height: vh(200);
|
||||
// width: vw(300);
|
||||
flex:1;
|
||||
height: vh(450);
|
||||
margin-right: vw(8);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -352,7 +354,7 @@
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(70);
|
||||
height: vh(120);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
@@ -360,13 +362,13 @@
|
||||
background-size: 100% 100%;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(16);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
}
|
||||
.error {
|
||||
@@ -384,20 +386,22 @@
|
||||
}
|
||||
}
|
||||
.car-ship {
|
||||
flex: 1;
|
||||
width:100%;
|
||||
// flex: 1;
|
||||
& > div {
|
||||
position: relative;
|
||||
height: vh(114);
|
||||
height: vh(235);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
.car {
|
||||
@extend .icon;
|
||||
width: vw(352);
|
||||
height: vw(70);
|
||||
padding-left: vw(90);
|
||||
margin-left: vw(10);
|
||||
margin-left: vw(30);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -419,12 +423,12 @@
|
||||
.label {
|
||||
margin-bottom: vh(6);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(22);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.unit {
|
||||
@@ -435,27 +439,31 @@
|
||||
}
|
||||
.table {
|
||||
position: absolute;
|
||||
left: vw(160);
|
||||
width: vw(226);
|
||||
height: vh(96);
|
||||
left: vw(200);
|
||||
// width: vw(350);
|
||||
width:80%;
|
||||
// height: vh(196);
|
||||
height:90%;
|
||||
z-index: 2;
|
||||
background: rgba(0, 150, 255, 0.17);
|
||||
.header {
|
||||
display: flex;
|
||||
height: vh(18);
|
||||
line-height: vh(18);
|
||||
height: vh(48);
|
||||
line-height: vh(48);
|
||||
text-align: center;
|
||||
background: rgba(0, 150, 255, 0.4);
|
||||
& > div {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(20);
|
||||
color: #fff;
|
||||
// height: vh(50);
|
||||
// line-height: vh(50);
|
||||
}
|
||||
}
|
||||
.content {
|
||||
overflow-y: hidden;
|
||||
height: vh(82);
|
||||
// height: vh(282);
|
||||
// /* 滚动条整体样式 */
|
||||
// &::-webkit-scrollbar {
|
||||
// width: vw(4); /* 滚动条的宽度 */
|
||||
@@ -472,8 +480,9 @@
|
||||
}
|
||||
.cell {
|
||||
display: flex;
|
||||
height: vh(27);
|
||||
line-height: vh(27);
|
||||
// height: vh(50);
|
||||
// line-height: vh(50);
|
||||
padding:vw(10);
|
||||
text-align: center;
|
||||
background: #074686;
|
||||
&:nth-child(odd) {
|
||||
@@ -486,36 +495,38 @@
|
||||
flex: 1;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(18);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(18);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.unit-1 {
|
||||
font-size: vw(12);
|
||||
font-size: vw(18);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hotel {
|
||||
flex:1;
|
||||
margin: 0 vw(6);
|
||||
& > div:nth-child(1) {
|
||||
display: flex;
|
||||
width: vw(360);
|
||||
// width: vw(360);
|
||||
height: vh(70);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -527,13 +538,13 @@
|
||||
justify-content: center;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
.success {
|
||||
@@ -551,7 +562,7 @@
|
||||
& > div:nth-child(2) {
|
||||
padding-top: vh(6);
|
||||
margin-top: vh(6);
|
||||
width: vw(360);
|
||||
// width: vw(360);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@@ -564,7 +575,7 @@
|
||||
}
|
||||
.title1 {
|
||||
:deep(.title) {
|
||||
width: vw(300) !important;
|
||||
// width: vw(300) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gauge {
|
||||
width: vw(120);
|
||||
height: vh(50);
|
||||
width: vw(200);
|
||||
height: vh(80);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -70,14 +70,14 @@
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '4%',
|
||||
top: '0',
|
||||
bottom: '4%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
x: 'center',
|
||||
bottom: '-3%',
|
||||
bottom: '5px',
|
||||
itemHeight: fitChartSize(12),
|
||||
itemWidth: fitChartSize(12),
|
||||
itemGap: fitChartSize(6),
|
||||
@@ -90,11 +90,11 @@
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(16)
|
||||
},
|
||||
value: {
|
||||
color: '#00D5F6',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(16)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -102,7 +102,7 @@
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '40%'],
|
||||
center: ['50%', '32%'],
|
||||
radius: ['45%', '60%'],
|
||||
itemStyle: {
|
||||
borderWidth: fitChartSize(4),
|
||||
@@ -151,7 +151,7 @@
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size:vw(18);
|
||||
font-size:vw(20);
|
||||
// color:#999;
|
||||
color:#02f9fa;
|
||||
display: flex;
|
||||
@@ -159,7 +159,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.jam-count {
|
||||
width: vw(250);
|
||||
height: vh(150);
|
||||
width: vw(350);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -140,7 +140,7 @@
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 6, 0],
|
||||
inside: true,
|
||||
@@ -152,7 +152,7 @@
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontWeight: 600,
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(18)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -176,7 +176,7 @@
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontSize: fitChartSize(18),
|
||||
formatter: function (params) {
|
||||
return params.data.name
|
||||
}
|
||||
@@ -213,7 +213,7 @@
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size:vw(18);
|
||||
font-size:vw(20);
|
||||
// color:#999;
|
||||
color:#02f9fa;
|
||||
display: flex;
|
||||
@@ -221,7 +221,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.jam {
|
||||
width: vw(250);
|
||||
height: vh(160);
|
||||
width: vw(290);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 10, 0],
|
||||
inside: true,
|
||||
@@ -135,7 +135,7 @@
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontWeight: 600,
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(20)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -159,7 +159,7 @@
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontSize: fitChartSize(20),
|
||||
formatter: function (params) {
|
||||
return params.data.name
|
||||
}
|
||||
@@ -191,7 +191,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.occupancy {
|
||||
width: vw(360);
|
||||
height: vh(130);
|
||||
width: 100%;
|
||||
min-height: vh(520);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vacancy {
|
||||
width: vw(250);
|
||||
height: vh(160);
|
||||
width: vw(400);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -60,14 +60,14 @@
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
@@ -88,7 +88,7 @@
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(10)
|
||||
fontSize: fitChartSize(14)
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [0, 0, 0, 0],
|
||||
@@ -125,6 +125,6 @@
|
||||
<style scoped lang="scss">
|
||||
.vehicle-source {
|
||||
width: 100%;
|
||||
height: vh(160);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user