foster-pc-vue/src/utils/back/DialogModel1.vue

<template>
  <el-dialog
      class="my-dialog"
      fullscreen
      append-to-body
      destroy-on-close
      :model-value="showDialog"
      @close="closeDialog()"
  >
    <div class="dialog-box">
      <div class="title">
        <div class="name">农事方案</div>
        <div class="close cursor-pointer" @click="closeDialog"></div>
      </div>
      <div class="my-body"></div>
    </div>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, toRefs, computed, nextTick, onMounted} from "vue";
import {useStore} from "vuex";
import {WKT} from "ol/format";
const emit = defineEmits(["closeDialog","success"])
const store = useStore();

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: true,
  },
});

const formRef = ref(null);
const {title, rowData} = toRefs(props);
const closeDialog = () => {
  emit("closeDialog", "pdf");
};

/**表单验证规则
 * @description:
 * @param {*} computed
 * @return {*}
 */
const rules = computed(() => ({
  name: [
    {
      required: true,
      message: "请录入药品名称",
      trigger: "change",
    },
  ]
}));
const form = reactive({
  name:null,
  type:1,
})

/**
 * @description:提交表单
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {

};

</script>

<style lang="scss" >
$title-height:44px;
$body-height:calc(100% - $title-height);

.my-dialog{
  background-color: #F4F4F400;
}
.dialog-box{
  font-family: PingFangSC-Regular, PingFang SC;
  position: absolute;
  left: 33%;
  right: 33%;
  top:10%;
  bottom:10%;
  background: rgba(1,17,22,0.8);
  box-shadow: 0px 0px 20px 0px #00FFF0;
  border-radius: 4px;
  border: 2px solid rgba(81,233,240,0.6);

  .title{
    width: 100%;
    height: $title-height;
    box-sizing: border-box;
    background: rgba(0,77,101,0.8);
    border-radius: 4px 4px 0px 0px;
    border-bottom: 2px solid rgba(81,233,240,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name{
      margin-left: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #00FFF0;
      height: 22px;
    }
    .close{
      margin-right: 20px;
      width: 16px;
      height: 16px;
      background-image: url("@/assets/img/close.png");
      background-size: 100% 100%;
    }
  }
  .my-body{
    width: 100%;
    height: $body-height;
    box-sizing: border-box;
    padding: 21px;
  }


}

</style>