PPT/src/views/Student/components/selectUserDialog.vue

<template>
   <Modal :visible="show" :class="'modalArea'" style="padding: 0;background: none;" :width="400" :closeButton="false" :closeOnClickMask="true" @closed="close()">
    <div class="header">
      <div class="title" v-html="title"></div>
      <div class="close" @click="close()"><svg  viewBox="0 0 1024 1024" width="200" height="200"><path d="M999.819275 905.894092c26.805506 27.003004 26.78811 70.77902-0.051166 97.756441-13.398148 13.484106-30.970362 20.234857-48.534389 20.234857-17.58961 0-35.171034-6.758937-48.577369-20.277836L511.657192 609.698113 120.30704 1003.263723c-13.407358 13.475919-30.970362 20.217461-48.53439 20.217461-17.58961 0-35.17922-6.758937-48.585555-20.269649-26.813692-27.003004-26.78811-70.77902 0.042979-97.764628l391.33378-393.557424L23.572882 117.989251c-26.813692-27.012214-26.796296-70.780043 0.034792-97.764627 26.839275-26.985608 70.332858-26.960025 97.137341 0.042979l390.989949 393.909441L903.07693 20.61962c26.831089-26.977421 70.315462-26.960025 97.129154 0.042979 26.813692 27.01119 26.78811 70.770833-0.042979 97.764627L608.812953 511.98465l391.006322 393.909442z"></path></svg></div>
    </div>
    <div class="content">
      <div v-for="(item, index) in data.user" :key="index" v-if="!(data.notFiledUser && data.notFiledUser)">
        {{ item }}
      </div>
      <span v-if="data.isSubmitUser">{{ lang.ssSubStu2 }}：</span>
      <div v-for="(item, index) in data.isSubmitUser" :key="index" v-if="data.isSubmitUser">
        {{ item }}
      </div>
      <div class="line" v-if="data.isSubmitUser && data.isSubmitUser"></div>
      <span v-if="data.notFiledUser">{{ lang.ssUnsubStu2 }}：</span>
      <div v-for="(item, index) in data.notFiledUser" :key="index" v-if="data.notFiledUser">
        {{ item }}
      </div>
    </div>
  </Modal>
</template>

<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal.vue'
import { lang } from '@/main'
const show = ref(false)

const data = ref({})
const title = ref("")

// 打开
const open = (tit,value) => {
  init()
  show.value = true
  title.value = tit
  data.value = JSON.parse(JSON.stringify(value))
}

// 关闭
const close = () => {
  show.value = false
  init()
}

const init = () => {
  title.value = ""
  data.value = {}
}

defineExpose({
  open,
  close,
})
</script>

<style lang="scss" scoped>
.modalArea{
  &>.modal-content {
    border-radius: 1rem;
    box-shadow: 0 0 10px #FDF6DE;
    padding: 0;
    border: solid 1px #FDF6DE;
  }
}

.header{
  padding: 1.2rem 1.5rem;
  border-bottom: solid 1px #FDF6DE;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &>.title{
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  &>.close{
    cursor: pointer;
    padding: .6rem;
    border-radius: 2rem;
    border: solid 1px #FCEFC8;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    &>svg{
      width: .7rem;
      height: .7rem;
    }
  }
}

.content{
  padding: 1rem;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;

  max-height: calc(100vh - 8.6rem);
  overflow: auto;
  &>div{
    padding: .25rem .5rem;
    font-weight: 500;
    font-size: 1rem;
  }
  &>span{
    width: 100%;
    display: block;
    font-weight: 600;
    font-size: 1rem;
  }
  &>.line{
    padding: 0;
    width: 100%;
    height: 2px;
    background: #FDF6DE;
  }
}
</style>