新版式

This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions

View File

@@ -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>

View File

@@ -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;
}
}

View File

@@ -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);

View File

@@ -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>

View File

@@ -128,7 +128,7 @@
<style lang="scss" scoped>
.gauge {
width: vw(120);
height: vh(50);
width: vw(200);
height: vh(80);
}
</style>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -206,7 +206,7 @@
<style scoped lang="scss">
.vacancy {
width: vw(250);
height: vh(160);
width: vw(400);
height: vh(400);
}
</style>

View File

@@ -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>