xingmalab

2bc9a5df · spc · 49311851 · 2bc9a5df · 2bc9a5df · 2bc9a5df
Commit 2bc9a5df authored Aug 27, 2025 by spc
7 changed files
--- a/components/xingmaLab/IMAGES.md
+++ b/components/xingmaLab/IMAGES.md
-# 图片资源目录结构
+# XingmaLab 弹窗组件图片资源说明
+
+本文档说明 XingmaLab 弹窗组件所需的图片资源，参考 `babyClass` 组件的图片管理方式。
+
+## 图片配置结构
+
+图片资源通过 `xingmalabImages.js` 文件进行配置管理，采用常量对象的方式：
+
+```javascript
+export const XINGMALAB_IMAGES = {
+  CONFIRM: {
+    BG: `XingmaLabPop/v1/XingmaLabConfirmPopBg.png`,
+    CONFIRM_BTN: `XingmaLabPop/v1/XingmaLabConfirmPopConfirmBtn.png`,
+    CANCEL_BTN: `XingmaLabPop/v1/XingmaLabCancelBtn.png`
+  },
+  NO_TIME: {
+    BG: `XingmaLabPop/v1/XingmaLabNoTimePopBg.png`,
+    BTN: `XingmaLabPop/v1/XingmaLabNoTimePopBtn.png`
+  }
+}
+```

 ## 目录结构

@@ -13,71 +33,197 @@ static/
        └── XingmaLabNoTimePopBtn.png          # 无时间弹窗按钮图片
 ```

-## 图片规格说明
+## 图片规格要求

-### Xingmalabconfirmpop 组件图片
+### 确认弹窗图片

-#### 1. XingmaLabConfirmPopBg.png (确认弹窗背景)
- **尺寸**: 618 × 557 像素
- **格式**: PNG (支持透明背景)
- **用途**: 确认弹窗的主要背景图片
- **建议**: 使用高质量图片，确保在不同设备上显示清晰
+#### 1. XingmaLabConfirmPopBg.png (背景图片)
+- **尺寸**: 618rpx × 557rpx
+- **格式**: PNG
+- **用途**: 确认弹窗的背景图片
+- **设计要求**: 透明背景，包含弹窗框架和装饰元素

 #### 2. XingmaLabConfirmPopConfirmBtn.png (确认按钮)
- **尺寸**: 275 × 97 像素
- **格式**: PNG (支持透明背景)
+- **尺寸**: 275rpx × 97rpx
+- **格式**: PNG
 - **用途**: 确认按钮的图片
- **建议**: 按钮图片应该清晰，有良好的视觉反馈
+- **设计要求**: 透明背景，包含按钮文字和样式

 #### 3. XingmaLabCancelBtn.png (取消按钮)
- **尺寸**: 279 × 101 像素
- **格式**: PNG (支持透明背景)
+- **尺寸**: 279rpx × 101rpx
+- **格式**: PNG
 - **用途**: 取消按钮的图片
- **建议**: 与确认按钮保持视觉一致性
+- **设计要求**: 透明背景，包含按钮文字和样式

-### Xingmalabnotimepop 组件图片
+### 无时间弹窗图片

-#### 4. XingmaLabNoTimePopBg.png (无时间弹窗背景)
- **尺寸**: 618 × 460 像素
- **格式**: PNG (支持透明背景)
- **用途**: 无时间弹窗的主要背景图片
- **建议**: 使用高质量图片，确保在不同设备上显示清晰
+#### 1. XingmaLabNoTimePopBg.png (背景图片)
+- **尺寸**: 618rpx × 460rpx
+- **格式**: PNG
+- **用途**: 无时间弹窗的背景图片
+- **设计要求**: 透明背景，包含弹窗框架和提示信息

-#### 5. XingmaLabNoTimePopBtn.png (无时间弹窗按钮)
- **尺寸**: 466 × 97 像素
- **格式**: PNG (支持透明背景)
+#### 2. XingmaLabNoTimePopBtn.png (按钮)
+- **尺寸**: 466rpx × 97rpx
+- **格式**: PNG
 - **用途**: 无时间弹窗的按钮图片
- **建议**: 按钮图片应该清晰，有良好的视觉反馈
+- **设计要求**: 透明背景，包含按钮文字和样式

 ## 图片命名规范

+### 命名规则
 - 使用 PascalCase 命名方式
- 文件名清晰描述图片用途
- 版本号使用 `v1`, `v2` 等格式
- 保持命名的一致性和可读性
- 按组件功能分组命名
+- 包含组件类型和元素类型
+- 版本号使用小写字母
+
+### 命名示例
+```
+XingmaLabConfirmPopBg.png          # 确认弹窗背景
+XingmaLabConfirmPopConfirmBtn.png  # 确认弹窗确认按钮
+XingmaLabCancelBtn.png             # 确认弹窗取消按钮
+XingmaLabNoTimePopBg.png           # 无时间弹窗背景
+XingmaLabNoTimePopBtn.png          # 无时间弹窗按钮
+```
+
+## 版本管理
+
+### 版本结构
+```
+XingmaLabPop/
+├── v1/                           # 当前版本
+│   ├── XingmaLabConfirmPopBg.png
+│   ├── XingmaLabConfirmPopConfirmBtn.png
+│   ├── XingmaLabCancelBtn.png
+│   ├── XingmaLabNoTimePopBg.png
+│   └── XingmaLabNoTimePopBtn.png
+└── v2/                           # 未来版本（可选）
+    └── ...
+```
+
+### 版本更新
+1. 在 `xingmalabImages.js` 中修改 `version` 变量
+2. 在 `static/XingmaLabPop/` 目录下创建新版本文件夹
+3. 将新图片放入对应版本文件夹
+4. 更新组件中的图片引用

 ## 图片优化建议

-1. **文件大小**: 建议单张图片不超过 100KB
-2. **图片质量**: 使用适当的压缩比例，平衡质量和文件大小
-3. **格式选择**: PNG 格式适合需要透明背景的图片
-4. **响应式**: 考虑为不同分辨率设备准备不同尺寸的图片
-5. **一致性**: 保持同一组件内图片的视觉风格一致
+### 文件大小
+- 单个图片文件大小控制在 100KB 以内
+- 使用 PNG 格式保证透明背景效果
+- 适当压缩图片，平衡质量和文件大小
+
+### 设计规范
+- 保持与整体 UI 风格一致
+- 按钮图片包含合适的点击状态
+- 背景图片支持不同屏幕尺寸适配
+
+### 性能考虑
+- 图片尺寸与显示尺寸保持一致
+- 避免过大的图片文件影响加载速度
+- 使用 `mode="aspectFit"` 确保图片正确显示
+
+## 与 babyClass 组件的对比
+
+### 相似点
+1. **图片配置方式**: 都使用常量对象管理图片路径
+2. **目录结构**: 都使用版本化的目录结构
+3. **命名规范**: 都使用 PascalCase 命名方式
+4. **格式要求**: 都使用 PNG 格式支持透明背景
+
+### 不同点
+1. **图片数量**: babyClass 有多个等级图片，xingmalab 只有弹窗图片
+2. **图片用途**: babyClass 主要用于展示，xingmalab 主要用于交互
+3. **图片尺寸**: babyClass 图片尺寸多样，xingmalab 图片尺寸相对固定
+
+## 使用示例
+
+### 在组件中使用
+```vue
+<template>
+  <image 
+    class="xingmalabconfirmpopbg" 
+    :src="`${$baseUrl}${XINGMALAB_IMAGES.CONFIRM.BG}`" 
+    mode="aspectFit"
+  ></image>
+</template>
+
+<script setup>
+import { XINGMALAB_IMAGES } from './xingmalabImages.js'
+</script>
+```

-## 部署说明
+### 动态获取图片路径
+```javascript
+// 获取确认弹窗背景图片
+const confirmBgPath = XINGMALAB_IMAGES.CONFIRM.BG

