health

src/router/index.js

@@ -354,7 +354,7 @@ let tipRoutes = [
         path:"/healthCard/punchClock",
         name:"punchClock",
         component:()=>import("@/view/healthCard/punchClock.vue"),
-        meth:{
+        meta:{
           title:"打卡列表"
         }
       }

src/view/healthCard/punchClock.vue

 <style lang="less">
-  
+#punchClock{
+    >.days{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding:0 15px;
+        >.num{
+            >span{
+                font-weight: 500;
+                font-size: 34px;
+                color:#000;
+            }
+            color:#777;
+        }
+        >.card{
+            border-radius: 50px;
+            padding: 7px 16px;
+            color: #fff;
+            background: linear-gradient(45deg, #0CCF99, #19BAC1);
+            box-shadow: 2px 2px 3px rgba(23,189,187,0.4);
+        }
+    }
+    >.calendar{
+        margin: 10px;
+        background: #fff;
+        border-radius: 3px;
+        box-shadow: 0px 1px 3px #bababa;
+        >.head{
+            display: flex;
+            justify-content: space-between;
+            height: 30px;
+            >span:nth-child(2){
+                display: flex;
+                align-items: center;
+                color: #555;
+                font-size: 14px;
+            }   
+        }
+    }
+}
 </style>
 <template>
   <div id="punchClock">
-      
+      <div class="days">
+          <div class="num">
+              <span>0</span>
+              天连续打卡
+          </div>
+          <div class="card">今日健康打卡</div>
+      </div>
+      <div class="calendar">
+          <div class="head">
+              <span></span>
+              <span>2020年2月</span>
+              <span></span>
+          </div>
+      </div>
   </div>
 </template>