From 392a8e29524307277d77a0ae8d0984a4f5d3efa6 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Wed, 14 Jan 2026 15:14:02 +0800
Subject: [PATCH] =?UTF-8?q?revert(=E8=A7=86=E9=A2=91=E5=8F=B7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6):=20=E7=B2=BE=E7=AE=80=E4=BB=A3=E7=A0=81=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=BB=A5=E5=92=8C=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E8=AE=BE=E8=AE=A1=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-article.vue                |   2 +-
 components-diy/diy-channel-list.vue           | 334 ++++++------------
 components-diy/diy-channel-video.vue          |  81 +----
 components-diy/js/wechat-channel.js           |  18 +-
 pages_tool/contact/contact.vue                |   2 +-
 .../uni-datetime-picker/time-picker.vue       |   2 +-
 .../uni-datetime-picker.vue                   |   4 +-
 .../components/uni-popup/uni-popup.vue        |   2 +-
 8 files changed, 134 insertions(+), 311 deletions(-)

diff --git a/components-diy/diy-article.vue b/components-diy/diy-article.vue
index 5539a1b..2f4097a 100644
--- a/components-diy/diy-article.vue
+++ b/components-diy/diy-article.vue
@@ -3,7 +3,7 @@
 		<view class="article-wrap" :style="warpCss">
 			<view :class="['list-wrap', value.style]" :style="warpCss">
 				<!-- 自动垂直滚动 -->
-				<swiper class="auto-scroll-swiper" :style="swiperStyle" :vertical="swiperConfig.vertical !== false"
+				<swiper class="auto-scroll-swiper" :style="[swiperStyle]" :vertical="swiperConfig.vertical !== false"
 					:autoplay="swiperConfig.autoplay !== false" :circular="swiperConfig.circular !== false"
 					:interval="swiperConfig.interval || 3000" :duration="swiperConfig.duration || 500"
 					:display-multiple-items="safeDisplayMultipleItems">
diff --git a/components-diy/diy-channel-list.vue b/components-diy/diy-channel-list.vue
index de6746e..f114b2c 100644
--- a/components-diy/diy-channel-list.vue
+++ b/components-diy/diy-channel-list.vue
@@ -6,13 +6,13 @@
 			:duration="value.carousel.duration || 500" :circular="value.carousel.circular || false"
 			:style="swiperHeight" class="channel-swiper">
 			<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
-				<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
-					<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
-						<!-- 视频号视频卡片，轮播模式 -->
-						<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
-							:video-height="value.rowCount === 3 ? 180 : 240" :title-line-clamp="value.titleLineClamp"
-							:show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle"
-							:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
+					<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
+						<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
+							<!-- 视频号视频卡片，轮播模式 -->
+							<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true" 
+								:title-line-clamp="value.titleLineClamp"
+								:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
+								:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
 					</view>
 				</view>
 			</swiper-item>
@@ -22,9 +22,9 @@
 		<view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
 			<view v-for="(item, index) in value.list" :key="index" class="channel-item">
 				<!-- 视频号视频卡片，列表模式 -->
-				<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
-					:video-height="value.rowCount === 3 ? 180 : 240" :title-line-clamp="value.titleLineClamp"
-					:show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle"
+				<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true" 
+					:title-line-clamp="value.titleLineClamp"
+					:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
 					:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
 			</view>
 		</view>
@@ -36,9 +36,9 @@
 			<view class="uni-scroll-view-content">
 				<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
 					<!-- 视频号视频卡片，滚动模式 -->
-					<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
-						:video-height="value.rowCount === 3 ? 180 : 240" :title-line-clamp="value.titleLineClamp"
-						:show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle"
+					<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true" 
+						:title-line-clamp="value.titleLineClamp"
+						:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
 						:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
 				</view>
 			</view>
@@ -190,6 +190,25 @@ export default {
 			}
 
 			return slides;
