bonus-ui/src/views/screen/wsScreen/components/left/SystemEquip.vue

<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-loading="isLoading"
      :visible.sync="dialogVisible"
      width="2300px"
      :modal="false"
      class="dlg-box"
    >
      <div style="height: 800px">
        <!-- 自定义title -->
        <i class="close-btn" @click="dialogVisible = false" />
        <div class="dlg-title">体系装备</div>
        <!-- 内容 -->
        <div class="box">
          <!-- left -->
          <div class="text left-text-1">2212</div>
          <div class="text left-text-2">2</div>
          <div class="text left-text-3">2212</div>
          <div class="text left-text-4">2212</div>
          <div class="text left-text-5">2212</div>
          <div class="text left-text-6">2212</div>
          <div class="text left-text-7">2212</div>
          <div class="text left-text-8">2212</div>
          <div class="text left-text-9">2212</div>
          <div class="text left-text-10">2212</div>
          <div class="text left-text-11">2212</div>
          <div class="text left-text-12">2212</div>
          <div class="text left-text-13">2212</div>
          <div class="text left-text-14">2212</div>
          <div class="text left-text-15">2212</div>
          <div class="text left-text-16">2212</div>
          <div class="text left-text-17">2212</div>
          <div class="text left-text-18">2212</div>
          <!-- center -->
          <div class="text center-text-1">2212</div>
          <div class="text center-text-2">2212</div>
          <div class="text center-text-3">2212</div>
          <div class="text center-text-4">2212</div>
          <div class="text center-text-5">2212</div>
          <!-- right -->
          <div class="text right-text-1">2212</div>
          <div class="text right-text-2">2212</div>
          <div class="text right-text-3">2212</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      dialogVisible: false,
      formData: {},
    }
  },
  created() {},
  methods: {
    openDialog() {
      this.dialogVisible = true
    },
    getList() {},
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: transparent !important;
}

::v-deep .el-dialog .el-dialog__body {
  background-image: url('../../img/systemEquip.png');
  background-size: 100% 100%;
  color: #fff;
}
::v-deep .el-dialog__header {
  display: none;
}
.table-container {
  color: #fff;
  background-color: #04112a80;
}
.dlg-box {
  position: absolute;
  .close-btn {
    width: 39px;
    height: 39px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-image: url('../../img/close.png');
    background-size: 100% 100%;
  }
  .dlg-title {
    margin-top: -25px;
    margin-bottom: 45px;
    font-size: 21px;
    text-align: center;
    font-weight: 800;
  }

  .box {
    color: #f3ea71;
    font-weight: 800;
    font-size: 12px;
    .text {
      width: 37px;
      text-align: center;
      /* border: 1px solid #f3ea71; */
      position: absolute;
    }

    .left-text-1 {
      top: 522px;
      left: 58px;
    }
    .left-text-2 {
      top: 174px;
      left: 261px;
    }
    .left-text-3 {
      top: 407px;
      left: 261px;
    }
    .left-text-4 {
      top: 564px;
      left: 261px;
    }
    .left-text-5 {
      top: 760px;
      left: 261px;
    }
    .left-text-6 {
      top: 305px;
      left: 563px;
    }
    .left-text-7 {
      top: 511px;
      left: 576px;
    }
    .left-text-8 {
      top: 603px;
      left: 576px;
    }
    .left-text-9 {
      top: 702px;
      left: 576px;
    }
    .left-text-10 {
      top: 337px;
      left: 707px;
    }
    .left-text-11 {
      top: 479px;
      left: 686px;
    }
    .left-text-12 {
      top: 509px;
      left: 686px;
    }
    .left-text-13 {
      top: 539px;
      left: 686px;
    }
    .left-text-14 {
      top: 588px;
      left: 690px;
    }
    .left-text-15 {
      top: 618px;
      left: 690px;
    }
    .left-text-16 {
      top: 672px;
      left: 694px;
    }
    .left-text-17 {
      top: 702px;
      left: 686px;
    }
    .left-text-18 {
      top: 732px;
      left: 686px;
    }
    .center-text-1 {
      top: 508px;
      left: 838px;
    }
    .center-text-2 {
      top: 227px;
      left: 1041px;
    }
    .center-text-3 {
      top: 761px;
      left: 1041px;
    }
    .center-text-4 {
      top: 509px;
      left: 1460px;
    }
    .center-text-5 {
      top: 658px;
      left: 1460px;
    }
    .right-text-1 {
      top: 525px;
      left: 1604px;
    }
    .right-text-2 {
      top: 503px;
      left: 1806px;
    }
    .right-text-3 {
      top: 482px;
      left: 2214px;
    }
  }
}
</style>