Skip to content

飞
飞鹤小程序
Commit 2bc9a5df authored by spc's avatar spc
Browse files
Options

xingmalab

parent 49311851
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 536 additions and 309 deletions
components/xingmaLab/IMAGES.md
View file @ 2bc9a5df
# 图片资源目录结构 # 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/ ...@@ -13,71 +33,197 @@ static/
└── XingmaLabNoTimePopBtn.png # 无时间弹窗按钮图片 └── XingmaLabNoTimePopBtn.png # 无时间弹窗按钮图片
``` ```
## 图片规格说明 ## 图片规格要求
### Xingmalabconfirmpop 组件图片 ### 确认弹窗图片
#### 1. XingmaLabConfirmPopBg.png (确认弹窗背景) #### 1. XingmaLabConfirmPopBg.png (背景图片)
- **尺寸**: 618 × 557 像素 - **尺寸**: 618rpx × 557rpx
- **格式**: PNG (支持透明背景) - **格式**: PNG
- **用途**: 确认弹窗的主要背景图片 - **用途**: 确认弹窗的背景图片
- **建议**: 使用高质量图片，确保在不同设备上显示清晰 - **设计要求**: 透明背景，包含弹窗框架和装饰元素
#### 2. XingmaLabConfirmPopConfirmBtn.png (确认按钮) #### 2. XingmaLabConfirmPopConfirmBtn.png (确认按钮)
- **尺寸**: 275 × 97 像素 - **尺寸**: 275rpx × 97rpx
- **格式**: PNG (支持透明背景) - **格式**: PNG
- **用途**: 确认按钮的图片 - **用途**: 确认按钮的图片
- **建议**: 按钮图片应该清晰，有良好的视觉反馈 - **设计要求**: 透明背景，包含按钮文字和样式
#### 3. XingmaLabCancelBtn.png (取消按钮) #### 3. XingmaLabCancelBtn.png (取消按钮)
- **尺寸**: 279 × 101 像素 - **尺寸**: 279rpx × 101rpx
- **格式**: PNG (支持透明背景) - **格式**: PNG
- **用途**: 取消按钮的图片 - **用途**: 取消按钮的图片
- **建议**: 与确认按钮保持视觉一致性 - **设计要求**: 透明背景，包含按钮文字和样式
### Xingmalabnotimepop 组件图片 ### 无时间弹窗图片
#### 4. XingmaLabNoTimePopBg.png (无时间弹窗背景) #### 1. XingmaLabNoTimePopBg.png (背景图片)
- **尺寸**: 618 × 460 像素 - **尺寸**: 618rpx × 460rpx
- **格式**: PNG (支持透明背景) - **格式**: PNG
- **用途**: 无时间弹窗的主要背景图片 - **用途**: 无时间弹窗的背景图片
- **建议**: 使用高质量图片，确保在不同设备上显示清晰 - **设计要求**: 透明背景，包含弹窗框架和提示信息
#### 5. XingmaLabNoTimePopBtn.png (无时间弹窗按钮) #### 2. XingmaLabNoTimePopBtn.png (按钮)
- **尺寸**: 466 × 97 像素 - **尺寸**: 466rpx × 97rpx
- **格式**: PNG (支持透明背景) - **格式**: PNG
- **用途**: 无时间弹窗的按钮图片 - **用途**: 无时间弹窗的按钮图片
- **建议**: 按钮图片应该清晰，有良好的视觉反馈 - **设计要求**: 透明背景，包含按钮文字和样式
## 图片命名规范 ## 图片命名规范
### 命名规则
- 使用 PascalCase 命名方式 - 使用 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. **图片质量**: 使用适当的压缩比例，平衡质量和文件大小 - 单个图片文件大小控制在 100KB 以内
3. **格式选择**: PNG 格式适合需要透明背景的图片 - 使用 PNG 格式保证透明背景效果
4. **响应式**: 考虑为不同分辨率设备准备不同尺寸的图片 - 适当压缩图片，平衡质量和文件大小
5. **一致性**: 保持同一组件内图片的视觉风格一致
### 设计规范
- 保持与整体 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. 确保图片文件权限正确 const noTimeBtnPath = XINGMALAB_IMAGES.NO_TIME.BTN
3. 测试图片在不同设备上的显示效果 ```
4. 验证图片加载性能
5. 检查图片在不同分辨率下的显示效果
## 注意事项 ## 注意事项
- 图片路径在 `config.js` 中配置 1. **路径一致性**: 确保 `xingmalabImages.js` 中的路径与实际文件路径一致
- 组件会自动根据配置加载对应的图片 2. **版本同步**: 修改版本号时需要同步更新所有相关图片
- 如需更换图片，只需替换文件并更新版本号 3. **图片质量**: 确保图片清晰度满足不同设备显示需求
- 建议使用 CDN 加速图片加载 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)
components/xingmaLab/README.md
View file @ 2bc9a5df
This diff is collapsed.
components/xingmaLab/Xingmalabconfirmpop.vue
View file @ 2bc9a5df
<template> <template>
<view v-if="visible" class="xingmalabconfirmpop modal_center" :style="containerStyle" @click="handleOverlayClick"> <view v-if="visible" class="xingmalabconfirmpop" @click="handleOverlayClick">
<span class="xingmalabconfirmpopbg" :style="backgroundStyle"></span> <!-- 背景遮罩 -->
<span class="xingmalabconfirmpopconfirmbtn" :style="confirmBtnStyle" @click="handleConfirm"></span> <view class="mask"></view>
<span class="xingmalabcancelbtn" :style="cancelBtnStyle" @click="handleCancel"></span>
<!-- 弹窗内容 -->
<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> </view>
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits, computed, getCurrentInstance } from 'vue' import { defineProps, defineEmits, getCurrentInstance } from 'vue'
import { getImageUrl, getDimensions, getStyles } from './config.js' import { XINGMALAB_IMAGES } from './xingmalabImages.js'
// 获取全局属性
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl const $baseUrl = proxy.$baseUrl
...@@ -35,39 +45,6 @@ const props = defineProps({ ...@@ -35,39 +45,6 @@ const props = defineProps({
// 定义组件事件 // 定义组件事件
const emit = defineEmits(['confirm', 'cancel', 'close']) 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 = () => { const handleConfirm = () => {
emit('confirm') emit('confirm')
...@@ -81,8 +58,8 @@ const handleCancel = () => { ...@@ -81,8 +58,8 @@ const handleCancel = () => {
// 遮罩层点击事件 // 遮罩层点击事件
const handleOverlayClick = (event) => { const handleOverlayClick = (event) => {
// 阻止事件冒泡 // 阻止事件冒泡
event.stopPropagation() // event.stopPropagation()
emit('close') // emit('close')
} }
</script> </script>
...@@ -90,56 +67,64 @@ const handleOverlayClick = (event) => { ...@@ -90,56 +67,64 @@ const handleOverlayClick = (event) => {
@import "../../common.less"; @import "../../common.less";
.xingmalabconfirmpop { .xingmalabconfirmpop {
left: 0; position: fixed;
top: 0; top: 0;
position: absolute; left: 0;
z-index: 999; width: 100vw;
height: 100vh;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
.xingmalabconfirmpopbg { .mask {
left: 0; position: absolute;
top: 0; 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; position: absolute;
background-size: cover;
background-repeat: no-repeat;
} }
.xingmalabconfirmpopconfirmbtn { .xingmalabconfirmpopconfirmbtn {
width: 275rpx;
height: 97rpx;
left: 318rpx;
top: 408rpx;
position: absolute; position: absolute;
background-size: cover; transition: transform 0.2s ease;
background-repeat: no-repeat;
cursor: pointer;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
&:active { &:active {
opacity: 0.6; transform: scale(0.95);
} }
} }
.xingmalabcancelbtn { .xingmalabcancelbtn {
width: 279rpx;
height: 101rpx;
left: 28rpx;
top: 406rpx;
position: absolute; position: absolute;
background-size: cover; transition: transform 0.2s ease;
background-repeat: no-repeat;
cursor: pointer;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
&:active { &:active {
opacity: 0.6; transform: scale(0.95);
} }
} }
} }
// 弹窗居中样式
.modal_center {
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>
components/xingmaLab/Xingmalabnotimepop.vue
View file @ 2bc9a5df
<template> <template>
<view v-if="visible" class="xingmalabnotimepop modal_center" :style="containerStyle" @click="handleOverlayClick"> <view v-if="visible" class="xingmalabnotimepop" @click="handleOverlayClick">
<span class="xingmalabnotimepopbg" :style="backgroundStyle"></span> <!-- 背景遮罩 -->
<span class="xingmalabnotimepopbtn" :style="buttonStyle" @click="handleButtonClick"></span> <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> </view>
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits, computed, getCurrentInstance } from 'vue' import { defineProps, defineEmits, getCurrentInstance } from 'vue'
import { getImageUrl, getDimensions, getStyles } from './config.js' import { XINGMALAB_IMAGES } from './xingmalabImages.js'
// 获取全局属性
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl const $baseUrl = proxy.$baseUrl
...@@ -26,31 +34,6 @@ const props = defineProps({ ...@@ -26,31 +34,6 @@ const props = defineProps({
// 定义组件事件 // 定义组件事件
const emit = defineEmits(['button-click', 'close']) 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 = () => { const handleButtonClick = () => {
emit('button-click') emit('button-click')
...@@ -59,8 +42,8 @@ const handleButtonClick = () => { ...@@ -59,8 +42,8 @@ const handleButtonClick = () => {
// 遮罩层点击事件 // 遮罩层点击事件
const handleOverlayClick = (event) => { const handleOverlayClick = (event) => {
// 阻止事件冒泡 // 阻止事件冒泡
event.stopPropagation() // event.stopPropagation()
emit('close') // emit('close')
} }
</script> </script>
...@@ -68,40 +51,51 @@ const handleOverlayClick = (event) => { ...@@ -68,40 +51,51 @@ const handleOverlayClick = (event) => {
@import "../../common.less"; @import "../../common.less";
.xingmalabnotimepop { .xingmalabnotimepop {
left: 0; position: fixed;
top: 0; top: 0;
position: absolute; left: 0;
z-index: 999; width: 100vw;
height: 100vh;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
.xingmalabnotimepopbg { .mask {
left: 0; position: absolute;
top: 0; 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; position: absolute;
background-size: cover;
background-repeat: no-repeat;
} }
.xingmalabnotimepopbtn { .xingmalabnotimepopbtn {
width: 466rpx;
height: 97rpx;
left: 76rpx;
top: 312rpx;
position: absolute; position: absolute;
background-size: cover; transition: transform 0.2s ease;
background-repeat: no-repeat;
cursor: pointer;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
&:active { &:active {
opacity: 0.6; transform: scale(0.95);
} }
} }
} }
// 弹窗居中样式
.modal_center {
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>
\ No newline at end of file
components/xingmaLab/config.js
View file @ 2bc9a5df
...@@ -20,19 +20,22 @@ export const xingmalabConfirmConfig = { ...@@ -20,19 +20,22 @@ export const xingmalabConfirmConfig = {
height: 1624, height: 1624,
background: { background: {
width: 618, width: 618,
height: 557 height: 557,
image: `XingmaLabPop/${version}/XingmaLabConfirmPopBg.png`
}, },
confirmBtn: { confirmBtn: {
width: 275, width: 275,
height: 97, height: 97,
left: 318, left: 318,
top: 408 top: 408,
image: `XingmaLabPop/${version}/XingmaLabConfirmPopConfirmBtn.png`
}, },
cancelBtn: { cancelBtn: {
width: 279, width: 279,
height: 101, height: 101,
left: 28, left: 28,
top: 406 top: 406,
image: `XingmaLabPop/${version}/XingmaLabCancelBtn.png`
} }
}, },
...@@ -68,13 +71,15 @@ export const xingmalabNoTimeConfig = { ...@@ -68,13 +71,15 @@ export const xingmalabNoTimeConfig = {
height: 1624, height: 1624,
background: { background: {
width: 618, width: 618,
height: 460 height: 460,
image: `XingmaLabPop/${version}/XingmaLabNoTimePopBg.png`
}, },
button: { button: {
width: 466, width: 466,
height: 97, height: 97,
left: 76, left: 76,
top: 312 top: 312,
image: `XingmaLabPop/${version}/XingmaLabNoTimePopBtn.png`
} }
}, },
...@@ -118,3 +123,24 @@ export const getStyles = (type = 'confirm') => { ...@@ -118,3 +123,24 @@ export const getStyles = (type = 'confirm') => {
export const getComponentConfig = (type = 'confirm') => { export const getComponentConfig = (type = 'confirm') => {
return type === 'noTime' ? xingmalabNoTimeConfig : xingmalabConfirmConfig 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
}
components/xingmaLab/xingmalabImages.js 0 → 100644
View file @ 2bc9a5df
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`
}
}
pages/XingmaLabPublishPage/test-popup.vue
View file @ 2bc9a5df
...@@ -98,6 +98,24 @@ const handleNoTimeButtonClick = () => { ...@@ -98,6 +98,24 @@ const handleNoTimeButtonClick = () => {
} }
.content { .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 { .button-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment