![](https://i-blog.csdnimg.cn/blog_migrate/c1025d459bc70d459a874e97aa5ab53e.png)
<template>
<div class="prompt-dialog">
<div class="mask"></div>
<div class="main">
<i class="close" @click="onClose">
<svg
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
stroke="#7BAFED"
stroke-width="2"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.4444 0L21 1.55556L1.55556 21L0 19.4444L19.4444 0Z"
fill="#7BAFED"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.55556 0L0 1.55556L19.4444 21L21 19.4444L1.55556 0Z"
fill="#7BAFED"
/>
</svg>
</i>
<h2 v-if="title">{{ title }}</h2>
<div class="content">
<slot name="content" />
</div>
<button @click="onSubmit">{{ btnText || '确认' }}</button>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
},
btnText: {
type: String,
},
},
methods: {
onSubmit() {
this.$emit('click')
},
onClose() {
this.$emit('close')
},
},
}
</script>
<style lang="less" scoped>
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.main {
width: 90%;
position: fixed;
padding: 23px;
background: #fff;
z-index: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px solid #7bafed;
.close {
position: absolute;
top: 16px;
right: 16px;
user-select: none;
cursor: pointer;
.icon {
font-size: 20px;
}
}
h2 {
font-weight: bold;
font-size: 20px;
line-height: 24px;
color: #000000;
margin-bottom: 18px;
}
.content {
font-size: 14px;
line-height: 20px;
color: rgba(17, 17, 17, 0.5);
position: relative;
.success {
position: absolute;
top: -205px;
left: 50%;
transform: translateX(-50%);
width: 90%;
text-align: center;
.top {
width: 200px;
height: auto;
margin: auto;
}
.mid {
height: 150px;
background: linear-gradient(180deg, #feeb64, #14c393);
margin: -6px 20px;
position: relative;
z-index: 5;
.check {
width: 30px;
height: 30px;
margin-top: 30px;
}
div {
color: #fff;
font-weight: bolder;
font-size: 16px;
margin-top: 20px;
}
}
.btm {
background: #0b4936;
height: 12px;
border-radius: 6px;
}
}
}
button {
margin-top: 40px;
background: #14c393;
border: 1px solid #14c393;
box-sizing: border-box;
border-radius: 4px;
color: #fff;
font-weight: bold;
width: 100%;
height: 40px;
cursor: pointer;
}
}
</style>
<PromptDialog
v-if="dialog_lose"
:title="'温馨提示'"
@close="onClose"
@click="onClose"
>
<template slot="content">活动未开始</template>
</PromptDialog>