-1. 将图片文件放置在对应的目录结构中
-2. 确保图片文件权限正确
-3. 测试图片在不同设备上的显示效果
-4. 验证图片加载性能
-5. 检查图片在不同分辨率下的显示效果
+// 获取无时间弹窗按钮图片
+const noTimeBtnPath = XINGMALAB_IMAGES.NO_TIME.BTN
+```

 ## 注意事项

- 图片路径在 `config.js` 中配置
- 组件会自动根据配置加载对应的图片
- 如需更换图片，只需替换文件并更新版本号
- 建议使用 CDN 加速图片加载
- 图片尺寸和位置信息在配置文件中统一管理
- 支持版本控制，便于图片资源更新和管理
+1. **路径一致性**: 确保 `xingmalabImages.js` 中的路径与实际文件路径一致
+2. **版本同步**: 修改版本号时需要同步更新所有相关图片
+3. **图片质量**: 确保图片清晰度满足不同设备显示需求
+4. **文件格式**: 统一使用 PNG 格式，支持透明背景
+5. **命名规范**: 严格遵循命名规范，便于维护和管理
+6. **尺寸匹配**: 图片尺寸与 CSS 中定义的尺寸保持一致
+7. **性能优化**: 合理控制图片文件大小，优化加载性能
+8. **跨平台兼容**: 确保图片在不同平台上的显示效果一致
+
+## 维护和更新
+
+### 日常维护
+- 定期检查图片文件是否存在
+- 验证图片路径配置是否正确
+- 监控图片加载性能
+
+### 版本更新
+- 记录版本更新日志
+- 备份旧版本图片资源
+- 测试新版本图片显示效果
+
+### 问题排查
+- 图片不显示：检查路径配置和文件存在性
+- 图片变形：检查 CSS 尺寸设置
+- 加载缓慢：优化图片文件大小和格式
+
+## 弹窗布局结构
+
+### 双层结构设计
+弹窗组件采用双层结构设计，确保背景遮罩和弹窗内容正确显示：
+
+```
+弹窗容器 (100vw × 100vh)
+├── 背景遮罩 (.mask)
+│   ├── 位置: 覆盖整个屏幕
+│   ├── 背景: rgba(0, 0, 0, 0.5) 半透明黑色
+│   └── 层级: 基础层
+└── 弹窗内容 (.popup-content)
+    ├── 位置: 居中显示
+    ├── 尺寸: 根据弹窗类型确定
+    └── 层级: 内容层 (z-index: 1)
+```
+
+### 布局特点
+1. **全屏覆盖**: 弹窗容器使用 `position: fixed` 和 `100vw × 100vh`
+2. **居中显示**: 使用 `display: flex` 和 `align-items: center`, `justify-content: center`
+3. **层级管理**: 遮罩层和内容层使用不同的 z-index 值
+4. **响应式**: 支持不同屏幕尺寸的适配
+
+### 弹窗类型尺寸
+
+#### 确认弹窗
+- **容器尺寸**: 100vw × 100vh (全屏)
+- **内容尺寸**: 618rpx × 557rpx
+- **背景图片**: 618rpx × 557rpx
+- **确认按钮**: 275rpx × 97rpx (位置: left: 318rpx, top: 408rpx)
+- **取消按钮**: 279rpx × 101rpx (位置: left: 28rpx, top: 406rpx)
+
+#### 无时间弹窗
+- **容器尺寸**: 100vw × 100vh (全屏)
+- **内容尺寸**: 618rpx × 460rpx
+- **背景图片**: 618rpx × 460rpx
+- **按钮**: 466rpx × 97rpx (位置: left: 76rpx, top: 312rpx)
--- a/components/xingmaLab/README.md
+++ b/components/xingmaLab/README.md
 # XingmaLab 弹窗组件库

-这是一个弹窗组件库，包含多个弹窗组件，用于不同的业务场景。
+这是一个弹窗组件库，包含多个弹窗组件，用于不同的业务场景。参考 `babyClass` 组件的实现方式，使用简洁的图片标签和样式结构。

 ## 组件列表

@@ -18,6 +18,93 @@
 - 支持版本控制和图片更新
 - 统一的样式和交互规范
 - 支持自定义文案和样式
+- 参考 babyClass 组件的简洁实现方式
+
+## 实现方式
+
+### 背景遮罩实现
+弹窗组件使用双层结构实现背景遮罩效果：
+
+```vue
+<template>
+  <view class="xingmalabconfirmpop">
+    <!-- 背景遮罩 -->
+    <view class="mask"></view>
+    
+    <!-- 弹窗内容 -->
+    <view class="popup-content">
+      <!-- 弹窗图片和按钮 -->
+    </view>
+  </view>
+</template>
+```
+
+### 遮罩样式
+```less
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);  // 半透明黑色背景
+}
+
+.popup-content {
+  position: relative;
+  z-index: 1;  // 确保内容在遮罩之上
+}
+```
+
+### 图片标签使用
+组件使用 `<image>` 标签而不是 `<span>` 标签，提供更好的图片显示效果：
+
+```vue
+<image 
+  class="xingmalabconfirmpopbg" 
+  :src="`${$baseUrl}${XINGMALAB_IMAGES.CONFIRM.BG}`" 
+  mode="aspectFit"
+></image>
+```
+
+### 图片配置管理
+图片路径通过 `xingmalabImages.js` 文件集中管理：
+
+```javascript
+export const XINGMALAB_IMAGES = {
+  CONFIRM: {
+    BG: `XingmaLabPop/v1/XingmaLabConfirmPopBg.png`,
+    CONFIRM_BTN: `XingmaLabPop/v1/XingmaLabConfirmPopConfirmBtn.png`,
+    CANCEL_BTN: `XingmaLabPop/v1/XingmaLabCancelBtn.png`
+  },
+  NO_TIME: {
+    BG: `XingmaLabPop/v1/XingmaLabNoTimePopBg.png`,
+    BTN: `XingmaLabPop/v1/XingmaLabNoTimePopBtn.png`
+  }
+}
+```
+
+### 样式结构
+使用简洁的 Less 样式，直接定义尺寸和位置：
+
+```less
+.xingmalabconfirmpop {
+  width: 750rpx;
+  height: 1624rpx;
+  left: 0rpx;
+  top: 0rpx;
+  position: absolute;
+  z-index: 9999;
+
+  .xingmalabconfirmpopbg {
+    width: 618rpx;
+    height: 557rpx;
+    left: 0rpx;
+    top: 0rpx;
+    position: absolute;
+  }
+}
+```

 ## 使用方法

@@ -89,75 +176,27 @@ const handleButtonClick = () => {

 ## 在发布页面中的使用

-### 发布流程弹窗逻辑
-
-在 `XingmaLabPublishPage.vue` 中，我们使用弹窗组件实现了以下逻辑：
-
-1. **发布按钮点击** → 检查发布次数限制
-2. **有剩余次数** → 显示确认发布弹窗 (`Xingmalabconfirmpop`)
-3. **无剩余次数** → 显示无次数弹窗 (`Xingmalabnotimepop`)
-
-### 代码示例
+弹窗组件在 `XingmaLabPublishPage.vue` 中的使用示例：

 ```vue
