2

frontend/unpackage/dist/dev/mp-weixin/pages/report/index.wxss

@@ -25,101 +25,133 @@
 /* 透明度 */
 /* 文章场景相关 */
 .report {
-  padding: 20rpx;
-}
-.modes {
+  padding: 24rpx 20rpx 36rpx;
   display: flex;
-  gap: 12rpx;
-  margin-bottom: 14rpx;
+  flex-direction: column;
+  gap: 18rpx;
 }
-.mode-tab {
-  flex: 1;
-  text-align: center;
-  padding: 16rpx 0;
-  border-radius: 999rpx;
-  background: #f1f1f1;
-  color: #444;
-  border: 1rpx solid #e5e7eb;
-}
-.mode-tab.active {
-  background: #4C8DFF;
-  color: #fff;
-  border-color: #4C8DFF;
+.header {
+  font-size: 34rpx;
   font-weight: 700;
+  color: #1f2a44;
+  padding-left: 8rpx;
 }
 .toolbar {
   display: flex;
   align-items: center;
-  gap: 8rpx;
-  background: #ffffff;
-  padding: 14rpx 16rpx;
-  border-radius: 12rpx;
+  justify-content: center;
+  gap: 12rpx;
+  background: #f7f9fc;
+  border-radius: 16rpx;
+  padding: 18rpx;
 }
 .date {
-  padding: 10rpx 16rpx;
-  border: 1rpx solid #e5e7eb;
-  border-radius: 8rpx;
-  color: #111;
+  min-width: 200rpx;
+  padding: 12rpx 18rpx;
+  border-radius: 12rpx;
+  background: #fff;
+  border: 1rpx solid rgba(91, 107, 139, 0.16);
+  text-align: center;
+  color: #32445b;
 }
 .tabs {
   display: flex;
-  gap: 16rpx;
-  margin-top: 14rpx;
+  gap: 12rpx;
+  justify-content: center;
 }
 .tab {
-  padding: 12rpx 18rpx;
+  padding: 10rpx 20rpx;
   border-radius: 999rpx;
-  background: #f1f1f1;
-  color: #444;
+  background: #f0f4ff;
+  color: #5b6b8b;
+  transition: all 0.2s ease;
 }
 .tab.active {
-  background: #4C8DFF;
-  color: #fff;
+  background: rgba(76, 141, 255, 0.18);
+  color: #3467d6;
+  box-shadow: inset 0 0 0 2rpx rgba(76, 141, 255, 0.45);
 }
 .summary {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8rpx;
-  margin-top: 14rpx;
+  grid-template-columns: repeat(auto-fill, minmax(240rpx, 1fr));
+  gap: 12rpx;
 }
-.summary .item {
-  background: #ffffff;
-  border-radius: 12rpx;
-  padding: 16rpx;
+.summary-item {
+  background: #f7f9fc;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 10rpx;
 }
-.summary .label {
-  font-size: 22rpx;
-  color: #444;
+.summary-item .label {
+  font-size: 24rpx;
+  color: #6e7a96;
 }
-.summary .value {
-  display: block;
-  margin-top: 8rpx;
+.summary-item .value {
+  font-size: 32rpx;
   font-weight: 700;
-  color: #111;
+  color: #1f2a44;
 }
 .card {
-  margin-top: 16rpx;
-  background: #ffffff;
-  border-radius: 12rpx;
-  padding: 16rpx;
+  background: #fff;
+  border-radius: 18rpx;
+  padding: 20rpx;
+  box-shadow: 0 8rpx 20rpx rgba(31, 42, 68, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 14rpx;
 }
 .row-head {
   display: flex;
-  align-items: center;
-  gap: 12rpx;
+  justify-content: space-between;
+  align-items: flex-start;
 }
-.thumb {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 8rpx;
-  background: #f1f1f1;
+.row-title {
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
 }
 .title {
-  font-size: 28rpx;
+  font-size: 30rpx;
   font-weight: 700;
-  color: #111;
+  color: #1f2a44;
+}
+.subtitle {
+  font-size: 24rpx;
+  color: #6e7a96;
 }
 .row-body {
-  margin-top: 10rpx;
-  color: #444;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx 24rpx;
+}
+.metric {
+  display: flex;
+  gap: 8rpx;
+  align-items: center;
+  background: #f4f6fb;
+  border-radius: 12rpx;
+  padding: 10rpx 16rpx;
+}
+.metric-label {
+  font-size: 24rpx;
+  color: #6e7a96;
+}
+.metric-value {
+  font-size: 28rpx;
+  color: #1f2a44;
+  font-weight: 600;
+}
+.empty {
+  text-align: center;
+  padding: 80rpx 0;
+  color: #9aa4be;
+  font-size: 26rpx;
+}
+.loading {
+  text-align: center;
+  padding: 40rpx 0;
+  color: #5b6b8b;
+  font-size: 24rpx;
 }