前端样式修改

src/views/stock/BreakNextPerformance.vue

@@ -35,7 +35,7 @@
           <div class="checkbox-group">
             <el-checkbox v-model="tOpenGainLt101"> T开盘小于1% </el-checkbox>
             <el-checkbox v-model="breakTimeBefore1100">
-              11点前炸板
+              10点前炸板
             </el-checkbox>
           </div>
         </el-form-item>
@@ -154,7 +154,7 @@
           </el-table-column>
           <el-table-column
             prop="break_time_before_1100"
-            label="11点前炸板"
+            label="10点前炸板"
             width="104"
             align="center"
             sortable

src/views/stock/SecondBoardCalendar.vue

@@ -399,18 +399,24 @@ const formatProfitFlag = (value) => {
 
 <style scoped>
 .second-calendar-page {
-  min-height: 100vh;
+  height: 100vh;
-  min-height: 100dvh;
+  height: 100dvh;
-  padding: 24px;
+  min-height: 0;
+  padding: 16px 20px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background: #f4f7f9;
 }
 
 .month-filter {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 18px;
+  min-height: 32px;
+  margin-bottom: 10px;
 }
 
 .month-picker {
@@ -418,18 +424,26 @@ const formatProfitFlag = (value) => {
 }
 
 .calendar-stage {
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
+  flex: 1 1 auto;
+  min-height: 0;
   display: grid;
-  grid-template-columns: 72px minmax(0, 1fr) 72px;
+  grid-template-columns: 56px minmax(0, 1fr) 56px;
   align-items: stretch;
-  gap: 12px;
+  gap: 10px;
 }
 
 .calendar-panel {
   min-width: 0;
-  padding: 22px 24px 26px;
+  min-height: 0;
+  height: 100%;
+  padding: 16px 18px 18px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background: #ffffff;
   border: 1px solid #e5edf5;
   border-radius: 8px;
@@ -475,23 +489,24 @@ const formatProfitFlag = (value) => {
 }
 
 .calendar-head {
+  flex: 0 0 auto;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 18px;
+  margin-bottom: 10px;
 }
 
 .month-title {
-  font-size: 22px;
+  font-size: 20px;
-  line-height: 30px;
+  line-height: 26px;
   font-weight: 700;
   color: #1f2a37;
 }
 
 .month-range {
-  font-size: 13px;
+  font-size: 12px;
-  line-height: 20px;
+  line-height: 18px;
   color: #7c8aa5;
 }
 
@@ -502,26 +517,33 @@ const formatProfitFlag = (value) => {
 }
 
 .weekday-row {
-  gap: 8px;
+  flex: 0 0 auto;
-  margin-bottom: 8px;
+  gap: 6px;
+  margin-bottom: 6px;
 }
 
 .weekday-cell {
   text-align: center;
   font-size: 13px;
-  line-height: 20px;
+  line-height: 18px;
   font-weight: 700;
   color: #5f6f86;
 }
 
 .calendar-grid {
-  gap: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: 6px;
+  grid-auto-rows: minmax(0, 1fr);
 }
 
 .day-card {
-  min-height: 138px;
+  min-height: 0;
-  padding: 12px;
+  padding: 8px 10px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   border: 1px solid #e4ebf3;
   border-radius: 8px;
   background: #ffffff;
@@ -565,17 +587,18 @@ const formatProfitFlag = (value) => {
 }
 
 .day-card-head {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  min-height: 24px;
+  min-height: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 }
 
 .day-number {
-  font-size: 16px;
+  font-size: 15px;
-  line-height: 24px;
+  line-height: 20px;
   font-weight: 700;
   color: #27364a;
 }
@@ -589,8 +612,8 @@ const formatProfitFlag = (value) => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
+  width: 18px;
-  height: 22px;
+  height: 18px;
   border-radius: 999px;
   background: #eef2f7;
   color: #7c8aa5;
@@ -600,9 +623,10 @@ const formatProfitFlag = (value) => {
 }
 
 .day-metrics {
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 3px;
 }
 
 .metric-row {
@@ -610,15 +634,15 @@ const formatProfitFlag = (value) => {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  min-height: 24px;
+  min-height: 18px;
-  font-size: 13px;
+  font-size: 12px;
-  line-height: 20px;
+  line-height: 18px;
   color: #5f6f86;
 }
 
 .metric-row strong {
-  font-size: 15px;
+  font-size: 14px;
-  line-height: 22px;
+  line-height: 18px;
   font-weight: 800;
   color: #26364b;
 }
@@ -636,14 +660,15 @@ const formatProfitFlag = (value) => {
 }
 
 .day-placeholder {
-  min-height: 70px;
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #a0acbb;
-  font-size: 13px;
+  font-size: 12px;
-  line-height: 20px;
+  line-height: 18px;
 }
 
 .detail-summary {
@@ -686,11 +711,11 @@ const formatProfitFlag = (value) => {
 
 @media (max-width: 1024px) {
   .second-calendar-page {
-    padding: 18px;
+    padding: 14px;
   }
 
   .calendar-panel {
-    padding: 18px;
+    padding: 14px;
   }
 
   .calendar-stage {
@@ -699,8 +724,7 @@ const formatProfitFlag = (value) => {
   }
 
   .day-card {
-    min-height: 128px;
+    padding: 8px;
-    padding: 10px;
   }
 }
 
@@ -742,7 +766,6 @@ const formatProfitFlag = (value) => {
   }
 
   .day-card {
-    min-height: 112px;
     padding: 8px;
   }
 
@@ -762,7 +785,6 @@ const formatProfitFlag = (value) => {
   }
 
   .day-placeholder {
-    min-height: 58px;
     font-size: 12px;
   }
 
@@ -770,4 +792,56 @@ const formatProfitFlag = (value) => {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-height: 900px) {
+  .second-calendar-page {
+    padding: 12px 16px;
+  }
+
+  .month-filter {
+    margin-bottom: 8px;
+  }
+
+  .calendar-stage {
+    grid-template-columns: 48px minmax(0, 1fr) 48px;
+    gap: 8px;
+  }
+
+  .calendar-panel {
+    padding: 12px 14px;
+  }
+
+  .calendar-head {
+    margin-bottom: 8px;
+  }
+
+  .month-title {
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  .weekday-row {
+    margin-bottom: 5px;
+  }
+
+  .weekday-cell {
+    line-height: 17px;
+  }
+
+  .calendar-grid {
+    gap: 5px;
+  }
+
+  .day-card {
+    padding: 7px 8px;
+  }
+
+  .day-card-head {
+    margin-bottom: 4px;
+  }
+
+  .day-metrics {
+    gap: 2px;
+  }
+}
 </style>