修改授课关系和编号对应的样式内容

src/views/reviewManagement/stepComponent/numberMappingComponent/NumberMappingComponent.vue

@@ -55,7 +55,7 @@
               </div>
               <div class="page_jg_20"></div>
               <div class="end_item">
-                  <Table :tableColumns="filterNumberMappingTableColumns" 
+                  <Table class="number_relation_table" :tableColumns="filterNumberMappingTableColumns" 
                       :tableData="administrativeClassTableData" 
                       :hidePagination="true">
                     
@@ -397,6 +397,21 @@ onMounted( async ()=>{
       }
     }
 
+    .teacher_table{
+      :deep(.el-table .cell) {
+        padding: 0 !important;
+      }
+    }
+
+    .teacher_table,
+    .number_relation_table{
+      :deep(.el-table){
+        tr th.el-table__cell {
+          font-size: 16px !important;
+        }
+      }
+  }
+
 }
 
 .main_content {
@@ -449,47 +464,34 @@ onMounted( async ()=>{
 
 /* 单元格内部组件样式 */
 .cell_container {
-  text-align: center;
+  width: 100%;
+  height: 100%;
   display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
   align-items: center;
-  padding: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
   gap: 8px;
+  padding: 8px;
+  text-align: center;
 
-  &.teaching_cell_container{
-    flex-wrap: nowrap;
-    .class_name{
-      word-break: keep-all;
-    }
-  }
-
-  .teaching_teacher_list{
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .disabled_teacher,
-  .placeholder_text {
+  .placeholder_text,
+  .disabled_teacher{
     width: 90px;
-    height: 36px;
+    height: 34px;
     font-weight: 400;
     font-size: 14px;
-    color: #CCCCCC;
     text-align: center;
-    line-height: 36px;
+    line-height: 34px;
     background-color: #f3f3f3;
     border-radius: 4px;
     cursor: pointer;
   }
-
-  .disabled_teacher{
-    color:#666666;
+  .placeholder_text {
+    color: #CCCCCC;
+  }
+  .disabled_teacher {
+    color: #666666;
   }
-
   .teacher_tag {
     display: flex;
     justify-content: space-between;
@@ -497,18 +499,20 @@ onMounted( async ()=>{
     padding: 0 8px;
 
     min-width: 90px;
-    height: 36px;
+    height: 34px;
     font-weight: 400;
     font-size: 14px;
     color: #2E64FA;
     text-align: center;
-    line-height: 36px;
+    line-height: 34px;
     background: rgba(46, 100, 250, 0.1);
     border-radius: 4px;
-
     .delete_icon {
+      width: 12px;
+      height: 12px;
       cursor: pointer;
       font-size: 12px;
+      margin-left: 10px;
     }
   }
 }

src/views/reviewManagement/stepComponent/numberMappingComponent/table.ts

@@ -34,14 +34,14 @@ export const classTableColumns = ref([
     {
         name: 'gradeName',
         label: '年级',
-        width: '80',
+        width: '',
         custom: false, 
         align:'center',
     },
     {
         name: 'className',
         label: '班级',
-        width: '80',
+        width: '',
         custom: false, 
         align:'center',
     },

src/views/reviewManagement/stepComponent/teachingRelationshipComponent/TeachingRelationshipComponent.vue

@@ -27,14 +27,14 @@
                 @tabChange="(val)=>HandleTabChange(val,'grade')">
               </TabSearch>
             </div>
-            <div class="content_right operation_btn">
-              <el-button class="delete_button_border_no_bg" @click="ClearTeachingRelationship">清空授课</el-button>
-              <el-button class="button_refresh" @click="HandleExportExcel">批量导出</el-button>
+            <div class="content_right operation_btn el_button">
+              <el-button type="text"  class="delete_item" plain @click="ClearTeachingRelationship">清空授课</el-button>
+              <el-button class="custom_border_btn" @click="HandleExportExcel">批量导出</el-button>
               <el-upload action="#"
                 :auto-upload="false"
                 :show-file-list="false"
                 @change="(file)=>HandleImportExcel(file)">
-                  <el-button type="primary" class="button_refresh"> 批量导入</el-button>
+                  <el-button  class="custom_border_btn"> 批量导入</el-button>
               </el-upload>
               <el-button class="button_background" @click="FinishTeachingRelationship">完成</el-button>
             </div>
@@ -45,6 +45,7 @@
           <div class="search_content">
             <div class="content_left">
               <TabSearch 
+                class="class_tab"
                 tabType="line" 
                 :tabList="tabList" 
                 :defaultTabKey="searchParmams.classType"
@@ -63,7 +64,7 @@
           <div class="page_solid_line"></div>
           <div class="page_jg_20"></div>
 
-          <div class="end_item">
+          <div class="end_item teaching_relation_table" >
 
             <!-- 行政班渲染表数据 -->
             <Table v-if="searchParmams.classType === 'xingzeng'"  
@@ -76,7 +77,7 @@
                 </template>
                 <template v-for="column in filterAdministrativeClassTableColumns.slice(1)" :key="column.name"   v-slot:[column.name]="{row}"> 
                   
-                  <div class="cell_container" @click="HandleAddTeacher(row, column.name,'administrative')">
+                  <div class="cell_container  administrative_cell_container" @click="HandleAddTeacher(row, column.name,'administrative')">
                     <template v-if="row?.[column.name] && row?.[column.name]?.length > 0">
                       <div v-for="(teacher, idx) in row?.[column.name]" :key="teacher.teacherId">
                         <el-tooltip
@@ -109,33 +110,59 @@
                 :tableData="teachingClassTableData" 
                 :hidePagination="true">
                 <template v-for="column in filterTeachingClassTableColumns" :key="column.name"   v-slot:[column.name]="{row}"> 
-                  <div class="cell_container teaching_cell_container" @click="HandleAddTeacher(row, column.name,'teach')">
-                    <div class="class_name">
-                      {{ row?.[column.name]?.className.className }}
-                    </div>
-                    <div class="teaching_teacher_list" v-if="row?.[column.name]?.className?.className && row?.[column.name]?.teacherList?.length > 0"> 
-                      <div v-for="(teacher, idx) in row?.[column.name]?.teacherList" :key="teacher.teacherId">
-                        <el-tooltip
-                          effect="dark"
-                          :content="`${teacher.teacherName} ${teacher.userAccount}`"
-                          placement="top-start"
+
+                  <div class="cell_container" @click="HandleAddTeacher(row, column.name, 'teach')">
+                    <div class="tag_teacher_content">
+                      <!-- 左侧：班级名称（还原 .content_title 样式） -->
+                      <div class="content_title" :title="row?.[column.name]?.className?.className">
+                        {{ row?.[column.name]?.className?.className }}
+                      </div>
+
+                      <!-- 右侧：教师标签列表（还原 .content_value 样式） -->
+                      <div class="content_value" v-if="row?.[column.name]?.className?.className && row?.[column.name]?.teacherList?.length > 0">
+                        <div 
+                          v-for="(teacher, idx) in row?.[column.name]?.teacherList" 
+                          :key="teacher.teacherId" 
+                          class="content_teacher"
                         >
-                          <div v-if="isConfigMode" class="teacher_tag">
-                            <span :title="teacher.teacherName">{{ teacher.teacherName }}</span>
-                            <el-icon class="delete_icon" @click.stop="HandleRemoveTeacher(row, column.name, idx,'teach')"><Close /></el-icon>
-                          </div>
-                          <div v-else class="disabled_teacher">
-                            <span :title="teacher.teacherName">{{ teacher.teacherName }}</span>
-                          </div>
-                        </el-tooltip>
+                          <el-tooltip
+                            effect="dark"
+                            :content="`${teacher.teacherName} ${teacher.userAccount}`"
+                            placement="top"
+                            :disabled="!teacher.teacherName"
+                          >
+                            <!-- 可配置模式：带删除按钮的蓝色标签 -->
+                            <div v-if="isConfigMode" class="content_teacher_item">
+                              <span :title="teacher.teacherName">{{ teacher.teacherName }}</span>
+                              <el-icon 
+                                class="delete_icon" 
+                                @click.stop="HandleRemoveTeacher(row, column.name, idx, 'teach')"
+                              >
+                                <Close />
+                              </el-icon>
+                            </div>
+
+                            <!-- 只读模式：灰色文本标签 -->
+                            <div v-else class="content_text_item">
+                              <span :title="teacher.teacherName">{{ teacher.teacherName }}</span>
+                            </div>
+                          </el-tooltip>
+                        </div>
                       </div>
-                    </div>
 
-                    <template v-else-if="row?.[column.name]?.className?.className">
-                      <span v-if="isConfigMode" class="placeholder_text" >请选择教师</span>
-                      <span v-else>-</span>
-                    </template>
+                      <!-- 空状态/占位符处理 -->
+                      <div class="content_value" v-else-if="row?.[column.name]?.className?.className">
+                        <!-- 可配置模式：请选择教师 -->
+                        <div v-if="isConfigMode" class="content_item">请选择教师</div>
+                        <!-- 只读模式：显示横杠 -->
+                        <div v-else class="content_no_data">-</div>
+                      </div>
+                    </div>
                   </div>
+
+
+
+
                 </template>
             </Table>
 
@@ -705,6 +732,11 @@ onMounted( async ()=>{
     height: 100%;
     .teacher_table{
       margin-top: 16px;
+    
+      :deep(.el-table .cell) {
+        padding: 0 !important;
+      }
+
       :deep(.el-table__body){
         tr.active_row td
         {
@@ -741,73 +773,211 @@ onMounted( async ()=>{
       flex-wrap: wrap;
       height: auto;
     }
-  }
-}
 
-/* 单元格内部组件样式 */
-.cell_container {
-  text-align: center;
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 8px;
-  gap: 8px;
-
-  &.teaching_cell_container{
-    flex-wrap: nowrap;
-    .class_name{
-      word-break: keep-all;
+        
+    .cell_container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-  }
 
-  .teaching_teacher_list{
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-  }
 
-  .disabled_teacher,
-  .placeholder_text {
-    width: 90px;
-    height: 36px;
-    font-weight: 400;
-    font-size: 14px;
-    color: #CCCCCC;
-    text-align: center;
-    line-height: 36px;
-    background-color: #f3f3f3;
-    border-radius: 4px;
-    cursor: pointer;
+    // 行政班单元格样式渲染
+    .administrative_cell_container {
+      text-align: center;
+      flex-wrap: wrap;
+      padding: 8px;
+      gap: 8px;
+
+      .placeholder_text,
+      .disabled_teacher{
+        width: 90px;
+        height: 34px;
+        font-weight: 400;
+        font-size: 14px;
+        text-align: center;
+        line-height: 34px;
+        background-color: #f3f3f3;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .placeholder_text {
+        color: #CCCCCC;
+      }
+      .disabled_teacher {
+        color: #666666;
+      }
+
+      // 教师标签样式
+      .teacher_tag {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 8px;
+
+        min-width: 90px;
+        height: 34px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #2E64FA;
+        text-align: center;
+        line-height: 34px;
+        background: rgba(46, 100, 250, 0.1);
+        border-radius: 4px;
+
+        // 删除图标样式 (对应原 img 标签样式)
+        .delete_icon {
+          width: 12px;
+          height: 12px;
+          cursor: pointer;
+          font-size: 12px;
+          margin-left: 10px; /* 保留原代码中 i 标签的 margin-left 习惯 */
+        }
+      }
+    }
+
+
+    // 教学班单元格样式渲染
+    .tag_teacher_content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+
+      // 左侧班级名称
+      .content_title {
+        width: 80px;
+        padding-left: 5px;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 14px;
+        color: #333; // 可根据实际业务补充颜色
+      }
+
+      // 右侧内容区域
+      .content_value {
+        width: calc(100% - 80px);
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 5px;
+        padding: 5px;
+        box-sizing: border-box;
+
+        // 教师标签容器 (对应原始 .content_teacher)
+        .content_teacher {
+          min-width: 90px;
+          max-width: 100px;
+          height: 34px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #2E64FA;
+          text-align: center;
+          line-height: 34px;
+          background: rgba(46, 100, 250, 0.1);
+          border-radius: 4px;
+
+          // 可编辑状态内部布局
+          .content_teacher_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 8px;
+            height: 100%;
+
+            span {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            .delete_icon {
+              width: 12px;
+              height: 12px;
+              cursor: pointer;
+              margin-left: 10px;
+              flex-shrink: 0;
+            }
+          }
+
+          // 只读状态内部布局
+          .content_text_item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            padding: 0 8px;
+            color: #666666;
+            background-color: #f3f3f3;
+            border-radius: 4px;
+            
+            span {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+
+        // 占位符样式 (对应原始 .content_item)
+        .content_item {
+          width: 90px;
+          height: 34px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #CCCCCC;
+          text-align: center;
+          line-height: 34px;
+          background-color: #f3f3f3;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+
+        // 无数据样式 (对应原始 .content_no_data)
+        .content_no_data {
+          width: 90px;
+          height: 34px;
+          font-weight: 400;
+          font-size: 14px;
+          text-align: center;
+          line-height: 34px;
+          border-radius: 4px;
+          color: #999; // 补充默认颜色以防不可见
+        }
+      }
+    }
+
+    
   }
 
-  .disabled_teacher{
-    color:#666666;
+  .class_tab{
+      gap:40px;
+      :deep(> span){
+        font-size: 16px !important;
+        font-weight: 600;
+      }
   }
 
-  .teacher_tag {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 8px;
-
-    min-width: 90px;
-    height: 36px;
-    font-weight: 400;
-    font-size: 14px;
-    color: #2E64FA;
-    text-align: center;
-    line-height: 36px;
-    background: rgba(46, 100, 250, 0.1);
-    border-radius: 4px;
-
-    .delete_icon {
-      cursor: pointer;
-      font-size: 12px;
+  .teacher_table,
+  .teaching_relation_table{
+      :deep(.el-table){
+        tr th.el-table__cell {
+          font-size: 16px !important;
+        }
+      }
+    }
+}
+.el_button{
+    .custom_border_btn:hover{
+      color: #666666 !important;
+      border-color: rgb(192.3, 208.5, 253.5) !important;
+      background-color: rgb(234.1, 239.5, 254.5) !important;
     }
-  }
 }
 </style>
-

src/views/reviewManagement/stepComponent/teachingRelationshipComponent/table.ts

@@ -22,14 +22,14 @@ export const teacherTableColumns = ref([
     {
         name: 'userAccount',
         label: '账号',
-        width: '80',
+        width: '',
         custom: false, 
         align:'center',
     },
     {
         name: 'teacherName',
         label: '教师',
-        width: '80',
+        width: '',
         custom: false, 
         align:'center',
     },