+		},
+		/**
+		 * 视频封面样式
+		 * 根据aspectRatio属性动态计算封面样式
+		 * @returns {Object} 封面样式对象
+		 */
+		computedCoverStyle() {
+			const aspectRatio = this.value?.aspectRatio || '16:9';
+			let paddingTop = '56.25%'; // 默认 16:9 比例
+
+			if (aspectRatio === '3:4') {
+				paddingTop = '133.33%'; // 3:4 比例
+			}
+
+			return {
+				width: '100%',
+				height: '0',
+				paddingTop: paddingTop
+			};
 		}
 	},
 	methods: {
@@ -259,69 +278,12 @@ export default {
 
 /**
  * 列表布局样式
- * 支持 2 列和 3 列布局
  */
 .channel-list {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 16rpx;
-	padding: 32rpx;
-	box-sizing: border-box;
-
-	.channel-item {
-		// 默认 3 列布局
-		flex: 0 0 calc(33.3333333% - 10rpx);
-		box-sizing: border-box;
-
-		&:nth-child(3n) {
-			margin-right: 0;
-		}
-	}
-
-	// 2 列布局
-	&.row1-of2 {
-		.channel-item {
-			flex: 0 0 calc(50% - 8rpx);
-
-			&:nth-child(3n) {
-				margin-right: 16rpx;
-			}
-
-			&:nth-child(2n) {
-				margin-right: 0;
-			}
-		}
-	}
-
-	// 4 列布局
-	&.row1-of4 {
-		.channel-item {
-			flex: 0 0 calc(25% - 12rpx);
-
-			&:nth-child(3n) {
-				margin-right: 16rpx;
-			}
-
-			&:nth-child(4n) {
-				margin-right: 0;
-			}
-		}
-	}
-
-	// 1 列布局
-	&.row1-of1 {
-		.channel-item {
-			flex: 0 0 100%;
-
-			&:nth-child(3n) {
-				margin-right: 16rpx;
-			}
-
-			&:nth-child(1n) {
-				margin-right: 0;
-			}
-		}
-	}
+	display: grid;
+	grid-template-columns: repeat(var(--row-count, 2), 1fr);
+	gap: 8px;
+	padding: 16px 16px 0px;
 }
 
 /**
@@ -333,15 +295,17 @@ export default {
 	box-sizing: border-box;
 
 	.uni-scroll-view-content {
-		display: flex;
-		flex-wrap: wrap;
+		display: grid;
+		grid-template-columns: repeat(var(--row-count, 2), 1fr);
 		gap: 16rpx;
 	}
 
 	// 单滑动模式
 	&.singleSlide {
 		.uni-scroll-view-content {
+			display: flex;
 			flex-wrap: nowrap;
+			gap: 16rpx;
 		}
 
 		.channel-nav-item {
@@ -354,56 +318,33 @@ export default {
 		display: flex;
 		flex-direction: column;
 		box-sizing: border-box;
-		// 默认 3 列布局
-		flex: 0 0 calc(33.3333333% - 10rpx);
+	}
 
-		&:nth-child(3n) {
-			margin-right: 0;
+	// 1 列布局
+	&.row1-of1 {
+		.uni-scroll-view-content {
+			grid-template-columns: 1fr;
 		}
 	}
 
 	// 2 列布局
 	&.row1-of2 {
-		.channel-nav-item {
-			flex: 0 0 calc(50% - 8rpx);
+		.uni-scroll-view-content {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
 
-			&:nth-child(3n) {
-				margin-right: 16rpx;
-			}
-
-			&:nth-child(2n) {
-				margin-right: 0;
-			}
+	// 3 列布局
+	&.row1-of3 {
+		.uni-scroll-view-content {
+			grid-template-columns: repeat(3, 1fr);
 		}
 	}
 
 	// 4 列布局
 	&.row1-of4 {
-		.channel-nav-item {
-			flex: 0 0 calc(25% - 12rpx);
-
-			&:nth-child(3n) {
-				margin-right: 16rpx;
-			}
-
-			&:nth-child(4n) {
-				margin-right: 0;
-			}
-		}
-	}
-
-	// 1 列布局
-	&.row1-of1 {
-		.channel-nav-item {
-			flex: 0 0 100%;
-
-			&:nth-child(3n) {
-				margin-right: 16rpx;
-			}
-
-			&:nth-child(1n) {
-				margin-right: 0;
-			}
+		.uni-scroll-view-content {
+			grid-template-columns: repeat(4, 1fr);
 		}
 	}
 }
@@ -426,65 +367,36 @@ export default {
 	box-sizing: border-box;
 
 	.swiper-slide-content {
-		display: flex;
-		flex-wrap: wrap;
+		display: grid;
+		grid-template-columns: repeat(var(--row-count, 2), 1fr);
 		gap: 16rpx;
 		padding: 16rpx;
 		box-sizing: border-box;
 
 		.channel-item {
-			// 默认 3 列布局
-			flex: 0 0 calc(33.3333333% - 10rpx);
+			display: flex;
+			flex-direction: column;
 			box-sizing: border-box;
-
-			&:nth-child(3n) {
-				margin-right: 0;
-			}
-		}
-
-		// 轮播模式下的 2 列布局
-		&.row1-of2 {
-			.channel-item {
-				flex: 0 0 calc(50% - 8rpx);
-
-				&:nth-child(3n) {
-					margin-right: 16rpx;
-				}
-
-				&:nth-child(2n) {
-					margin-right: 0;
-				}
-			}
-		}
-
-		// 轮播模式下的 4 列布局
-		&.row1-of4 {
-			.channel-item {
-				flex: 0 0 calc(25% - 12rpx);
-
-				&:nth-child(3n) {
-					margin-right: 16rpx;
-				}
-
-				&:nth-child(4n) {
-					margin-right: 0;
-				}
-			}
 		}
 
 		// 轮播模式下的 1 列布局
 		&.row1-of1 {
-			.channel-item {
-				flex: 0 0 100%;
+			grid-template-columns: 1fr;
+		}
 
-				&:nth-child(3n) {
-					margin-right: 16rpx;
-				}
+		// 轮播模式下的 2 列布局
+		&.row1-of2 {
+			grid-template-columns: repeat(2, 1fr);
+		}
 
-				&:nth-child(1n) {
-					margin-right: 0;
-				}
-			}
+		// 轮播模式下的 3 列布局
+		&.row1-of3 {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		// 轮播模式下的 4 列布局
+		&.row1-of4 {
+			grid-template-columns: repeat(4, 1fr);
 		}
 	}
 }
@@ -500,76 +412,54 @@ export default {
 	.channel-swiper .swiper-slide-content {
 		gap: 12rpx;
 		padding: 12rpx;
-
-		.channel-item,
-		.channel-nav-item {
-			// 默认 3 列布局
-			flex: 0 0 calc(33.3333333% - 8rpx);
-
-			&:nth-child(3n) {
-				margin-right: 0;
-			}
-		}
-
-		// 小屏幕上的 2 列布局
-		&.row1-of2 {
-
-			.channel-item,
-			.channel-nav-item {
-				flex: 0 0 calc(50% - 6rpx);
-
-				&:nth-child(3n) {
-					margin-right: 12rpx;
-				}
-
-				&:nth-child(2n) {
-					margin-right: 0;
-				}
-			}
-		}
-
-		// 小屏幕上的 4 列布局
-		&.row1-of4 {
-
-			.channel-item,
-			.channel-nav-item {
-				flex: 0 0 calc(25% - 9rpx);
-
-				&:nth-child(3n) {
-					margin-right: 12rpx;
-				}
-
-				&:nth-child(4n) {
-					margin-right: 0;
-				}
-			}
-		}
-
-		// 小屏幕上的 1 列布局
-		&.row1-of1 {
-
-			.channel-item,
-			.channel-nav-item {
-				flex: 0 0 100%;
-
-				&:nth-child(3n) {
-					margin-right: 12rpx;
-				}
-
-				&:nth-child(1n) {
-					margin-right: 0;
-				}
-			}
-		}
 	}
 
 	// 小屏幕上的单滑动模式
 	.channel-nav {
 		&.singleSlide {
+			.uni-scroll-view-content {
+				gap: 12rpx;
+			}
+			
 			.channel-nav-item {
 				width: 240rpx;
 			}
 		}
 	}
 }
+
+/**
+ * 视频比例样式调整
+ * 根据不同的视频比例调整布局
+ */
+
+// // 3:4 比例的视频卡片样式
+// .channel-video.ratio-3-4 {
+// 	// 调整视频卡片的整体高度
+// 	/deep/ .video-cover-wrap {
+// 		padding-top: 133.33%; // 3:4 比例
+// 	}
+
+// 	// 列表模式下的3:4比例调整
+// 	&.list-mode {
+// 		/deep/ .video-cover-wrap {
+// 			padding-top: 133.33%; // 3:4 比例
+// 		}
+// 	}
+// }
+
+// // 16:9 比例的视频卡片样式（默认）
+// .channel-video.ratio-16-9 {
+// 	// 保持默认的16:9比例
+// 	/deep/ .video-cover-wrap {
+// 		padding-top: 56.25%; // 16:9 比例
+// 	}
+
+// 	// 列表模式下的16:9比例保持默认
+// 	&.list-mode {
+// 		/deep/ .video-cover-wrap {
+// 			padding-top: 56.25%; // 16:9 比例
+// 		}
+// 	}
+// }
 </style>
\ No newline at end of file
diff --git a/components-diy/diy-channel-video.vue b/components-diy/diy-channel-video.vue
index 1b8f143..cb1de1f 100644
--- a/components-diy/diy-channel-video.vue
+++ b/components-diy/diy-channel-video.vue
@@ -2,7 +2,7 @@
 	<view class="channel-video" :class="{ 'list-mode': listMode }">
 		<!-- 嵌入式视频播放 -->
 		<view v-if="canUseEmbedMode" class="embed-video-container">
-			<view class="video-cover-wrap" :class="videoCoverClass">
+			<view class="video-cover-wrap" :style="[coverStyle]">
 				<!-- #ifdef MP-WEIXIN -->
 				<native-component>
 					<!-- 嵌入式视频播放组件 -->
@@ -23,11 +23,10 @@
 
 		<!-- 跳转式视频播放 -->
 		<view v-else @click.stop="playVideo" class="video-container">
-			<view class="video-cover-wrap" :class="videoCoverClass">
+			<view class="video-cover-wrap" :style="[coverStyle]">
 				<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
-				<view class="channel-play-btn" v-if="showPlayBtn" :style="playBtnStyle">
-					<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
-					<view class="play-icon-css" v-else></view>
+				<view class="channel-play-btn" v-if="showPlayBtn" :style="[playBtnStyle]">
+					<view class="play-icon-css"></view>
 				</view>
 				<view class="video-stats-overlay" v-if="value.showViewCount">
 					{{ value.viewCount }}次观看
@@ -81,15 +80,6 @@ export default {
 			type: Boolean,
 			default: false
 		},
-		/**
-		 * 视频高度（仅适用于嵌入式播放）
-		 * @type {number}
-		 * @default 220
-		 */
-		videoHeight: {
-			type: Number,
-			default: 220
-		},
 		/**
 		 * 标题显示行数
 		 * @type {number}
@@ -104,17 +94,6 @@ export default {
 			type: Boolean,
 			default: true
 		},
-		/**
-		 * 视频比例
-		 * @type {string}
-		 * @default '16:9'
-		 * @options '16:9', '3:4'
-		 */
-		aspectRatio: {
-			type: String,
-			default: '16:9',
-			validator: (value) => ['16:9', '3:4'].includes(value)
-		},
 		/**
 		 * 视频封面图样式
 		 * 采用 16:9 比例的响应式高度
@@ -159,32 +138,6 @@ export default {
 			return enableEmbedMode;
 			// #endif
 			return false
-		},
-		/**
-		 * 播放按钮图标
-		 * @returns {string}
-		 */
-		playIcon() {
-			// #ifdef MP-WEIXIN
-			return wechatChannelConfig.icon.playIcon
-			// #endif
-			return ''
-		},
-		/**
-		 * 计算视频封面类名
-		 * 根据环境和宽高比生成适当的 CSS 类
-		 * @returns {Array}
-		 */
-		videoCoverClass() {
-			const classes = [];
-			// #ifdef MP-WEIXIN
-			classes.push('mp-weixin');
-			// #endif
-			// #ifndef MP-WEIXIN
-			classes.push('h5');
-			// #endif
-			classes.push(`ratio-${this.aspectRatio.replace(':', '-')}`);
-			return classes;
 		}
 	},
 	methods: {
@@ -202,31 +155,6 @@ export default {
 <style scoped lang="scss">
 @import './css/common-channel.scss';
 
-/* 微信小程序环境样式 - 3:4 比例 */
-.video-cover-wrap.mp-weixin.ratio-3-4 {
-	height: 400rpx;
-	position: relative;
-}
-
-/* 微信小程序环境样式 - 16:9 比例 */
-.video-cover-wrap.mp-weixin.ratio-16-9 {
-	height: 300rpx;
-	position: relative;
-}
-
-/* H5 环境样式 - 3:4 比例 */
-.video-cover-wrap.h5.ratio-3-4 {
-	height: 0;
-	padding-top: 133.33%;
-}
-
-/* H5 环境样式 - 16:9 比例 */
-.video-cover-wrap.h5.ratio-16-9 {
-	height: 0;
-	padding-top: 56.25%;
-}
-
-
 /**
  * 视频卡片容器样式
  * 包含卡片基础样式、悬停效果和列表模式样式
@@ -503,7 +431,6 @@ export default {
 
 /**
  * 纯 CSS 播放按钮图标
- * 当没有 playIcon 时使用
  */
 .play-icon-css {
 	width: 0;
diff --git a/components-diy/js/wechat-channel.js b/components-diy/js/wechat-channel.js
index 8dd75d1..30457ed 100644
--- a/components-diy/js/wechat-channel.js
+++ b/components-diy/js/wechat-channel.js
@@ -6,7 +6,6 @@ export const wechatChannelConfig = {
 		smallSize: 60, // 小图标尺寸（rpx）
 		channelArrowSize: 24, // 频道箭头图标尺寸（rpx）
 		channelArrow: 'addon/personnel/shop/view/enterprise/arrow.png', // 频道箭头图标路径
-		playIcon: 'addon/personnel/shop/view/enterprise/play.png', // 播放按钮图标路径
 	},
 
 
@@ -122,13 +121,16 @@ export const wechatChannelUtil = {
 				// 数据校验
 				this.validateVideoData(item);
 			} catch (err) {
+				this.handleError(err, item);
 				reject(err);
 				return;
 			}
 
 			// 检查微信环境
 			if (typeof wx === 'undefined') {
-				reject(new Error(wechatChannelConfig.error.notWechat));
+				const err = new Error(wechatChannelConfig.error.notWechat);
+				this.handleError(err, item);
+				reject(err);				
 				return;
 			}
 
@@ -136,7 +138,9 @@ export const wechatChannelUtil = {
 			const systemInfo = wx.getSystemInfoSync();
 			const SDKVersion = systemInfo.SDKVersion;
 			if (this.versionCompare(SDKVersion, wechatChannelConfig.wechat.minSdkVersion) < 0) {
-				reject(new Error(wechatChannelConfig.error.lowVersion));
+				const err = new Error(wechatChannelConfig.error.lowVersion);
+				this.handleError(err, item);
+				reject(err);
 				return;
 			}
 
@@ -155,7 +159,9 @@ export const wechatChannelUtil = {
 					}
 				});
 			} else {
-				reject(new Error(wechatChannelConfig.error.notSupported));
+				const err = new Error(wechatChannelConfig.error.notSupported);
+				this.handleError(err, item);
+				reject(err);
 			}
 		});
 	},
