<!-- 三维页面 -->
<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>