-<template>
-  <!-- 确认发布弹窗 -->
-  <Xingmalabconfirmpop
-    :visible="showConfirmPopup"
-    title="确认发布"
-    confirm-text="确认发布"
-    cancel-text="取消"
-    @confirm="handleConfirmPublish"
-    @cancel="handleCancelPublish"
-    @close="showConfirmPopup = false"
-  />
-  
-  <!-- 无次数弹窗 -->
-  <Xingmalabnotimepop
-    :visible="showNoTimePopup"
-    title="发布次数已用完"
-    @button-click="handleNoTimeButtonClick"
-    @close="showNoTimePopup = false"
-  />
-</template>
-
-<script setup>
-import Xingmalabconfirmpop from '@/components/xingmaLab/Xingmalabconfirmpop.vue'
-import Xingmalabnotimepop from '@/components/xingmaLab/Xingmalabnotimepop.vue'
-
-// 弹窗显示状态
-const showConfirmPopup = ref(false)
-const showNoTimePopup = ref(false)
-
-// 发布按钮点击处理
-const handlePublishBtnClick = async () => {
-  // 检查发布次数限制
-  const canPublish = await checkPublishLimit()
-  if (!canPublish) {
-    // 显示无次数弹窗
-    showNoTimePopup.value = true
-    return
-  }
-  
-  // 显示确认发布弹窗
-  showConfirmPopup.value = true
-}
-
-// 确认发布
-const handleConfirmPublish = async () => {
-  showConfirmPopup.value = false
-  // 执行发布逻辑...
-}
-
-// 无次数弹窗按钮点击处理
-const handleNoTimeButtonClick = () => {
-  showNoTimePopup.value = false
-  uni.showToast({
-    title: '发布次数已用完，请明天再试',
-    icon: 'none'
-  })
-}
-</script>
+<!-- 确认发布弹窗 -->
+<Xingmalabconfirmpop
+  :visible="showConfirmPopup"
+  title="确认发布"
+  confirm-text="确认发布"
+  cancel-text="取消"
+  @confirm="handleConfirmPublish"
+  @cancel="handleCancelPublish"
+  @close="showConfirmPopup = false"
+/>
+
+<!-- 无次数弹窗 -->
+<Xingmalabnotimepop
+  :visible="showNoTimePopup"
+  title="发布次数已用完"
+  @button-click="handleNoTimeButtonClick"
+  @close="showNoTimePopup = false"
+/>
 ```

 ## Props
@@ -197,20 +236,20 @@ const handleNoTimeButtonClick = () => {

 ## 图片配置

-组件使用集中化的图片配置管理，所有图片路径都在 `config.js` 文件中配置：
+组件使用集中化的图片配置管理，所有图片路径都在 `xingmalabImages.js` 文件中配置：

 ```javascript
 // 确认弹窗图片配置
