打卡样式更改

src/project/qianxinan/AppSignIn/AppSignIn.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="AppSignIn">
+    <div class="avatar_box">
+      <div class="avatar_img"><img :src="user.avatar" alt=""></div>
+      <div class="avatar_info">
+        <div class="avatar_name">{{ user.name }}</div>
+        <div class="avatar_time">{{ today }}</div>
+      </div>
+    </div>
     <div class="title">打卡记录</div>
     <div class="sign_list">
       <scroll-view scroll-y style="height: 100%;">
@@ -30,10 +37,10 @@ export default {
   data() {
     return {
       time: '',
+      today: '',
       status: 0, // 打卡状态：0、未打卡；1、已打卡
       signlist: [],
       current: 1,
-      screenHeight: '',
     }
   },
   computed: {
@@ -80,17 +87,56 @@ export default {
     this.getToday()
     this.getList()
     setInterval(() => {
-      this.time = dayjs(new Date()).format('HH:mm:ss')
+      this.time = dayjs().format('HH:mm:ss')
     }, 1000)
+    this.today = dayjs().format('YYYY-MM-DD')
   },
 }
 </script>
 
 <style lang="scss" scoped>
 .AppSignIn {
-  padding: 0px 32px;
+  background: url('./img/bg.png') no-repeat;
+  background-size: contain;
+  padding: 32px 32px;
   box-sizing: border-box;
+  height: 100vh;
+  width: 100vw;
+
+  .avatar_box {
+    width: 100%;
+    display: flex;
+    background-image: linear-gradient(270deg, rgba(255,255,255,0.00) 12%, #FFFFFF 100%);
+    border-radius: 16px;
+    padding: 32px 24px;
+    box-sizing: border-box;
+    .avatar_img {
+      width: 96px;
+      height: 96px;
+
+      img {
+        width: 100%;
         height: 100%;
+        border-radius: 50%;
+      }
+    }
+
+    .avatar_info {
+      margin-left: 24px;
+      .avatar_name {
+        font-weight: 500;
+        font-size: 34px;
+        color: #333333;
+      }
+      .avatar_time {
+        font-weight: 400;
+        font-size: 28px;
+        color: #666666;
+        margin-top: 16px;
+      }
+    }
+
+  }
 
   .title {
     font-weight: 600;
@@ -101,13 +147,12 @@ export default {
     line-height: 6vh;
     padding-left: 32px;
     box-sizing: border-box;
-    background: #F5F5F5;
     overflow-y: none;
   }
 
   .sign_list {
     width: 100%;
-    height: 69vh;
+    height: 54vh;
     .sign_card {
       display: flex;
       background: #FFFFFF;