修改样式

src/school/attendance/components/teacher-attendDetail.module.less

@@ -1,11 +1,13 @@
 .itemWrap {
   margin: 12px 13px 12px;
   font-size: 14px;
+
   .itemWrapTopCard {
     padding: 12px 15px 20px;
     border-radius: 10px;
     background-color: #fff;
     margin-bottom: 12px;
+
     .itemWrapTop {
       display: flex;
       flex-direction: row;
@@ -13,20 +15,24 @@
       justify-content: space-between;
       padding-bottom: 12px;
       border-bottom: 1px solid #f2f2f2;
+
       .itemWrapTopLeft {
         display: flex;
         flex-direction: row;
         align-items: center;
+
         .clockWrap {
           width: 18px;
           height: 18px;
           margin-right: 6px;
+
           img {
             margin-top: -1px;
             width: 100%;
             height: 100%;
           }
         }
+
         .leftTimer {
           font-size: 14px;
           font-weight: 500;
@@ -34,29 +40,35 @@
           line-height: 20px;
         }
       }
+
       .itemWrapTopRight {
         font-size: 12px;
         color: #777;
       }
     }
   }
+
   .itemWrapBottom {
     padding-top: 15px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+
     .msgIcon {
       width: 24px;
       height: 24px;
+
       img {
         width: 100%;
       }
     }
+
     .courseInfo {
       display: flex;
       flex-direction: row;
       align-items: center;
+
       // padding-bottom: 15px;
       .headImgs {
         width: 42px;
@@ -65,6 +77,7 @@
         overflow: hidden;
         margin-right: 12px;
       }
+
       .infoMsg {
         .infoMsgMain {
           font-size: 16px;
@@ -72,6 +85,7 @@
           color: #333333;
           line-height: 22px;
         }
+
         .infoMsgSub {
           width: 230px;
           overflow: hidden;
@@ -83,24 +97,29 @@
           color: #777777;
           line-height: 20px;
         }
+
         .infoMsgSubTeacher {
           width: 260px !important;
         }
       }
     }
   }
+
   .attBackInfo {
     margin-top: 12px;
   }
+
   .attInfo {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+
     .attInfoDot {
       text-align: left;
       width: 100%;
       padding: 12px;
+
       .attInfoDotTitle {
         width: 100%;
         display: flex;
@@ -109,11 +128,13 @@
         align-items: center;
         justify-content: space-between;
         color: #333;
+
         img {
           width: 18px;
           height: 18px;
         }
       }
+
       .signTime {
         font-size: 14px;
         font-weight: 500;
@@ -122,10 +143,12 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+
         // justify-content: space-between;
         .textWidth {
           min-width: 54px;
         }
+
         span {
           margin-left: 6px;
           border-radius: 10px;
@@ -133,6 +156,7 @@
           color: #333;
         }
       }
+
       .attRang {
         height: 20px;
         display: flex;
@@ -142,6 +166,7 @@
         font-size: 14px;
         font-weight: 500;
         color: #333;
+
         .locP {
           margin-left: 5px;
           font-size: 12px;
@@ -150,18 +175,23 @@
       }
     }
   }
+
   .passWrap {
     background-color: #fff;
   }
+
   .goWrap {
     background-color: #fff;
   }
+
   .error {
     color: #f44541;
   }
+
   .pass {
     color: #4493f6;
   }
+
   .passWrap,
   .goWrap {
     display: flex;
@@ -170,7 +200,12 @@
     border-radius: 10px;
     justify-content: space-between;
     text-align: center;
-    width: 168px;
+    flex: 1;
+
+    &:last-child {
+      margin-left: 12px;
+    }
+
     .itemBottomMain {
       font-size: 30px;
       font-weight: bold;
@@ -178,6 +213,7 @@
       line-height: 35px;
       margin-bottom: 2px;
     }
+
     .itemBottomSub {
       font-size: 14px;
       font-weight: 400;
@@ -191,12 +227,14 @@
   .bottomSheet {
     .van-action-sheet__description {
       padding: 0 !important;
+
       &::after {
         border: none !important;
       }
     }
   }
 }
+
 .bottomTitle {
   padding: 15px 15px 20px;
   text-align: left;
@@ -210,10 +248,12 @@
   font-weight: 500;
   color: #333333;
   line-height: 22px;
+
   .bottomTitleLeft {
     display: flex;
     flex-direction: row;
     align-items: center;
+
     span {
       width: 4px;
       height: 12px;
@@ -223,24 +263,29 @@
       margin-right: 6px;
     }
   }
+
   .cross {
     font-size: 19px;
   }
 }
+
 .bottomConent {
   padding: 20px 15px 57px;
   display: flex;
   flex-direction: row;
   align-items: center;
+
   .bottomImgWrap {
     width: 47px;
     height: 47px;
     margin-bottom: 6px;
+
     img {
       width: 100%;
       height: 100%;
     }
   }
+
   .bottomConentLeft,
   .bottomConentRight {
     width: 50%;
@@ -248,4 +293,4 @@
     flex-direction: column;
     align-items: center;
   }
-}
+}

src/school/attendance/modals/studentAtt-item.module.less

@@ -3,6 +3,7 @@
   border-radius: 10px;
   background-color: #fff;
   margin: 0 13px 12px;
+
   .itemWrapTop {
     display: flex;
     flex-direction: row;
@@ -10,19 +11,23 @@
     justify-content: space-between;
     padding-bottom: 12px;
     border-bottom: 1px solid #f2f2f2;
+
     .itemWrapTopLeft {
       display: flex;
       flex-direction: row;
       align-items: center;
+
       .clockWrap {
         width: 18px;
         height: 18px;
         margin-right: 6px;
+
         img {
           width: 100%;
           height: 100%;
         }
       }
+
       .leftTimer {
         font-size: 14px;
         font-weight: 500;
@@ -30,17 +35,20 @@
         line-height: 20px;
       }
     }
+
     .itemWrapTopRight {
       font-size: 12px;
       color: #777;
     }
   }
+
   .itemWrapBottom {
     padding-top: 15px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+
     .passWrap,
     .goWrap {
       padding: 11px 15px;
@@ -50,6 +58,12 @@
       border-radius: 10px;
       justify-content: space-between;
       text-align: center;
+      flex: 1;
+
+      &:last-child {
+        margin-left: 12px;
+      }
+
       .itemBottomMain {
         font-size: 24px;
         color: #333333;
@@ -58,23 +72,27 @@
         font-family: DINAlternate-Bold, DINAlternate;
         margin-bottom: 2px;
       }
+
       .itemBottomSub {
         font-size: 14px;
         font-weight: 400;
         color: #333333;
         line-height: 20px;
       }
+
       img {
         width: 45px;
         height: 45px;
         margin-right: 16px;
       }
     }
+
     .passWrap {
       background-color: #ddecff;
     }
+
     .goWrap {
       background-color: #ffe1e1;
     }
   }
-}
+}

