ui完成

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

@@ -5,48 +5,72 @@
         <div class="left-box">
           <el-tabs v-model="activeName" @tab-click="handelTab">
             <el-tab-pane v-for="tab in newList" :key="tab.paperId" :label="tab.paperName" :name="tab.paperId + ''">
-              <div v-if="tab.paperName == '每日一练'">
+              <div v-if="tab.paperName == '每日一练'" style="background: #F8F8FA;padding: 20px;">
                 <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 @click="handelPunchClock(tab)">{{ tab.examInfo.examRecord ? '今日已完成' : '今日打卡' }}</div>
+                    <div :class="tab.examInfo.examRecord ? 'is-complete' : ''" @click="handelPunchClock(tab)">{{
+                        tab.examInfo.examRecord ? '今日已完成' : '今日打卡'
+                    }}</div>
                   </div>
                   <div class="clock-in-box">
-                    <el-calendar>
-                      <template slot="dateCell" slot-scope="{date, data}">
-                        <p :class="isSelected(data.day) ? 'is-selected' : ''" style="text-align: center;">
-                          {{ data.day.split('-').slice(2).join('-') }}
-                        </p>
-                        <div style="text-align: center;"> {{ isSelected(data.day) ? '✔️' : '' }}</div>
-                      </template>
-                    </el-calendar>
+                    <div class="clock-in-box-item">
+                      <p class="clock-title">明日打卡任务</p>
+                      <div class="clock-task">{{ tab.examInfo.examNameBelow || '暂无' }}</div>
+                    </div>
+                    <div class="clock-in-box-item">
+                      <p class="clock-title">打卡记录</p>
+                      <div class="clock-calendar">
+                        <el-calendar :first-day-of-week="7">
+                          <template slot="dateCell" slot-scope="{date, data}">
+                            <p v-if="!isSelected(data.day)" :class="isToday(data.day) ? 'date-today' : ''">
+                              {{ data.day.split('-').slice(2).join('-') }}
+                            </p>
+                            <p v-else class="is-Select">✔️</p>
+                          </template>
+                        </el-calendar>
+                      </div>
+
+                    </div>
+
                   </div>
                 </template>
               </div>
-              <div v-else-if="tab.paperName == '随机练习'">
-                <div class="day-box">
-                  <p>试卷情况：</p>
-                  <template v-if="tab.examInfo">
-                    <p>已做/总题：{{ tab.examInfo.doNum }}/{{ tab.examInfo.totalNum }}</p>
-                    <p>已完成练习{{ (tab.examInfo.doNum / tab.examInfo.totalNum).toFixed(2) }}%的题目，加油，希望就在前方~</p>
-                  </template>
-
-                </div>
-                <div>
-                  <p>做题数量</p>
-                  <div class="sle-num-box">
-                    <div :class="activeNum == val ? 'actvie' : ''" v-for="val in numList" :key="val"
-                      @click="handelNum(val)">{{ val
-                      }}</div>
+              <div v-else-if="tab.paperName == '随机练习'" style="background: #F8F8FA;padding: 20px;">
+                <div class="random-box">
+                  <div class="random-box-top">
+                    <p class="random-box-title">试卷情况</p>
+                    <div class="random-box-top-num">
+                      <img style="margin-right: 12px;" src="../../../../assets/testpaper.png" alt="">
+                      <div>
+                        <p>{{ tab.examInfo ? tab.examInfo.doNum : '-' }}</p>
+                        <p>已完成提数</p>
+                      </div>
+                      <div class="line"></div>
+                      <div>
+                        <p v-if="tab.examInfo">{{ tab.examInfo ? (tab.examInfo.totalNum - tab.examInfo.doNum) : '-' }}
+                        </p>
+                        <p>剩余提数</p>
+                      </div>
+                      <div class="line"></div>
+                      <div>
+                        <p>{{ tab.examInfo ? tab.examInfo.totalNum : '-' }}</p>
+                        <p>总提数</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="random-box-bom">
+                    <p class="random-box-title">做题数量</p>
+                    <div class="sle-num-box">
+                      <div :class="activeNum == val ? 'actvie' : ''" v-for="val in numList" :key="val"
+                        @click="handelNum(val)">{{ val
+                        }}</div>
+                    </div>
+                    <div class="random-box-bom-btn" @click="beginExam">开始做题</div>
                   </div>
-                  <div @click="beginExam">开始做题</div>
                 </div>
               </div>
               <div class="goods-menu" v-else>
