From 0d170b8380ed49e500d354310eb1714b607c3b92 Mon Sep 17 00:00:00 2001 From: "1054425342@qq.com" <1054425342@qq.com> Date: Fri, 22 Aug 2025 11:08:46 +0800 Subject: [PATCH] =?UTF-8?q?=E7=81=B5=E5=8A=A8=E5=B2=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.vue | 18 +- components/DynamicIsland.vue | 300 +++- pages/index/iSoul.vue | 2760 ++++++++++++++++++-------------- subPackages/orderQy/detail.vue | 5 +- 4 files changed, 1768 insertions(+), 1315 deletions(-) diff --git a/App.vue b/App.vue index 4d0e7cf..3127766 100644 --- a/App.vue +++ b/App.vue @@ -1,6 +1,5 @@ - @@ -344,7 +371,7 @@ export default { position: relative; opacity: 1; transition: opacity 0.3s ease; - padding:24rpx 0 + padding: 24rpx 0; } .dynamic-island-placeholder.visible { @@ -362,13 +389,12 @@ export default { margin: 0 auto; z-index: 100; - background: rgba(0, 0, 0, 0.75); + background: linear-gradient(180deg, #fffdb7 0%, #97fffa 100%); backdrop-filter: blur(20rpx); -webkit-backdrop-filter: blur(20rpx); - border: 1rpx solid rgba(255, 255, 255, 0.1); border-radius: 40rpx; - box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3), - 0 0 0 1rpx rgba(255, 255, 255, 0.05) inset; + box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), + 0 0 0 1rpx rgba(255, 255, 255, 0.2) inset; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; @@ -414,54 +440,182 @@ export default { display: flex; flex-direction: column; height: 100%; - padding: 24rpx 32rpx; + padding: 24rpx 20rpx; opacity: 1; visibility: visible; transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; } -.top-section { +/* 三栏布局样式 */ +.three-column-layout { display: flex; + align-items: flex-end; justify-content: space-between; - align-items: center; + height: 100%; + width: 100%; +} + +/* 列分隔线 */ +.column-divider { + width: 2rpx; + height: 60rpx; + background: rgba(0, 0, 0, 0.1); + margin: 35rpx 16rpx; + flex-shrink: 0; +} + +/* 左侧区域 */ +.left-section { + display: flex; + flex-direction: column; + align-items: flex-start; + color: #333; + width: 140rpx; +} + +.welcome-message { + display: flex; + flex-direction: column; margin-bottom: 16rpx; } .welcome-text { - font-size: 28rpx; - color: #ffffff; - font-weight: 500; + font-size: 24rpx; + color: #000000; + font-weight: bold; + line-height: 1.2; +} + +.welcome-subtitle { + font-size: 24rpx; + color: #000000; + margin-top: 4rpx; + font-weight: bold; +} + +.stats-info { + display: flex; + align-items: baseline; + margin-bottom: 8rpx; +} + +.stats-number { + font-size: 40rpx; + color: #333; + font-weight: bold; + line-height: 1; +} + +.stats-unit { + font-size: 24rpx; + color: #000000; + margin-left: 4rpx; +} + +.stats-label { + font-size: 22rpx; + color: #000000; +} + +/* 中间区域 */ +.middle-section { + display: flex; + justify-content: flex-start; + align-items: center; flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +} + +.time-reward-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + padding: 0 10rpx; + width: 160rpx; +} + +.time-reward-title { + font-size: 22rpx; + color: #000000; + font-weight: 500; + margin-bottom: 12rpx; +} + +.time-reward-stats { + display: flex; + align-items: baseline; + margin-bottom: 8rpx; +} + +.time-reward-number { + font-size: 40rpx; + color: #000000; font-weight: bold; + line-height: 1; } -.qr-code { - width: 32rpx; - height: 32rpx; +.time-reward-unit { + font-size: 24rpx; + color: #000000; + margin-left: 4rpx; } -.qr-icon { - width: 24rpx; - height: 24rpx; - background: rgba(255, 255, 255, 0.8); - border-radius: 4rpx; +.time-reward-label { + font-size: 22rpx; + color: #000000; +} + +/* 右侧区域 */ +.right-section { + display: flex; + align-items: flex-end; + width: 375rpx; +} + +.avatar-container { position: relative; + margin-right: 10rpx; + width: 140rpx; + height: 140rpx; +} - &::before { - content: ""; - position: absolute; - top: 2rpx; - left: 2rpx; - right: 2rpx; - bottom: 2rpx; - background: rgba(0, 0, 0, 0.6); - border-radius: 2rpx; - } +.avatar { + width: 140rpx; + height: 140rpx; + border-radius: 50%; } +.profile-info { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} + +.profile-title { + font-size: 24rpx; + color: #000000; + margin-bottom: 4rpx; + font-weight: bold; +} + +.profile-name { + font-size: 24rpx; + color: #000000; + font-weight: bold; +} + +.platform-link { + cursor: pointer; +} + +.link-text { + font-size: 22rpx; + color: #000000; + text-decoration: underline; +} + +/* 保留原有的底部区域样式用于timeShop模式 */ .bottom-section { display: flex; align-items: center; @@ -521,12 +675,6 @@ export default { max-width: 200rpx; } -.avatar { - width: 113rpx; - height: 113rpx; - border-radius: 50%; -} - // 添加点击反馈动画 .dynamic-island:active { transform: scale(0.98); @@ -561,7 +709,7 @@ export default { .compact-name { font-size: 27rpx; - color: #ffffff; + color: #333; font-weight: bold; flex: 1; text-align: left; @@ -575,7 +723,7 @@ export default { width: 48rpx; height: 48rpx; border-radius: 50%; - border: 2rpx solid rgba(255, 255, 255, 0.3); + border: 2rpx solid rgba(0, 0, 0, 0.2); flex-shrink: 0; } diff --git a/pages/index/iSoul.vue b/pages/index/iSoul.vue index f40d506..9c17299 100644 --- a/pages/index/iSoul.vue +++ b/pages/index/iSoul.vue @@ -1,88 +1,116 @@ \ No newline at end of file +view { + box-sizing: border-box; +} + +.profile-container { + background: white; + min-height: 100vh; + padding-bottom: 200rpx; + color: white; +} + +/* 状态栏占位 */ +.status-bar-placeholder { + height: var(--status-bar-height); + width: 100%; +} + +/* 顶部导航 */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + height: 48px; +} + +.back-btn, +.more-btn { + width: 60rpx; + height: 60rpx; + display: flex; + align-items: center; + justify-content: center; + font-size: 40rpx; + color: white; +} + +.dots { + font-size: 32rpx; + font-weight: bold; +} + +/* 用户信息区域 */ +.user-section { + display: flex; + align-items: center; + padding: 0 40rpx 30rpx; +} + +.user-avatar { + width: 120rpx; + height: 120rpx; + border-radius: 50%; + overflow: hidden; + margin-right: 30rpx; +} + +.avatar-img { + width: 100%; + height: 100%; +} + +.user-info { + flex: 1; +} + +.username { + font-size: 36rpx; + font-weight: bold; + color: white; + margin-bottom: 10rpx; +} + +.user-id { + font-size: 24rpx; + color: rgba(255, 255, 255, 0.8); + margin-bottom: 10rpx; +} + +.location { + display: flex; + align-items: center; + font-size: 24rpx; + color: rgba(255, 255, 255, 0.8); +} + +.location-icon, +.info-icon { + margin-right: 8rpx; +} + +/* 城市艺术漫游 */ +.city-art { + padding: 0 40rpx 20rpx; + display: flex; + align-items: center; + justify-content: space-between; +} + +.city-title { + display: flex; + align-items: center; + font-size: 28rpx; + color: rgba(255, 255, 255, 0.9); +} + +.pin-icon { + margin-right: 8rpx; +} + +.city-name { + font-size: 28rpx; + color: white; + font-weight: bold; +} + +.gender-icon { + width: 40rpx; + height: 40rpx; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 24rpx; +} + +/* 统计数据 */ +.stats-section { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 80rpx; + padding-bottom: 50rpx; + padding: 0 40rpx; +} + +.stats-left { + display: flex; + gap: 60rpx; +} + +.stat-item { + text-align: center; + min-width: 80rpx; +} + +.stat-number { + font-size: 32rpx; + font-weight: bold; + color: white; + margin-bottom: 8rpx; +} + +.stat-label { + font-size: 24rpx; + color: rgba(255, 255, 255, 0.8); +} + +/* 权益兑换入口 */ +.exchange-entry { + display: flex; + flex-direction: column; + align-items: center; + padding: 16rpx; + background: rgba(255, 255, 255, 0.1); + border-radius: 20rpx; + min-width: 120rpx; + transition: all 0.3s ease; + + &:active { + transform: scale(0.95); + background: rgba(255, 255, 255, 0.2); + } +} + +.exchange-icon { + font-size: 32rpx; + margin-bottom: 8rpx; +} + +.exchange-text { + font-size: 22rpx; + color: rgba(255, 255, 255, 0.9); + font-weight: 500; +} + +/* 操作按钮 */ +.action-buttons { + display: flex; + padding: 0 40rpx 40rpx; + gap: 20rpx; +} + +.follow-btn { + flex: 1; + background: #ff4757; + border-radius: 50rpx; + padding: 20rpx; + text-align: center; + color: white; + font-size: 28rpx; + font-weight: bold; +} + +.message-btn { + flex: 1; + background: rgba(255, 255, 255, 0.2); + border-radius: 50rpx; + padding: 20rpx; + text-align: center; + color: white; + font-size: 28rpx; + font-weight: bold; +} + +/* 待激活的Agent */ +.agent-section { + margin: 0 47rpx; + border-radius: 20rpx; + margin-bottom: 0rpx; + overflow: hidden; + display: flex; + align-items: center; + padding: 30rpx 0; +} + +.agent-header { + margin-right: 30rpx; + flex-shrink: 0; +} + +.agent-title { + font-size: 28rpx; + color: #000000; +} + +.agent-content { + flex: 1; +} + +.agent-scroll { + width: 430rpx; + white-space: nowrap; + /* 微信小程序隐藏横向滚动条 */ + overflow: hidden; + + /* Webkit浏览器 */ + &::-webkit-scrollbar { + display: none !important; + width: 0 !important; + height: 0 !important; + } + + /* Firefox */ + scrollbar-width: none; + /* IE和Edge */ + -ms-overflow-style: none; +} + +.agent-avatars { + display: inline-flex; + gap: 20rpx; +} + +.agent-avatar { + width: 104rpx; + height: 104rpx; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; +} + +.agent-img { + width: 100%; + height: 100%; +} + +/* 数字资产权益 */ +.digital-assets { + margin: 0 30rpx 30rpx; +} + +.asset-header { + margin-bottom: 20rpx; +} + +.asset-title { + font-size: 28rpx; + color: #000000; + font-weight: 500; +} + +.asset-scroll-container { +} + +.asset-scroll { + width: 100%; + white-space: nowrap; + overflow: hidden; + + /* 微信小程序隐藏横向滚动条 */ + &::-webkit-scrollbar { + display: none !important; + width: 0 !important; + height: 0 !important; + } + + /* Firefox */ + scrollbar-width: none; + /* IE和Edge */ + -ms-overflow-style: none; +} + +.asset-cards { + display: inline-flex; + gap: 20rpx; + padding: 30rpx 10rpx; +} + +.asset-card { + width: 500rpx; + border-radius: 20rpx; + overflow: hidden; + box-shadow: 0 15rpx 12rpx rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; + position: relative; + flex-shrink: 0; +} + +.asset-card:active { + transform: scale(0.98); + box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2); +} + +.asset-card-wrapper { + position: relative; + width: 100%; + height: 300rpx; + overflow: hidden; +} + +.asset-img { + width: 100%; + height: 100%; + transition: transform 0.3s ease; +} + +.asset-card:active .asset-img { + transform: scale(1.05); +} + +.asset-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); + padding: 40rpx 30rpx 30rpx; + color: white; + backdrop-filter: blur(10rpx); + border: 1rpx solid rgba(255, 255, 255, 0.1); +} + +.asset-badge { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + font-size: 20rpx; + padding: 6rpx 12rpx; + border-radius: 16rpx; + display: inline-block; + margin-bottom: 12rpx; + font-weight: 500; + box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3); +} + +.asset-name { + font-size: 28rpx; + font-weight: bold; + margin-bottom: 6rpx; + line-height: 1.3; +} + +.asset-desc { + font-size: 22rpx; + color: rgba(255, 255, 255, 0.8); + margin-bottom: 16rpx; + line-height: 1.4; +} + +.asset-action { + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(255, 255, 255, 0.1); + border-radius: 20rpx; + padding: 10rpx 16rpx; + backdrop-filter: blur(10rpx); + border: 1rpx solid rgba(255, 255, 255, 0.2); + white-space: nowrap; + min-width: 0; +} + +.action-text { + font-size: 24rpx; + font-weight: 500; + color: white; + flex-shrink: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.action-arrow { + font-size: 26rpx; + font-weight: bold; + color: white; + transition: transform 0.3s ease; + flex-shrink: 0; + margin-left: 8rpx; +} + +.asset-card:active .action-arrow { + transform: translateX(6rpx); +} + +/* 原来的图片风格 */ +.asset-card-old { + border-radius: 20rpx; + overflow: hidden; + margin-bottom: 20rpx; +} + +/* 底部操作按钮 */ +.asset-actions { + display: flex; + padding: 20rpx 0; + background: white; + border-radius: 20rpx; + font-size: 25rpx; +} + +.asset-action { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + padding: 0 10rpx; + font-size: 24rpx; + color: #666; + position: relative; +} + +.asset-action.active { + color: #ff4757; +} + +.action-icon { + width: 36rpx; + height: 36rpx; + border-radius: 50%; + margin-bottom: 12rpx; +} + +.action-icon.red { + background: #ff4757; +} + +.action-icon.gray { + background: #ccc; +} + +/* 有感商品 */ +.feeling-goods { + margin: 20rpx 30rpx 30rpx; +} + +.goods-card { + border-radius: 20rpx; + overflow: hidden; +} + +.goods-bg { + padding: 40rpx 30rpx 20rpx; + position: relative; +} + +.goods-title { + font-size: 32rpx; + color: white; + font-weight: bold; + margin-bottom: 10rpx; +} + +.goods-brand { + font-size: 36rpx; + color: white; + font-weight: bold; + margin-bottom: 5rpx; +} + +.goods-subtitle { + font-size: 24rpx; + color: rgba(255, 255, 255, 0.8); +} + +.goods-actions { + display: flex; + background: white; +} + +.goods-action { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + padding: 20rpx 10rpx; + font-size: 24rpx; + color: #666; +} + +.goods-action.active { + color: #ff4757; +} + +/* 数字资产纪念册 */ +.memorial-section { + margin: 0 47rpx; + margin-bottom: 30rpx; +} + +.memorial-divider { + display: flex; + align-items: center; + padding: 30rpx 0; + margin-bottom: 30rpx; +} + +.divider-line { + flex: 1; + height: 2rpx; + background: #e0e0e0; +} + +.divider-text { + padding: 0 30rpx; + font-size: 28rpx; + color: #000000; + font-weight: 500; + white-space: nowrap; +} + +.memorial-cards { + display: flex; + gap: 20rpx; +} + +/* 单条数据特殊展示样式 */ +.memorial-card-single { + width: 100%; + max-width: 100%; + margin: 0 auto; + border-radius: 20rpx; + overflow: hidden; + box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; + position: relative; +} + +.memorial-card-single:active { + transform: scale(0.98); + box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2); +} + +.single-card-wrapper { + position: relative; + width: 100%; + height: 400rpx; + overflow: hidden; +} + +.memorial-img-single { + width: 100%; + height: 100%; + transition: transform 0.3s ease; +} + +.memorial-card-single:active .memorial-img-single { + transform: scale(1.05); +} + +.single-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); + padding: 60rpx 30rpx 30rpx; + color: white; +} + +.single-badge { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + font-size: 22rpx; + padding: 8rpx 16rpx; + border-radius: 20rpx; + display: inline-block; + margin-bottom: 16rpx; + font-weight: 500; + box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3); +} + +.single-title { + font-size: 32rpx; + font-weight: bold; + margin-bottom: 8rpx; + line-height: 1.3; +} + +.single-desc { + font-size: 24rpx; + color: rgba(255, 255, 255, 0.8); + margin-bottom: 20rpx; + line-height: 1.4; +} + +.single-action { + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(255, 255, 255, 0.1); + border-radius: 25rpx; + padding: 12rpx 20rpx; + backdrop-filter: blur(10rpx); + border: 1rpx solid rgba(255, 255, 255, 0.2); +} + +.action-text { + font-size: 26rpx; + font-weight: 500; + color: white; +} + +.action-arrow { + font-size: 28rpx; + font-weight: bold; + color: white; + transition: transform 0.3s ease; +} + +.memorial-card-single:active .action-arrow { + transform: translateX(6rpx); +} + +.memorial-card { + flex: 1; + border-radius: 10rpx; + overflow: hidden; + background: white; +} + +.memorial-img { + width: 100%; + height: 425rpx; +} + +.memorial-info { + padding: 20rpx 10rpx; + display: flex; + justify-content: space-between; + align-items: center; +} + +.memorial-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 22rpx; + color: #000000; + flex: 1; +} + +.memorial-more { + font-size: 14rpx; + color: #999; +} + +/* 无数据时的空状态样式 */ +.memorial-empty { + display: flex; + justify-content: center; + align-items: center; + min-height: 280rpx; +} + +.empty-content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + color: #333333; +} + +.empty-icon { + font-size: 80rpx; + margin-bottom: 20rpx; + opacity: 0.6; +} + +.empty-title { + font-size: 32rpx; + color: white; + font-weight: 500; + margin-bottom: 10rpx; +} + +.empty-desc { + font-size: 26rpx; + margin-bottom: 8rpx; +} + +.empty-tip { + font-size: 24rpx; + line-height: 1.4; +} + +/* 底部菜单 */ +.bottom-menu { + padding: 40rpx 30rpx; + background: white; + margin: 0 30rpx; + border-radius: 20rpx; + margin-bottom: 30rpx; +} + +.menu-item { + padding: 30rpx 0; + border-bottom: 1rpx solid #f5f5f5; + font-size: 28rpx; + color: #333; +} + +.menu-item:last-child { + border-bottom: none; +} + +// 用户顶部背景区域 +.user-top { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + padding-bottom: 20rpx; +} + +.digital-img { + height: 265rpx; + width: 100%; + border-radius: 20rpx; +} + +/* 权益兑换弹窗 */ +.exchange-popup { + width: 600rpx; + background-color: #ffffff; + border-radius: 16rpx; + overflow: hidden; +} + +.popup-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 30rpx; + border-bottom: 1px solid #f0f0f0; +} + +.popup-title { + font-size: 32rpx; + font-weight: 600; + color: #333; +} + +.popup-close { + font-size: 40rpx; + color: #999; + padding: 0 10rpx; +} + +.popup-content { + padding: 40rpx 30rpx 30rpx; +} + +.input-section { + margin-bottom: 40rpx; +} + +.input-label { + display: block; + font-size: 28rpx; + color: #333; + margin-bottom: 20rpx; + font-weight: 500; +} + +.exchange-input { + width: 100%; + height: 88rpx; + border: 2rpx solid #e0e0e0; + border-radius: 12rpx; + padding: 0 20rpx; + font-size: 28rpx; + color: #333; + box-sizing: border-box; + + &:focus { + border-color: #667eea; + } +} + +.popup-actions { + display: flex; + gap: 20rpx; +} + +.cancel-btn, +.confirm-btn { + flex: 1; + height: 80rpx; + border-radius: 12rpx; + font-size: 28rpx; + font-weight: 600; + border: none; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + + &:active { + transform: scale(0.98); + } +} + +.cancel-btn { + background: #f5f5f5; + color: #666; +} + +.confirm-btn { + background: #667eea; + color: #ffffff; +} + diff --git a/subPackages/orderQy/detail.vue b/subPackages/orderQy/detail.vue index ac3bc63..c07521b 100644 --- a/subPackages/orderQy/detail.vue +++ b/subPackages/orderQy/detail.vue @@ -618,10 +618,7 @@ export default { // 查看数字资产 viewDigitalAsset(goods) { // 跳转到数字资产详情页面 - uni.showToast({ - title: "查看数字资产", - icon: "none", - }); + uni.navigateTo({ url: "/subPackages/memorialAlbum/detail?id=" + goods.childId, });