mt-fe-group/chenzhou
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 3d page

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-18 16:31:50 +08:00
parent 6fa6df4697
commit bbc22e41e0
3 changed files with 99 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/MainPage.vue
View File

@ -1,15 +1,16 @@
<script setup>
import { ref } from 'vue';
import Tools from './components/Tools.vue';
import NavMenu from './components/NavMenu.vue';
import AnnoucementPage from './pages/AnnouncementPage.vue';
import RealtimePage from './pages/RealtimePage.vue';
import AppHeader from './components/Base/Header.vue';
import AlertListPage from './pages/AlertListPage.vue'
import DataPage from './pages/DataPage.vue';
import DatetimeTool from './components/HeadTime.vue';
import { ref } from "vue";
import Tools from "./components/Tools.vue";
import NavMenu from "./components/NavMenu.vue";
import AnnoucementPage from "./pages/AnnouncementPage.vue";
import RealtimePage from "./pages/RealtimePage.vue";
import AppHeader from "./components/Base/Header.vue";
import AlertListPage from "./pages/AlertListPage.vue";
import DataPage from "./pages/DataPage.vue";
import DatetimeTool from "./components/HeadTime.vue";
import TriplePage from "./pages/3D.vue";
const currentPage = ref('3d');
const currentPage = ref("3d");
const handlePageChange = (page) => {
currentPage.value = page;
console.log(currentPage.value);
@ -28,7 +29,7 @@ const handlePageChange = (page) => {
/>
<div v-else class="pages-wrapper">
<NavMenu @change="handlePageChange" />
<div v-if="currentPage === '3d'" class="3d-page">3d</div>
<TriplePage v-if="currentPage === '3d'" line="10" />
<DataPage v-if="currentPage === 'data'" />
<AlertListPage v-if="currentPage === 'alert'" />
<RealtimePage v-if="currentPage === 'realtime'" />

BIN
src/assets/model/F10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

87
src/pages/3D.vue
View File

@ -1 +1,88 @@
<!-- 三维页面 -->
<script setup>
const props = defineProps({
line: {
type: String,
default: "1",
},
});
</script>
<template>
<div class="triple-page" :class="['line-' + line]"></div>
</template>
<style scoped>
.triple-page {
background: #ccc1;
/* flex: 1;
position: relative; */
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
}
.line-1 {
background: url(../assets/model/F1.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-2 {
background: url(../assets/model/F2.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-3 {
background: url(../assets/model/F3.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-4 {
background: url(../assets/model/F4.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-5 {
background: url(../assets/model/F5.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-6 {
background: url(../assets/model/F6.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-7 {
background: url(../assets/model/F7.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-8 {
background: url(../assets/model/F8.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-9 {
background: url(../assets/model/F9.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-10 {
background: url(../assets/model/F10.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-11 {
background: url(../assets/model/F11.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.line-12 {
background: url(../assets/model/F12.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
</style>