From f438257c5ab266170ead5de47e966a72d67411e0 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期一, 01 九月 2025 14:42:59 +0800
Subject: [PATCH] 调整弹窗样式
---
pages/ActivityPopup/ActivityPopup.vue | 124 +++++++++++++++++++++++++++++------------
1 files changed, 88 insertions(+), 36 deletions(-)
diff --git a/pages/ActivityPopup/ActivityPopup.vue b/pages/ActivityPopup/ActivityPopup.vue
index 04a3f1c..96211e0 100644
--- a/pages/ActivityPopup/ActivityPopup.vue
+++ b/pages/ActivityPopup/ActivityPopup.vue
@@ -14,16 +14,22 @@
</view>
<!-- 娲诲姩鍥剧墖 -->
- <view class="activity-img" :style="{ height: imageHeight + 'rpx' }">
- <image
- :src="activityImage"
- mode="widthFix"
- class="popup-img"
- :style="{ width: imageWidth + 'rpx', height: imageHeight + 'rpx' }"
- @load="onImageLoad"
- @error="onImageError">
- </image>
- </view>
+ <scroll-view
+ scroll-y="true"
+ class="activity-img-scroll"
+ :show-scrollbar="false"
+ :enhanced="true">
+ <view class="activity-img">
+ <image
+ :src="activityImage"
+ mode="widthFix"
+ class="popup-img"
+ :style="{ width: '100%' }"
+ @load="onImageLoad"
+ @error="onImageError">
+ </image>
+ </view>
+ </scroll-view>
<!-- 娲诲姩鏍囬锛堝浐瀹氭樉绀猴級 -->
<view class="activity-title-fixed">
@@ -124,17 +130,26 @@
seconds: '00',
countdownTimer: null,
// 鍥剧墖鐩稿叧鏁版嵁
- imageWidth: 600, // 鍥哄畾瀹藉害锛坮px锛�
- imageHeight: 300, // 璁＄畻寰楀嚭鐨勯珮搴︼紙rpx锛�
- originalImageWidth: 0, // 鍘熷浘瀹藉害
- originalImageHeight: 0 // 鍘熷浘楂樺害
+ imageWidth: 600, // 鍔ㄦ�佽绠楃殑瀹藉害锛坮px锛�
+ imageHeight: 300, // 鍔ㄦ�佽绠楃殑楂樺害锛坮px锛�
+ originalImageWidth: 0, // 鍘熷浘瀹藉害锛坧x锛�
+ originalImageHeight: 0, // 鍘熷浘楂樺害锛坧x锛�
+ containerWidth: 600, // 寮圭獥瀹瑰櫒瀹藉害锛坮px锛�
+ maxImageHeight: 500 // 鍥剧墖鏈�澶ч珮搴﹂檺鍒讹紙rpx锛�
};
},
watch: {
show(newVal) {
console.log("寮圭獥鐩戝惉鍙樺寲",newVal)
- if (newVal && this.showCountdown) {
- this.startCountdown();
+ if (newVal) {
+ // 寮圭獥鏄剧ず鏃堕噸鏂拌幏鍙栧鍣ㄥ搴﹀苟璁＄畻鍥剧墖灏哄
+ this.$nextTick(() => {
+ this.getContainerWidth();
+ });
+
+ if (this.showCountdown) {
+ this.startCountdown();
+ }
} else if (!newVal && this.countdownTimer) {
clearInterval(this.countdownTimer);
this.countdownTimer = null;
@@ -144,9 +159,38 @@
mounted() {
console.log('缁勪欢宸叉寕杞斤紝姝ゆ椂鍙互璁块棶 props 鍜� DOM');
console.log('褰撳墠 show 鐘舵�侊細', this.show); // 鍙互鎵撳嵃 props 涓殑 show
-
+
+ // 鑾峰彇瀹瑰櫒瀹藉害
+ this.getContainerWidth();
},
methods: {
+ // 鑾峰彇瀹瑰櫒瀹藉害
+ getContainerWidth() {
+ this.$nextTick(() => {
+ // 鍒涘缓鏌ヨ瀵硅薄
+ const query = uni.createSelectorQuery().in(this);
+ query.select('.popup-content').boundingClientRect((data) => {
+ if (data && data.width) {
+ // 灏唒x杞崲涓簉px锛堣�冭檻璁惧鍍忕礌姣旓級
+ const systemInfo = uni.getSystemInfoSync();
+ const screenWidth = systemInfo.screenWidth;
+ const rpxRatio = 750 / screenWidth; // rpx涓巔x鐨勮浆鎹㈡瘮渚�
+ this.containerWidth = Math.round(data.width * rpxRatio);
+
+ console.log(`瀹瑰櫒瀹藉害鑾峰彇鎴愬姛: ${data.width}px -> ${this.containerWidth}rpx`);
+
+ // 濡傛灉鍥剧墖宸茬粡鍔犺浇锛岄噸鏂拌绠楀昂瀵�
+ if (this.originalImageWidth > 0 && this.originalImageHeight > 0) {
+ this.calculateImageSize();
+ }
+ } else {
+ console.warn('鏃犳硶鑾峰彇瀹瑰櫒瀹藉害锛屼娇鐢ㄩ粯璁ゅ��');
+ this.containerWidth = 600; // 榛樿瀹藉害
+ }
+ }).exec();
+ });
+ },
+
// 鍥剧墖鍔犺浇瀹屾垚浜嬩欢
onImageLoad(e) {
console.log('鍥剧墖鍔犺浇瀹屾垚', e.detail);
@@ -155,7 +199,7 @@
this.originalImageWidth = e.detail.width;
this.originalImageHeight = e.detail.height;
- // 璁＄畻绛夋瘮渚嬬缉鏀惧悗鐨勯珮搴�
+ // 璁＄畻绛夋瘮渚嬬缉鏀惧悗鐨勫昂瀵�
this.calculateImageSize();
},
@@ -163,24 +207,26 @@
onImageError(e) {
console.error('鍥剧墖鍔犺浇澶辫触', e.detail);
// 璁剧疆榛樿灏哄
+ this.imageWidth = this.containerWidth;
this.imageHeight = 300;
},
// 璁＄畻鍥剧墖绛夋瘮渚嬬缉鏀惧昂瀵�
calculateImageSize() {
if (this.originalImageWidth > 0 && this.originalImageHeight > 0) {
- // 鏍规嵁鍥哄畾瀹藉害璁＄畻绛夋瘮渚嬮珮搴�
- const ratio = this.originalImageHeight / this.originalImageWidth;
- this.imageHeight = Math.round(this.imageWidth * ratio);
+ // 璁＄畻鍥剧墖鐨勫楂樻瘮
+ const imageRatio = this.originalImageHeight / this.originalImageWidth;
- // 闄愬埗鏈�澶ч珮搴︼紝闃叉鍥剧墖杩囬珮
- const maxHeight = 500; // 鏈�澶ч珮搴﹂檺鍒讹紙rpx锛�
- if (this.imageHeight > maxHeight) {
- this.imageHeight = maxHeight;
- this.imageWidth = Math.round(maxHeight / ratio);
- }
+ // 鍥剧墖浣跨敤100%瀹藉害濉厖瀹瑰櫒锛寃idthFix妯″紡浼氳嚜鍔ㄨ绠楅珮搴�
+ this.imageWidth = this.containerWidth;
+ this.imageHeight = Math.round(this.imageWidth * imageRatio);
- console.log(`鍥剧墖灏哄璁＄畻瀹屾垚: 鍘熷(${this.originalImageWidth}x${this.originalImageHeight}) -> 鏄剧ず(${this.imageWidth}x${this.imageHeight})`);
+ console.log(`鍥剧墖灏哄璁＄畻瀹屾垚:`);
+ console.log(`- 鍘熷灏哄: ${this.originalImageWidth}px 脳 ${this.originalImageHeight}px`);
+ console.log(`- 璁＄畻灏哄: ${this.imageWidth}rpx 脳 ${this.imageHeight}rpx`);
+ console.log(`- 瀹瑰櫒瀹藉害: ${this.containerWidth}rpx`);
+ console.log(`- 瀹介珮姣�: ${imageRatio.toFixed(3)}`);
+ console.log(`- 瀹為檯鏄剧ず: 瀹藉害100%锛岄珮搴﹁嚜閫傚簲锛屾棤楂樺害闄愬埗`);
}
},
@@ -294,7 +340,7 @@
.popup-content {
width: 100%;
max-width: 600rpx;
- max-height: 80vh; /* 闄愬埗鏈�澶ч珮搴︿负灞忓箷鐨�80% */
+ max-height: 85vh; /* 鎻愰珮鏈�澶ч珮搴﹂檺鍒讹紝缁欏浘鐗囨洿澶氱┖闂� */
background-color: #ffffff;
border-radius: 24rpx;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
@@ -327,7 +373,7 @@
.activity-content-scroll {
flex: 1; /* 鍗犳嵁鍓╀綑绌洪棿 */
min-height: 0; /* 閲嶈锛氱‘淇� flex 瀛愬厓绱犲彲浠ユ敹缂� */
- max-height: 200rpx; /* 闄愬埗娲诲姩鍐呭鍖哄煙鐨勬渶澶ч珮搴� */
+ max-height: 150rpx; /* 閫傚綋鍑忓皯娲诲姩鍐呭鍖哄煙鐨勬渶澶ч珮搴︼紝缁欏浘鐗囨洿澶氱┖闂� */
}
/* 娲诲姩鍐呭 */
@@ -357,24 +403,30 @@
z-index: 10;
}
+/* 娲诲姩鍥剧墖婊氬姩鍖哄煙 */
+.activity-img-scroll {
+ max-height: 50vh; /* 闄愬埗鍥剧墖鍖哄煙鏈�澶ч珮搴︿负灞忓箷鐨�50% */
+ width: 100%;
+ border-top-left-radius: 24rpx;
+ border-top-right-radius: 24rpx;
+ overflow: hidden;
+}
+
/* 娲诲姩鍥剧墖 */
.activity-img {
position: relative;
width: 100%; /* 瀹瑰櫒瀹藉害閾烘弧寮圭獥鍐呭鍖� */
- display: flex;
- justify-content: center;
- align-items: center;
+ display: block; /* 鏀逛负block纭繚瀹屽叏濉厖瀹藉害 */
/* 鍙�夛細娣诲姞鑳屾櫙鑹诧紝閬垮厤鍥剧墖鍔犺浇鍓嶆樉绀虹┖鐧� */
background-color: #f5f5f5;
- border-top-left-radius: 24rpx; /* 涓庡浘鐗囧渾瑙掍竴鑷达紝閬垮厤瀹瑰櫒闇茬櫧 */
- border-top-right-radius: 24rpx;
- overflow: hidden; /* 纭繚鍥剧墖涓嶄細瓒呭嚭瀹瑰櫒杈圭晫 */
}
.popup-img {
display: block;
+ width: 100%; /* 纭繚鍥剧墖瀹藉害瀹屽叏濉厖瀹瑰櫒 */
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
+ /* 浣跨敤 widthFix 妯″紡锛岃鍥剧墖鏍规嵁璁惧畾鐨勫搴﹁嚜鍔ㄨ绠楅珮搴� */
/* 鍥剧墖灏哄閫氳繃鍔ㄦ�佽绠楃殑style鎺у埗 */
}
--
Gitblit v1.8.0