lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版式

Browse Source
This commit is contained in:
duanliang
2025-11-25 00:52:18 +08:00
parent 5c17235581
commit 7d28f8b0a4
5 changed files with 245 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/views/home/components/box-2.vue
View File

@@ -50,16 +50,98 @@
</div> </div>
<div class="footer"> <div class="footer">
<div class="flex"> <div class="flex">
<!-- <div class="flex-1"> <div class="flex-1">
<Title1 title="车船信息" class="title1" /> <Title1 title="车船信息" class="title1" />
</div> --> </div>
<div class="flex-1" > <!-- <div class="flex-1" >
<Title1 title="酒店信息" class="title1" /> <Title1 title="酒店信息" class="title1" />
</div> -->
</div>
<div class="flex">
<div class="car-ship">
<div class="mb-6">
<div class="car">
<div class="label">车总数</div>
<div class="flex align-center">
<countup class="value" :end-val="homeStore.carShipData?.car?.count || 0" />
<span class="unit">辆</span>
</div>
</div>
<div class="table">
<div class="header">
<div>景区</div>
<div>运行</div>
<div>空余</div>
</div>
<div class="content">
<vue3-seamless-scroll
v-model="carMove"
:list="homeStore.carShipData?.car?.info"
:limitScrollNum="5"
:hover="true"
:step="0.2"
:copy-num="0"
:wheel="true"
:isWatch="true"
:isStop="true"
>
<div
class="cell"
v-for="(item, index) in homeStore.carShipData?.car?.info"
:key="index"
>
<div class="small-text">{{ item.name }}</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
<div>
<div class="ship">
<div class="label">船总数</div>
<div class="flex align-center">
<countup class="value" :end-val="homeStore.carShipData?.ship?.count || 0" />
<span class="unit">艘</span>
</div>
</div>
<div class="table">
<div class="header">
<div>景区</div>
<div>运行</div>
<div>空余</div>
</div>
<div class="content">
<vue3-seamless-scroll
v-model="shipMove"
:list="homeStore.carShipData?.ship?.info"
:limitScrollNum="5"
:hover="true"
:step="0.2"
:copy-num="0"
:wheel="true"
:isWatch="true"
:isStop="true"
>
<div
class="cell"
v-for="(item, index) in homeStore.carShipData?.ship?.info"
:key="index"
>
<div class="small-text">{{ item.name }}</div>
<div>{{ item.started_count }}<span class="unit-1">艘</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">艘</span></div>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="hotel" > <div class="hotel" v-if="false" >
<div> <div >
<div class="item"> <div class="item">
<div class="label">接入总数</div> <div class="label">接入总数</div>
<countup class="value" :end-val="homeStore.hotelData?.info?.hotel_count || 0" /> <countup class="value" :end-val="homeStore.hotelData?.info?.hotel_count || 0" />
@@ -404,6 +486,142 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.car-ship {
width:100%;
// flex: 1;
& > div {
position: relative;
height: vh(299);
display: flex;
align-items: center;
background-image: url('@/assets/images/bg-4.png');
background-size: cover;
.car {
// @extend .icon;
width: vw(352);
height: vw(70);
padding-left: vw(90);
margin-left: vw(30);
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('@/assets/images/icon-6.png');
background-size: 100% 100%;
}
.ship {
// @extend .icon;
width: vw(352);
height: vw(70);
padding-left: vw(90);
margin-left: vw(10);
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('@/assets/images/icon-7.png');
background-size: 100% 100%;
}
.label {
margin-bottom: vh(6);
font-weight: 400;
font-size: font-vw(14);
color: rgba(255, 255, 255, 0.9);
}
.value {
font-weight: bold;
font-size: font-vw(22);
color: #02f9fa;
}
.unit {
font-weight: bold;
font-size: vw(14);
color: #02f9fa;
margin-top: vh(6);
}
.table {
position: absolute;
left: vw(200);
// width: vw(350);
width:85%;
// height: vh(196);
height:100%;
z-index: 2;
background: rgba(0, 150, 255, 0.17);
.header {
display: flex;
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: font-vw(20);
color: #fff;
// height: vh(50);
// line-height: vh(50);
}
}
.content {
overflow-y: hidden;
// height: vh(282);
// /* 滚动条整体样式 */
// &::-webkit-scrollbar {
// width: vw(4); /* 滚动条的宽度 */
// }
// /* 滚动条轨道 */
// &::-webkit-scrollbar-track {
// background: 'transparent'; /* 轨道的背景色 */
// }
// /* 滚动条滑块 */
// &::-webkit-scrollbar-thumb {
// background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
// border-radius: 5px; /* 滑块的圆角 */
// }
}
.cell {
display: flex;
// height: vh(50);
// line-height: vh(50);
padding:vw(15);
text-align: center;
background: #074686;
&:nth-child(odd) {
background: rgba(0, 150, 255, 0.1);
}
&:nth-child(even) {
background: #074686;
}
& > div {
flex: 1;
}
& > div:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
font-weight: 400;
font-size: font-vw(18);
color: rgba(255, 255, 255, 0.9);
}
& > div:nth-child(2) {
font-weight: bold;
font-size: font-vw(18);
color: #ffffff;
}
& > div:nth-child(3) {
font-weight: bold;
font-size: font-vw(18);
color: #02f9fa;
}
.unit-1 {
font-size: vw(18);
}
}
}
}
}
.hotel { .hotel {
flex:1; flex:1;
margin: 0 vw(6); margin: 0 vw(6);
@@ -475,7 +693,7 @@
} }
.map { .map {
width: 100%; width: 100%;
height: vh(1130); height: vh(1170);
background-color: transparent; background-color: transparent;
} }
.box-3 { .box-3 {
@@ -487,7 +705,7 @@
.header { .header {
// width: vw(1400); // width: vw(1400);
height: vh(128); height: vh(128);
padding: 0 vw(90); padding: 0 vw(40);
box-sizing: border-box; box-sizing: border-box;
background-image: url('@/assets/images/group.png'); background-image: url('@/assets/images/group.png');
background-size: 100% 100%; background-size: 100% 100%;

18
src/views/home/components/box-3.vue
View File

@@ -122,16 +122,16 @@
</div> </div>
<div class="flex"> <div class="flex">
<div class="flex-1"> <!-- <div class="flex-1">
<Title1 title="车船信息" class="title1" /> <Title1 title="车船信息" class="title1" />
</div>
<!-- <div class="flex-1" >
<Title1 title="酒店信息" class="title1" />
</div> --> </div> -->
<div class="flex-1" >
<Title1 title="酒店信息" class="title1" />
</div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="car-ship"> <div class="car-ship" v-if="false">
<div class="mb-6"> <div class="mb-6">
<div class="car"> <div class="car">
<div class="label">车总数</div> <div class="label">车总数</div>
@@ -209,7 +209,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="hotel" v-if="false"> <div class="hotel" >
<div> <div>
<div class="item"> <div class="item">
<div class="label">接入总数</div> <div class="label">接入总数</div>
@@ -523,11 +523,11 @@
} }
.hotel { .hotel {
flex:1; flex:1;
margin: 0 vw(6); margin: 0 vw(6);
& > div:nth-child(1) { & > div:nth-child(1) {
display: flex; display: flex;
// width: vw(360); // width: vw(360);
height: vh(70); height: vh(100);
background-image: url('@/assets/images/bg-4.png'); background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%; background-size: 100% 100%;
.item { .item {
@@ -538,7 +538,7 @@
justify-content: center; justify-content: center;
.label { .label {
font-weight: 400; font-weight: 400;
font-size: font-vw(14); font-size: font-vw(18);
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
.value { .value {

2
src/views/home/components/occupancy.vue
View File

@@ -192,6 +192,6 @@
<style scoped lang="scss"> <style scoped lang="scss">
.occupancy { .occupancy {
width: 100%; width: 100%;
min-height: vh(520); height: vh(340);
} }
</style> </style>

16
src/views/monitor/components/box-2.vue
View File

@@ -122,7 +122,7 @@
</div> </div>
</div> </div>
<div v-if="videoLog == 2" class="video-detail"> <div v-if="videoLog == 2" class="video-detail" style="flex:1;">
<div class="video-detail__wrapper"> <div class="video-detail__wrapper">
<video class="video-detail__video" ref="videoRef" muted autoplay controls> <video class="video-detail__video" ref="videoRef" muted autoplay controls>
<source type="application/x-mpegURL" /> <source type="application/x-mpegURL" />
@@ -659,13 +659,13 @@
} }
.left-nav { .left-nav {
margin: 0 vw(8); margin: 0 vw(8);
width: vw(400); width: vw(350);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%); background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
.bom-box { .bom-box {
margin-top: vh(20); margin-top: vh(20);
.search-box { .search-box {
border-radius: vw(2); border-radius: vw(2);
height: vh(56); height: vh(70);
border: 1px solid #0096ff; border: 1px solid #0096ff;
margin: vh(10) auto; margin: vh(10) auto;
display: flex; display: flex;
@@ -799,8 +799,8 @@
.li { .li {
cursor: pointer; cursor: pointer;
// width: vw(250); // width: vw(250);
height: vh(98); height: vh(120);
line-height: vh(98); line-height: vh(120);
text-align: center; text-align: center;
margin-bottom: vh(25); margin-bottom: vh(25);
background: url('/src/assets/images/m-nav-bg-1.png'); background: url('/src/assets/images/m-nav-bg-1.png');
@@ -910,7 +910,8 @@
&-detail__wrapper { &-detail__wrapper {
position: relative; position: relative;
padding: vh(40) vw(50); padding: vh(40) vw(50);
width: vw(1660); // width: vw(1660);
flex:1;
// height: vh(960); // height: vh(960);
background-image: url('/src/assets/images/one-video-bg.png'); background-image: url('/src/assets/images/one-video-bg.png');
background-size: 100% 100%; background-size: 100% 100%;
@@ -945,6 +946,7 @@
padding-right: vw(20); padding-right: vw(20);
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom:vh(10);
.icon { .icon {
width: vw(30); width: vw(30);
height: auto; height: auto;
@@ -1015,7 +1017,7 @@
} }
&-img { &-img {
width: 100%; width: 100%;
height: vh(164); height: vh(264);
display: block; display: block;
object-fit: cover; object-fit: cover;
} }

2
src/views/traffic/components/box-2.vue
View File

@@ -243,7 +243,7 @@
margin: vh(10) auto; margin: vh(10) auto;
margin-top:0; margin-top:0;
width: vw(1100); width: vw(1100);
height: vh(32); height: vh(62);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;