From 95f03af60ec10b0e334d82115c4e0a4938158bf7 Mon Sep 17 00:00:00 2001
From: hajimi <phperbylyh@163.com>
Date: Sun, 2 Aug 2026 17:04:11 +0800
Subject: [PATCH] style: compact match center and enable league icons

---
 admin/src/views/match/league/index.vue        |   2 +-
 .../components/MatchCenterScheduleCard.vue    | 104 +++++++++---------
 .../components/MatchCenterTabsPanel.vue       |  28 ++---
 3 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/admin/src/views/match/league/index.vue b/admin/src/views/match/league/index.vue
index badc12a..bba68e6 100644
--- a/admin/src/views/match/league/index.vue
+++ b/admin/src/views/match/league/index.vue
@@ -67,7 +67,7 @@
                     <el-input v-model="editData.label"
                         :placeholder="editData.type === 'sport' ? '请输入体育类型名称' : '请输入联赛名称'" />
                 </el-form-item>
-                <el-form-item v-if="editData.type === 'sport'" label="图标">
+                <el-form-item label="图标">
                     <material-picker v-model="editData.icon" :limit="1" />
                 </el-form-item>
                 <el-form-item label="排序">
diff --git a/uniapp/src/packages_match/components/MatchCenterScheduleCard.vue b/uniapp/src/packages_match/components/MatchCenterScheduleCard.vue
index 2af1507..febb13f 100644
--- a/uniapp/src/packages_match/components/MatchCenterScheduleCard.vue
+++ b/uniapp/src/packages_match/components/MatchCenterScheduleCard.vue
@@ -140,9 +140,9 @@ const handlePrimaryAction = () => {
 
 <style lang="scss" scoped>
 .center-match-card {
-    padding: 22rpx 24rpx 20rpx;
+    padding: 16rpx 18rpx 14rpx;
     border: 1rpx solid #e7eaf0;
-    border-radius: 24rpx;
+    border-radius: 18rpx;
     background: #fff;
     box-shadow: 0 10rpx 28rpx rgba(34, 48, 86, 0.07);
 
@@ -159,33 +159,33 @@ const handlePrimaryAction = () => {
     &__head {
         min-width: 0;
         justify-content: space-between;
-        gap: 16rpx;
+        gap: 10rpx;
     }
 
     &__league {
         min-width: 0;
         flex: 1;
         color: #202534;
-        font-size: 25rpx;
+        font-size: 22rpx;
         font-weight: 600;
         white-space: nowrap;
         overflow: hidden;
     }
 
     &__league-icon {
-        width: 34rpx;
-        height: 34rpx;
-        margin-right: 10rpx;
+        width: 28rpx;
+        height: 28rpx;
+        margin-right: 8rpx;
         flex-shrink: 0;
     }
 
     &__league-dot {
-        width: 12rpx;
-        height: 12rpx;
-        margin-right: 12rpx;
+        width: 10rpx;
+        height: 10rpx;
+        margin-right: 9rpx;
         border-radius: 50%;
         background: #156bf6;
-        box-shadow: 0 0 0 6rpx #eaf2ff;
+        box-shadow: 0 0 0 5rpx #eaf2ff;
         flex-shrink: 0;
     }
 
@@ -198,53 +198,53 @@ const handlePrimaryAction = () => {
 
     &__date {
         color: #8b92a0;
-        font-size: 22rpx;
+        font-size: 20rpx;
         flex-shrink: 0;
     }
 
     &__live-tag {
-        height: 38rpx;
-        padding: 0 14rpx;
-        gap: 8rpx;
-        border-radius: 10rpx;
+        height: 32rpx;
+        padding: 0 10rpx;
+        gap: 6rpx;
+        border-radius: 8rpx;
         background: #fff0f0;
         color: #f04444;
-        font-size: 21rpx;
+        font-size: 19rpx;
         font-weight: 700;
         flex-shrink: 0;
     }
 
     &__live-bars {
-        height: 20rpx;
-        gap: 4rpx;
+        height: 16rpx;
+        gap: 3rpx;
         align-items: flex-end;
 
         view {
-            width: 4rpx;
+            width: 3rpx;
             border-radius: 4rpx;
             background: #f04444;
 
             &:nth-child(1) {
-                height: 10rpx;
+                height: 8rpx;
             }
 
             &:nth-child(2) {
-                height: 20rpx;
+                height: 16rpx;
             }
 
             &:nth-child(3) {
-                height: 15rpx;
+                height: 12rpx;
             }
         }
     }
 
     &__body {
         display: grid;
-        grid-template-columns: minmax(0, 1fr) 170rpx minmax(0, 1fr);
+        grid-template-columns: minmax(0, 1fr) 144rpx minmax(0, 1fr);
         align-items: center;
-        gap: 12rpx;
-        min-height: 190rpx;
-        padding: 18rpx 8rpx 12rpx;
+        gap: 8rpx;
+        min-height: 154rpx;
+        padding: 14rpx 4rpx 10rpx;
     }
 
     &__team,
@@ -256,8 +256,8 @@ const handlePrimaryAction = () => {
     }
 
     &__team-logo {
-        width: 86rpx;
-        height: 86rpx;
+        width: 72rpx;
+        height: 72rpx;
         flex-shrink: 0;
 
         &--fallback {
@@ -267,16 +267,16 @@ const handlePrimaryAction = () => {
             justify-content: center;
             background: linear-gradient(145deg, #eaf2ff 0%, #d9e7ff 100%);
             color: #176cf6;
-            font-size: 32rpx;
+            font-size: 28rpx;
             font-weight: 800;
         }
     }
 
     &__team-name {
         width: 100%;
-        margin-top: 12rpx;
+        margin-top: 8rpx;
         color: #171b26;
-        font-size: 28rpx;
+        font-size: 24rpx;
         font-weight: 700;
         line-height: 1.3;
         text-align: center;
@@ -291,7 +291,7 @@ const handlePrimaryAction = () => {
 
     &__score {
         color: #111522;
-        font-size: 48rpx;
+        font-size: 40rpx;
         font-weight: 800;
         letter-spacing: 3rpx;
         line-height: 1;
@@ -299,9 +299,9 @@ const handlePrimaryAction = () => {
 
     &__minute,
     &__day {
-        margin-top: 14rpx;
+        margin-top: 10rpx;
         color: #4e5667;
-        font-size: 23rpx;
+        font-size: 21rpx;
 
         &--live {
             color: #10a83d;
@@ -310,31 +310,31 @@ const handlePrimaryAction = () => {
     }
 
     &__status-text {
-        margin-top: 5rpx;
+        margin-top: 4rpx;
         color: #10a83d;
-        font-size: 22rpx;
+        font-size: 20rpx;
     }
 
     &__time {
-        margin-top: 6rpx;
+        margin-top: 4rpx;
         color: #116cf7;
-        font-size: 38rpx;
+        font-size: 32rpx;
         font-weight: 800;
         line-height: 1.1;
     }
 
     &__actions {
-        gap: 26rpx;
+        gap: 14rpx;
     }
 
     &__button {
         flex: 1;
         min-width: 0;
-        height: 68rpx;
+        height: 54rpx;
         justify-content: center;
-        gap: 12rpx;
-        border-radius: 14rpx;
-        font-size: 27rpx;
+        gap: 8rpx;
+        border-radius: 12rpx;
+        font-size: 23rpx;
         font-weight: 700;
         box-sizing: border-box;
 
@@ -354,19 +354,19 @@ const handlePrimaryAction = () => {
     &__play-icon {
         width: 0;
         height: 0;
-        border-top: 9rpx solid transparent;
-        border-bottom: 9rpx solid transparent;
-        border-left: 14rpx solid #fff;
+        border-top: 8rpx solid transparent;
+        border-bottom: 8rpx solid transparent;
+        border-left: 12rpx solid #fff;
     }
 
     &__ai-mark {
-        height: 34rpx;
-        min-width: 34rpx;
-        padding: 0 6rpx;
+        height: 30rpx;
+        min-width: 30rpx;
+        padding: 0 5rpx;
         border-radius: 999rpx;
         background: rgba(255, 255, 255, 0.22);
-        font-size: 18rpx;
-        line-height: 34rpx;
+        font-size: 16rpx;
+        line-height: 30rpx;
         text-align: center;
     }
 
diff --git a/uniapp/src/packages_match/components/MatchCenterTabsPanel.vue b/uniapp/src/packages_match/components/MatchCenterTabsPanel.vue
index 952fee1..1017ab6 100644
--- a/uniapp/src/packages_match/components/MatchCenterTabsPanel.vue
+++ b/uniapp/src/packages_match/components/MatchCenterTabsPanel.vue
@@ -1024,19 +1024,19 @@ onMounted(() => {
 }
 
 .match-group {
-    padding-top: 14rpx;
+    padding-top: 8rpx;
 
     &__header {
         display: flex;
         align-items: center;
-        padding: 14rpx 34rpx 16rpx;
-        gap: 10rpx;
+        padding: 10rpx 24rpx;
+        gap: 8rpx;
         background: #f7f8fb;
     }
 
     &__dot {
-        width: 16rpx;
-        height: 16rpx;
+        width: 14rpx;
+        height: 14rpx;
         border-radius: 50%;
 
         &--live {
@@ -1053,13 +1053,13 @@ onMounted(() => {
     }
 
     &__title {
-        font-size: 31rpx;
+        font-size: 28rpx;
         font-weight: 800;
         color: #222735;
     }
 
     &__count {
-        font-size: 23rpx;
+        font-size: 21rpx;
         color: #7f8592;
     }
 
@@ -1067,14 +1067,14 @@ onMounted(() => {
         margin-left: auto;
         display: flex;
         align-items: center;
-        gap: 10rpx;
+        gap: 6rpx;
         color: #747b88;
-        font-size: 23rpx;
+        font-size: 21rpx;
     }
 
     &__arrow {
         color: #737b89;
-        font-size: 42rpx;
+        font-size: 34rpx;
         font-weight: 300;
         line-height: 1;
         transition: transform 0.25s ease;
@@ -1087,23 +1087,23 @@ onMounted(() => {
 
 .match-card-wrap {
     position: relative;
-    margin: 0 34rpx 22rpx;
+    margin: 0 24rpx 14rpx;
 }
 
 .match-content__bottom-space {
-    height: calc(120rpx + env(safe-area-inset-bottom));
+    height: calc(100rpx + env(safe-area-inset-bottom));
 }
 
 .content-loading,
 .content-empty,
 .content-nomore {
-    padding: 70rpx 0;
+    padding: 50rpx 0;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10rpx;
     color: #8b93a7;
-    font-size: 24rpx;
+    font-size: 22rpx;
 }
 
 .content-loading {