1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { isNumber } from '@/utils/is'
defineOptions({ name: 'DialogDashboard' })
 
const slots = useSlots()
 
const props = defineProps({
  modelValue: propTypes.bool.def(false),
  title: propTypes.string.def('Dialog'),
  fullscreen: propTypes.bool.def(true),
  width: propTypes.oneOfType([String, Number]).def('30%'),
  scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
  maxHeight: propTypes.oneOfType([String, Number]).def('400px')
})
 
const getBindValue = computed(() => {
  const delArr: string[] = ['fullscreen', 'title', 'maxHeight', 'appendToBody']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})
 
</script>
 
<template>
  <ElDialog
    v-bind="getBindValue"
    :close-on-click-modal="true"
    :width="width"
    destroy-on-close
    lock-scroll
    draggable
    class="dashboard-dialog"
    :show-close="false"
  >
    <template #header="{ close }">
      <div class="relative h-30px flex items-center justify-between pl-15px pr-15px">
        <slot name="title">
          {{ title }}
        </slot>
        <div
          class="absolute right-15px top-[50%] h-40px flex translate-y-[-50%] items-center justify-between"
        >
          <Icon
            class="is-hover cursor-pointer"
            icon="ep:close"
            hover-color="var(--el-color-primary)"
            color="#73C4FF"
            @click="close"
          />
        </div>
      </div>
    </template>
 
    <slot></slot>
    <template v-if="slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </ElDialog>
</template>
 
<style lang="scss">
.el-dialog.is-draggable .el-dialog__header {
  color: white !important;
}
::v-deep .el-input {
  background: rgba(0,194,255,0.08) !important;
}
::v-deep .el-input__inner {
  color: #8FD6FE;
  background: rgba(0,194,255,0.08) !important;
  border: 1px solid #1D9FE8
}
.dashboard-dialog {
  color: #73C4FF;
  background: rgba(3,29,76,0.79);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid;
  .#{$elNamespace}-overlay-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .#{$elNamespace}-dialog {
    margin: 0 !important;
 
    &__header {
      height: 40px;
      padding: 0;
      margin-right: 0 !important;
      margin-bottom: 20px;
      background:
        url("@/assets/ai/zhuanlu/common_title.png") no-repeat,
        linear-gradient(to bottom, #0a1633dd, #0a1633dd); /* 叠加深色遮罩 */
      div {
        color: #73C4FF;
        margin-left: 20px;
      }
    }
 
    &__body {
      padding: 15px !important;
    }
 
    &__headerbtn {
      color: #73C4FF;
      top: 0;
    }
  }
}
</style>