考勤情况

src/views/staging/zbgly/right/attendance-com.vue

@@ -14,14 +14,18 @@
         <div class="item">
           <div class="index">{{index < 9 ? '0' : ''}}{{index + 1}}</div>
           <div class="title __text-ellipsis">{{item.abbreviation || item.name}}</div>
-          <template v-if="item.status === '正常'">
-            <div class="status status-true">
-              已签到<template v-if="dateType !== 'day'">({{item.number}}次)</template>
-            </div>
+          <template v-if="dateType === 'day'">
+            <template v-if="item.status === '1'">
+              <div class="status status-true">正常</div>
+            </template>
+            <template v-else>
+              <div class="status status-false">异常</div>
+            </template>
           </template>
           <template v-else>
-            <div class="status status-false">
-              {{item.status}}<template v-if="dateType !== 'day'">({{item.number}}次)</template>
+            <div class="status-both">
+              <div class="status-both_true">正常({{ item.zcNumber }})</div>
+              <div class="status-both_false">异常({{ item.ycNumber }})</div>
             </div>
           </template>
         </div>
@@ -192,6 +196,36 @@ $buttonsHeight: 30px;
         color: #E5004F;
       }
     }
+    .status-both {
+      margin-left: auto;
+      width: 124px;
+      height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      >div {
+        width: 60px;
+        height: 100%;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+        box-sizing: border-box;
+      }
+      .status-both_true {
+        background-image: url("@/assets/images/business/sign-true_left.png");
+        color: #3EFFBB;
+        padding-left: 10px;
+      }
+      .status-both_false {
+        background-image: url("@/assets/images/business/sign-false_right.png");
+        color: #E5004F;
+        padding-left: 7px;
+      }
+    }
   }
 }
 //.opacity-block {