<template>
  <el-dialog
    v-model="showGroup" :append-to-body="true" :z-index="99999999999999999"
    class="dialog"
    draggable
    title="领导重点关注"
    width="33%"
  >
    <div class="son">
      <div style="color: #fff;font-size: 15px">填写日期:  {{myDate}}</div>
      <p v-for="val in list" :key="val" class="row">
        <span></span> {{ val }}
      </p>
    </div>
  
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue'

const list = ref([])
const myDate = ref()
const showGroup = ref(false)


function open(row,date) {
  debugger
  showGroup.value = true
  list.value = row
  myDate.value = date
  console.log(list.value)
}


defineExpose({
  open
})
</script>

<style lang="scss">
.dialog {
  background: url("@/assets/image/box03@2x.png") no-repeat center;
  background-size: 100% 100%;
  border: 1px solid #2969A4;
  position: relative;
}

.son {
  position: relative;
  z-index: 99999999999999999999999;
}

.el-dialog__headerbtn .el-icon {
  color: #fff;
  font-size: 24px;
}


.row {
  font-family: SimHei, serif;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
  //height: 40px;
  margin: 7px 0;
  
  span {
    display: inline-block;
    width: calc(12 * 100vw / 1920);
    height: calc(12 * 100vw / 1920);
    background-color: #01D7F0;
    transform: rotate(45deg);
    margin-left: calc(3 * 100vw / 1920);
    border-radius: calc(3 * 100vw / 1920);
  }
}

.el-overlay {
  /* 自定义样式 */
  background-color: rgba(0, 0, 0, 0.7); /* 例如，更改背景颜色 */
}
.el-dialog__title{
  color: #fff;
}
</style>