提交newDaka

src/components/punchTheClock/index.vue

@@ -46,14 +46,53 @@
     </div>
     <!-- 恭喜您已获得奖励 快联系班主任领取吧!  v-if="forthRate === 100" -->
     <div class="punch-the-clock-reward">
+      <div class="border-yuan">
+        <img :src="punchTheClock.border" alt="">
+      </div>
       <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 class="punch-the-clock-reward-prize-list">
+            <img class="jingli" :src="punchTheClock.jiangli" alt="">
+            <span class="rmb">¥ 99.00</span>
+          </div>
+          <div class="punch-the-clock-reward-prize-small">系统将于7个工作日内发送至您的微信钱包，请注意查收</div>
+        </div>
+        <div class="xian">
+          <img :src="punchTheClock.xian" alt="">
+        </div>
+        <!-- 课程奖励 -->
+        <div class="punch-the-clock-reward-prize">
+          <div class="punch-the-clock-reward-prize-title">二、课程奖励</div>
+          <div class="punch-the-clock-reward-prize-list">
+            <img class="jingli" :src="punchTheClock.shu" alt="">
+            <span class="rmb rem-kecheng">赠送的课程名称1</span>
+          </div>
+          <div class="punch-the-clock-reward-prize-list">
+            <img class="jingli" :src="punchTheClock.shu" alt="">
+            <span class="rmb rem-kecheng">赠送的课程名称1</span>
+          </div>
+          <div class="punch-the-clock-reward-prize-small">系统将于7个工作日内发送至您的微信钱包，请注意查收</div>
+        </div>
+        <div class="xian">
+          <img :src="punchTheClock.xian" alt="">
+        </div>
+        <!-- 食物奖励 -->
+        <div class="punch-the-clock-reward-prize">
+          <div class="punch-the-clock-reward-prize-title">三、实物奖励</div>
+          <div class="punch-the-clock-reward-prize-list">
+            <img class="jingli" :src="punchTheClock.shiwu" alt="">
+            <span class="rmb rem-zheng">赠送的实物名称还得好好等待戈多哈斯卡传经送宝彩带ss是得好过…</span>
+          </div>
+          <div class="punch-the-clock-reward-prize-small">系统将于7个工作日内发送至您的微信钱包，请注意查收</div>
+        </div>
+        <div class="address">
+          <div class="address-text">填写收货地址</div>
         </div>
       </div>
-
     </div>
     <!-- 今日卡 -->
     <div class="today-list today-list-padding" v-if="todayData.length !== 0 && forthRate !== 100">
@@ -703,7 +742,21 @@
       border-right: 11 * @toVw solid #F76D39;
       border-radius: 10 * @toVw;
       box-sizing: border-box;
+      position: relative;
       text-align: center;
+      .border-yuan {
+        width: 203 * @toVw;
+        height: 44 * @toVw;
+        margin: auto;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: -55 * @toVw;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
       .punch-the-clock-reward-con {
         width: 100%;
         height: 100%;
@@ -722,7 +775,16 @@
         font-size: 12 * @toVw;
         color: #F76D39;
       }
+      .xian {
+        width: 104%;
+        margin-left: -2%;
+        margin-top: 22 * @toVw;
+        img {
+          width: 100%;
+        }
+      }
       .punch-the-clock-reward-prize {
+        margin-top: 15 * @toVw;
         padding: 0 15 * @toVw;
         text-align: left;
         .punch-the-clock-reward-prize-title {
@@ -730,6 +792,59 @@
           font-weight: 500;
           color: #333333;
         }
+        .punch-the-clock-reward-prize-list {
+          width: 100%;
+          margin-top: 15 * @toVw;
+          padding: 8 * @toVw 6 * @toVw;
+          background: #FFEDD6;
+          box-sizing: border-box;
+          border-radius: 6 * @toVw;
+          overflow: hidden;
+          .jingli {
+            width: 45 * @toVw;
+            height: 45 * @toVw;
+            float: left;
+          }
+          .rmb {
+            float: left;
+            padding-left: 12 * @toVw;
+            line-height: 45 * @toVw;
+            font-size: 20 * @toVw;
+            color: #F76D39;
+          }
+          .rem-kecheng {
+            font-size: 13 * @toVw;
+          }
+          .rem-zheng {
+            width: calc(100% - 70 * @toVw);
+            line-height: 25 * @toVw;
+            font-size: 13 * @toVw;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+        }
+        .punch-the-clock-reward-prize-small {
+          padding-top: 10 * @toVw;
+          font-size: 3vw;
+          color: #666666;
+        }
+      }
+      .address {
+        width: 289 * @toVw;
+        height: 45 * @toVw;
+        margin: 30 * @toVw auto 0;
+        display: table;
+        background: #F76D39;
+        border-radius: 100px;
+        box-shadow: 0 7px 7px -7px #F76D39;
+        .address-text {
+          display: table-cell;
+          vertical-align: middle;
+          font-size: 15 * @toVw;
+          color: #FFFFFF;
+        }
       }
     }
     /* 今日卡 */

src/util/imgUrl.js

@@ -108,7 +108,12 @@ import line         from '../assets/punchTheClock/line.png'
 import nullTu       from '../assets/evaluate/null.png'
 import x            from '../assets/punchTheClock/x.png'
 import xiaolian     from '../assets/punchTheClock/xiaolian.png'
-import sou     from '../assets/punchTheClock/sou.png'
+import sou          from '../assets/punchTheClock/sou.png'
+import jiangli      from '../assets/punchTheClock/jiangli.png'
+import xian         from '../assets/punchTheClock/xian.png'
+import shu          from '../assets/punchTheClock/shu.png'
+import shiwu        from '../assets/punchTheClock/shiwu.png'
+import border       from '../assets/punchTheClock/border.png'
 
 // 直购页
 export const spcShopImg = {
@@ -253,5 +258,10 @@ export const punchTheClock = {
   nullTu      : nullTu,
   x           : x,
   xiaolian    : xiaolian,
-  sou         : sou
+  sou         : sou,
+  jiangli     : jiangli,
+  xian        : xian,
+  shu         : shu,
+  shiwu       : shiwu,
+  border      : border,
 }