From c6a8116fdfcba0d799eca8c2ac51c6ba5c6b07b9 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 27 Mar 2025 19:54:49 +0800
Subject: [PATCH] feat: 改为滚动条
---
src/layout/Header.vue | 15 +--
src/views/Home/components/HomeRight/TaskAchievements.vue | 30 +++---
src/views/Home/components/HomeLeft/HomeLeft.vue | 8 +-
src/router/views/index.js | 11 ++
src/views/Home/components/HomeLeft/OverviewNext.vue | 22 ++--
src/layout/index.vue | 55 ++++++++++---
src/styles/variables.scss | 3
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue | 12 +-
src/views/TaskManage/TaskManage.vue | 11 ++
src/views/Home/components/HomeRight/HomeRight.vue | 4
src/views/Home/components/HomeRight/EventOverview.vue | 22 ++--
src/views/Home/components/HomeRight/Synergy.vue | 14 +-
12 files changed, 123 insertions(+), 84 deletions(-)
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
index 8e87cb2..9b5b986 100644
--- a/src/layout/Header.vue
+++ b/src/layout/Header.vue
@@ -1,9 +1,9 @@
<template>
<div class="header">
<div class="h-left">
- <div class="left-item active">首页</div>
+ <div class="left-item active" @click="router.push('/')">首页</div>
<div class="left-item">集群调度</div>
- <div class="left-item">任务管理</div>
+ <div class="left-item" @click="router.push('/taskManage')">任务管理</div>
<div class="left-item">航线规划</div>
</div>
<div class="h-right">
@@ -13,17 +13,10 @@
<div class="right-item">系统运维</div>
</div>
</div>
- <!-- <div :style="{ background: '#2bc03f', height: hToV(50), width: wToR(50) }">test</div> -->
</template>
-<script>
-import { hToV, wToR } from '@/utils/pxConver';
-
-export default {
- methods: { wToR, hToV },
- mounted() {
- },
-};
+<script setup>
+const router = useRouter()
</script>
<style scoped lang="scss">
diff --git a/src/layout/index.vue b/src/layout/index.vue
index a316cea..d240e08 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,8 +1,8 @@
<template>
- <div class="home">
+ <div :class="{layout:true, 'narrowScreen':narrowScreen}">
<div id="cesium"></div>
<div class="page-index">
- <Header/>
+ <Header />
<router-view></router-view>
</div>
</div>
@@ -14,27 +14,54 @@
import Header from './Header.vue';
const { _init } = cesiumOperation();
+const narrowScreen = ref(false)
+
+const narrowScreenFun = () => {
+ // 监听窗口变化，计算是不是 窄屏幕
+ narrowScreen.value = window.innerWidth / window.innerHeight < 16 / 9;
+};
onMounted(() => {
_init('cesium');
+ narrowScreenFun()
+ window.addEventListener('resize', narrowScreenFun);
});
</script>
<style scoped lang="scss">
-.home {
+.layout {
position: relative;
- height: 100%;
width: 100%;
- overflow: hidden;
+ height: 100%;
+ overflow-x: auto;
+ background: #020f25;
+ scrollbar-width: none; /* Firefox 隐藏滚动条 */
+ &::-webkit-scrollbar {
+ display: none; /* Chrome、Safari 隐藏滚动条 */
+ }
+
+ &.narrowScreen{
+ >div{
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+
+ >div{
+ left: 0;
+ top: 0;
+ position: absolute;
+ height: 1080px;
+ width: 1920px;
+ }
#cesium {
- height: 100%;
- width: 100%;
-
:deep() {
.cesium-viewer {
width: 100%;
height: 100%;
+ overflow: hidden;
.cesium-viewer-cesiumWidgetContainer {
width: 100%;
@@ -51,21 +78,19 @@
}
}
}
+
+ .cesium-viewer-bottom {
+ display: none;
+ }
}
}
.page-index {
- left: 0;
- top: 0;
- position: absolute;
- z-index: 999;
- height: 100%;
- width: 100%;
background-image: url('../assets/images/bg-new.png');
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
-
+
> * {
pointer-events: auto;
}
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 887089f..ca625a3 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -13,7 +13,16 @@
meta: {
i18n: 'dashboard',
},
- component: () => import(/* webpackChunkName: "views" */ '@/views/Home/Home.vue'),
+ component: () => import(/* webpackChunkName: "index" */ '@/views/Home/Home.vue'),
+ },
+ {
+ path: 'taskManage',
+ name: '任务管理',
+ meta: {
+ i18n: 'dashboard',
+ menu: false,
+ },
+ component: () => import(/* webpackChunkName: "TaskManage" */ '@/views/TaskManage/TaskManage.vue'),
},
{
path: 'dashboard',
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 93a7517..646f60c 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -3,5 +3,6 @@
$top_height: 50px;
@function hToV($px) {
- @return calc($px / 1080) * 100vh;
+ //@return calc($px / 1080) * 100vh;
+ @return $px * 1px;
}
diff --git a/src/views/Home/components/HomeLeft/HomeLeft.vue b/src/views/Home/components/HomeLeft/HomeLeft.vue
index d0ca55f..50857af 100644
--- a/src/views/Home/components/HomeLeft/HomeLeft.vue
+++ b/src/views/Home/components/HomeLeft/HomeLeft.vue
@@ -37,20 +37,20 @@
margin-left: 45px;
width: 260px;
font-size: 14px;
- height: hToV(36);
- line-height: hToV(36);
+ height: 36px;
+ line-height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
.line {
border: 1px solid #FFFFFF;
- height: hToV(10);
+ height: 10px;
opacity: 0.5;
}
.weather {
img {
width: 20px;
- height: hToV(20);
+ height: 20px;
}
.tq {
margin: 0 5px;
diff --git a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
index 7b507b0..305a2aa 100644
--- a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
+++ b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -33,19 +33,19 @@
.inspection-rask-details {
margin-left: 29px;
width: 390px;
- height: hToV(414);
+ height: 414px;
background: linear-gradient( 90deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
border-radius: 0px 0px 0px 0px;
opacity: 0.85;
.inspection-num {
background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
width: 360px;
- height: hToV(118);
+ height: 118px;
position: relative;
.total {
position: absolute;
left: 34px;
- top: hToV(34);
+ top: 34px;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
@@ -56,14 +56,14 @@
}
.status {
position: absolute;
- top: hToV(8);
+ top: 8px;
right: 10px;
width: 200px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
- line-height: hToV(22);
+ line-height: 22px;
padding: 0 10px 10px 0;
.name {
font-weight: 400;
@@ -78,4 +78,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Home/components/HomeLeft/OverviewNext.vue b/src/views/Home/components/HomeLeft/OverviewNext.vue
index 030c890..44287d9 100644
--- a/src/views/Home/components/HomeLeft/OverviewNext.vue
+++ b/src/views/Home/components/HomeLeft/OverviewNext.vue
@@ -61,19 +61,19 @@
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
margin-left: 29px;
width: 390px;
- height: hToV(414);
+ height: 414px;
background: linear-gradient( 90deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
border-radius: 0px 0px 0px 0px;
opacity: 0.85;
.next-num {
width: 358px;
- height: hToV(92);
+ height: 92px;
background: url(@/assets/images/next-num.png) no-repeat center / 100% 100%;;
position: relative;
.total {
position: absolute;
left: 22px;
- top: hToV(18);
+ top: 18px;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
@@ -84,12 +84,12 @@
}
.status {
position: absolute;
- top: hToV(16);
+ top: 16px;
right: 30px;
width: 200px;
display: flex;
justify-content: space-between;
- line-height: hToV(30);
+ line-height: 30px;
.name {
font-weight: 400;
font-size: 14px;
@@ -99,12 +99,12 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 26px;
-
+
}
}
}
.search-box {
- margin-top: hToV(19);
+ margin-top: 19px;
margin-right: 16px;
:deep(.el-input__wrapper) {
background-color: rgba(0, 112, 255, 0.1);
@@ -134,12 +134,12 @@
.table-header, .table-item {
display: flex;
justify-content: space-between;
- height: hToV(36);
- line-height: hToV(36);
+ height: 36px;
+ line-height: 36px;
}
.table-item {
-
+
}
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Home/components/HomeRight/EventOverview.vue b/src/views/Home/components/HomeRight/EventOverview.vue
index 6f9b5ca..2447bdb 100644
--- a/src/views/Home/components/HomeRight/EventOverview.vue
+++ b/src/views/Home/components/HomeRight/EventOverview.vue
@@ -41,7 +41,7 @@
<style scoped lang="scss">
.eventOverview {
width: 390px;
- height: hToV(445);
+ height: 445px;
background: linear-gradient(
270deg,
#1f3e7a 0%,
@@ -50,15 +50,15 @@
);
border-radius: 0px 0px 0px 0px;
opacity: 0.85;
- margin: hToV(3) 0 0 0;
- padding-top: hToV(15);
+ margin: 3px 0 0 0;
+ padding-top: 15px;
display: flex;
flex-direction: column;
align-items: center;
.overviewData {
width: 360px;
- height: hToV(122);
+ height: 122px;
background: url('@/assets/images/home/homeRight/overviewBg.png') no-repeat center / 100% 100%;
display: flex;
justify-content: space-between;
@@ -71,7 +71,7 @@
font-weight: 400;
font-size: 26px;
color: #ffffff;
- line-height: hToV(30);
+ line-height: 30px;
text-align: center;
}
@@ -80,7 +80,7 @@
font-weight: 400;
font-size: 14px;
color: #ffffff;
- line-height: hToV(20);
+ line-height: 20px;
text-align: center;
}
}
@@ -89,12 +89,12 @@
width: 246px;
display: flex;
flex-wrap: wrap;
- gap: hToV(13) 0;
+ gap: 13px 0;
font-family: Source Han Sans CN, Source Han Sans CN, serif;
font-weight: 400;
font-size: 14px;
color: #ffffff;
- line-height: hToV(14);
+ line-height: 14px;
.overviewItem {
width: calc(100% / 3);
@@ -102,11 +102,11 @@
.itemName {
display: flex;
align-items: center;
- margin-bottom: hToV(6);
+ margin-bottom: 6px;
img {
width: 16px;
- height: hToV(16);
+ height: 16px;
}
}
@@ -114,7 +114,7 @@
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
font-weight: 400;
font-size: 24px;
- line-height: hToV(18);
+ line-height: 18px;
}
}
}
diff --git a/src/views/Home/components/HomeRight/HomeRight.vue b/src/views/Home/components/HomeRight/HomeRight.vue
index b9d5281..1ee4b9a 100644
--- a/src/views/Home/components/HomeRight/HomeRight.vue
+++ b/src/views/Home/components/HomeRight/HomeRight.vue
@@ -16,13 +16,13 @@
<style scoped lang="scss">
.home-right {
position: absolute;
- top: hToV(122);
+ top: 122px;
right: 31px;
width: 404px;
.titleBox {
width: 404px;
- height: hToV(43);
+ height: 43px;
}
}
</style>
diff --git a/src/views/Home/components/HomeRight/Synergy.vue b/src/views/Home/components/HomeRight/Synergy.vue
index c0c397e..115a132 100644
--- a/src/views/Home/components/HomeRight/Synergy.vue
+++ b/src/views/Home/components/HomeRight/Synergy.vue
@@ -23,7 +23,7 @@
<style scoped lang="scss">
.synergy {
width: 390px;
- height: hToV(108);
+ height: 108px;
background: linear-gradient(
270deg,
#1f3e7a 0%,
@@ -31,15 +31,15 @@
rgba(31, 62, 122, 0) 100%
);
opacity: 0.85;
- margin: hToV(2) 0 hToV(13) 0;
+ margin: 2px 0 13 0;
display: flex;
justify-content: space-between;
- padding: hToV(11) 27px 0;
+ padding: 11px 27px 0;
.synergy-item {
width: 95px;
- height: hToV(77);
- padding-top: hToV(7);
+ height: 77px;
+ padding-top: 7px;
background: url('@/assets/images/home/homeRight/synergyBg.png') no-repeat center center / 100% 100%;
.title {
@@ -50,7 +50,7 @@
text-align: center;
font-style: normal;
text-transform: none;
- margin-bottom: hToV(4);
+ margin-bottom: 4px;
}
.value {
@@ -58,7 +58,7 @@
font-weight: 400;
font-size: 26px;
color: #ffffff;
- line-height: hToV(26);
+ line-height: 26px;
font-style: normal;
text-transform: none;
text-align: center;
diff --git a/src/views/Home/components/HomeRight/TaskAchievements.vue b/src/views/Home/components/HomeRight/TaskAchievements.vue
index d9b1e22..7a9f58e 100644
--- a/src/views/Home/components/HomeRight/TaskAchievements.vue
+++ b/src/views/Home/components/HomeRight/TaskAchievements.vue
@@ -56,7 +56,7 @@
<style scoped lang="scss">
.taskAchievements {
width: 390px;
- height: hToV(204);
+ height: 204px;
background: linear-gradient(
270deg,
#1f3e7a 0%,
@@ -64,9 +64,9 @@
rgba(31, 62, 122, 0) 100%
);
opacity: 0.85;
- margin: hToV(2) 0 hToV(21) 0;
+ margin: 2px 0 21px 0;
padding-left: 17px;
- padding-top: hToV(15);
+ padding-top: 15px;
.rawData {
display: flex;
@@ -80,7 +80,7 @@
display: flex;
> img {
- height: hToV(63);
+ height: 63px;
width: 63px;
}
@@ -90,22 +90,22 @@
color: #ffffff;
width: 0;
flex-grow: 1;
- padding-top: hToV(12);
+ padding-top: 12px;
.title {
font-family: Source Han Sans CN, Source Han Sans CN, serif;
font-weight: 400;
font-size: 14px;
- line-height: hToV(13);
+ line-height: 13px;
text-align: left;
- margin-bottom: hToV(6);
+ margin-bottom: 6px;
}
.value {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
font-weight: 400;
font-size: 26px;
- line-height: hToV(22);
+ line-height: 22px;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
text-align: left;
}
@@ -114,7 +114,7 @@
}
.processingData {
- margin-top: hToV(19);
+ margin-top: 19px;
display: flex;
align-items: center;
@@ -123,16 +123,16 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- gap: hToV(8) 0;
+ gap: 8px 0;
> div {
width: 135px;
- height: hToV(42);
+ height: 42px;
display: flex;
> img {
width: 32px;
- height: hToV(32);
+ height: 32px;
margin-right: 10px;
}
@@ -145,7 +145,7 @@
font-weight: 400;
font-size: 14px;
color: #ffffff;
- line-height: hToV(17);
+ line-height: 17px;
text-align: left;
}
@@ -153,7 +153,7 @@
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-weight: 400;
font-size: 24px;
- line-height: hToV(23);
+ line-height: 23px;
text-align: left;
}
}
@@ -168,6 +168,6 @@
font-weight: bold;
font-size: 18px;
color: #e1f5ff;
- line-height: hToV(22);
+ line-height: 22px;
}
</style>
diff --git a/src/views/TaskManage/TaskManage.vue b/src/views/TaskManage/TaskManage.vue
new file mode 100644
index 0000000..d649d9c
--- /dev/null
+++ b/src/views/TaskManage/TaskManage.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ TaskManage
+</template>
+
+<style scoped lang="scss">
+
+</style>
--
Gitblit v1.9.3