style

pages/index/index.vue

@@ -371,10 +371,16 @@ onShareTimeline(async () => {
 
 .topic-card {
   background-color: #ffffff;
-  border-radius: 32rpx;
+  border-radius: 40rpx; /* 增加圆角，更圆润 */
-  padding: 32rpx;
+  padding: 36rpx; /* 稍微增加内边距，让内容更呼吸 */
-  margin-bottom: 32rpx;
+  margin-bottom: 36rpx;
-  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.02);
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04); /* 更柔和、扩散的阴影 */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 增加过渡动画 */
+}
+
+.topic-card:active {
+  transform: scale(0.98); /* 点击时微缩放效果 */
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
 }
 
 .topic-header {
@@ -382,11 +388,12 @@ onShareTimeline(async () => {
 }
 
 .topic-title {
-  font-size: 36rpx;
+  font-size: 38rpx; /* 稍微调大标题 */
-  font-weight: bold;
+  font-weight: 800; /* 加粗标题 */
-  color: #222;
+  color: #1a1a1a;
   margin-bottom: 16rpx;
   display: block;
+  letter-spacing: 1rpx; /* 增加字间距 */
 }
 
 .topic-stats {
@@ -398,8 +405,16 @@ onShareTimeline(async () => {
   display: flex;
   align-items: center;
   font-size: 24rpx;
-  color: #666;
+  color: #888; /* 稍微调浅次要文本颜色 */
   margin-right: 32rpx;
+  background-color: #f8f9fa; /* 增加极浅的背景色块 */
+  padding: 6rpx 16rpx;
+  border-radius: 100rpx; /* 完全圆角的统计标签 */
+}
+
+.stat-item.heat {
+  color: #ff4d4f;
+  background-color: #fff1f0; /* 热度专属浅红背景 */
 }
 
 .stat-icon {
@@ -419,90 +434,113 @@ onShareTimeline(async () => {
 }
 
 .rank-list {
-  margin-bottom: 24rpx;
+  margin-bottom: 32rpx;
+  background-color: #fafbfc; /* 增加极浅的灰底色作为容器 */
+  border-radius: 32rpx;
+  padding: 16rpx 24rpx;
 }
 
 .rank-item {
   display: flex;
   align-items: center;
-  margin-bottom: 24rpx;
+  padding: 16rpx 0;
+  border-bottom: 2rpx dashed rgba(0, 0, 0, 0.03); /* 柔和的虚线分割 */
+}
+
+.rank-item:last-child {
+  border-bottom: none;
 }
 
 .rank-num {
-  width: 40rpx;
+  width: 44rpx;
   font-size: 32rpx;
-  font-weight: bold;
+  font-weight: 800;
   text-align: center;
   margin-right: 16rpx;
+  font-style: italic; /* 数字增加倾斜感，更动感 */
 }
 
 .rank-1 {
   color: #2953ff;
+  font-size: 36rpx; /* 第一名数字更大 */
 }
 
-.rank-2, .rank-3 {
+.rank-2 {
-  color: #333;
+  color: #ff8f00; /* 第二名橘色 */
+}
+
+.rank-3 {
+  color: #ffc107; /* 第三名黄色 */
 }
 
 .item-avatar {
-  width: 72rpx;
+  width: 76rpx;
-  height: 72rpx;
+  height: 76rpx;
   border-radius: 50%;
   margin-right: 24rpx;
   background-color: #f0f0f0;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06); /* 头像增加微阴影 */
+  border: 4rpx solid #fff; /* 头像增加白边 */
 }
 
 .item-name {
   flex: 1;
-  font-size: 30rpx;
+  font-size: 32rpx;
-  color: #333;
+  color: #2c2c2c;
+  font-weight: 500;
 }
 
 .item-score {
-  font-size: 34rpx;
+  font-size: 36rpx;
-  font-weight: bold;
+  font-weight: 800;
+  font-family: 'DIN Alternate', sans-serif; /* 推荐使用数字字体，如果没有则回退到 sans-serif */
 }
 
 .score-1 {
   color: #2953ff;
 }
 
-.score-2, .score-3 {
+.score-2 {
-  color: #333;
+  color: #ff8f00;
+}
+
+.score-3 {
+  color: #ffc107;
 }
 
 .ai-summary {
   display: flex;
   align-items: flex-start;
-  padding: 20rpx 24rpx;
+  padding: 24rpx 32rpx;
-  background-color: #ffffff;
+  background: linear-gradient(135deg, #f8f6ff 0%, #ffffff 100%); /* 增加极浅的渐变背景 */
-  border: 2rpx solid #e0d6ff;
+  border: 2rpx solid rgba(157, 91, 254, 0.15); /* 边框更加柔和透明 */
-  border-radius: 20rpx;
+  border-radius: 24rpx;
   margin-bottom: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(157, 91, 254, 0.04); /* 增加紫色的微光阴影 */
 }
 
 .ai-icon {
-  width: 32rpx;
+  width: 36rpx;
-  height: 32rpx;
+  height: 36rpx;
-  margin-right: 12rpx;
+  margin-right: 16rpx;
-  margin-top: 4rpx;
+  margin-top: 2rpx;
   flex-shrink: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234d44f1'%3E%3Cpath d='M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h5a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V5.73A2 2 0 0 1 10 4a2 2 0 0 1 2-2zm-3 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm6 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237B46F1'%3E%3Cpath d='M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h5a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V5.73A2 2 0 0 1 10 4a2 2 0 0 1 2-2zm-3 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm6 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E");
 }
 
 .summary-text {
   flex: 1;
-  font-size: 26rpx;
+  font-size: 28rpx;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 .summary-label {
-  color: #4d44f1;
+  color: #7b46f1; /* 柔和一点的紫色 */
-  font-weight: bold;
+  font-weight: 800;
 }
 
 .summary-content {
-  color: #555;
+  color: #4a4a4a;
 }
 
 .tag-list {