@@ -492,7 +516,8 @@ export default {
     getExamType(id) {
       return new Promise((resolve, reject) => {
         this.$request.exampapergoodsExamPaper(id).then((res) => {
-          this.newList = [{ paperId: 0, paperName: "全部" }, ...res.data];
+          let data = [{ paperId: 110, paperName: "随机练习" }]
+          this.newList = [{ paperId: 0, paperName: "全部" }, ...res.data, ...data];
           // if (parseInt(this.activeName) > 0) {
           //   this.tabChange({ name: this.activeName });
           // }
@@ -705,12 +730,13 @@ export default {
       });
     },
     isSelected(date) {
-      date = new Date(date + ' 00:00:00')
-      let time = date.valueOf() / 1000
       if (!this.punchList.length) {
         return false
       }
-      return this.punchList.some(e => e.recordTime == time)
+      return this.punchList.some(e => e.recordTime == (new Date(date).setHours(0, 0, 0, 0) / 1000))
+    },
+    isToday(date) {
+      return new Date(date).setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)
     },
     /**
      * 继续做题
@@ -996,7 +1022,7 @@ export default {
             &:nth-of-type(2) {
               width: 123px;
               height: 36px;
-              background: #D1D1D6;
+              background: #3F8DFD;
               border-radius: 30px;
               text-align: center;
               line-height: 36px;
@@ -1005,34 +1031,178 @@ export default {
               color: #FFFFFF;
               margin-top: 20px;
               margin-left: 32px;
+              cursor: pointer;
+            }
+
+            .is-complete {
+              background: #D1D1D6;
             }
           }
         }
 
-        .sle-num-box {
+        .clock-in-box {
           display: flex;
-          margin-bottom: 30px;
+          justify-content: space-between;
+          margin-top: 12px;
+          padding: 20px 16px 0;
+          background: #FFFFFF;
 
-          div {
-            width: 50px;
-            border: 1px solid #ccc;
-            text-align: center;
-            line-height: 40px;
-            cursor: pointer;
-          }
+          .clock-in-box-item {
+            width: 49%;
+
+            .clock-title {
+              font-weight: bold;
+              color: #484848;
+              font-size: 14px;
+              margin-bottom: 20px;
+            }
+
+            .clock-calendar {
+              border: 1px solid #eee;
+
+              .date-today {
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                background: #409EFF;
+                color: #fff;
+              }
+
+              /deep/ {
+                .el-calendar-day {
+                  height: 44px;
+                  line-height: 30px;
+                  text-align: center;
+                }
+
+                .el-calendar__body {
+                  padding: 20px;
+                }
+
+                .el-calendar__button-group {
+                  display: none;
+                }
+
+                td {
+                  border: 0;
+                }
+              }
+
+              .is-Select {
+                width: 30px;
+                height: 30px;
+                background: #E8F6FF;
+                border-radius: 50%;
+                margin: 0 auto;
+              }
+            }
 
-          .actvie {
-            background: #3f8dfd;
-            color: #fff;
+            .clock-task {
+              background: #F8F8FA;
+              font-weight: 800;
+              color: #556176;
+              font-size: 16px;
+              padding: 25px 60px;
+              text-align: center;
+            }
           }
         }
 
-        /deep/ {
-          .el-calendar-day {
-            height: 60px;
+        .random-box {
+
+
+          .random-box-title {
+            font-weight: bold;
+            color: #222222;
+            font-size: 16px;
+          }
+
+          .random-box-top {
+            height: 146px;
+            background: #FFFFFF;
+            padding: 20px;
+
+            .random-box-top-num {
+              margin-top: 12px;
+              display: flex;
+              align-items: center;
+
+              div {
+                width: 128px;
+                text-align: center;
+
+                p {
+                  &:nth-of-type(1) {
+                    font-size: 24px;
+                    color: #222222;
+                    margin-bottom: 4px;
+                  }
+
+                  &:nth-of-type(2) {
+                    font-size: 12px;
+                    color: #808DA4;
+                  }
+                }
+              }
+
+              .line {
+                width: 1px;
+                height: 36px;
+                background: #D9D9D9;
+              }
+            }
+          }
+
+          .random-box-bom {
+            margin-top: 20px;
+            background: #FFFFFF;
+            padding: 20px 20px 60px;
+
+            .sle-num-box {
+              margin: 32px 0 40px;
+              display: flex;
+              justify-content: space-around;
+
+              div {
+                width: 148px;
+                height: 48px;
+                background: #F8F8FA;
+                border-radius: 6px 6px 6px 6px;
+                text-align: center;
+                line-height: 48px;
+                font-size: 20px;
+                color: #222222;
+                cursor: pointer;
+              }
+
+              .actvie {
+                background: #E8F6FF;
+                color: #3F8DFD;
+              }
+
+
+            }
+
+            .random-box-bom-btn {
+              width: 315px;
+              height: 44px;
+              background: #3F8DFD;
+              border-radius: 8px 8px 8px 8px;
+              cursor: pointer;
+              margin: 0 auto;
+              text-align: center;
+              line-height: 44px;
+              font-size: 16px;
+              font-weight: bold;
+              color: #FFFFFF;
+
+            }
           }
         }
 
+
+
+
         /deep/.el-tabs__item {
           height: 98px;
           line-height: 98px;