src/school/orchestra/compontent/photo-create.tsx

@@ -350,29 +350,31 @@ export default defineComponent({
             >
               <div class={styles.phoneContainer}>
                 {state.list.map((item: any) => (
-                  <div class={styles.item} onClick={() => onDetail(item)}>
-                    {/* <i class={styles.more}></i> */}
-                    <i
-                      class={styles.more}
-                      onClick={(e: any) => {
-                        e.stopPropagation()
-                        state.oPopover = true
-                        state.selectItem = item
-                        state.selectType = 'update'
-                      }}
-                    ></i>
+                  <div class={styles.itemWrap}>
+                    <div class={styles.item} onClick={() => onDetail(item)}>
+                      {/* <i class={styles.more}></i> */}
+                      <i
+                        class={styles.more}
+                        onClick={(e: any) => {
+                          e.stopPropagation()
+                          state.oPopover = true
+                          state.selectItem = item
+                          state.selectType = 'update'
+                        }}
+                      ></i>
 
-                    <div
-                      class={styles.img}
-                      style={
-                        item.coverUrl
-                          ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
-                          : ''
-                      }
-                    ></div>
+                      <div
+                        class={styles.img}
+                        style={
+                          item.coverUrl
+                            ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                            : ''
+                        }
+                      ></div>
 
-                    <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
-                    <p class={styles.num}>{item.photoCount}张</p>
+                      <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
+                      <p class={styles.num}>{item.photoCount}张</p>
+                    </div>
                   </div>
                 ))}
               </div>

src/school/orchestra/compontent/photo.module.less

@@ -1,24 +1,27 @@
 .phone {
   overflow: hidden;
-  padding: 0 13px 0;
+  padding: 0 6px 0;
 
   .select {
     margin-top: 12px;
     border-radius: 10px;
     overflow: hidden;
     height: 45px;
+
     .icon {
       width: 17px;
       height: 17px;
       margin-right: 4px;
       flex-shrink: 0;
     }
+
     :global {
       .van-cell__title {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
+
       .van-cell__right-icon {
         color: #333;
         transform: rotate(90deg);
@@ -27,10 +30,12 @@
     }
   }
 }
+
 .addPhotoTop {
   color: var(--van-primary-text);
   font-size: 14px;
 }
+
 .addPhone {
   margin-top: 12px;
   color: var(--van-primary-text);
@@ -38,21 +43,33 @@
   border-radius: 10px;
   font-size: 16px;
 }
+
 .btnGroup {
   display: flex;
   padding: 12px;
+
   .addPhone {
     margin: 0 8px;
   }
 }
+
 .phoneContainer {
   display: flex;
-  justify-content: space-between;
+  // justify-content: space-between;
   flex-wrap: wrap;
   padding-bottom: 32px;
+
+  .itemWrap {
+    width: 50%;
+    text-align: center;
+  }
+
   .item {
     position: relative;
     padding-top: 12px;
+    width: 170px;
+    margin: 0 auto;
+
     .more {
       display: inline-block;
       position: absolute;
@@ -64,6 +81,7 @@
       height: 24px;
       z-index: 9;
     }
+
     .img {
       display: flex;
       align-items: center;
@@ -78,6 +96,7 @@
       background-position: center;
       background-image: url('../images/icon-photo-default.png');
     }
+
     .name {
       padding: 6px 0 4px;
       font-size: 16px;
@@ -85,6 +104,7 @@
       color: #333333;
       max-width: 168px;
     }
+
     .num {
       font-size: 12px;
       color: #777777;
@@ -110,6 +130,7 @@
   line-height: 25px;
   padding: 20px 0 20px 25px;
 }
+
 .phoneName {
   background: #f2f2f2;
   border-radius: 10px;
@@ -120,11 +141,13 @@
 .photos {
   padding: 0 16px 16px;
 }
+
 :global {
   .van-image-preview {
+
     .van-image-preview__close-icon,
     .van-image-preview__index {
       top: 50px;
     }
   }
-}
+}

src/school/orchestra/compontent/photo.tsx

@@ -254,29 +254,31 @@ export default defineComponent({
           >
             <div class={styles.phoneContainer}>
               {state.list.map((item: any) => (
-                <div class={styles.item} onClick={() => onDetail(item)}>
-                  {/* <i class={styles.more}></i> */}
-                  <i
-                    class={styles.more}
-                    onClick={(e: any) => {
-                      e.stopPropagation()
-                      state.oPopover = true
-                      state.selectItem = item
-                      state.selectType = 'update'
-                    }}
-                  ></i>
+                <div class={styles.itemWrap}>
+                  <div class={styles.item} onClick={() => onDetail(item)}>
+                    {/* <i class={styles.more}></i> */}
+                    <i
+                      class={styles.more}
+                      onClick={(e: any) => {
+                        e.stopPropagation()
+                        state.oPopover = true
+                        state.selectItem = item
+                        state.selectType = 'update'
+                      }}
+                    ></i>
 
-                  <div
-                    class={styles.img}
-                    style={
-                      item.coverUrl
-                        ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
-                        : ''
-                    }
-                  ></div>
+                    <div
+                      class={styles.img}
+                      style={
+                        item.coverUrl
+                          ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                          : ''
+                      }
+                    ></div>
 
-                  <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
-                  <p class={styles.num}>{item.photoCount}张</p>
+                    <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
+                    <p class={styles.num}>{item.photoCount}张</p>
+                  </div>
                 </div>
               ))}
             </div>