.post-page { min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #fff4fb 100%); display: flex; flex-direction: column; } /* 顶部 */ .post-header { display: flex; align-items: center; justify-content: space-between; padding: 16rpx 28rpx; border-bottom: 1rpx solid rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.60); flex-shrink: 0; } .cancel-btn { font-size: 28rpx; font-weight: 700; color: #9b8fa8; padding: 10rpx; } .header-title { font-size: 32rpx; font-weight: 900; color: #272235; } .submit-btn { background: linear-gradient(135deg, #ff4f91, #ff9f1c); color: #fff; border-radius: 999rpx; padding: 14rpx 34rpx; font-size: 26rpx; font-weight: 900; box-shadow: 0 10rpx 22rpx rgba(255, 79, 145, 0.28); } .submit-disabled { background: #e8e4f0; color: #9b8fa8; box-shadow: none; } /* 滚动区 */ .post-scroll { flex: 1; } .post-body { padding: 24rpx 28rpx; } /* 图片上传 */ .upload-section { margin-bottom: 28rpx; } .upload-placeholder { width: 100%; height: 320rpx; background: linear-gradient(135deg, #fff0a8, #ffd6e8 48%, #c9f7df); border: 3rpx dashed rgba(39, 34, 53, 0.18); border-radius: 48rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16rpx; box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.65), 0 16rpx 32rpx rgba(83, 62, 100, 0.09); } .upload-icon { font-size: 64rpx; } .upload-hint { font-size: 28rpx; font-weight: 800; color: #272235; } .upload-sub { font-size: 22rpx; color: #9b8fa8; } /* 图片网格 */ .image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12rpx; } .image-item { aspect-ratio: 1; border-radius: 20rpx; overflow: hidden; position: relative; } .img-preview { width: 100%; height: 100%; background: #f0eef5; } .img-remove { position: absolute; top: 6rpx; right: 6rpx; width: 44rpx; height: 44rpx; border-radius: 50%; background: rgba(39, 34, 53, 0.72); color: #fff; font-size: 28rpx; display: flex; align-items: center; justify-content: center; font-weight: 700; } .img-uploading { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; } .upload-spinner { width: 40rpx; height: 40rpx; border: 4rpx solid rgba(255, 79, 145, 0.2); border-top-color: #ff4f91; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .image-add { aspect-ratio: 1; border-radius: 20rpx; background: rgba(255, 255, 255, 0.72); border: 3rpx dashed rgba(39, 34, 53, 0.18); display: flex; align-items: center; justify-content: center; } .add-plus { font-size: 60rpx; color: #9b8fa8; font-weight: 200; } /* 文字输入 */ .content-input { width: 100%; min-height: 160rpx; background: rgba(255, 255, 255, 0.80); border: 1rpx solid rgba(255, 255, 255, 0.72); border-radius: 36rpx; padding: 24rpx 28rpx; font-size: 30rpx; color: #272235; font-family: "PingFang SC", sans-serif; line-height: 1.6; box-shadow: 0 10rpx 24rpx rgba(78, 56, 96, 0.07); margin-bottom: 8rpx; } .input-placeholder { color: #c4b8d0; } .word-count { text-align: right; font-size: 22rpx; color: #9b8fa8; margin-bottom: 28rpx; } /* 通用 section */ .section-title { font-size: 24rpx; font-weight: 900; color: #9b8fa8; letter-spacing: 0.5rpx; margin-bottom: 14rpx; text-transform: uppercase; } .tag-row { display: flex; gap: 14rpx; flex-wrap: wrap; margin-bottom: 28rpx; align-items: center; } .tag-pill { display: flex; align-items: center; gap: 10rpx; background: rgba(255, 255, 255, 0.78); border: 1rpx solid rgba(255, 255, 255, 0.72); border-radius: 999rpx; padding: 14rpx 24rpx; font-size: 26rpx; font-weight: 800; color: #6a6178; } .tag-selected { background: #ffe5f0; border-color: #ffb6d0; color: #a91d5b; } .tag-remove { width: 44rpx; height: 44rpx; border-radius: 50%; background: #ffe5f0; color: #ff4f91; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 700; } /* 话题 */ .hashtag-wrap { margin-bottom: 28rpx; } .hashtag-input-row { display: flex; gap: 14rpx; align-items: center; } .hashtag-input { flex: 1; height: 72rpx; background: rgba(255, 255, 255, 0.80); border: 1rpx solid rgba(255, 255, 255, 0.72); border-radius: 999rpx; padding: 0 24rpx; font-size: 26rpx; color: #272235; } .hashtag-add-btn { background: rgba(255, 255, 255, 0.80); border: 1rpx solid rgba(255, 255, 255, 0.72); border-radius: 999rpx; padding: 14rpx 28rpx; font-size: 26rpx; font-weight: 800; color: #272235; } .hashtag-chip { display: inline-flex; align-items: center; gap: 8rpx; font-size: 24rpx; font-weight: 800; color: #8b3cff; background: #f0e8ff; border-radius: 999rpx; padding: 8rpx 16rpx; } .chip-remove { font-size: 26rpx; color: #8b3cff; font-weight: 700; } .hot-tags { display: flex; flex-wrap: wrap; gap: 10rpx; align-items: center; margin-top: 14rpx; } .hot-tags-label { font-size: 22rpx; color: #9b8fa8; } .hot-tag { font-size: 22rpx; color: #9b8fa8; background: rgba(255, 255, 255, 0.72); border: 1rpx solid rgba(43, 37, 61, 0.10); border-radius: 999rpx; padding: 6rpx 16rpx; } /* 心情 */ .mood-row { display: flex; gap: 14rpx; flex-wrap: wrap; margin-bottom: 28rpx; } .mood-pill { background: rgba(255, 255, 255, 0.78); border: 1rpx solid rgba(255, 255, 255, 0.72); border-radius: 999rpx; padding: 14rpx 26rpx; font-size: 26rpx; font-weight: 800; color: #6a6178; } .mood-on { background: #fff0a8; border-color: #ffe15a; color: #6f4b00; }