@@ -163,7 +169,7 @@ export const wechatChannelUtil = {
 	// 统一错误处理
 	handleError(err, item) {
 		console.error('微信视频号错误:', err);
-		const { errMsg = '微信视频播放失败', errCode = -1 } = err;
+		const { message = '', errMsg = '微信视频播放失败!', errCode = -1 } = err;
 
 		// 错误码5: 表示用户点击了取消. openChannelsActivity:fail cancel
 		if ([5].includes(errCode)) {
@@ -172,7 +178,7 @@ export const wechatChannelUtil = {
 
 		const showErrorToast = (otherMsgs = []) => {
 			uni.showToast({
-				title: [errMsg, ...otherMsgs].join('\n'),
+				title: [errMsg, message,...otherMsgs].join('\n'),
 				icon: 'none',
 				duration: 2000
 			});
diff --git a/pages_tool/contact/contact.vue b/pages_tool/contact/contact.vue
index 4a422f3..19c539d 100644
--- a/pages_tool/contact/contact.vue
+++ b/pages_tool/contact/contact.vue
@@ -864,7 +864,7 @@ image {
 }
 
 /deep/ .channel-list {
-    padding: 0rpx;
+    padding: 0rpx !important;
 }
 
 /deep/ .mescroll-totop {
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
index 699aa63..6245625 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
@@ -13,7 +13,7 @@
 		</view>
 		<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
 		<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
-			:style="fixNvueBug">
+			:style="[fixNvueBug]">
 			<view class="uni-title">
 				<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
 			</view>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
index e844331..53cd13e 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
@@ -28,7 +28,7 @@
 
 		<view v-show="popup" class="uni-date-mask" @click="close"></view>
 		<view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
-			<view v-if="!isRange" class="uni-date-single--x" :style="popover">
+			<view v-if="!isRange" class="uni-date-single--x" :style="[popover]">
 				<view class="uni-popper__arrow"></view>
 				<view v-if="hasTime" class="uni-date-changed popup-x-header">
 					<input class="uni-date__input t-c" type="text" v-model="tempSingleDate"
@@ -49,7 +49,7 @@
 				<view class="uni-date-popper__arrow"></view>
 			</view>
 
-			<view v-else class="uni-date-range--x" :style="popover">
+			<view v-else class="uni-date-range--x" :style="[popover]">
 				<view class="uni-popper__arrow"></view>
 				<view v-if="hasTime" class="popup-x-header uni-date-changed">
 					<view class="popup-x-header--datetime">
diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
index f4fa592..7917cf3 100644
--- a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
+++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
@@ -1,5 +1,5 @@
 <template>
-    <view v-if="showPopup" class="uni-popup" :class="customClass" :style="{'top': top}">
+    <view v-if="showPopup" class="uni-popup" :class="customClass" :style="[{'top': top}]">
         <view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" ></view>
         <view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup safe-area" @click="close(true)" v-if="isIphoneX">
             <view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear">