中奖页面

src/components/blessingGetPrize/index.js

+import React, { Component } from 'react';
+import './index.scss';
+import ListHeader from './../blessingPreheat/listHeader/index'
+
+export default class BlessingGetPrize extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      stage: '11.11 00:00～2:00',
+      prize: 'Python特训营优惠券',
+      isGet: true, //是否中奖
+      prizeType: 1, // 实物奖品 虚拟奖品
+    }
+  }
+  render() {
+    const {stage, prize, isGet, prizeType} = this.state;
+    return (
+      <div className="blessing_get_prize">
+        <div className='is__get_prize'>
+          <div className="get_piriz__info">
+            <div className='result'>{stage}中奖结果</div>
+            {
+              !isGet && (
+                <div className='no_prize'>很遗憾，你未中奖～</div>
+              )
+            }
+            {
+              isGet && prizeType === 1 && (
+                <div className='real__prize'>
+                  <div>恭喜你，一抽中{prize}奖品</div>
+                  <span className='address'>填写收货地址</span>
+                </div>
+              )
+            }
+            {
+              isGet && prizeType === 2 && (
+                <div className='virtual '>
+                  <div>恭喜你抽中{prize}，</div>
+                  <div>奖品已存放到你的账户</div>
+                </div>
+              )
+            }
+          </div>
+        </div>
+        <div className='current_stage'>
+          11.11 02:00～04:00 
+        </div>
+        <ListHeader text="抽奖已开启" styles={{margin: '16px 0 15px'}}/>
+
+        <div className='prize_list_container'>
+
+        </div>
+      </div>
+    )
+  }
+}

src/components/blessingGetPrize/index.scss

+.blessing_get_prize {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  background-color: #4B00F3;
+
+  .is__get_prize {
+    width: 100%;
+    height: 120px;
+    background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/quan2x.png') center center no-repeat;
+    background-size: 100% 100%;
+    margin-top: 10px;
+    position: relative;
+
+    .get_piriz__info {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+
+      .result {
+        height:16px;
+        line-height: 16px;
+        font-size:16px;
+        font-weight:400;
+        color:rgba(76,33,239,1);
+        margin-top: 30px;
+      }
+      .virtual {
+        font-size:16px;
+        font-weight:500;
+        color:rgba(76,33,239,1);
+        line-height:20px;
+        margin-top: 10px;
+        div {
+          width: 100%;
+          text-align: center;
+          text-align-last: center;
+          margin-top: 4px;
+        }
+      }
+      .no_prize {
+        font-size:16px;
+        font-weight:500;
+        color:rgba(76,33,239,1);
+        width: 100%;
+        text-align: center;
+        text-align-last: center;
+        margin-top: 18px;
+      }
+      .real__prize {
+        font-size:16px;
+        font-weight:500;
+        color:rgba(76,33,239,1);
+        width: 100%;
+        margin-top: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        div {
+          line-height: 16px;
+        }
+        .address {
+          font-size:12px;
+          font-weight:400;
+          text-decoration:underline;
+          color:rgba(76,33,239,1);
+          margin-top: 6px;
+        }
+      }
+    }
+  }
+
+  .current_stage {
+    width:100%;
+    font-size:16px;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    text-align: center;
+    text-align-last: center;
+  }
+
+  .prize_list_container {
+    width: 100%;
+height:250px;
+background:rgba(53,0,162,1);
+box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
+  }
+}
\ No newline at end of file

src/router/router-config.js

@@ -182,6 +182,10 @@ export default [
         component: loadable(() => import(/* webpackChunkName: 'blessing-preheat' */'@/components/blessingPreheat/index'))
     },
     {
+        path: '/blessingGetPrize',
+        component: loadable(() => import(/* webpackChunkName: 'blessing-getPrize' */'@/components/blessingGetPrize/index'))
+    },
+    {
         path: '/prize-winner-list',
         component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/prize-winner-list'))
     },