|
|
@@ -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; |
|
|
|