feat(common-notice-dialog): 新增通知弹窗横屏布局适配

zjk

2026-09-07 9eb54221353a22ad3f1ab2d75e472b4c59f2498b

feat(common-notice-dialog): 新增通知弹窗横屏布局适配

为通用通知弹窗组件添加横屏布局样式支持，并在首页调用弹窗时传入当前布局状态

 components/CommonNoticeDialog.vue

@@ -1,5 +1,5 @@
<template>
    <view v-if="visible" class="dialog-wrapper">
    <view v-if="visible" class="dialog-wrapper" :class="{ landscape: isLandscape }">
        <view class="page-mask"></view>

        <view class="dialog-card">
@@ -51,6 +51,10 @@
    primaryButtonText: {
        type: String,
        default: '重新打印',
    },
    isLandscape: {
        type: Boolean,
        default: false,
    },
});

@@ -119,11 +123,19 @@
<style scoped>
.dialog-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
}

.page-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(31, 42, 68, 0.6);
}

@@ -208,4 +220,16 @@
.primary-btn-text {
    color: #FFFFFF;
}

.dialog-wrapper.landscape {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-wrapper.landscape .dialog-card {
    position: relative;
    left: auto;
    top: auto;
}
</style>

 pages/home/index.vue

@@ -844,6 +844,7 @@
        <CommonNoticeDialog
          v-if="noticeDialog.visible"
          :visible="noticeDialog.visible"
          :is-landscape="isLandscapeLayout"
          :title="noticeDialog.title"
          :description="noticeDialog.description"
          @close="closeNoticeDialog"