<template>
  <div class="dialog-model" :style="`height: ${height}px; width: ${width}px`">
    <div class="dialog-title">
      <div class="text">
        {{ title }}
      </div>
      <div class="el-icon-close" @click="$emit('close')"></div>
    </div>
    <div class="dialog-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "dialog-model",
  props: {
    title: String,
    height: Number,
    width: Number
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.dialog-model{
  background-color: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  top: 48%;
  box-shadow: 0 0 30px 15px #030916;
  z-index: 9999;
  .dialog-title{
    height: 50px;
    display: flex;
    justify-content: space-between;
    color: white;
    align-items: center;
    padding: 0 18px;
    /* 边框渐变 */
    border-width: 1px;
    border-style: solid;
    border-image-source: linear-gradient(90deg, #269cd7, #0090ea);
    border-image-slice: 1; /* 填充整个边框宽度 */
    border-image-repeat: stretch; /* 根据需要选择 repeat、stretch 或 round 等重复方式 */
    /* 背景色渐变 */
    background-image: linear-gradient(to right, #0d80d7, #04477b);

    .text{
      font-size: 20px;
      font-weight: bold;
    }
    .el-icon-close{
      font-size: 26px;
      font-weight: bold;
      cursor: pointer;
    }
  }
  .dialog-content{
    height: calc(100% - 40px);
    width: 100%;
    background-color: #0f2645;
    border-left: 1px solid #269cd7;
    border-right: 1px solid #269cd7;
    border-bottom: 1px solid #269cd7;
    color: #c1c6ce;
    padding: 18px;
    overflow-y: auto;
  }
}
</style>
