shuiwu/src/views/controlPanel/index.vue

<template>
  <div class="control">
    <div class="control_dataPanel">
      <div style="position: relative;">
        <div class="dataPanel_title">
          <p class="title_text"></p>
          <div class="numdata">

          </div>
        </div>
        <div class="dataPanel"></div>
      </div>
    </div>

    <div class="control_bg">
      <video src="@/assets/controlPanel/bg.mp4"></video>
    </div>
  </div>
</template>

<script setup>
import {ref, defineProps, defineEmits} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
let emit = defineEmits([])
let show = ref(false)

defineExpose({
  show
})
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.control {
}
.control .control_bg {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
.control .control_bg video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.control .control_dataPanel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.control .control_dataPanel .dataPanel_title {}
.control .control_dataPanel .dataPanel_title .title_text {}
.control .control_dataPanel .dataPanel_title .numdata {}
.control .control_dataPanel .dataPanel {
  width: 820px;
  height: 570px;
  background: url(@/assets/controlPanel/icon/panelbg.png);
}


</style>