You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.5 KiB
135 lines
2.5 KiB
<template>
|
|
<view class="protocol-dialog" v-if="show">
|
|
<view class="dialog-mask"></view>
|
|
<view class="dialog-content">
|
|
<view class="dialog-title">{{ title }}</view>
|
|
<scroll-view class="dialog-body" scroll-y>
|
|
<view class="rich-text-wrapper">
|
|
<rich-text :nodes="content"></rich-text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="dialog-footer">
|
|
<view class="footer-btn reject" @click="$emit('reject')">拒绝</view>
|
|
<view class="footer-divider"></view>
|
|
<view class="footer-btn agree" @click="$emit('agree')">同意</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ProtocolDialog',
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.protocol-dialog {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.dialog-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.dialog-content {
|
|
position: relative;
|
|
width: 86vw;
|
|
max-width: 700rpx;
|
|
background: #fff;
|
|
border-radius: 32rpx;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
.dialog-title {
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #222;
|
|
margin: 48rpx 0 24rpx 0;
|
|
}
|
|
.dialog-body {
|
|
flex: 1;
|
|
max-height: 60vh;
|
|
min-height: 200rpx;
|
|
width: 100%;
|
|
padding: 0 40rpx;
|
|
font-size: 28rpx;
|
|
color: #444;
|
|
line-height: 1.8;
|
|
box-sizing: border-box;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.rich-text-wrapper {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
color: #444;
|
|
line-height: 1.8;
|
|
}
|
|
:deep(h1), :deep(h2), :deep(h3) {
|
|
font-size: 32rpx !important;
|
|
font-weight: bold !important;
|
|
margin: 24rpx 0 12rpx 0 !important;
|
|
color: #222 !important;
|
|
}
|
|
:deep(p) {
|
|
font-size: 28rpx !important;
|
|
color: #444 !important;
|
|
margin: 0 0 12rpx 0 !important;
|
|
line-height: 1.8 !important;
|
|
}
|
|
.dialog-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-top: 1rpx solid #eee;
|
|
height: 90rpx;
|
|
}
|
|
.footer-btn {
|
|
flex: 1;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
.reject {
|
|
color: #888;
|
|
background: #fff;
|
|
}
|
|
.agree {
|
|
color: #f79400;
|
|
background: #fff;
|
|
}
|
|
.footer-divider {
|
|
width: 1rpx;
|
|
background: #eee;
|
|
height: 100%;
|
|
}
|
|
</style>
|