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 class="footer">
<div class="flex">
<!-- <div class="flex-1">
<div class="flex-1">
<Title1 title="车船信息" class="title1" />
</div> -->
<div class="flex-1" >
</div>
<!-- <div class="flex-1" >
<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 class="hotel" >
<div class="hotel" v-if="false" >
<div>
<div >
<div class="item">
<div class="label">接入总数</div>
<countup class="value" :end-val="homeStore.hotelData?.info?.hotel_count || 0" />
@@ -404,6 +486,142 @@
</script>
<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 {
flex:1;
margin: 0 vw(6);
@@ -475,7 +693,7 @@
}
.map {
width: 100%;
height: vh(1130);
height: vh(1170);
background-color: transparent;
}
.box-3 {
@@ -487,7 +705,7 @@
.header {
// width: vw(1400);
height: vh(128);
padding: 0 vw(90);
padding: 0 vw(40);
box-sizing: border-box;
background-image: url('@/assets/images/group.png');
background-size: 100% 100%;

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

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

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

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