Initial commit

miniprogram/pages/feed/feed.wxss

@@ -0,0 +1,264 @@
+.feed-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #fff8f2 0%, #fff4fb 50%, #f5f0ff 100%);
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部栏 */
+.topbar {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 28rpx 12rpx;
+  gap: 16rpx;
+  flex-shrink: 0;
+}
+
+.topbar-logo {
+  font-size: 44rpx;
+  font-weight: 900;
+  color: #272235;
+  flex-shrink: 0;
+}
+
+.logo-accent { color: #ff4f91; }
+
+.topbar-tabs {
+  flex: 1;
+  display: flex;
+  gap: 8rpx;
+  justify-content: center;
+}
+
+.feed-tab {
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #9b8fa8;
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  transition: all 0.2s;
+}
+
+.feed-tab-active {
+  color: #ff4f91;
+  background: rgba(255, 79, 145, 0.10);
+  font-weight: 900;
+}
+
+.topbar-actions {
+  display: flex;
+  gap: 12rpx;
+  flex-shrink: 0;
+}
+
+.topbar-btn {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: 0 8rpx 18rpx rgba(78, 56, 96, 0.10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  position: relative;
+}
+
+.has-badge::after {
+  content: '';
+  position: absolute;
+  top: 6rpx;
+  right: 6rpx;
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  background: #ff4f91;
+  border: 2rpx solid #fff;
+}
+
+/* 故事圈 */
+.stories-scroll {
+  flex-shrink: 0;
+  white-space: nowrap;
+  padding: 16rpx 28rpx 24rpx;
+}
+
+.story {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10rpx;
+  margin-right: 24rpx;
+  white-space: normal;
+}
+
+.story-ring {
+  width: 112rpx;
+  height: 112rpx;
+  border-radius: 50%;
+  padding: 5rpx;
+  box-sizing: border-box;
+  background: conic-gradient(from 120deg, #ff4f91, #ff9f1c, #ffe15a, #67e8c9, #4d8dff, #8c5cff, #ff4f91);
+  box-shadow: 0 10rpx 18rpx rgba(96, 60, 115, 0.16);
+}
+
+.story-ring-seen {
+  background: #e8e4f0;
+}
+
+.story-ring-me {
+  background: linear-gradient(135deg, #ff4f91, #ff9f1c);
+}
+
+.story-inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4rpx solid rgba(255, 255, 255, 0.90);
+}
+
+.story-emoji {
+  font-size: 44rpx;
+  line-height: 1;
+}
+
+.story-name {
+  font-size: 22rpx;
+  font-weight: 700;
+  color: #6a6178;
+}
+
+/* 信息流 */
+.feed-scroll {
+  flex: 1;
+  padding-top: 8rpx;
+}
+
+/* 骨架屏 */
+.skeleton-wrap {
+  padding-top: 8rpx;
+}
+
+.skeleton-card {
+  margin: 0 28rpx 32rpx;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 48rpx;
+  overflow: hidden;
+  padding-bottom: 20rpx;
+}
+
+.skeleton-header {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 24rpx;
+}
+
+.skeleton-avatar {
+  width: 76rpx;
+  height: 76rpx;
+  border-radius: 28rpx;
+  flex-shrink: 0;
+}
+
+.skeleton-meta {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.skeleton-line {
+  height: 26rpx;
+  border-radius: 8rpx;
+}
+
+.skeleton-img {
+  width: 100%;
+  height: 360rpx;
+}
+
+.w100 { width: 100%; }
+.w80 { width: 80%; }
+.w60 { width: 60%; }
+.w40 { width: 40%; }
+
+.skeleton {
+  background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%);
+  background-size: 200% 100%;
+  animation: shine 1.4s infinite;
+}
+
+@keyframes shine {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* 加载更多 */
+.load-more {
+  display: flex;
+  justify-content: center;
+  gap: 12rpx;
+  padding: 32rpx;
+}
+
+.load-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: #ff4f91;
+  animation: bounce 1.2s infinite;
+}
+
+.load-dot-2 { animation-delay: 0.2s; }
+.load-dot-3 { animation-delay: 0.4s; }
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* 到底了 */
+.end-tip {
+  text-align: center;
+  font-size: 24rpx;
+  color: #c4b8d0;
+  padding: 32rpx;
+}
+
+/* 空态 */
+.empty-feed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120rpx 60rpx 40rpx;
+  gap: 16rpx;
+}
+
+.empty-emoji {
+  font-size: 80rpx;
+  line-height: 1;
+}
+
+.empty-title {
+  font-size: 34rpx;
+  font-weight: 900;
+  color: #272235;
+}
+
+.empty-desc {
+  font-size: 26rpx;
+  color: #9b8fa8;
+  text-align: center;
+  line-height: 1.6;
+}
+
+.empty-btn {
+  margin-top: 24rpx;
+  padding: 22rpx 60rpx;
+  font-size: 28rpx;
+  font-weight: 800;
+}