pk优化版

src/components/pk-mini/mine/PKRecord.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 我的PK记录 -->
   <div class="pk-record">
-    <el-splitter>
-      <el-splitter-panel>
+    <div class="pk-layout">
+      <div class="left-panel">
         <div class="demo-panel">
           <!-- 选项卡 -->
           <div class="tab-header">
@@ -62,10 +62,10 @@
 
           <div class="empty-tip" v-else>您还没有PK记录！</div>
         </div>
-      </el-splitter-panel>
+      </div>
 
       <!-- 右侧详情 -->
-      <el-splitter-panel :size="30" :resizable="false">
+      <div class="right-panel">
         <div class="detail-panel" v-if="selectedData">
           <!-- 双方头像 -->
           <div class="detail-avatars">
@@ -110,8 +110,8 @@
         <div class="empty-detail" v-else>
           <span>选择右侧的记录，可立即查看详细信息</span>
         </div>
-      </el-splitter-panel>
-    </el-splitter>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -232,6 +232,28 @@ onMounted(() => {
   height: 100%;
 }
 
+.pk-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.left-panel {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.right-panel {
+  width: 380px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+  border-left: 1px solid #03aba82f;
+}
+
 .demo-panel {
   width: 100%;
   height: 100%;
@@ -378,53 +400,54 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
-  border-left: 1px solid #03aba82f;
+  padding: 15px;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .detail-avatars {
   display: flex;
-  gap: 40px;
-  margin-bottom: 20px;
+  gap: 20px;
+  margin-bottom: 12px;
 }
 
 .detail-avatar {
-  width: 70px;
-  height: 70px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
   object-fit: cover;
 }
 
 .detail-total {
   width: 100%;
-  margin-bottom: 20px;
+  margin-bottom: 12px;
 }
 
 .total-card {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  padding: 15px;
+  padding: 10px;
   background: linear-gradient(90deg, #e4ffff, #fff, #e4ffff);
   border-radius: 30px;
 }
 
 .total-num {
-  font-size: 16px;
+  font-size: 13px;
   font-weight: bold;
   color: #333;
 }
 
 .total-icon {
-  width: 35px;
-  height: 28px;
+  width: 28px;
+  height: 22px;
 }
 
 .detail-rounds {
   flex: 1;
   width: 100%;
   display: flex;
-  gap: 15px;
+  gap: 10px;
   overflow: hidden;
 }
 
@@ -432,9 +455,9 @@ onMounted(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 15px;
-  border-radius: 16px;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 12px;
   overflow: auto;
 }
 
@@ -449,9 +472,9 @@ onMounted(() => {
 }
 
 .round-item {
-  padding: 12px 15px;
+  padding: 8px 10px;
   border-radius: 8px;
-  font-size: 16px;
+  font-size: 13px;
   font-weight: bold;
   color: #03aba8;
   text-align: center;