update 3d page
This commit is contained in:
parent
6fa6df4697
commit
bbc22e41e0
@ -1,15 +1,16 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from "vue";
|
||||||
import Tools from './components/Tools.vue';
|
import Tools from "./components/Tools.vue";
|
||||||
import NavMenu from './components/NavMenu.vue';
|
import NavMenu from "./components/NavMenu.vue";
|
||||||
import AnnoucementPage from './pages/AnnouncementPage.vue';
|
import AnnoucementPage from "./pages/AnnouncementPage.vue";
|
||||||
import RealtimePage from './pages/RealtimePage.vue';
|
import RealtimePage from "./pages/RealtimePage.vue";
|
||||||
import AppHeader from './components/Base/Header.vue';
|
import AppHeader from "./components/Base/Header.vue";
|
||||||
import AlertListPage from './pages/AlertListPage.vue'
|
import AlertListPage from "./pages/AlertListPage.vue";
|
||||||
import DataPage from './pages/DataPage.vue';
|
import DataPage from "./pages/DataPage.vue";
|
||||||
import DatetimeTool from './components/HeadTime.vue';
|
import DatetimeTool from "./components/HeadTime.vue";
|
||||||
|
import TriplePage from "./pages/3D.vue";
|
||||||
|
|
||||||
const currentPage = ref('3d');
|
const currentPage = ref("3d");
|
||||||
const handlePageChange = (page) => {
|
const handlePageChange = (page) => {
|
||||||
currentPage.value = page;
|
currentPage.value = page;
|
||||||
console.log(currentPage.value);
|
console.log(currentPage.value);
|
||||||
@ -28,7 +29,7 @@ const handlePageChange = (page) => {
|
|||||||
/>
|
/>
|
||||||
<div v-else class="pages-wrapper">
|
<div v-else class="pages-wrapper">
|
||||||
<NavMenu @change="handlePageChange" />
|
<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'" />
|
<DataPage v-if="currentPage === 'data'" />
|
||||||
<AlertListPage v-if="currentPage === 'alert'" />
|
<AlertListPage v-if="currentPage === 'alert'" />
|
||||||
<RealtimePage v-if="currentPage === 'realtime'" />
|
<RealtimePage v-if="currentPage === 'realtime'" />
|
||||||
|
BIN
src/assets/model/F10.png
Normal file
BIN
src/assets/model/F10.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.0 MiB |
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user