210新增自动报警弹框提示,历史记录页面功能
This commit is contained in:
@ -1,87 +1,62 @@
|
||||
<template>
|
||||
<view class="agreement-mask" v-if="show" @click.stop="closePopup">
|
||||
<!-- 弹窗主体:支持自定义边框、背景 -->
|
||||
<view
|
||||
class="agreement-popup"
|
||||
@click.stop
|
||||
:style="{
|
||||
<view class="agreement-popup" @click.stop :style="{
|
||||
border: popupBorder,
|
||||
backgroundColor: popupBg,
|
||||
borderRadius: popupRadius
|
||||
}"
|
||||
:class="popupClass"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<!-- 动态图标:支持自定义大小、边距 -->
|
||||
<image
|
||||
v-if="showIcon && icon"
|
||||
:src="icon"
|
||||
mode="aspectFit"
|
||||
class="svg"
|
||||
:style="iconStyle"
|
||||
></image>
|
||||
|
||||
<view class="text-content">
|
||||
<!-- 动态标题:支持自定义颜色、字体大小 -->
|
||||
<view
|
||||
class="popup-Title"
|
||||
v-if="title"
|
||||
:style="{
|
||||
color: titleColor,
|
||||
fontSize: titleSize,
|
||||
padding: titlePadding
|
||||
}"
|
||||
>
|
||||
{{ title }}
|
||||
</view>
|
||||
|
||||
}" :class="popupClass">
|
||||
<view class="text-content">
|
||||
<!-- 动态标题:支持自定义颜色、字体大小 -->
|
||||
<view class="popup-Title" v-if="title" :style="{
|
||||
color: titleColor,
|
||||
fontSize: titleSize,
|
||||
padding: titlePadding
|
||||
}">
|
||||
{{ title }}
|
||||
</view>
|
||||
<view class="popup-content">
|
||||
<!-- 动态图标:支持自定义大小、边距 -->
|
||||
<image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg" :style="iconStyle"></image>
|
||||
|
||||
|
||||
|
||||
<!-- 动态消息内容:支持自定义颜色、换行、字体大小 -->
|
||||
<view
|
||||
class="popup-Message"
|
||||
v-if="message"
|
||||
:style="{
|
||||
<view class="popup-Message" v-if="message" :style="{
|
||||
color: messageColor,
|
||||
fontSize: messageSize,
|
||||
whiteSpace: messageWrap ? 'normal' : 'nowrap',
|
||||
padding: messagePadding
|
||||
}"
|
||||
>
|
||||
}">
|
||||
{{ message }}
|
||||
</view>
|
||||
<!-- 倒计时显示 -->
|
||||
<!-- <view v-if="showCountdown" class="countdown" :style="countdownStyle">
|
||||
{{ countdownFormat.replace('{time}', currentCountdown) }}
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 按钮组:支持自定义按钮样式 -->
|
||||
<view class="popup-buttons" :style="{ marginTop: buttonGroupMargin }">
|
||||
<button
|
||||
v-if="showCancel"
|
||||
class="btn cancelBtn"
|
||||
@click="handleCancel"
|
||||
:style="{
|
||||
<button v-if="showCancel" class="btn cancelBtn" @click="handleCancel" :style="{
|
||||
border: cancelBtnBorder,
|
||||
color: cancelBtnColor,
|
||||
backgroundColor: cancelBtnBg,
|
||||
fontSize: cancelBtnSize,
|
||||
borderRadius: buttonRadius,
|
||||
margin: buttonMargin
|
||||
}"
|
||||
:class="cancelBtnClass"
|
||||
>
|
||||
}" :class="cancelBtnClass">
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn agreeBtn"
|
||||
@click="handleConfirm"
|
||||
:style="{
|
||||
|
||||
<button class="btn agreeBtn" @click="handleConfirm" :style="{
|
||||
backgroundColor: confirmBtnBg,
|
||||
color: confirmBtnColor,
|
||||
fontSize: confirmBtnSize,
|
||||
borderRadius: buttonRadius,
|
||||
margin: buttonMargin
|
||||
}"
|
||||
:class="confirmBtnClass"
|
||||
>
|
||||
}" :class="confirmBtnClass">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</view>
|
||||
@ -106,6 +81,10 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showCountdown: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
@ -131,7 +110,7 @@
|
||||
type: Boolean,
|
||||
default: false // 默认不换行,true则自动换行
|
||||
},
|
||||
|
||||
|
||||
// 弹窗样式自定义
|
||||
popupBorder: {
|
||||
type: String,
|
||||
@ -149,7 +128,7 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
|
||||
// 标题样式自定义
|
||||
titleColor: {
|
||||
type: String,
|
||||
@ -163,7 +142,7 @@
|
||||
type: String,
|
||||
default: '10rpx 0 10rpx'
|
||||
},
|
||||
|
||||
|
||||
// 消息样式自定义
|
||||
messageColor: {
|
||||
type: String,
|
||||
@ -177,7 +156,7 @@
|
||||
type: String,
|
||||
default: '10rpx 20rpx 30rpx'
|
||||
},
|
||||
|
||||
|
||||
// 图标样式自定义
|
||||
iconStyle: {
|
||||
type: Object,
|
||||
@ -187,7 +166,7 @@
|
||||
marginBottom: '20rpx'
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 按钮组样式
|
||||
buttonGroupMargin: {
|
||||
type: String,
|
||||
@ -201,7 +180,7 @@
|
||||
type: String,
|
||||
default: '0 10rpx'
|
||||
},
|
||||
|
||||
|
||||
// 确认按钮样式
|
||||
confirmBtnBg: {
|
||||
type: String,
|
||||
@ -219,7 +198,7 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
|
||||
// 取消按钮样式
|
||||
cancelBtnBorder: {
|
||||
type: String,
|
||||
|
Reference in New Issue
Block a user