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

<template>
  <view class="style-dialog">
    <view>
      <view class="style-dialog_head flex-center">
        <view class="fw-500 color-000 fs-32">{{ title }}</view>
        <view class="close" @click="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,
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</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;
    background-color: #fff;
    box-sizing: content-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  &_head {
    height: 92rpx;
    position: relative;
    background-color: #fff;
    .close {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &_body {
    max-height: 1000rpx;
    overflow-y: auto;
  }
}
</style>