128 lines
2.9 KiB
Vue
128 lines
2.9 KiB
Vue
<template>
|
|
<view
|
|
v-if="visible"
|
|
class="app-dialog-layer"
|
|
@click="closeOnMask && cancel()"
|
|
>
|
|
<view class="app-dialog" @click.stop>
|
|
<image
|
|
class="app-dialog__skin"
|
|
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
|
|
mode="aspectFit"
|
|
/>
|
|
<view class="app-dialog__content">
|
|
<text v-if="eyebrow" class="app-dialog__eyebrow">{{ eyebrow }}</text>
|
|
<text class="app-dialog__title">{{ title }}</text>
|
|
<text v-if="message" class="app-dialog__message">{{ message }}</text>
|
|
<slot />
|
|
<view
|
|
class="app-dialog__actions"
|
|
:class="{ 'app-dialog__actions--single': !showCancel }"
|
|
>
|
|
<AppButton
|
|
v-if="showCancel"
|
|
type="secondary"
|
|
:label="cancelText"
|
|
@click="cancel"
|
|
/>
|
|
<AppButton :label="confirmText" @click="$emit('confirm')" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AppButton from "@/components/AppButton.vue";
|
|
|
|
defineProps({
|
|
visible: { type: Boolean, default: false },
|
|
eyebrow: { type: String, default: "" },
|
|
title: { type: String, required: true },
|
|
message: { type: String, default: "" },
|
|
confirmText: { type: String, default: "我知道了" },
|
|
cancelText: { type: String, default: "取消" },
|
|
showCancel: { type: Boolean, default: false },
|
|
closeOnMask: { type: Boolean, default: true },
|
|
});
|
|
const emit = defineEmits(["confirm", "cancel", "close"]);
|
|
const cancel = () => {
|
|
emit("cancel");
|
|
emit("close");
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-dialog-layer {
|
|
position: fixed;
|
|
z-index: 80;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 40rpx;
|
|
background: rgba(35, 18, 10, 0.62);
|
|
}
|
|
.app-dialog {
|
|
position: relative;
|
|
width: 650rpx;
|
|
max-width: 100%;
|
|
min-height: 520rpx;
|
|
}
|
|
.app-dialog__skin {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
.app-dialog__content {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
min-height: 520rpx;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 74rpx 66rpx 54rpx;
|
|
text-align: center;
|
|
}
|
|
.app-dialog__eyebrow {
|
|
color: #9f170f;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
.app-dialog__title {
|
|
color: #8f160f;
|
|
font-size: 42rpx;
|
|
font-weight: 700;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
.app-dialog__eyebrow + .app-dialog__title {
|
|
margin-top: 10rpx;
|
|
}
|
|
.app-dialog__message {
|
|
margin-top: 22rpx;
|
|
color: #513a28;
|
|
font-size: 27rpx;
|
|
line-height: 1.65;
|
|
}
|
|
.app-dialog__actions {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16rpx;
|
|
margin-top: auto;
|
|
}
|
|
.app-dialog__actions--single {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.app-dialog__actions .app-button {
|
|
width: 100%;
|
|
min-height: 82rpx;
|
|
}
|
|
</style>
|