diff --git a/components/DynamicIsland.vue b/components/DynamicIsland.vue index e10534c..d5f07d4 100644 --- a/components/DynamicIsland.vue +++ b/components/DynamicIsland.vue @@ -1,843 +1,931 @@ \ No newline at end of file +/* 灵动岛占位区域样式 - 始终存在但控制可见性 */ +.dynamic-island-placeholder { + width: 100%; + background: transparent; + position: relative; + opacity: 1; + transition: opacity 0.3s ease; + // padding: 24rpx 0; + margin-top: 24rpx; +} + +.dynamic-island-placeholder.visible { + opacity: 1; +} + +/* 当灵动岛不是固定状态时，确保它在占位符内正常显示 */ +.dynamic-island-placeholder .dynamic-island:not(.fixed) { + position: relative; + z-index: 100; +} + +.dynamic-island { + // margin: 24rpx auto 24rpx; + margin: 0 auto; + z-index: 100; + + background: linear-gradient(180deg, #fffdb7 0%, #97fffa 100%); + backdrop-filter: blur(20rpx); + -webkit-backdrop-filter: blur(20rpx); + border-radius: 40rpx; + 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; + + // 展开状态 + width: 710rpx; + height: 216rpx; + + // 紧凑状态 + &.compact { + width: 300rpx; + height: 80rpx; + border-radius: 40rpx; + + .expanded-content { + opacity: 0; + visibility: hidden; + transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; + } + } + + &:not(.compact) { + .compact-content { + opacity: 0; + visibility: hidden; + transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; + } + } + + // 固定定位状态 + &.fixed { + position: fixed; + left: 50%; + transform: translateX(-50%); + z-index: 998; + margin: 0; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + animation: slideInFromTop 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; + } +} + +.expanded-content { + display: flex; + flex-direction: column; + height: 100%; + padding: 24rpx 25rpx; + opacity: 1; + visibility: visible; + transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; +} + +/* 三栏布局样式 */ +.three-column-layout { + display: flex; + align-items: flex-end; + height: 100%; + width: 100%; +} + +/* 列分隔线 */ +.column-divider { + width: 2rpx; + height: 160rpx; + background: rgba(0, 0, 0, 0.1); + margin: 0rpx 25rpx; + flex-shrink: 0; +} + +/* 左侧区域 */ +.left-section { + color: #333; + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1; + height: 100%; +} + +.welcome-message { + display: flex; + flex-direction: column; +} + +.welcome-text { + font-size: 22rpx; + color: #000000; + line-height: 1.2; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.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; + font-weight: bold; +} + +/* 中间区域 */ +.middle-section { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.time-reward-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; +} + +.time-reward-title { + font-size: 20rpx; + 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; +} + +.time-reward-unit { + font-size: 24rpx; + color: #000000; + margin-left: 4rpx; +} + +.time-reward-label { + font-size: 22rpx; + color: #000000; +} + +/* 右侧区域 */ +.right-section { + display: flex; + align-items: flex-end; + height: 100%; +} + +.avatar-container { + position: relative; + margin-right: 10rpx; + width: 140rpx; + display: flex; + flex-direction: column; + align-items: center; +} + +.avatar { + width: 130rpx; + height: 130rpx; + border-radius: 50%; +} + +.profile-info { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} + +.profile-title { + font-size: 26rpx; + color: #000000; + margin-bottom: 4rpx; + font-weight: bold; +} + +.profile-name { + font-size: 26rpx; + color: #000000; + font-weight: bold; +} + +.platform-link { + cursor: pointer; +} + +.link-text { + font-size: 22rpx; + color: #000000; + text-decoration: underline; + font-weight: 500; +} + +/* 保留原有的底部区域样式用于timeShop模式 */ +.bottom-section { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1; + color: #000000; +} + +.stats-section { + display: flex; + gap: 32rpx; +} + +.stat-item { + display: flex; + flex-direction: column; + align-items: center; + font-size: 28rpx; + font-weight: bold; +} + +.stat-number { + font-size: 32rpx; + color: #000000; + font-weight: bold; + line-height: 1; + margin-bottom: 4rpx; +} + +.stat-label { + font-size: 28rpx; + color: #000000; + line-height: 1; + font-weight: bold; + margin-top: 20rpx; +} + +.divider { + width: 2rpx; + height: 60rpx; + background: rgba(255, 255, 255, 0.3); + margin: 0 24rpx; +} + +.action-section { + display: flex; + align-items: center; + flex: 1; + justify-content: space-between; +} + +.action-text { + font-size: 26rpx; + color: #ffffff; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200rpx; +} + +// 添加点击反馈动画 +.dynamic-island:active { + transform: scale(0.98); + + &.fixed { + transform: translateX(-50%) scale(0.98); + } +} + +// 从顶部滑入动画 +@keyframes slideInFromTop { + 0% { + transform: translateX(-50%) translateY(-100%); + opacity: 0; + } + + 100% { + transform: translateX(-50%) translateY(0); + opacity: 1; + } +} + +.compact-content { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; + padding: 0 24rpx; + opacity: 1; + visibility: visible; + transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; +} + +.compact-name { + font-size: 27rpx; + color: #333; + font-weight: bold; + flex: 1; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200rpx; +} + +.compact-avatar { + width: 48rpx; + height: 48rpx; + border-radius: 50%; + border: 2rpx solid rgba(0, 0, 0, 0.2); + flex-shrink: 0; +} + +// 动画定义 +@keyframes pulse { + 0% { + opacity: 1; + transform: scale(1); + } + + 50% { + opacity: 0.6; + transform: scale(1.1); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +// 响应式适配 +// @media (max-width: 750rpx) { +// .dynamic-island { +// &.is-expanded { +// width: 100vw; +// max-width: 750rpx; +// } + +// &.is-compact { +// width: 280rpx; +// } +// } +// } +.action-text-box { + color: #000000; + + .action-text-box-des { + font-size: 20rpx; + } + + .action-text-box-msg { + font-size: 24rpx; + display: flex; + align-items: center; + margin-top: 20rpx; + } + + .action-text-box-img { + width: 57rpx; + height: 46rpx; + margin-right: 10rpx; + } +} + +.ai-label { + border: 1rpx solid; + padding: 0rpx 15rpx; + height: 40rpx; + line-height: 38rpx; + font-weight: bold; + font-size: 20rpx; + border-radius: 4rpx; + border-color: #333333; + color: #333333; + display: inline; + margin-top: 10rpx; +} + +.ai-name { + font-size: 27rpx; + font-weight: bold; + color: #ffffff; + margin-left: 10rpx; +} + diff --git a/pages/index/iSoul.vue b/pages/index/iSoul.vue index 2b433e4..5301b4c 100644 --- a/pages/index/iSoul.vue +++ b/pages/index/iSoul.vue @@ -1,6 +1,6 @@