recycle-front/wxcomponents/protocol-dialog/protocol-dialog.vue

<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>