每日一练样式

src/pages/person-center/my-bank/bank-detailCopy/index.vue

@@ -9,14 +9,16 @@
                 <template v-if="tab.examInfo">
                   <div class="day-box">
                     <div>
+                      <p>打卡天数<span>{{ tab.examInfo.recordCount }}</span>天</p>
+                      <p>打卡进度超过了{{ tab.examInfo.recordPercentage }}的学员</p>
+                    </div>
+                    <!-- <div>
                       <p>打卡任务</p>
                       <p>{{ tab.examInfo.examName }}</p>
-                    </div>
-                    <div>打卡进度超过了{{ tab.examInfo.recordPercentage }}的学员,快来打卡呀~</div>
-                    <div @click="handelPunchClock(tab)">{{ tab.examInfo.examRecord ? '完成打卡' : '快来打卡' }}</div>
+                    </div> -->
+                    <div @click="handelPunchClock(tab)">{{ tab.examInfo.examRecord ? '今日已完成' : '今日打卡' }}</div>
                   </div>
                   <div class="clock-in-box">
-                    <p>累计打卡{{ tab.examInfo && tab.examInfo.recordCount }}天</p>
                     <el-calendar>
                       <template slot="dateCell" slot-scope="{date, data}">
                         <p :class="isSelected(data.day) ? 'is-selected' : ''" style="text-align: center;">
@@ -958,8 +960,53 @@ export default {
         // float: left;
         // width: 768px;
         .day-box {
+          // width: 709px;
           height: 100px;
           display: flex;
+          height: 110px;
+          background: url("../../../../assets/BG_punch.png");
+          background-size: 100% 100%;
+          padding-left: 36px;
+          padding-top: 16px;
+
+          div {
+            &:nth-of-type(1) {
+              p {
+                &:nth-of-type(1) {
+                  font-size: 16px;
+                  font-weight: 800;
+                  color: #556176;
+                  line-height: 42px;
+
+                  span {
+                    font-size: 36px;
+                    color: #222222;
+                    padding: 0 5px;
+                    // vertical-align: middle;
+                  }
+                }
+
+                &:nth-of-type(2) {
+                  font-size: 12px;
+                  color: #808DA4;
+                }
+              }
+            }
+
+            &:nth-of-type(2) {
+              width: 123px;
+              height: 36px;
+              background: #D1D1D6;
+              border-radius: 30px;
+              text-align: center;
+              line-height: 36px;
+              font-size: 15px;
+              font-weight: bold;
+              color: #FFFFFF;
+              margin-top: 20px;
+              margin-left: 32px;
+            }
+          }
         }
 
         .sle-num-box {