DialogLayout.vue

<script setup lang="ts">
import { reactive, computed } from 'vue';

interface IDetailProps {
  title?: any;
  width?: number;
  maxWidth?: number;
  minWidth?: number;
  height?: number;
  maxHeight?: number;
  minHeight?: number;
}
const props = withDefaults(defineProps<IDetailProps>(), {
  title: '',
  width: 1000,
  maxWidth: 1000,
  minWidth: 500,
  height: 600,
  maxHeight: 900,
  minHeight: 500,
});

const emit = defineEmits<{
  (e: 'onOk'): void;
  (e: 'onCancel'): void;
}>();

const myCardStyle = computed(() => {
  return {
    width: props.width + 'px',
    maxWidth: props.maxWidth + 'px',
    minWidth: props.minWidth + 'px',
    height: props.height + 'px',
    maxHeight: props.maxHeight + 'px',
    minHeight: props.minHeight + 'px',
  };
});

const thumbStyle = reactive({
  right: '4px',
  borderRadius: '5px',
  backgroundColor: '#64b3f4',
  width: '5px',
  opacity: '1',
});

const barStyle = reactive({
  right: '2px',
  borderRadius: '9px',
  backgroundColor: '#027be3',
  width: '9px',
  opacity: '0.2',
});

function onCancel() {
  emit('onCancel');
}
function onSave() {
  emit('onOk');
}
</script>
<template>
  <q-card class="box" :style="myCardStyle">
    <div class="main" :style="myCardStyle">
      <div class="card-content">
        <div class="title"></div>
        <div class="content">
          <q-scroll-area
            style="height: 100%; max-width: 100%"
            :thumb-style="thumbStyle"
            :bar-style="barStyle"
          >
            <slot></slot>
          </q-scroll-area>
        </div>
        <div class="bottom-action">
          <q-btn flat style="color: #64b3f4" label="取消" @click="onCancel" />
          <q-btn
            unelevated
            style="background: #64b3f4; color: white"
            label="确定"
            @click="onSave()"
          />
        </div>
      </div>
    </div>
    <div class="title-mask">
      <span>{{ title }}</span>
    </div>
  </q-card>
</template>

<style lang="scss" scoped>
.box {
  position: relative;
}
.title-mask {
  box-sizing: border-box;
  position: absolute;
  top: 29.5px;
  height: 30.5px;
  border-radius: 0 !important;
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
  background-color: #64b3f4;
  padding-left: 20px;
  display: flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;

  > span {
    color: white;
    font-size: 15px;
    font-weight: bold;
    padding-left: 8px;
    padding-right: 17px;
  }
}
.main {
  position: relative;
  padding: 20px;
  background-image: linear-gradient(60deg, #c2e59c 0%, #64b3f4 100%);
  box-sizing: border-box;
  display: flex;
}

.card-content {
  width: 100%;
  background-color: #fff;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  .title {
    box-sizing: border-box;
    height: 40px;
    font-weight: bolder;
    display: flex;
    align-items: flex-end;
    // border: 1px solid red;
  }
  .content {
    flex: 1;
    padding: 8px;
    position: relative;
  }
  .bottom-action {
    padding: 8px;

    display: flex;
    flex-direction: row;
    column-gap: 4px;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>