rule popup basic complete

src/components/blessingPrehead/index.js

+import React, { Component } from 'react';
+import RulePopup from './rulePopup/index';
+import './index.scss';
+
+class BlessingPrehead extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isRule: true
+    };
+  }
+
+  handleToHide = () => {
+    this.setState({
+      isRule: false
+    });
+  }
+
+  render() {
+    const { isRule } = this.state;
+    return (
+      <div>
+        22222
+        {
+          isRule && 
+          <RulePopup handleToHide={this.handleToHide} />
+        }
+        
+      </div>
+    );
+  }
+}
+
+export default BlessingPrehead;
\ No newline at end of file

src/components/blessingPrehead/rulePopup/index.js

+import React, { Component } from 'react';
+import './index.scss';
+
+class BlessingPrehead extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      rules: [
+        '•	抽奖的次数可通过积福气获得，福气值越高，抽奖的次数越多;',
+        '•	本次抽奖形式为开奖制，下一时段开启抽奖前会公布上一次中奖结果及名单，可关注“七月在线”服务号及时获取中奖结果，提醒参与下次抽奖;',
+        '•	每个时段仅可使用一次抽奖机会，每日抽奖次数限当日用，抽奖次数不累加至次日;',
+        '•	中奖后请及时填写邮寄信息，不填写视为主动放弃奖品；',
+        '•	解释权归北京七月在线所有。',
+      ]
+    }
+  }
+
+  render() {
+    const { rules } = this.state;
+    const { handleToHide } = this.props;
+    return (
+      <div className="rule-popup__container">
+        <div className="rule-popup">
+          <h2 className="rule-popup__title">活动规则</h2>
+          <ul className="rule-popup__list">
+            {rules.map((item, index) => (
+              <li className="rule-popup__item" key={index}>{item}</li>
+            ))}
+          </ul>
+        </div>
+        <i className="iconfont iconiconfront-2" onClick={handleToHide}></i>
+      </div>
+    );
+  }
+}
+
+export default BlessingPrehead;
\ No newline at end of file

src/components/blessingPrehead/rulePopup/index.scss

+.rule-popup__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+
+  .iconfont {
+    margin: 16px 0 0;
+    font-size: 24px;
+    color: #fff;
+    cursor: pointer;
+  }
+}
+
+.rule-popup {
+  width: 300px;
+  height: 323px;
+  padding: 20px 0 0;
+  border-radius: 10px;
+  box-sizing: border-box;
+  text-align: center;
+  background-color: #fff;
+}
+
+.rule-popup__title {
+  margin: 0 0 15px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #525C65;
+  text-align: center;
+  line-height: 1;
+}
+
+.rule-popup__list {
+  padding: 0 20px;
+}
+
+.rule-popup__item {
+  font-size: 14px;
+  color: rgba(82, 92, 101, .9);
+  text-align: left;
+  line-height: 21px;
+}
\ No newline at end of file

src/router/router-config.js

@@ -173,5 +173,8 @@ export default [
         path: '/blessingRank',
         component: loadable(() => import(/* webpackChunkName: 'Country' */'@/components/blessingRank/index'))
     },
-
+    {
+        path: '/blessingPrehead',
+        component: loadable(() => import(/* webpackChunkName: 'Country' */'@/components/blessingPrehead/index'))
+    },
 ]
\ No newline at end of file