From 0c83611409654cfc53c64345ba60b7e1e5fcc5b7 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期一, 01 九月 2025 14:27:22 +0800
Subject: [PATCH] 调整弹窗样式
---
pages/ActivityPopup/ActivityPopup.vue | 125 ++++++++++++++++++++++++++++++++++++-----
1 files changed, 110 insertions(+), 15 deletions(-)
diff --git a/pages/ActivityPopup/ActivityPopup.vue b/pages/ActivityPopup/ActivityPopup.vue
index 88ccd26..04a3f1c 100644
--- a/pages/ActivityPopup/ActivityPopup.vue
+++ b/pages/ActivityPopup/ActivityPopup.vue
@@ -14,15 +14,37 @@
</view>
<!-- 娲诲姩鍥剧墖 -->
- <view class="activity-img">
- <image :src="activityImage" mode="widthFix" class="popup-img"></image>
+ <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>
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
+ <!-- 娲诲姩鏍囬锛堝浐瀹氭樉绀猴級 -->
+ <view class="activity-title-fixed">
<h3 class="activity-title">{{ activityTitle }}</h3>
- <p class="activity-desc">{{ activityDesc }}</p>
+ </view>
+
+ <!-- 鍙粴鍔ㄧ殑娲诲姩鎻忚堪 -->
+ <scroll-view
+ scroll-y="true"
+ class="activity-content-scroll"
+ :show-scrollbar="false"
+ :enhanced="true">
+ <view class="activity-content">
+ <p class="activity-desc">{{ activityDesc }}</p>
+ </view>
+
+ </scroll-view>
+
+ <!-- 鍥哄畾搴曢儴锛氬�掕鏃跺拰鍙備笌鎸夐挳 -->
+ <view class="activity-bottom">
<!-- 鍊掕鏃讹紙濡傛灉闇�瑕侊級 -->
<view class="countdown" v-if="showCountdown">
<text class="countdown-text">娲诲姩鍓╀綑鏃堕棿锛�</text>
@@ -100,7 +122,12 @@
hours: '00',
minutes: '00',
seconds: '00',
- countdownTimer: null
+ countdownTimer: null,
+ // 鍥剧墖鐩稿叧鏁版嵁
+ imageWidth: 600, // 鍥哄畾瀹藉害锛坮px锛�
+ imageHeight: 300, // 璁＄畻寰楀嚭鐨勯珮搴︼紙rpx锛�
+ originalImageWidth: 0, // 鍘熷浘瀹藉害
+ originalImageHeight: 0 // 鍘熷浘楂樺害
};
},
watch: {
@@ -120,6 +147,43 @@
},
methods: {
+ // 鍥剧墖鍔犺浇瀹屾垚浜嬩欢
+ onImageLoad(e) {
+ console.log('鍥剧墖鍔犺浇瀹屾垚', e.detail);
+
+ // 鑾峰彇鍥剧墖鍘熷灏哄
+ this.originalImageWidth = e.detail.width;
+ this.originalImageHeight = e.detail.height;
+
+ // 璁＄畻绛夋瘮渚嬬缉鏀惧悗鐨勯珮搴�
+ this.calculateImageSize();
+ },
+
+ // 鍥剧墖鍔犺浇澶辫触浜嬩欢
+ onImageError(e) {
+ console.error('鍥剧墖鍔犺浇澶辫触', e.detail);
+ // 璁剧疆榛樿灏哄
+ 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 maxHeight = 500; // 鏈�澶ч珮搴﹂檺鍒讹紙rpx锛�
+ if (this.imageHeight > maxHeight) {
+ this.imageHeight = maxHeight;
+ this.imageWidth = Math.round(maxHeight / ratio);
+ }
+
+ console.log(`鍥剧墖灏哄璁＄畻瀹屾垚: 鍘熷(${this.originalImageWidth}x${this.originalImageHeight}) -> 鏄剧ず(${this.imageWidth}x${this.imageHeight})`);
+ }
+ },
+
onpan(){
},
@@ -230,6 +294,7 @@
.popup-content {
width: 100%;
max-width: 600rpx;
+ max-height: 80vh; /* 闄愬埗鏈�澶ч珮搴︿负灞忓箷鐨�80% */
background-color: #ffffff;
border-radius: 24rpx;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
@@ -237,6 +302,8 @@
transform: translateY(50rpx) scale(0.9);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ display: flex;
+ flex-direction: column; /* 绔栧悜甯冨眬 */
}
.content-enter {
@@ -247,6 +314,32 @@
.content-leave {
transform: translateY(50rpx) scale(0.9);
opacity: 0;
+}
+
+/* 娲诲姩鏍囬鍥哄畾鍖哄煙 */
+.activity-title-fixed {
+ padding: 30rpx 30rpx 20rpx 30rpx;
+ background-color: #ffffff;
+ border-bottom: 1rpx solid #f5f5f5;
+}
+
+/* 娲诲姩鍐呭婊氬姩鍖哄煙 */
+.activity-content-scroll {
+ flex: 1; /* 鍗犳嵁鍓╀綑绌洪棿 */
+ min-height: 0; /* 閲嶈锛氱‘淇� flex 瀛愬厓绱犲彲浠ユ敹缂� */
+ max-height: 200rpx; /* 闄愬埗娲诲姩鍐呭鍖哄煙鐨勬渶澶ч珮搴� */
+}
+
+/* 娲诲姩鍐呭 */
+.activity-content {
+ padding: 30rpx 30rpx 20rpx 30rpx;
+}
+
+/* 鍥哄畾搴曢儴鍖哄煙 */
+.activity-bottom {
+ padding: 20rpx 30rpx 30rpx 30rpx;
+ background-color: #ffffff;
+ border-top: 1rpx solid #f5f5f5; /* 娣诲姞鍒嗗壊绾� */
}
/* 鍏抽棴鎸夐挳 */
@@ -268,37 +361,39 @@
.activity-img {
position: relative;
width: 100%; /* 瀹瑰櫒瀹藉害閾烘弧寮圭獥鍐呭鍖� */
+ display: flex;
+ justify-content: center;
+ align-items: center;
/* 鍙�夛細娣诲姞鑳屾櫙鑹诧紝閬垮厤鍥剧墖鍔犺浇鍓嶆樉绀虹┖鐧� */
background-color: #f5f5f5;
border-top-left-radius: 24rpx; /* 涓庡浘鐗囧渾瑙掍竴鑷达紝閬垮厤瀹瑰櫒闇茬櫧 */
border-top-right-radius: 24rpx;
+ overflow: hidden; /* 纭繚鍥剧墖涓嶄細瓒呭嚭瀹瑰櫒杈圭晫 */
}
.popup-img {
- width: 100%;
- /* 鏍稿績锛氱敤 max-height 闄愬埗鏈�澶ч珮搴︼紝涓嶉檺鍒� min-height锛堜繚鐣欐瘮渚嬶級 */
- max-height: 300rpx; /* 鍥剧墖鏈�澶ч珮搴︼紙瓒呰繃鍒欐寜姣斾緥缂╁皬锛屼繚璇佸畬鏁存樉绀猴級 */
+ display: block;
+ border-top-left-radius: 24rpx;
+ border-top-right-radius: 24rpx;
+ /* 鍥剧墖灏哄閫氳繃鍔ㄦ�佽绠楃殑style鎺у埗 */
}
/* 娲诲姩淇℃伅 */
-.activity-info {
- padding: 30rpx;
- text-align: center;
-}
-
.activity-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 20rpx;
line-height: 1.3;
+ text-align: center;
}
.activity-desc {
font-size: 26rpx;
color: #666666;
- margin-bottom: 30rpx;
line-height: 1.5;
+ text-align: left; /* 宸﹀榻� */
+ text-indent: 2em; /* 棣栬缂╄繘涓や釜瀛楃 */
}
/* 鍊掕鏃舵牱寮� */
--
Gitblit v1.8.0