From 3008f0fcb87992077af811f9842793610fc52239 Mon Sep 17 00:00:00 2001 From: zuoxiao <zuoxiao> Date: 星期二, 29 四月 2025 16:07:00 +0800 Subject: [PATCH] 优化首页项目切换逻辑,添加确认弹窗以提升用户体验;更新样式以增强项目选择的可视化效果。 --- pages/home/home.wxss | 126 +++++++++++++++++++++++++++++------------- 1 files changed, 87 insertions(+), 39 deletions(-) diff --git a/pages/home/home.wxss b/pages/home/home.wxss index 286f2f7..2be6c16 100644 --- a/pages/home/home.wxss +++ b/pages/home/home.wxss @@ -38,6 +38,7 @@ align-items: left; justify-content: center; margin-left: 15rpx; + margin-bottom: 70rpx; } .head-button-wrapper { @@ -633,10 +634,7 @@ left: 0; right: 0; bottom: 0; - z-index: 9999; - display: flex; - align-items: center; - justify-content: center; + z-index: 999; } .project-modal-mask { @@ -645,12 +643,15 @@ left: 0; right: 0; bottom: 0; - background-color: rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0.5); } .project-modal-content { - position: relative; - width: 80%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 85%; max-width: 600rpx; background-color: #fff; border-radius: 16rpx; @@ -660,72 +661,67 @@ } .project-modal-header { - padding: 30rpx; + padding: 24rpx; text-align: center; - border-bottom: 1rpx solid #f0f0f0; -} - -.project-modal-title { - font-size: 36rpx; + font-size: 32rpx; font-weight: bold; - color: #333; + border-bottom: 1rpx solid #eee; } .project-modal-body { - padding: 30rpx; + padding: 0; + max-height: 60vh; } -.project-modal-tip { - display: block; - font-size: 28rpx; - color: #999; - margin-bottom: 30rpx; - text-align: center; +.project-scroll-view { + max-height: 55vh; /* 绋嶅井鍑忓皬楂樺害锛岀‘淇濆湪灏忓睆骞曚笂涔熻兘鐪嬪埌搴曢儴鎸夐挳 */ + height: auto; } .project-radio-group { display: flex; flex-direction: column; - gap: 20rpx; + width: 100%; } .project-radio { + padding: 24rpx; display: flex; align-items: center; - padding: 20rpx; - background-color: #f5f5f5; - border-radius: 8rpx; + border-bottom: 1rpx solid #f5f5f5; + width: 100%; + box-sizing: border-box; } -.project-radio-selected { - background-color: #e6f4ff; - border: 2rpx solid #1890FF; +.project-radio radio { + margin-right: 16rpx; } .project-radio text { - margin-left: 10rpx; - font-size: 32rpx; + font-size: 30rpx; + color: #333; +} + +.project-radio-selected { + background-color: #f0f9ff; } .project-modal-footer { - padding: 30rpx; - border-top: 1rpx solid #f0f0f0; + padding: 24rpx; + border-top: 1rpx solid #eee; } .project-modal-btn { - width: 100%; - height: 80rpx; - line-height: 80rpx; - text-align: center; background-color: #1890FF; - color: #fff; - font-size: 32rpx; + color: white; border-radius: 8rpx; + font-size: 28rpx; + padding: 16rpx 0; } .project-modal-btn[disabled] { background-color: #cccccc; - color: #ffffff; + color: #666666; } .info-img { @@ -757,4 +753,56 @@ font-size: 32rpx; color: #888; } + +.current-project { + display: flex; + align-items: center; + margin-left: 20rpx; +margin-top: 10rpx; + +} + +.current-project text { + color: #fff; + font-size: 32rpx; + margin-right: 10rpx; +} + +.switch-project { + display: flex; + align-items: center; + justify-content: center; + width: 40rpx; + height: 40rpx; + background-color: rgba(255, 255, 255, 0.2); + border-radius: 50%; + margin-left: 5rpx; +} + +.switch-icon { + width: 24rpx; + height: 24rpx; +} + +.avatar-project-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.current-project { + display: flex; + justify-content: center; + margin-bottom: 10rpx; +} + +.current-project text { + font-size: 28rpx; + color: #ffffff; + font-weight: bold; + background-color: rgba(255, 255, 255, 0.2); + border-radius: 15rpx; + padding: 6rpx 14rpx; +} \ No newline at end of file -- Gitblit v1.8.0