-images: {
-  background: `XingmaLabPop/v1/XingmaLabConfirmPopBg.png`,
-  confirmBtn: `XingmaLabPop/v1/XingmaLabConfirmPopConfirmBtn.png`,
-  cancelBtn: `XingmaLabPop/v1/XingmaLabCancelBtn.png`
+CONFIRM: {
+  BG: `XingmaLabPop/v1/XingmaLabConfirmPopBg.png`,
+  CONFIRM_BTN: `XingmaLabPop/v1/XingmaLabConfirmPopConfirmBtn.png`,
+  CANCEL_BTN: `XingmaLabPop/v1/XingmaLabCancelBtn.png`
 }

 // 无时间弹窗图片配置
-images: {
-  background: `XingmaLabPop/v1/XingmaLabNoTimePopBg.png`,
-  button: `XingmaLabPop/v1/XingmaLabNoTimePopBtn.png`
+NO_TIME: {
+  BG: `XingmaLabPop/v1/XingmaLabNoTimePopBg.png`,
+  BTN: `XingmaLabPop/v1/XingmaLabNoTimePopBtn.png`
 }
 ```

@@ -227,77 +266,75 @@ static/
        └── XingmaLabNoTimePopBtn.png          # 无时间弹窗按钮
 ```

-## 配置管理
+## 按钮位置配置

-### 尺寸配置
+### 与React版本对比

-```javascript
-// 确认弹窗尺寸
-dimensions: {
-  width: 750,        // 弹窗宽度
-  height: 1624,      // 弹窗高度
-  background: {      // 背景尺寸
-    width: 618,
-    height: 557
-  },
-  confirmBtn: {      // 确认按钮尺寸和位置
-    width: 275,
-    height: 97,
-    left: 318,
-    top: 408
-  },
-  cancelBtn: {       // 取消按钮尺寸和位置
-    width: 279,
-    height: 101,
-    left: 28,
-    top: 406
-  }
-}
+为了确保Vue组件与原始React组件完全一致，按钮位置配置如下：

-// 无时间弹窗尺寸
-dimensions: {
-  width: 750,        // 弹窗宽度
-  height: 1624,      // 弹窗高度
-  background: {      // 背景尺寸
-    width: 618,
-    height: 460
-  },
-  button: {          // 按钮尺寸和位置
-    width: 466,
-    height: 97,
-    left: 76,
-    top: 312
-  }
-}
-```
+#### Xingmalabconfirmpop 按钮位置
+| 按钮 | React版本 (px) | Vue版本 (rpx) | 说明 |
+|------|----------------|---------------|------|
+| 确认按钮 | left: 318, top: 408 | left: 318, top: 408 | 完全一致 |
+| 取消按钮 | left: 28, top: 406 | left: 28, top: 406 | 完全一致 |
+
+#### Xingmalabnotimepop 按钮位置
+| 按钮 | React版本 (px) | Vue版本 (rpx) | 说明 |
+|------|----------------|---------------|------|
+| 按钮 | left: 76, top: 312 | left: 76, top: 312 | 完全一致 |
+
+### 定位方式
+- **React版本**: 使用 `position: absolute` 和固定的 `left`、`top` 值
+- **Vue版本**: 使用 `position: absolute` 和相同的 `left`、`top` 值
+- **单位转换**: React使用 `px`，Vue使用 `rpx`，但数值保持一致
+
+### 尺寸配置
+- **弹窗容器**: 750rpx × 1624rpx (与React的750px × 1624px对应)
+- **背景图片**: 618rpx × 557rpx (确认弹窗) / 618rpx × 460rpx (无时间弹窗)
+- **按钮尺寸**: 与React版本完全一致

-### 样式配置
+## 样式配置

 ```javascript
-styles: {
-  zIndex: 999,                    // 层级
-  borderRadius: '16rpx',          // 圆角
-  transition: 'all 0.3s ease'     // 过渡动画
+// 按钮交互效果
+transition: transform 0.2s ease;
+
+&:active {
+  transform: scale(0.95);
 }
 ```

 ## 版本控制

-组件支持版本控制，通过修改 `config.js` 中的 `version` 变量来管理不同版本的图片资源：
+组件支持版本控制，通过修改 `xingmalabImages.js` 中的 `version` 变量来管理不同版本的图片资源：

 ```javascript
 const version = 'v1'  // 当前版本
 ```

+## 与 babyClass 组件的对比
+
+### 相似点
+1. **图片标签使用**: 都使用 `<image>` 标签
+2. **图片配置管理**: 都使用独立的图片配置文件
+3. **样式结构**: 都使用简洁的 Less 样式
+4. **版本控制**: 都支持版本管理
+
+### 不同点
+1. **业务逻辑**: babyClass 处理等级展示，xingmalab 处理弹窗交互
+2. **图片数量**: babyClass 有多个等级图片，xingmalab 只有弹窗图片
+3. **交互方式**: babyClass 主要是展示，xingmalab 主要是交互
+
 ## 注意事项

 1. **图片资源**: 需要准备对应的背景图片文件并放置在正确的目录结构中
 2. **样式单位**: 组件使用 rpx 单位，确保跨平台兼容性
 3. **事件处理**: 组件会发射标准事件，父组件可以监听处理
-4. **配置管理**: 所有图片路径和尺寸配置都在 `config.js` 中集中管理
+4. **配置管理**: 所有图片路径都在 `xingmalabImages.js` 中集中管理
 5. **版本更新**: 如需更新图片，只需替换文件并更新版本号即可
 6. **组件复用**: 多个弹窗组件共享相同的配置管理机制
 7. **发布流程**: 在发布页面中，弹窗组件用于二次确认和次数限制提示
+8. **实现方式**: 参考 babyClass 组件的简洁实现，使用 image 标签和直接样式

 ## 文件结构

@@ -305,13 +342,17 @@ const version = 'v1'  // 当前版本
 components/xingmaLab/
 ├── Xingmalabconfirmpop.vue    # 确认弹窗组件
 ├── Xingmalabnotimepop.vue     # 无时间弹窗组件
-├── config.js                   # 配置文件
+├── xingmalabImages.js         # 图片配置文件
+├── config.js                   # 旧版配置文件（已废弃）
 ├── README.md                   # 使用说明
-├── IMAGES.md                   # 图片资源说明
-└── example.vue                 # 使用示例
-
-pages/XingmaLabPublishPage/
-├── XingmaLabPublishPage.vue   # 发布页面（使用弹窗组件）
-├── test-popup.vue             # 弹窗组件测试页面
-└── ...
+└── IMAGES.md                   # 图片资源说明
 ```
+
+## 迁移说明
+
+从旧版配置系统迁移到新的图片配置系统：
+
+1. **移除依赖**: 不再依赖 `config.js` 中的复杂配置
+2. **简化导入**: 直接导入 `XINGMALAB_IMAGES` 常量
+3. **简化样式**: 移除计算属性，直接使用 CSS 样式
+4. **保持兼容**: 按钮位置和尺寸与 React 版本完全一致
--- a/components/xingmaLab/Xingmalabconfirmpop.vue
+++ b/components/xingmaLab/Xingmalabconfirmpop.vue
 <template>
-  <view v-if="visible" class="xingmalabconfirmpop modal_center" :style="containerStyle" @click="handleOverlayClick">
-    <span class="xingmalabconfirmpopbg" :style="backgroundStyle"></span>
-    <span class="xingmalabconfirmpopconfirmbtn" :style="confirmBtnStyle" @click="handleConfirm"></span>
-    <span class="xingmalabcancelbtn" :style="cancelBtnStyle" @click="handleCancel"></span>
+  <view v-if="visible" class="xingmalabconfirmpop" @click="handleOverlayClick">
+    <!-- 背景遮罩 -->
+    <view class="mask"></view>
+    
+    <!-- 弹窗内容 -->
+    <view class="popup-content">
+      <image class="xingmalabconfirmpopbg" :src="`${$baseUrl}${XINGMALAB_IMAGES.CONFIRM.BG}`" mode="aspectFit"></image>
+      <image class="xingmalabconfirmpopconfirmbtn" :src="`${$baseUrl}${XINGMALAB_IMAGES.CONFIRM.CONFIRM_BTN}`"
+        mode="aspectFit" @click="handleConfirm"></image>
+      <image class="xingmalabcancelbtn" :src="`${$baseUrl}${XINGMALAB_IMAGES.CONFIRM.CANCEL_BTN}`" mode="aspectFit"
+        @click="handleCancel"></image>
+    </view>
  </view>
 </template>

 <script setup>
-import { defineProps, defineEmits, computed, getCurrentInstance } from 'vue'
-import { getImageUrl, getDimensions, getStyles } from './config.js'
+import { defineProps, defineEmits, getCurrentInstance } from 'vue'
+import { XINGMALAB_IMAGES } from './xingmalabImages.js'
+
+// 获取全局属性
 const { proxy } = getCurrentInstance()
 const $baseUrl = proxy.$baseUrl

@@ -35,39 +45,6 @@ const props = defineProps({
 // 定义组件事件
 const emit = defineEmits(['confirm', 'cancel', 'close'])

-// 获取配置信息
-const dimensions = getDimensions()
-const styles = getStyles()
-
-// 计算样式
-const containerStyle = computed(() => ({
-  width: `${dimensions.width}rpx`,
-  height: `${dimensions.height}rpx`,
-  zIndex: styles.zIndex
-}))
-
-const backgroundStyle = computed(() => ({
-  width: `${dimensions.background.width}rpx`,
-  height: `${dimensions.background.height}rpx`,
-  backgroundImage: `url(${$baseUrl + getImageUrl('xingmaLab/v1/XingmaLabConfirmPopBg.png')})`
-}))
-
-const confirmBtnStyle = computed(() => ({
-  width: `${dimensions.confirmBtn.width}rpx`,
-  height: `${dimensions.confirmBtn.height}rpx`,
-  left: `${dimensions.confirmBtn.left}rpx`,
-  top: `${dimensions.confirmBtn.top}rpx`,
-  backgroundImage: `url(${$baseUrl + getImageUrl('xingmaLab/v1/XingmaLabConfirmPopConfirmBtn.png')})`
-}))
-
-const cancelBtnStyle = computed(() => ({
-  width: `${dimensions.cancelBtn.width}rpx`,
-  height: `${dimensions.cancelBtn.height}rpx`,
-  left: `${dimensions.cancelBtn.left}rpx`,
-  top: `${dimensions.cancelBtn.top}rpx`,
-  backgroundImage: `url(${$baseUrl + getImageUrl('xingmaLab/v1/XingmaLabCancelBtn.png')})`
-}))
-
 // 确认按钮点击事件
 const handleConfirm = () => {
  emit('confirm')
@@ -81,8 +58,8 @@ const handleCancel = () => {
 // 遮罩层点击事件
 const handleOverlayClick = (event) => {
  // 阻止事件冒泡
-  event.stopPropagation()
-  emit('close')
+  // event.stopPropagation()
+  // emit('close')
 }
 </script>

@@ -90,56 +67,64 @@ const handleOverlayClick = (event) => {
 @import "../../common.less";

 .xingmalabconfirmpop {
-  left: 0;
+  position: fixed;
  top: 0;
-  position: absolute;
-  z-index: 999;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;

-  .xingmalabconfirmpopbg {
-    left: 0;
+  .mask {
+    position: absolute;
    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .popup-content {
+    position: relative;
+    width: 618rpx;
+    height: 557rpx;
+    z-index: 1;
+  }
+
+  .xingmalabconfirmpopbg {
+    width: 618rpx;
+    height: 557rpx;
+    left: 0rpx;
+    top: 0rpx;
    position: absolute;
-    background-size: cover;
-    background-repeat: no-repeat;
  }

  .xingmalabconfirmpopconfirmbtn {
+    width: 275rpx;
+    height: 97rpx;
+    left: 318rpx;
+    top: 408rpx;
    position: absolute;
-    background-size: cover;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    transition: opacity 0.3s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
+    transition: transform 0.2s ease;

    &:active {
-      opacity: 0.6;
+      transform: scale(0.95);
    }
  }

  .xingmalabcancelbtn {
+    width: 279rpx;
+    height: 101rpx;
+    left: 28rpx;
+    top: 406rpx;
    position: absolute;
-    background-size: cover;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    transition: opacity 0.3s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
+    transition: transform 0.2s ease;

    &:active {
-      opacity: 0.6;
+      transform: scale(0.95);
    }
  }
 }
-
-// 弹窗居中样式
-.modal_center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 </style>
--- a/components/xingmaLab/Xingmalabnotimepop.vue
+++ b/components/xingmaLab/Xingmalabnotimepop.vue
 <template>
-  <view v-if="visible" class="xingmalabnotimepop modal_center" :style="containerStyle" @click="handleOverlayClick">
-    <span class="xingmalabnotimepopbg" :style="backgroundStyle"></span>
-    <span class="xingmalabnotimepopbtn" :style="buttonStyle" @click="handleButtonClick"></span>
+  <view v-if="visible" class="xingmalabnotimepop" @click="handleOverlayClick">
+    <!-- 背景遮罩 -->
+    <view class="mask"></view>
+    
+    <!-- 弹窗内容 -->
+    <view class="popup-content">
+      <image class="xingmalabnotimepopbg" :src="`${$baseUrl}${XINGMALAB_IMAGES.NO_TIME.BG}`" mode="aspectFit"></image>
+      <image class="xingmalabnotimepopbtn" :src="`${$baseUrl}${XINGMALAB_IMAGES.NO_TIME.BTN}`" mode="aspectFit" @click="handleButtonClick"></image>
+    </view>
  </view>
 </template>

 <script setup>
-import { defineProps, defineEmits, computed, getCurrentInstance } from 'vue'
-import { getImageUrl, getDimensions, getStyles } from './config.js'
+import { defineProps, defineEmits, getCurrentInstance } from 'vue'
+import { XINGMALAB_IMAGES } from './xingmalabImages.js'
+
+// 获取全局属性
 const { proxy } = getCurrentInstance()
 const $baseUrl = proxy.$baseUrl

@@ -26,31 +34,6 @@ const props = defineProps({
 // 定义组件事件
 const emit = defineEmits(['button-click', 'close'])

-// 获取配置信息
-const dimensions = getDimensions('noTime')
-const styles = getStyles('noTime')
-
-// 计算样式
-const containerStyle = computed(() => ({
-  width: `${dimensions.width}rpx`,
-  height: `${dimensions.height}rpx`,
-  zIndex: styles.zIndex
-}))
-
-const backgroundStyle = computed(() => ({
-  width: `${dimensions.background.width}rpx`,
-  height: `${dimensions.background.height}rpx`,
-  backgroundImage: `url(${$baseUrl + getImageUrl('XingmaLabPop/v1/XingmaLabNoTimePopBg.png')})`
-}))
-
-const buttonStyle = computed(() => ({
-  width: `${dimensions.button.width}rpx`,
-  height: `${dimensions.button.height}rpx`,
-  left: `${dimensions.button.left}rpx`,
-  top: `${dimensions.button.top}rpx`,
-  backgroundImage: `url(${$baseUrl + getImageUrl('XingmaLabPop/v1/XingmaLabNoTimePopBtn.png')})`
-}))
-
 // 按钮点击事件
 const handleButtonClick = () => {
  emit('button-click')
@@ -59,8 +42,8 @@ const handleButtonClick = () => {
 // 遮罩层点击事件
 const handleOverlayClick = (event) => {
  // 阻止事件冒泡
-  event.stopPropagation()
-  emit('close')
+  // event.stopPropagation()
+  // emit('close')
 }
 </script>

@@ -68,40 +51,51 @@ const handleOverlayClick = (event) => {
 @import "../../common.less";

 .xingmalabnotimepop {
-  left: 0;
+  position: fixed;
  top: 0;
-  position: absolute;
-  z-index: 999;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;

-  .xingmalabnotimepopbg {
-    left: 0;
+  .mask {
+    position: absolute;
    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .popup-content {
+    position: relative;
+    width: 618rpx;
+    height: 460rpx;
+    z-index: 1;
+  }
+
+  .xingmalabnotimepopbg {
+    width: 618rpx;
+    height: 460rpx;
+    left: 0rpx;
+    top: 0rpx;
    position: absolute;
-    background-size: cover;
-    background-repeat: no-repeat;
  }

  .xingmalabnotimepopbtn {
+    width: 466rpx;
+    height: 97rpx;
+    left: 76rpx;
+    top: 312rpx;
    position: absolute;
-    background-size: cover;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    transition: opacity 0.3s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
+    transition: transform 0.2s ease;

    &:active {
-      opacity: 0.6;
+      transform: scale(0.95);
    }
  }
 }
-
-// 弹窗居中样式
-.modal_center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 </style>
\ No newline at end of file
--- a/components/xingmaLab/config.js
+++ b/components/xingmaLab/config.js
@@ -20,19 +20,22 @@ export const xingmalabConfirmConfig = {
    height: 1624,
    background: {
      width: 618,
-      height: 557
+      height: 557,
+      image: `XingmaLabPop/${version}/XingmaLabConfirmPopBg.png`
    },
    confirmBtn: {
      width: 275,
      height: 97,
      left: 318,
-      top: 408
+      top: 408,
+      image: `XingmaLabPop/${version}/XingmaLabConfirmPopConfirmBtn.png`
    },
    cancelBtn: {
      width: 279,
      height: 101,
      left: 28,
-      top: 406
+      top: 406,
+      image: `XingmaLabPop/${version}/XingmaLabCancelBtn.png`
    }
  },

@@ -68,13 +71,15 @@ export const xingmalabNoTimeConfig = {
    height: 1624,
    background: {
      width: 618,
-      height: 460
+      height: 460,
+      image: `XingmaLabPop/${version}/XingmaLabNoTimePopBg.png`
    },
    button: {
      width: 466,
      height: 97,
      left: 76,
-      top: 312
+      top: 312,
+      image: `XingmaLabPop/${version}/XingmaLabNoTimePopBtn.png`
    }
  },

@@ -118,3 +123,24 @@ export const getStyles = (type = 'confirm') => {
 export const getComponentConfig = (type = 'confirm') => {
  return type === 'noTime' ? xingmalabNoTimeConfig : xingmalabConfirmConfig
 }
+
+// 获取指定组件的图片配置
+export const getComponentImages = (type = 'confirm') => {
+  return type === 'noTime' ? xingmalabNoTimeConfig.images : xingmalabConfirmConfig.images
+}
+
+// 获取指定组件的完整图片URL
+export const getComponentImageUrl = (type = 'confirm', imageKey) => {
+  const images = getComponentImages(type)
+  return images[imageKey] ? `${getImageUrl(images[imageKey])}` : ''
+}
+
+// 获取指定组件的所有图片URL
+export const getAllComponentImageUrls = (type = 'confirm') => {
+  const images = getComponentImages(type)
+  const result = {}
+  Object.keys(images).forEach(key => {
+    result[key] = getComponentImageUrl(type, key)
+  })
+  return result
+}
--- a/components/xingmaLab/xingmalabImages.js
+++ b/components/xingmaLab/xingmalabImages.js
+const version = 'v1'
+
+// XingmaLab 弹窗组件图片资源常量
+export const XINGMALAB_IMAGES = {
+  // 确认弹窗相关图片
+  CONFIRM: {
+    BG: `XingmaLabPop/${version}/XingmaLabConfirmPopBg.png`,
+    CONFIRM_BTN: `XingmaLabPop/${version}/XingmaLabConfirmPopConfirmBtn.png`,
+    CANCEL_BTN: `XingmaLabPop/${version}/XingmaLabCancelBtn.png`
+  },
+
+  // 无时间弹窗相关图片
+  NO_TIME: {
+    BG: `XingmaLabPop/${version}/XingmaLabNoTimePopBg.png`,
+    BTN: `XingmaLabPop/${version}/XingmaLabNoTimePopBtn.png`
+  }
+}
--- a/pages/XingmaLabPublishPage/test-popup.vue
+++ b/pages/XingmaLabPublishPage/test-popup.vue
@@ -98,6 +98,24 @@ const handleNoTimeButtonClick = () => {
 }

 .content {
+  .debug-info {
+    margin-bottom: 30rpx;
+    padding: 20rpx;
+    background-color: #e0e0e0;
+    border-radius: 10rpx;
+    font-size: 28rpx;
+    color: #555;
+
+    .debug-title {
+      font-weight: bold;
+      margin-bottom: 10rpx;
+    }
+
+    .debug-item {
+      margin-bottom: 5rpx;
+    }
+  }
+
  .button-group {
    display: flex;
    flex-direction: column;