Преглед изворни кода

style: adjust problem detail layout to full width, half split, beautify back button

yangyi пре 2 недеља
родитељ
комит
efe636c176
1 измењених фајлова са 6 додато и 5 уклоњено
  1. 6 5
      src/view/problem/ProblemDetailView.vue

+ 6 - 5
src/view/problem/ProblemDetailView.vue

@@ -130,7 +130,7 @@ onMounted(() => {
 <template>
   <div class="problem-detail-view">
     <div class="detail-header">
-      <el-button text @click="goBack">
+      <el-button type="primary" plain round @click="goBack">
         <el-icon><ArrowLeft /></el-icon>返回{{ contestId ? '比赛' : '列表' }}
       </el-button>
       <div class="title-row">
@@ -238,11 +238,13 @@ onMounted(() => {
 <style scoped>
 .problem-detail-view {
   padding: 20px;
-  max-width: 1400px;
   margin: 0 auto;
 }
 
 .detail-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
   margin-bottom: 16px;
 }
 
@@ -269,8 +271,8 @@ onMounted(() => {
 }
 
 .right-panel {
-  width: 44%;
-  min-width: 420px;
+  flex: 1;
+  min-width: 0;
 }
 
 .info-card,
@@ -374,7 +376,6 @@ onMounted(() => {
   }
   .right-panel {
     width: 100%;
-    min-width: 0;
   }
 }
 </style>