提交

1

src/school/school-detail/index.module.less

@@ -13,6 +13,7 @@
       flex-direction: row;
       align-items: center;
       margin-bottom: 20px;
+
       .schoolMainLeft {
         width: 54px;
         height: 54px;
@@ -25,14 +26,19 @@
         }
       }
       .schoolMainRight {
-        flex: 1;
+        width: 283px;
         .schoolMainTitle {
+          display: inline-block;
+          width: 283px;
           margin-bottom: 5px;
           height: 25px;
           font-size: 18px;
           font-weight: 600;
           color: #000000;
           line-height: 25px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
         .schoolMainSub {
           font-size: 14px;

src/school/school-detail/modals/teacher-item.module.less

@@ -1,10 +1,15 @@
 .itemWrap {
   background-color: #ffffff;
-  padding: 18px 0px 0 13px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+  margin-bottom: 12px;
+  border-radius: 10px;
+  .topWrap {
+    padding: 15px 13px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #f2f2f2;
+  }
   &:nth-last-child(1) {
     .itemRight {
       border-bottom: none !important;
@@ -14,7 +19,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding-bottom: 18px;
+
     .headerWrap {
       width: 48px;
       height: 48px;
@@ -33,8 +38,6 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid #f2f2f2;
-    padding-bottom: 18px;
     padding-right: 13px;
     width: 302px;
 
@@ -45,29 +48,43 @@
         color: #333333;
         line-height: 22px;
       }
-      .statusTagWrap {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        flex-wrap: wrap;
-        margin-top: 1px;
-        .statusTag {
-          font-size: 12px;
-          font-family: PingFangSC-Medium, PingFang SC;
-          font-weight: 500;
-          color: #f67146;
-          line-height: 17px;
-          padding: 0 8px;
-          margin-right: 6px;
-          margin-bottom: 6px;
-          background: #ffe7da;
-          border-radius: 4px;
-        }
-      }
     }
     .msgIcon {
       width: 24px;
       height: 24px;
     }
   }
+  .bottomWrap {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 15px 12px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 20px;
+    p {
+      margin-bottom: 6px;
+    }
+    .statusTagWrap {
+      display: flex;
+      flex-direction: row;
+      align-items: top;
+      flex-wrap: wrap;
+      margin-top: 1px;
+      .statusTag {
+        font-size: 12px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #f67146;
+        line-height: 19px;
+        padding: 1px 8px;
+        margin-right: 6px;
+        margin-bottom: 6px;
+        background: #ffe7da;
+        border-radius: 4px;
+      }
+    }
+  }
 }

src/school/school-detail/modals/teacher-item.tsx

@@ -29,22 +29,28 @@ export default defineComponent({
     return () => (
       <>
         <div class={styles.itemWrap} onClick={gotoMsg}>
-          <div class={styles.itemLeft}>
-            <div class={styles.headerWrap}>
-              <img src={props.item.avatar ? props.item.avatar : defaultIcon} alt="" />
+          <div class={styles.topWrap}>
+            <div class={styles.itemLeft}>
+              <div class={styles.headerWrap}>
+                <img src={props.item.avatar ? props.item.avatar : defaultIcon} alt="" />
+              </div>
+            </div>
+            <div class={styles.itemRight}>
+              <div class={styles.infoWrap}>
+                <p>{props.item.nickname}</p>
+              </div>
+              <img class={styles.msgIcon} src={msgIcon} alt="" />
             </div>
           </div>
-          <div class={styles.itemRight}>
-            <div class={styles.infoWrap}>
-              <p>{props.item.nickname}</p>
-
+          <div>
+            <div class={styles.bottomWrap}>
+              <p>声部：</p>
               <div class={styles.statusTagWrap}>
                 {props.item.subjectName.split(',').map((item) => (
                   <div class={styles.statusTag}>{item}</div>
                 ))}
               </div>
             </div>
-            <img class={styles.msgIcon} src={msgIcon} alt="" />
           </div>
         </div>
       </>