large-vue/src/views/pad/engineering/cameraScreen.vue

<script>
export default {
  name: "CameraScreen",
  data() {
    return {}
  },
  methods:{
    leave(){
      this.$emit("leave");
    },
    issue(){
      this.$emit("issue");
    }
  }
}
</script>

<template>
  <div class="first">
    <div style="color: white;margin: 20px 0 0 20px;font-size: 24px">电科院西侧球机</div>
    <i style="color: white;position: absolute;right: 20px;top: 20px;font-size: 27px" class="el-icon-time">
      <span style="margin-left: 8px;font-size: 24px">2024/11/11 18:00:00</span>
    </i>
    <div class="c1" style="right: 20px;top: 70px;" @click="leave()">
      <img src="../../../assets/zhang/cameraScreen/leave.png" width="20px">
    </div>
    <div class="c1" style="right: 20px;top: 120px;" @click="issue()">
      <img src="../../../assets/zhang/cameraScreen/cut.png" width="20px">
    </div>
    <div class="c1" style="right: 20px;top: 170px;">
      <img src="../../../assets/zhang/cameraScreen/bigger.png" width="20px">
    </div>
    <div class="c1" style="right: 20px;top: 220px;">
      <img src="../../../assets/zhang/cameraScreen/smaller.png" width="20px">
    </div>
    <div class="c2" style="right: 20px;top: 420px;">
      <div style="position: absolute;left: 0;">
        <img src="../../../assets/zhang/cameraScreen/left.png" width="60px">
      </div>
      <div style="position: absolute;right: 0;">
        <img src="../../../assets/zhang/cameraScreen/right.png" width="60px">
      </div>
      <div style="position: absolute;top: 0;">
        <img src="../../../assets/zhang/cameraScreen/up.png" width="80px">
      </div>
      <div style="position: absolute;bottom: 0;">
        <img src="../../../assets/zhang/cameraScreen/down.png" width="80px">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.first{
  background-color: black;
  width: 1200px;
  height: 700px;
  display: flex;
  position:relative;
  border: 2px solid transparent;
  box-shadow: 0 0 10px rgb(0,153,184) inset,0 0 30px rgb(0,153,184);
}
.c1{
  width: 50px;
  height: 30px;
  background-color: rgba(88,139,196,0.37);box-shadow: 0 0 15px rgb(47,113,124);
  display: flex;
  position:absolute;
  justify-content: center;
  align-items: center;
}
.c1:hover{
  cursor: pointer;
}
.c2{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgba(88,139,196,0.37);box-shadow: 0 0 15px rgb(47,113,124);
  display: flex;
  position:absolute;
  justify-content: center;
  align-items: center;
}

</style>