更新样式

src/views/site-management/index.module.less

@@ -49,6 +49,8 @@
 }
 
 .cellGroup {
+  overflow: hidden;
+
   :global {
     .van-cell {
       padding: 12px;
@@ -69,26 +71,6 @@
     margin-right: 4px;
   }
 
-  .address {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: var(--k-gray-1);
-
-    .overhide {
-      max-width: 120px;
-    }
-
-    .iconEdit {
-      font-size: 16px;
-      margin-left: 4px;
-    }
-
-    .red {
-      color: #FF5A56;
-    }
-  }
-
   .iconTeacher {
     width: 48px;
     height: 48px;
@@ -118,6 +100,10 @@
   align-items: center;
   justify-content: flex-start;
 
+  &.photoGroupPoint {
+    padding-bottom: 0;
+  }
+
   .photoTitle {
     position: relative;
     z-index: 1;
@@ -240,4 +226,47 @@
       }
     }
   }
+}
+
+.addressShow {
+  padding: 8px 10px;
+  margin: 0 12px 12px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #333333;
+  background: #f8f9fc;
+  border-radius: 6px;
+
+  // .iconAddress {
+  //   width: 12px;
+  //   height: 12px;
+  //   margin-right: 6px;
+  //   flex-shrink: 0;
+  // }
+
+  // p {
+  //   flex: 1 auto;
+  // }
+
+  .address {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    color: var(--k-gray-1);
+
+    .overhide {
+      // max-width: 160px;
+    }
+
+    .iconEdit {
+      font-size: 16px;
+      margin-left: 4px;
+    }
+
+    .red {
+      color: #FF5A56;
+    }
+  }
 }

src/views/site-management/index.tsx

@@ -21,6 +21,7 @@ import iconSetting from '@/common/images/icon-setting.png';
 import iconMusic from '@/common/images/icon-music.png';
 import iconTeacher from '@/common/images/icon-teacher-default.png';
 import iconEmpty from './images/icon-empty.png';
+import iconAddress from './images/icon-address.png';
 import MImagePreview from '@/components/m-image-preview';
 import SkeletonModal from './skeleton-modal';
 import MEmpty from '@/components/m-empty';
@@ -280,41 +281,10 @@ export default defineComponent({
                                   {item.musicGroupName}
                                 </p>
                               </div>
-                            ),
-                            default: () =>
-                              item.courseStatus === 'OVER' ? (
-                                <p
-                                  class={[styles.address]}
-                                  onClick={() => {
-                                    if (item.teachingPoint) return;
-                                    forms.selectSite = item;
-                                    forms.siteName = item.teachingPoint;
-                                    forms.showAddressPopup = true;
-                                  }}>
-                                  <p
-                                    class={[
-                                      styles.overhide,
-                                      item.teachingPoint ? '' : styles.red
-                                    ]}>
-                                    {item.teachingPoint || '未设置场地'}
-                                  </p>
-                                  {item.teachingPoint ? (
-                                    ''
-                                  ) : (
-                                    <Icon
-                                      name={iconEdit}
-                                      class={styles.iconEdit}
-                                    />
-                                  )}
-                                </p>
-                              ) : (
-                                <p class={[styles.address, styles.overhide]}>
-                                  {item.teachingPoint}
-                                </p>
-                              )
+                            )
                           }}
                         </Cell>
-                        <Cell center class={styles.username}>
+                        <Cell center class={styles.username} border={false}>
                           {{
                             icon: () => (
                               <Image
@@ -352,9 +322,44 @@ export default defineComponent({
                             )
                           }}
                         </Cell>
+
+                        <div class={styles.addressShow}>
+                          {item.courseStatus === 'OVER' ? (
+                            <p
+                              class={[styles.address]}
+                              onClick={() => {
+                                if (item.teachingPoint) return;
+                                forms.selectSite = item;
+                                forms.siteName = item.teachingPoint;
+                                forms.showAddressPopup = true;
+                              }}>
+
+                              <p
+                                class={[
+                                  // styles.overhide,
+                                  item.teachingPoint ? '' : styles.red
+                                ]}>
+                                <span style={{ color:' var(--k-gray-1)' }}>场地名称：</span>{item.teachingPoint || '未设置场地'}
+                              </p>
+                              {item.teachingPoint ? (
+                                ''
+                              ) : (
+                                <Icon
+                                  name={iconEdit}
+                                  class={styles.iconEdit}
+                                />
+                              )}
+                            </p>
+                          ) : (
+                            <p class={[styles.address, styles.overhide]}>
+                              {item.teachingPoint}
+                            </p>
+                          )}
+
+                        </div>
                       </CellGroup>
                       <CellGroup class={styles.cellGroup} border={false}>
-                        <div class={[styles.photoGroup]}>
+                        <div class={[styles.photoGroup, item.teachingPoint && styles.photoGroupPoint]}>
                           <div class={styles.photoUp}>
                             <h3>
                               <span class={styles.photoTitle}>课前照片</span>
@@ -431,6 +436,12 @@ export default defineComponent({
                             )}
                           </div>
                         </div>
+
+                        {/* {item.teachingPoint && <div class={styles.addressShow}>
+                          <img src={iconAddress} class={styles.iconAddress} />
+                          <p>{item.teachingPoint}</p>
+                        </div>} */}
+
                       </CellGroup>
                     </div>
                   );