charge-java/charge-front/src/components/style-dialog/style-dialog.vue

<template>
  <view class="style-dialog" @click.stop>
    <view :style="{ background }">
      <view class="style-dialog_head flex-center">
        <view class="ok" @click.stop="close">
          <text type="success" v-if="confirm" @click.stop="handleConfirm">确定</text>
        </view>
        <view class="fw-500 color-000 fs-32">{{ title }}</view>
        <view class="close" @click.stop="close">
          <uni-icons type="closeempty" size="24" color="#2D284B"></uni-icons>
        </view>
      </view>
      <view class="style-dialog_body">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    title: String,
    background: {
      type: String,
      default: "#fff",
    },
    confirm:{
      type:Boolean,
      default:false
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
    handleConfirm(){
      this.$emit('ok');
    }
  },
};
</script>

<style lang="scss">
.style-dialog {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  & > view {
    width: 100%;
    overflow: hidden;
    border-radius: 20rpx 20rpx 0px 0px;
    box-sizing: content-box;
  }
  &_head {
    height: 92rpx;
    position: relative;
    background-color: #fff;
    .close {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    .ok {
      position: absolute;
      left: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-primary);
    }
  }
  &_body {
    max-height: 1000rpx;
    overflow-y: auto;
  }
}
</style>