From 55bf797dcc730b37bc691ebab2b51ff9db8ed245 Mon Sep 17 00:00:00 2001 From: zs <zhousong@weben-smart.com> Date: 周二, 06 5月 2025 17:37:23 +0800 Subject: [PATCH] 修改代码样式 --- HIAWms/web/src/components/BaseDialog/index.vue | 145 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 145 insertions(+), 0 deletions(-) diff --git a/HIAWms/web/src/components/BaseDialog/index.vue b/HIAWms/web/src/components/BaseDialog/index.vue new file mode 100644 index 0000000..79aeb5b --- /dev/null +++ b/HIAWms/web/src/components/BaseDialog/index.vue @@ -0,0 +1,145 @@ +<template> + <el-dialog + :class="className" + width="525px" + v-bind="attrs" + :show-close="false" + @close="() => onClose(false)" + @open="onOpen" + > + <div + :style="` + height: ${currentHeight}; + overflow: ${attrs.height ? 'auto' : 'initial'}; + padding-right: 20px; + `" + > + <slot></slot> + </div> + + <template #header> + <div class="cs-dialog-content"> + <p>{{ _t(attrs.title) }}</p> + <Icon + style="cursor: pointer" + :width="16" + :height="16" + icon="X" + @click="onClose" + /> + </div> + </template> + <template #footer v-if="!attrs.isHideFooter"> + <div class="cs-dialog-footer"> + <slot name="footer" v-if="footer"></slot> + <template v-else> + <slot name="custom-btn"></slot> + <el-button + @click="onClose" + type="info" + plain + class="dialog-btn cs-base-btn" + >{{ _t('鍙栨秷') }}</el-button + > + <el-button + v-if="!attrs.hideSubmit" + :disabled="attrs.submitDisabled" + @click="onConfirm" + type="primary" + class="cs-base-btn" + >{{ _t('纭') }}</el-button + > + </template> + </div> + </template> + </el-dialog> +</template> +<script lang="ts" setup> +import { useAttrs, computed, useSlots } from 'vue' +import { _t } from '@/libs/Language/Language' +import Icon from '../Icon/Icon' +const footer = !!useSlots().footer +const emit = defineEmits(['close', 'confirm', 'open']) +const attrs = useAttrs() +const props = defineProps<{ [key: string]: any }>() +const className = computed(() => { + if (attrs.class) { + return `without-cs-dialog ${attrs.class}` + } + return 'without-cs-dialog' +}) + +// 鍏抽棴寮圭獥閮戒細璋冭繖涓柟娉曪紝鏈変簺鏃跺�欑偣鍑籧onfirm鐨勬椂鍊欎笉鑳藉悓鏃惰Е鍙慶lose鐨勶紝鍔犱釜鍙傛暟锛岀敤浜庡尯鍒嗘槸鐐瑰嚮鎸夐挳鍏抽棴鐨勪簨浠惰繕鏄痗lose浜嬩欢 +const onClose = (isClose = true) => emit('close', isClose) + +const onConfirm = () => emit('confirm') + +const onOpen = () => emit('open') + +const currentHeight = computed(() => { + return attrs.height || 'auto' +}) +</script> +<style lang="scss"> +.without-cs-dialog { + box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16); + border-radius: 6px 6px 6px 6px; + padding-top: 10px; + + header.cs-dialog__header { + padding: 0; + padding-bottom: 0; + margin-right: 0; + } + .cs-dialog__body { + padding: 10px 20px; + padding-right: 0; + padding-bottom: 0; + } + + .cs-dialog-content { + width: 100%; + height: 42px; + border-radius: 6px 6px 0px 0px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 15px 0; + /* padding-top: 36px; */ + + p { + /* width: 72px; */ + /* height: 18px; */ + margin: 0; + font-size: 18px; + font-family: Source Han Sans CN, Source Han Sans CN; + font-weight: bold; + color: #464e54; + } + } + .cs-dialog__footer { + padding: 0; + padding-top: 10px; + padding-bottom: 10px; + } + .cs-dialog-footer { + padding: 0 18px; + padding-bottom: 10px; + + .cs-base-btn { + width: 98px; + height: 26px; + } + .dialog-btn { + background: #efeded; + color: #666666; + } + } +} +.without-cs-dialog.is-fullscreen { + overflow: hidden; + .cs-dialog__body { + height: calc(100% - 80px); + } +} +</style> -- Gitblit v1.9.3