update fullscreen
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
parent
14991c7ede
commit
e425de93c7
28
src/App.vue
28
src/App.vue
@ -14,26 +14,26 @@ if (urlPath.value === "/") {
|
||||
useWebsocket(store, urlPath.value);
|
||||
|
||||
// size setting
|
||||
const size = ref(80);
|
||||
onMounted(() => {
|
||||
setSize(size.value);
|
||||
});
|
||||
// const size = ref(80);
|
||||
// onMounted(() => {
|
||||
// setSize(size.value);
|
||||
// });
|
||||
|
||||
// style update
|
||||
const styles = ref({});
|
||||
function setSize(value) {
|
||||
const v = (value / 100).toFixed(2);
|
||||
styles.value = {
|
||||
transform: `scale(${v})`,
|
||||
// transform: `scale(${v * 24 / 33}, ${v})`,
|
||||
transformOrigin: "top left",
|
||||
};
|
||||
}
|
||||
// const styles = ref({});
|
||||
// function setSize(value) {
|
||||
// const v = (value / 100).toFixed(2);
|
||||
// styles.value = {
|
||||
// transform: `scale(${v})`,
|
||||
// // transform: `scale(${v * 24 / 33}, ${v})`,
|
||||
// transformOrigin: "top left",
|
||||
// };
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app-container">
|
||||
<MainPage :style="styles" :path="urlPath" />
|
||||
<MainPage :path="urlPath" />
|
||||
<Slider :size="size" @size-change="setSize" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useSettings } from '../store/settings'
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
const { settings } = useSettings();
|
||||
const { settings, changeScale } = useSettings();
|
||||
|
||||
function handleCancel() {
|
||||
emit('close')
|
||||
@ -11,6 +10,7 @@ function handleCancel() {
|
||||
|
||||
function handleConfirm() {
|
||||
// alert(JSON.stringify(settings, null, 2))
|
||||
changeScale(settings.resolution.width, settings.resolution.height)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
414
src/pages/3D.vue
414
src/pages/3D.vue
@ -1,117 +1,277 @@
|
||||
<!-- 三维页面 -->
|
||||
<script setup>
|
||||
import { useSettings } from '../store/settings'
|
||||
import { computed } from 'vue';
|
||||
const { settings } = useSettings();
|
||||
const props = defineProps({
|
||||
line: {
|
||||
type: String,
|
||||
default: "1",
|
||||
},
|
||||
});
|
||||
|
||||
const eqStatus = computed(() => settings.eqStatus);
|
||||
console.log('eqStatus', eqStatus.value)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 class="info-1" v-if="eqStatus && line == '1'">
|
||||
<div class="info">
|
||||
<h1>M7上片</h1>
|
||||
</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 class="info">
|
||||
<h1>M6上片</h1>
|
||||
</div>
|
||||
<div class="info-3" v-if="line == '3'">
|
||||
<div class="info"><h1>B1前储片台</h1></div>
|
||||
<div class="info">
|
||||
<h1>M7磨边机</h1>
|
||||
</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 class="info">
|
||||
<h1>M6磨边机</h1>
|
||||
</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 class="info">
|
||||
<h1>M7清洗机</h1>
|
||||
</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 class="info">
|
||||
<h1>M6清洗机</h1>
|
||||
</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 class="info-2" v-if="eqStatus && line == '2'">
|
||||
<div class="info">
|
||||
<h1>Z7钻孔机</h1>
|
||||
</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 class="info">
|
||||
<h1>Z6钻孔机</h1>
|
||||
</div>
|
||||
<div class="info-10" v-if="line == '10'">
|
||||
<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="eqStatus && line == '3'">
|
||||
<div class="info">
|
||||
<h1>B1前储片台</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-4" v-if="eqStatus && 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="eqStatus && 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="eqStatus && 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="eqStatus && 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="eqStatus && 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="eqStatus && 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="eqStatus && 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 class="info">
|
||||
<h1>Z2钻孔机</h1>
|
||||
</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 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="eqStatus && 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="eqStatus && 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 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>
|
||||
@ -151,22 +311,27 @@ const props = defineProps({
|
||||
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;
|
||||
@ -177,46 +342,57 @@ const props = defineProps({
|
||||
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;
|
||||
@ -233,10 +409,12 @@ const props = defineProps({
|
||||
left: 580px;
|
||||
bottom: 200px;
|
||||
}
|
||||
|
||||
.info-4 .info:nth-child(2) {
|
||||
left: 800px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.info-4 .info:nth-child(3) {
|
||||
left: 1240px;
|
||||
top: 40px;
|
||||
@ -247,34 +425,42 @@ const props = defineProps({
|
||||
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;
|
||||
@ -286,46 +472,57 @@ const props = defineProps({
|
||||
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;
|
||||
@ -337,26 +534,32 @@ const props = defineProps({
|
||||
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;
|
||||
@ -367,14 +570,17 @@ const props = defineProps({
|
||||
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;
|
||||
@ -385,22 +591,27 @@ const props = defineProps({
|
||||
left: 400px;
|
||||
bottom: 250px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(2) {
|
||||
left: 1100px;
|
||||
bottom: 220px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(3) {
|
||||
left: 496px;
|
||||
bottom: 570px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(4) {
|
||||
left: 1100px;
|
||||
bottom: 490px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(5) {
|
||||
left: 670px;
|
||||
top: 144px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(6) {
|
||||
left: 1100px;
|
||||
top: 155px;
|
||||
@ -411,30 +622,37 @@ const props = defineProps({
|
||||
left: 620px;
|
||||
bottom: 450px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(2) {
|
||||
left: 1000px;
|
||||
bottom: 320px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(3) {
|
||||
left: 736px;
|
||||
top: 270px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(4) {
|
||||
left: 1200px;
|
||||
top: 330px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(5) {
|
||||
left: 870px;
|
||||
top: 144px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(6) {
|
||||
left: 1100px;
|
||||
top: 195px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(7) {
|
||||
left: 900px;
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(8) {
|
||||
left: 1200px;
|
||||
top: 68px;
|
||||
@ -445,18 +663,22 @@ const props = defineProps({
|
||||
left: 570px;
|
||||
bottom: 450px;
|
||||
}
|
||||
|
||||
.info-11 .info:nth-child(2) {
|
||||
left: 1100px;
|
||||
bottom: 410px;
|
||||
}
|
||||
|
||||
.info-11 .info:nth-child(3) {
|
||||
left: 436px;
|
||||
bottom: 170px;
|
||||
}
|
||||
|
||||
.info-11 .info:nth-child(4) {
|
||||
left: 1036px;
|
||||
bottom: 170px;
|
||||
}
|
||||
|
||||
.info-11 .info:nth-child(5) {
|
||||
left: 890px;
|
||||
top: 94px;
|
||||
@ -467,14 +689,17 @@ const props = defineProps({
|
||||
left: 570px;
|
||||
bottom: 250px;
|
||||
}
|
||||
|
||||
.info-12 .info:nth-child(2) {
|
||||
left: 800px;
|
||||
bottom: 80px;
|
||||
}
|
||||
|
||||
.info-12 .info:nth-child(3) {
|
||||
left: 1136px;
|
||||
bottom: 670px;
|
||||
}
|
||||
|
||||
.info-12 .info:nth-child(4) {
|
||||
left: 836px;
|
||||
top: 70px;
|
||||
@ -486,56 +711,67 @@ const props = defineProps({
|
||||
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;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
export const useSettings = defineStore("settings", () => {
|
||||
const settings = ref({
|
||||
@ -13,6 +13,40 @@ export const useSettings = defineStore("settings", () => {
|
||||
eqStatus: false,
|
||||
});
|
||||
|
||||
function changeScale(width, height) {
|
||||
const xScale = width / 1920;
|
||||
const yScale = height / 1080;
|
||||
const style = {
|
||||
transform: `scale(${xScale}, ${yScale})`,
|
||||
transformOrigin: "top left",
|
||||
};
|
||||
document.documentElement.style.transform = style.transform;
|
||||
document.documentElement.style.transformOrigin = style.transformOrigin;
|
||||
}
|
||||
|
||||
function resetScale() {
|
||||
document.documentElement.style.transform = "initial";
|
||||
document.documentElement.style.transformOrigin = "initial";
|
||||
}
|
||||
|
||||
watch(
|
||||
() => settings.value.fullscreen,
|
||||
(val) => {
|
||||
if (val) {
|
||||
document.documentElement.requestFullscreen().then(() => {
|
||||
document.documentElement.style.width = "100vw";
|
||||
document.documentElement.style.height = "100vh";
|
||||
changeScale(
|
||||
document.documentElement.clientWidth,
|
||||
document.documentElement.clientHeight
|
||||
);
|
||||
});
|
||||
return;
|
||||
}
|
||||
document.exitFullscreen().then(resetScale);
|
||||
}
|
||||
);
|
||||
|
||||
function rewriteSettings(payload) {
|
||||
settings.value = payload;
|
||||
}
|
||||
@ -34,5 +68,5 @@ export const useSettings = defineStore("settings", () => {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return { settings, updateSettings, rewriteSettings };
|
||||
return { settings, updateSettings, rewriteSettings, changeScale };
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user