/* pages/albums/albums.wxss */ @import '../../styles/common.wxss'; page { background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%); height: 100vh; overflow: hidden; } scroll-view.page-bg { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .album-grid { display: flex; flex-wrap: wrap; padding: 16rpx 4rpx 300rpx; } .album-cell { width: calc(50% - 8rpx); margin: 0 4rpx 16rpx 4rpx; background: white; border-radius: 20rpx; overflow: hidden; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); position: relative; box-sizing: border-box; } .album-cover { width: 100%; height: 260rpx; background: #f0f0f0; } .album-info { padding: 20rpx 16rpx; padding-right: 60rpx; } .album-name { font-size: 28rpx; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .album-desc { font-size: 22rpx; color: var(--text-muted); margin-top: 4rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .album-count { font-size: 22rpx; color: var(--pink); font-weight: 500; margin-top: 6rpx; } /* 三个点菜单按钮 */ .album-more-btn { position: absolute; right: 12rpx; bottom: 12rpx; width: 56rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.85); border-radius: 24rpx; z-index: 10; transition: background 0.2s; } .album-more-btn:active { background: rgba(255,255,255,0.6); } .more-dots { font-size: 28rpx; font-weight: 700; color: #999; letter-spacing: 2rpx; line-height: 1; } /* 操作菜单弹窗 */ .action-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 32rpx 32rpx 0 0; padding: 16rpx 0; padding-bottom: calc(48rpx + constant(safe-area-inset-bottom)); padding-bottom: calc(48rpx + env(safe-area-inset-bottom)); z-index: 1000; animation: slideUp 0.25s ease; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .action-item { display: flex; align-items: center; padding: 28rpx 40rpx; font-size: 30rpx; color: #333; } .action-item .action-icon { width: 40rpx; height: 40rpx; margin-right: 20rpx; opacity: 0.7; } .action-item.danger { color: #ff4d4f; } .action-item.danger .action-icon { opacity: 1; } .action-cancel { margin: 12rpx 30rpx 0; padding: 24rpx; text-align: center; font-size: 30rpx; color: #999; background: #f5f5f5; border-radius: 20rpx; } @import '../../styles/design.wxss'; @import '../../styles/journal.wxss'; @import '../../styles/button-theme.wxss'; @import '../../styles/typography.wxss';