update 3d position
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
parent
bbc22e41e0
commit
d78e93b494
@ -29,7 +29,7 @@ const handlePageChange = (page) => {
|
||||
/>
|
||||
<div v-else class="pages-wrapper">
|
||||
<NavMenu @change="handlePageChange" />
|
||||
<TriplePage v-if="currentPage === '3d'" line="10" />
|
||||
<TriplePage v-if="currentPage === '3d'" line="8" />
|
||||
<DataPage v-if="currentPage === 'data'" />
|
||||
<AlertListPage v-if="currentPage === 'alert'" />
|
||||
<RealtimePage v-if="currentPage === 'realtime'" />
|
||||
|
||||
358
src/pages/3D.vue
358
src/pages/3D.vue
@ -9,7 +9,111 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="triple-page" :class="['line-' + line]"></div>
|
||||
<div class="triple-page" :class="['line-' + line]">
|
||||
<div class="info-1" v-if="line == '1'">
|
||||
<div class="info"><h1>M7上片</h1></div>
|
||||
<div class="info"><h1>M6上片</h1></div>
|
||||
<div class="info"><h1>M7磨边机</h1></div>
|
||||
<div class="info"><h1>M6磨边机</h1></div>
|
||||
<div class="info"><h1>M7清洗机</h1></div>
|
||||
<div class="info"><h1>M6清洗机</h1></div>
|
||||
</div>
|
||||
<div class="info-2" v-if="line == '2'">
|
||||
<div class="info"><h1>Z7钻孔机</h1></div>
|
||||
<div class="info"><h1>Z6钻孔机</h1></div>
|
||||
<div class="info"><h1>S7清洗机</h1></div>
|
||||
<div class="info"><h1>S6清洗机</h1></div>
|
||||
<div class="info"><h1>S7前储片台</h1></div>
|
||||
<div class="info"><h1>S6前储片台</h1></div>
|
||||
<div class="info"><h1>S7丝印机</h1></div>
|
||||
<div class="info"><h1>S6丝印机</h1></div>
|
||||
<div class="info"><h1>S7固化炉</h1></div>
|
||||
<div class="info"><h1>S6固化炉</h1></div>
|
||||
<div class="info"><h1>S7后储片台</h1></div>
|
||||
<div class="info"><h1>S6后储片台</h1></div>
|
||||
</div>
|
||||
<div class="info-3" v-if="line == '3'">
|
||||
<div class="info"><h1>B1前储片台</h1></div>
|
||||
</div>
|
||||
<div class="info-4" v-if="line == '4'">
|
||||
<div class="info"><h1>B2清洗机</h1></div>
|
||||
<div class="info"><h1>B2下片</h1></div>
|
||||
<div class="info"><h1>B2后储片台</h1></div>
|
||||
</div>
|
||||
<div class="info-5" v-if="line == '5'">
|
||||
<div class="info"><h1>M5上片</h1></div>
|
||||
<div class="info"><h1>M4上片</h1></div>
|
||||
<div class="info"><h1>M3上片</h1></div>
|
||||
<div class="info"><h1>M5磨边机</h1></div>
|
||||
<div class="info"><h1>M4磨边机</h1></div>
|
||||
<div class="info"><h1>M3磨边机</h1></div>
|
||||
<div class="info"><h1>M5清洗机</h1></div>
|
||||
<div class="info"><h1>M4清洗机</h1></div>
|
||||
<div class="info"><h1>M3清洗机</h1></div>
|
||||
</div>
|
||||
<div class="info-6" v-if="line == '6'">
|
||||
<div class="info"><h1>Z5钻孔机</h1></div>
|
||||
<div class="info"><h1>Z4钻孔机</h1></div>
|
||||
<div class="info"><h1>Z3钻孔机</h1></div>
|
||||
<div class="info"><h1>S5清洗机</h1></div>
|
||||
<div class="info"><h1>S4清洗机</h1></div>
|
||||
<div class="info"><h1>S3清洗机</h1></div>
|
||||
<div class="info"><h1>S5前储片台</h1></div>
|
||||
<div class="info"><h1>S4前储片台</h1></div>
|
||||
<div class="info"><h1>S3前储片台</h1></div>
|
||||
<div class="info"><h1>S5丝印机</h1></div>
|
||||
<div class="info"><h1>S4丝印机</h1></div>
|
||||
<div class="info"><h1>S3丝印机</h1></div>
|
||||
</div>
|
||||
<div class="info-7" v-if="line == '7'">
|
||||
<div class="info"><h1>S5后储片台</h1></div>
|
||||
<div class="info"><h1>S4后储片台</h1></div>
|
||||
<div class="info"><h1>S3后储片台</h1></div>
|
||||
<div class="info"><h1>S5固化炉</h1></div>
|
||||
<div class="info"><h1>S4固化炉</h1></div>
|
||||
<div class="info"><h1>S3固化炉</h1></div>
|
||||
<div class="info"><h1>B2前储片台</h1></div>
|
||||
</div>
|
||||
<div class="info-8" v-if="line == '8'">
|
||||
<div class="info"><h1>B1前储片台</h1></div>
|
||||
<div class="info"><h1>B1清洗机</h1></div>
|
||||
<div class="info"><h1>B1下片</h1></div>
|
||||
<div class="info"><h1>B1后储片台</h1></div>
|
||||
</div>
|
||||
<div class="info-9" v-if="line == '9'">
|
||||
<div class="info"><h1>M2上片</h1></div>
|
||||
<div class="info"><h1>M1上片</h1></div>
|
||||
<div class="info"><h1>M2磨边机</h1></div>
|
||||
<div class="info"><h1>M1磨边机</h1></div>
|
||||
<div class="info"><h1>M2清洗机</h1></div>
|
||||
<div class="info"><h1>M1清洗机</h1></div>
|
||||
</div>
|
||||
<div class="info-10" v-if="line == '10'">
|
||||
<!-- <div class="info"><h1>M2清洗机</h1></div>
|
||||
<div class="info"><h1>M1清洗机</h1></div> -->
|
||||
<div class="info"><h1>Z2钻孔机</h1></div>
|
||||
<div class="info"><h1>Z1钻孔机</h1></div>
|
||||
<div class="info"><h1>S2清洗机</h1></div>
|
||||
<div class="info"><h1>S1清洗机</h1></div>
|
||||
<div class="info"><h1>S2前储片台</h1></div>
|
||||
<div class="info"><h1>S1前储片台</h1></div>
|
||||
<div class="info"><h1>S2丝印机</h1></div>
|
||||
<div class="info"><h1>S1丝印机</h1></div>
|
||||
</div>
|
||||
<div class="info-11" v-if="line == '11'">
|
||||
<div class="info"><h1>S7后储片台</h1></div>
|
||||
<div class="info"><h1>S6后储片台</h1></div>
|
||||
<div class="info"><h1>S7固化炉</h1></div>
|
||||
<div class="info"><h1>S6固化炉</h1></div>
|
||||
<div class="info"><h1>B3前储片台</h1></div>
|
||||
</div>
|
||||
<div class="info-12" v-if="line == '12'">
|
||||
<div class="info"><h1>B3前储片台</h1></div>
|
||||
<div class="info"><h1>B3清洗机</h1></div>
|
||||
<div class="info"><h1>B3下片</h1></div>
|
||||
<div class="info"><h1>B3后储片台</h1></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@ -23,8 +127,260 @@ const props = defineProps({
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 180px;
|
||||
height: auto;
|
||||
padding: 12px;
|
||||
background: url(../assets/info-rect.png) 100% 100% / cover no-repeat;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-1 .info:nth-child(1) {
|
||||
left: 490px;
|
||||
bottom: 250px;
|
||||
}
|
||||
.info-1 .info:nth-child(2) {
|
||||
left: 790px;
|
||||
bottom: 210px;
|
||||
}
|
||||
.info-1 .info:nth-child(3) {
|
||||
left: 660px;
|
||||
top: 480px;
|
||||
}
|
||||
.info-1 .info:nth-child(4) {
|
||||
left: 910px;
|
||||
top: 510px;
|
||||
}
|
||||
.info-1 .info:nth-child(5) {
|
||||
left: 880px;
|
||||
top: 220px;
|
||||
}
|
||||
.info-1 .info:nth-child(6) {
|
||||
left: 1100px;
|
||||
top: 260px;
|
||||
}
|
||||
|
||||
/* info-2 */
|
||||
.info-2 .info:nth-child(1) {
|
||||
left: 580px;
|
||||
bottom: 200px;
|
||||
}
|
||||
.info-2 .info:nth-child(2) {
|
||||
left: 940px;
|
||||
bottom: 200px;
|
||||
}
|
||||
.info-2 .info:nth-child(3) {
|
||||
left: 640px;
|
||||
bottom: 360px;
|
||||
}
|
||||
.info-2 .info:nth-child(4) {
|
||||
left: 940px;
|
||||
bottom: 360px;
|
||||
}
|
||||
.info-2 .info:nth-child(5) {
|
||||
left: 660px;
|
||||
bottom: 580px;
|
||||
}
|
||||
.info-2 .info:nth-child(6) {
|
||||
left: 1060px;
|
||||
bottom: 520px;
|
||||
}
|
||||
.info-2 .info:nth-child(7) {
|
||||
left: 720px;
|
||||
top: 190px;
|
||||
}
|
||||
.info-2 .info:nth-child(8) {
|
||||
left: 1100px;
|
||||
top: 260px;
|
||||
}
|
||||
.info-2 .info:nth-child(9) {
|
||||
left: 800px;
|
||||
top: 120px;
|
||||
}
|
||||
.info-2 .info:nth-child(10) {
|
||||
left: 1100px;
|
||||
top: 144px;
|
||||
}
|
||||
.info-2 .info:nth-child(11) {
|
||||
left: 800px;
|
||||
top: 10px;
|
||||
}
|
||||
.info-2 .info:nth-child(12) {
|
||||
left: 1100px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
/* info 3 */
|
||||
.info-3 .info:nth-child(1) {
|
||||
left: 500px;
|
||||
bottom: 420px;
|
||||
}
|
||||
|
||||
/* info 4 */
|
||||
.info-4 .info:nth-child(1) {
|
||||
left: 580px;
|
||||
bottom: 200px;
|
||||
}
|
||||
.info-4 .info:nth-child(2) {
|
||||
left: 800px;
|
||||
top: 100px;
|
||||
}
|
||||
.info-4 .info:nth-child(3) {
|
||||
left: 1240px;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
/* info 5 */
|
||||
.info-5 .info:nth-child(1) {
|
||||
left: 490px;
|
||||
bottom: 300px;
|
||||
}
|
||||
.info-5 .info:nth-child(2) {
|
||||
left: 740px;
|
||||
bottom: 280px;
|
||||
}
|
||||
.info-5 .info:nth-child(3) {
|
||||
left: 960px;
|
||||
bottom: 240px;
|
||||
}
|
||||
.info-5 .info:nth-child(4) {
|
||||
left: 460px;
|
||||
bottom: 490px;
|
||||
}
|
||||
.info-5 .info:nth-child(5) {
|
||||
left: 760px;
|
||||
bottom: 490px;
|
||||
}
|
||||
.info-5 .info:nth-child(6) {
|
||||
left: 1060px;
|
||||
bottom: 450px;
|
||||
}
|
||||
.info-5 .info:nth-child(7) {
|
||||
left: 570px;
|
||||
top: 190px;
|
||||
}
|
||||
.info-5 .info:nth-child(8) {
|
||||
left: 890px;
|
||||
top: 200px;
|
||||
}
|
||||
.info-5 .info:nth-child(9) {
|
||||
left: 1190px;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
/* info 6 */
|
||||
|
||||
.info-6 .info:nth-child(1) {
|
||||
left: 480px;
|
||||
bottom: 530px;
|
||||
}
|
||||
.info-6 .info:nth-child(2) {
|
||||
left: 720px;
|
||||
bottom: 470px;
|
||||
}
|
||||
.info-6 .info:nth-child(3) {
|
||||
left: 990px;
|
||||
bottom: 460px;
|
||||
}
|
||||
.info-6 .info:nth-child(4) {
|
||||
left: 510px;
|
||||
top: 260px;
|
||||
}
|
||||
.info-6 .info:nth-child(5) {
|
||||
left: 810px;
|
||||
top: 260px;
|
||||
}
|
||||
.info-6 .info:nth-child(6) {
|
||||
left: 1110px;
|
||||
top: 280px;
|
||||
}
|
||||
.info-6 .info:nth-child(7) {
|
||||
left: 600px;
|
||||
top: 110px;
|
||||
}
|
||||
.info-6 .info:nth-child(8) {
|
||||
left: 900px;
|
||||
top: 110px;
|
||||
}
|
||||
.info-6 .info:nth-child(9) {
|
||||
left: 1200px;
|
||||
top: 110px;
|
||||
}
|
||||
.info-6 .info:nth-child(10) {
|
||||
left: 650px;
|
||||
top: 20px;
|
||||
}
|
||||
.info-6 .info:nth-child(11) {
|
||||
left: 950px;
|
||||
top: 30px;
|
||||
}
|
||||
.info-6 .info:nth-child(12) {
|
||||
left: 1230px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
/* info 7 */
|
||||
|
||||
.info-7 .info:nth-child(1) {
|
||||
left: 400px;
|
||||
bottom: 440px;
|
||||
}
|
||||
.info-7 .info:nth-child(2) {
|
||||
left: 670px;
|
||||
bottom: 440px;
|
||||
}
|
||||
.info-7 .info:nth-child(3) {
|
||||
left: 960px;
|
||||
bottom: 450px;
|
||||
}
|
||||
.info-7 .info:nth-child(4) {
|
||||
left: 310px;
|
||||
bottom: 260px;
|
||||
}
|
||||
.info-7 .info:nth-child(5) {
|
||||
left: 620px;
|
||||
bottom: 260px;
|
||||
}
|
||||
.info-7 .info:nth-child(6) {
|
||||
left: 1110px;
|
||||
bottom: 240px;
|
||||
}
|
||||
.info-7 .info:nth-child(7) {
|
||||
left: 800px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
/* info 8 */
|
||||
.info-8 .info:nth-child(1) {
|
||||
left: 660px;
|
||||
bottom: 550px;
|
||||
}
|
||||
.info-8 .info:nth-child(2) {
|
||||
left: 990px;
|
||||
bottom: 690px;
|
||||
}
|
||||
.info-8 .info:nth-child(3) {
|
||||
left: 700px;
|
||||
top: 80px;
|
||||
}
|
||||
.info-8 .info:nth-child(4) {
|
||||
left: 1100px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
/* other */
|
||||
.line-1 {
|
||||
background: url(../assets/model/F1.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user