提交

src/components/punchTheClock/index.vue

@@ -44,10 +44,16 @@
         </div>
       </div>
     </div>
-    <!-- 恭喜您已获得奖励 快联系班主任领取吧! -->
-    <div class="punch-the-clock-reward" v-if="forthRate === 100">
-      <div class="punch-the-clock-reward-title">恭喜您已获得奖励</div>
-      <div class="punch-the-clock-reward-content">系统将在7个工作日内将奖励发放至您的微信钱包，还请注意查收！</div>
+    <!-- 恭喜您已获得奖励 快联系班主任领取吧!  v-if="forthRate === 100" -->
+    <div class="punch-the-clock-reward">
+      <div class="punch-the-clock-reward-con">
+        <div class="punch-the-clock-reward-title">恭喜你完成打卡任务</div>
+        <div class="punch-the-clock-reward-small-title">获得以下奖励</div>
+        <div class="punch-the-clock-reward-prize">
+          <div class="punch-the-clock-reward-prize-title">一、红包奖励</div>
+        </div>
+      </div>
+
     </div>
     <!-- 今日卡 -->
     <div class="today-list today-list-padding" v-if="todayData.length !== 0 && forthRate !== 100">
@@ -687,25 +693,41 @@
     /* 恭喜您已获得奖励 快联系班主任领取吧! */
     .punch-the-clock-reward {
       width: 335 * @toVw;
-      height: 167 * @toVw;
-      margin-top: -18 * @toVw;
-      padding: 70 * @toVw 24 * @toVw 0;
-      background: url("../../assets/punchTheClock/gaozhi.png") no-repeat;
-      background-size: 100% 100%;
+      margin-top: 6 * @toVw;
+      background: #F76D39;
+      border-top: 30 * @toVw solid #F76D39;
+      border-bottom: 11 * @toVw solid #F76D39;
+      border-left: 11 * @toVw solid #F76D39;
+      border-right: 11 * @toVw solid #F76D39;
       border-radius: 10 * @toVw;
       box-sizing: border-box;
       text-align: center;
+      .punch-the-clock-reward-con {
+        width: 100%;
+        height: 100%;
+        padding-top: 22 * @toVw;
+        padding-bottom: 22 * @toVw;
+        background: #FFFFFF;
+        border-radius: 10 * @toVw;
+      }
       .punch-the-clock-reward-title {
         font-size: 17 * @toVw;
         font-weight: 500;
-        color: #BB3E00;
+        color: #F76D39;
       }
-      .punch-the-clock-reward-content {
-        line-height: 21 * @toVw;
-        font-size: 14 * @toVw;punch-card-today
-      font-weight: 500;
+      .punch-the-clock-reward-small-title {
+        padding-top: 6 * @toVw;
+        font-size: 12 * @toVw;
+        color: #F76D39;
+      }
+      .punch-the-clock-reward-prize {
+        padding: 0 15 * @toVw;
         text-align: left;
-        color: #505050;
+        .punch-the-clock-reward-prize-title {
+          font-size: 14 * @toVw;
+          font-weight: 500;
+          color: #333333;
+        }
       }
     }
     /* 今日卡 */