11

src/components/busManagement/HPTripPlan.vue

-<style scoped>
-  .tripPlanTab {
-    border-collapse: separate;
-    border-spacing: 0;
-    border-radius: 5px;
-    table-layout: fixed;
-    background: white;
-  }
+  <style scoped>
+/* ========= 表格整体 ========= */
+.tripPlanTab {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: 6px;
+  table-layout: fixed;
+  background: #ffffff;
+  font-size: 14px;
+}
 
-  .tripPlanTab tr th {
-    border: 1px solid#d2d2d2;
-    text-align: center;
-    min-width: 60px;
-    height: 29px;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background:#E6E6E6;
-  }
+/* ========= 表头 ========= */
+.tripPlanTab th {
+  border: 1px solid #dcdcdc;
+  text-align: center;
+  min-width: 60px;
+  height: 32px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: #f5f7fa;
+  font-weight: 600;
+  box-shadow: 0 1px 0 #dddddd;
+}
 
-  .tripPlanTab tr td{
-    border: 1px solid #d2d2d2;
-    text-align: center;
-    padding-left: 1px;
-    padding-right: 1px;
-    height: 28px;
-    line-height: 28px;
-    font-size:14px;
-  }
+/* ========= 普通单元格 ========= */
+.tripPlanTab td {
+  border: 1px solid #e0e0e0;
+  text-align: center;
+  padding: 2px 4px;
+  height: 32px;
+  line-height: 1.4;
+  font-size: 13px;
+  background: #ffffff;
+  vertical-align: middle;
+  word-break: break-all;
+}
 
-.tripPlanTab tr td.tdTopBorder {
-    border-top: 1px solid black !important;
+/* ========= 行 hover ========= */
+.tripPlanTab tbody tr:hover td {
+  background: #f9fbff;
 }
 
-.tripPlanTab tr td.tdTopLeftBorder {
-    border-left: 1px solid black !important;
+/* ========= 未派车行高亮 ========= */
+.no-car-row td {
+  background: #fffaf0;
 }
 
-.tripPlanTab tr td.tdTopRightBorder {
-    border-right: 1px solid black !important;
+.no-car-row:hover td {
+  background: #fff3d6;
+}
+
+/* ========= 表格底部加粗线 ========= */
+.tripPlanTab tbody tr:last-child td {
+  border-bottom: 2px solid #409eff;
+}
+
+.tripPlanTab tbody tr:first-child td:first-child {
+  border-bottom: 2px solid #409eff;
 }
-   
-.tripPlanTab tr td.tdBottomBorder
-  {
-    border-bottom: 1px solid black !important;
-    border-left:  1px solid black !important;
-    border-right:  1px solid black !important;
-  }
-</style>
 
+
+/* ========= 订单块顶部 ========= */
+.tripPlanTab td.tdTopBorder {
+  border-top: 2px solid #409eff !important;
+}
+
+/* 左上角 */
+.tripPlanTab td.tdTopLeftBorder {
+  border-left: 2px solid #409eff !important;
+  border-top: 2px solid #409eff !important;
+  border-top-left-radius: 4px;
+}
+
+/* 右上角 */
+.tripPlanTab td.tdTopRightBorder {
+  border-right: 2px solid #409eff !important;
+  border-top: 2px solid #409eff !important;
+  border-top-right-radius: 4px;
+}
+
+/* ========= 订单块底部 ========= */
+.tripPlanTab td.tdBottomBorder {
+  border-bottom: 2px solid #409eff !important;
+  border-left: 2px solid #409eff !important;
+  border-right: 2px solid #409eff !important;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+/* ========= 文字细节 ========= */
+.tripPlanTab td font {
+  line-height: 1.3;
+}
+</style>
 <template>
   <div>
     <div class="query-box" style="border-bottom: none;">
@@ -94,7 +139,7 @@
         </el-select>
        <el-button type="success" size="mini" @click="SureCar()" :loading="saveLoading">确认派车</el-button>
     </div>
-    <div style="width: 99%; overflow-x: hidden;padding-bottom: 50px;margin-top:5px;" :style="{height: boxHeight + 'px'}"
+    <div style="width: 98%; overflow-x: auto;padding-bottom: 50px;margin-top:5px;" :style="{height: boxHeight + 'px'}"
       class="ownScrollbarStyle" v-loading="loading">
       <table class="tripPlanTab" v-if="dataList&&dataList.length>0">
         <thead>