考勤样式修复

1

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

@@ -72,11 +72,18 @@
           line-height: 22px;
         }
         .infoMsgSub {
+          width: 230px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
           font-size: 12px;
           font-weight: 400;
           color: #777777;
           line-height: 17px;
         }
+        .infoMsgSubTeacher {
+          width: 260px !important;
+        }
       }
     }
   }
@@ -134,10 +141,10 @@
     }
   }
   .passWrap {
-    background-color: #ddecff;
+    background-color: #fff;
   }
   .goWrap {
-    background-color: #ffe1e1;
+    background-color: #fff;
   }
   .error {
     color: #f44541;

src/school/attendance/components/teacher-attendDetail.tsx

@@ -137,7 +137,14 @@ export default defineComponent({
                   <p class={styles.infoMsgMain}>
                     {teacherAttInfo.value?.classGroupName}-{teacherAttInfo.value?.teacherName}
                   </p>
-                  <p class={styles.infoMsgSub}>{teacherAttInfo.value?.orchestraName}</p>
+                  <p
+                    class={[
+                      styles.infoMsgSub,
+                      platformApi.value == '/api-teacher' ? styles.infoMsgSubTeacher : ''
+                    ]}
+                  >
+                    {teacherAttInfo.value?.orchestraName}
+                  </p>
                 </div>
               </div>
               {platformApi.value == '/api-teacher' ? null : (
@@ -172,7 +179,8 @@ export default defineComponent({
                   />
                 </div>
                 <p class={styles.signTime}>
-                  签到时间
+                  {teacherAttInfo.value?.signInTime ? '签到时间' : ''}
+
                   <span>
                     {teacherAttInfo.value?.signInTime
                       ? dayjs(teacherAttInfo.value?.signInTime).format('HH:mm:ss')
@@ -242,7 +250,8 @@ export default defineComponent({
                   />
                 </div>
                 <p class={styles.signTime}>
-                  签退时间
+                  {teacherAttInfo.value?.signOutTime ? '签退时间' : ''}
+
                   <span>
                     {teacherAttInfo.value?.signOutTime
                       ? dayjs(teacherAttInfo.value?.signOutTime).format('HH:mm:ss')

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

@@ -58,6 +58,10 @@
           line-height: 22px;
         }
         .infoMsgSub {
+          width: 260px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
           font-size: 12px;
           font-weight: 400;
           color: #777777;

src/teacher/attendance/modals/teacherAtt-item.module.less

@@ -37,13 +37,19 @@
   }
   .itemWrapBottom {
     padding-top: 15px;
-
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     .courseInfo {
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding-bottom: 15px;
+      // padding-bottom: 15px;
       justify-content: space-between;
+      flex-wrap: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
       .headImgs {
         width: 42px;
         height: 42px;
@@ -59,10 +65,14 @@
           line-height: 22px;
         }
         .infoMsgSub {
+          width: 175px;
           font-size: 12px;
           font-weight: 400;
           color: #777777;
           line-height: 17px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -84,61 +94,58 @@
       line-height: 20px;
       font-weight: 500;
     }
-    .attInfo {
+    .itemWrapBottomRight {
       display: flex;
       flex-direction: row;
       align-items: center;
-      justify-content: space-between;
-      .attInfoDot {
-        text-align: left;
-        padding: 12px;
-        .attInfoDotTitle {
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          margin-bottom: 7px;
-          align-items: center;
-          img {
-            width: 18px;
-            height: 18px;
-            margin-left: 60px;
+      .attInfo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        .attInfoDot {
+          text-align: left;
+          padding: 12px;
+          .attInfoDotTitle {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 7px;
+            align-items: center;
+            img {
+              width: 18px;
+              height: 18px;
+              margin-left: 60px;
+            }
+          }
+          .signTime {
+            font-size: 20px;
+            font-weight: 600;
+            color: #333333;
+            line-height: 28px;
           }
         }
-        .signTime {
-          font-size: 20px;
+      }
+      .goWrap {
+        align-items: center;
+        text-align: center;
+        border-radius: 7px;
+        padding: 8px 13px;
+        background: #f6f6f6;
+        margin-right: 8px;
+        .goWrapMain {
+          font-size: 14px;
           font-weight: 600;
-          color: #333333;
-          line-height: 28px;
+          color: #3891ff;
+          line-height: 20px;
+        }
+        .goWrapSub {
+          font-size: 12px;
+          font-weight: 400;
+          color: #777777;
+          line-height: 17px;
         }
       }
     }
-    .passWrap,
-    .goWrap {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      border-radius: 10px;
-      justify-content: space-between;
-      text-align: center;
-      .itemBottomMain {
-        font-size: 30px;
-        font-weight: bold;
-        color: #333333;
-        line-height: 35px;
-        margin-bottom: 2px;
-      }
-      .itemBottomSub {
-        font-size: 14px;
-        font-weight: 400;
-        color: #333333;
-        line-height: 20px;
-      }
-    }
-    .passWrap {
-      background-color: #ddecff;
-    }
-    .goWrap {
-      background-color: #ffe1e1;
-    }
   }
 }

src/teacher/attendance/modals/teacherAtt-item.tsx

@@ -31,9 +31,6 @@ export default defineComponent({
                 {dayjs(props.item.endTime).format('HH:mm')}
               </p>
             </div>
-            <div class={styles.itemWrapTopRight}>
-              <Icon name="arrow"></Icon>
-            </div>
           </div>
           <div class={styles.itemWrapBottom}>
             <div class={styles.courseInfo}>
@@ -47,39 +44,33 @@ export default defineComponent({
                 <div class={styles.typeTagNo}>非补助课</div>
               )} */}
             </div>
-            <div class={styles.attInfo}>
-              <div class={props.item.signInStatus === 'NORMAL' ? styles.passWrap : styles.goWrap}>
-                <div class={styles.attInfoDot}>
-                  <div class={styles.attInfoDotTitle}>
-                    <span>签到时间</span>
-                    <img
-                      src={props.item.signInStatus === 'NORMAL' ? successIcon : errorIcon}
-                      alt=""
-                    />
-                  </div>
-                  <p class={styles.signTime}>
-                    {props.item.signInTime
-                      ? dayjs(props.item.signInTime).format('HH:mm:ss')
-                      : '未签到'}
+            <div class={styles.itemWrapBottomRight}>
+              <div class={styles.attInfo}>
+                {/* */}
+                <div class={styles.goWrap}>
+                  <p class={styles.goWrapMain}>
+                    {props.item.signInStatus === 'NORMAL' ? (
+                      <span>正常</span>
+                    ) : (
+                      <span style={{ color: '#F44541' }}>异常</span>
+                    )}
                   </p>
+                  <p class={styles.goWrapSub}>签到</p>
                 </div>
-              </div>
-              <div class={props.item.signOutStatus === 'NORMAL' ? styles.passWrap : styles.goWrap}>
-                <div class={styles.attInfoDot}>
-                  <div class={styles.attInfoDotTitle}>
-                    <span>签退时间</span>
-                    <img
-                      src={props.item.signOutStatus === 'NORMAL' ? successIcon : errorIcon}
-                      alt=""
-                    />
-                  </div>
-                  <p class={styles.signTime}>
-                    {props.item.signOutTime
-                      ? dayjs(props.item.signOutTime).format('HH:mm:ss')
-                      : '未签到'}
+                <div class={styles.goWrap}>
+                  <p class={styles.goWrapMain}>
+                    {props.item.signOutStatus === 'NORMAL' ? (
+                      <span>正常</span>
+                    ) : (
+                      <span style={{ color: '#F44541' }}>异常</span>
+                    )}
                   </p>
+                  <p class={styles.goWrapSub}>签退</p>
                 </div>
               </div>
+              <div class={styles.itemWrapTopRight}>
+                <Icon name="arrow"></Icon>
+              </div>
             </div>
           </div>
         </div>

src/views/exercise-record/exercis-detail.module.less

@@ -72,7 +72,7 @@
         line-height: 28px;
         margin-bottom: 7px;
         font-family: 'DINA';
-        font-weight: bold;
+        font-weight: 400;
         span {
           margin-left: 2px;
           font-size: 12px;

src/views/exercise-record/exercis-detail.tsx

@@ -16,12 +16,13 @@ import {
 } from 'vant'
 import OFullRefresh from '@/components/o-full-refresh'
 import DetailItem from './modals/detail-item'
-import { defineComponent, onMounted, reactive, ref, onDeactivated } from 'vue'
+import { defineComponent, onMounted, reactive, ref, onDeactivated, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import styles from './exercis-detail.module.less'
 import request from '@/helpers/request'
 import questIcon from '@/school/images/quest-icon.png'
 import defaultIcon from '@/school/images/default-icon.png'
+import iconStudent from '@common/images/icon_student.png'
 import { state as globalState } from '@/state'
 
 export default defineComponent({
@@ -173,7 +174,13 @@ export default defineComponent({
               <div class={styles.topInfoLeft}>
                 <div class={styles.headWrap}>
                   <Image
-                    src={infoDetail.value.avatar ? infoDetail.value.avatar : defaultIcon}
+                    src={
+                      infoDetail.value.avatar
+                        ? infoDetail.value.avatar
+                        : platformApi.value == '/api-student'
+                        ? iconStudent
+                        : defaultIcon
+                    }
                     fit="cover"
                     width="68px"
                     height="68px"

src/views/exercise-record/modals/detail-item.tsx

@@ -94,14 +94,14 @@ export default defineComponent({
               <div class={styles.itemBottomDot}>
                 <p class={styles.dotMain} style={{ color: '#F67146' }}>
                   {props.item.score || 0}
-                  <span>分</span>
+                  <span>分</span>{' '}
                 </p>
                 <p class={styles.dotSub}> 综合得分</p>
               </div>
               <div class={styles.itemBottomDot}>
                 <p class={styles.dotMain}>
                   {props.item.intonation || 0}
-                  <span>分</span>
+                  <span>分</span>{' '}
                 </p>
                 <p class={styles.dotSub}>音准 </p>
               </div>