shop-app/src/components/commonMsgBox/index.vue

<template>
  <view>
    <wd-message-box :selector="selector"></wd-message-box>
  </view>
</template>

<script setup lang="ts">
  defineProps({
    selector: {
      type: String,
      default: 'message-box',
    },
  })
</script>

<style lang="scss" scoped>
  :deep() {
    .wd-message-box {
      .wd-message-box__title {
        font-family: 'PingFang SC';
        font-size: 32rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 48rpx; /* 150% */
        color: var(--text-icon-font-gy-1100, $shop-text-3);
        text-align: center;
        text-transform: capitalize;
      }
      .wd-message-box__content {
        font-family: 'PingFang SC';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 44rpx; /* 157.143% */
        color: var(--text-icon-font-gy-260, rgba(0, 0, 0, 0.6));
        text-align: center;
        text-transform: capitalize;
      }
      .wd-message-box__actions-btn:not(:last-child) {
        margin-right: 0 !important;
      }
      .wd-message-box__actions {
        display: flex;
        align-items: center;
        align-self: stretch;
        justify-content: center;
        height: 112rpx;
        padding: 0 !important;
        margin-top: 48rpx;
        border-top: 0.5rpx solid var(--Gray-Gray3, #e7e7e7);
      }
      .custom-shadow {
        display: flex;
        flex: 1 0 0;
        gap: 8rpx;
        align-items: center;
        justify-content: center;
        height: 112rpx;
        padding: 32rpx 40rpx;
        /* Mark/Large */
        font-family: 'PingFang SC';
        font-size: 32rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 8rpx;
        color: var(--text-icon-font-gy-1100, $shop-text-3);
        text-align: center;
        background: var(--Gray-White, $shop-white);
        border-radius: 0;
      }
      .custom-shadow-confirm {
        color: var(--ff-4-c-1-b, $shop-primary);
        border-left: 1rpx solid var(--Gray-Gray3, #e7e7e7);
      }
    }
  }
</style>