中间页

src/common/closable-popup/index.js

@@ -3,9 +3,16 @@ import ReactDOM from 'react-dom'
 import './index.scss'
 import classnames from 'classnames'
 
+const re = /(https?|ftp):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
+
 function ClosablePopup({
-                         title, content, className, closable = true, close = function () {
-  }
+                         title,
+                         content,
+                         className,
+                         closable = true,
+                         close = function () {
+                         },
+                         closeIcon = 'iconiconfront-2'
                        } = {}) {
 
   function unmountComponent() {
@@ -35,7 +42,10 @@ function ClosablePopup({
           {content}
         </div>
         {
-          closable && <i className={'close iconfont iconiconfront-2'} onClick={_close}/>
+          closable &&
+          re.test(closeIcon)
+            ? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/>
+            : <i className={`close iconfont ${closeIcon}`} onClick={_close}/>
         }
       </div>
     </div>

src/common/closable-popup/index.scss

@@ -31,5 +31,16 @@
             font-size: 36px;
             color: #fff;
         }
+
+        .close-icon {
+            position: absolute;
+            bottom: -66px;
+            left: 50%;
+            width: 33px;
+            height: 33px;
+            transform: translateX(-50%);
+            font-size: 36px;
+            color: #fff;
+        }
     }
 }

src/components/activity/newyear-2019/box-container/box-container.scss

+.box-container {
+    position: relative;
+    background: #327443;
+    padding: 14px 0;
+
+    .image-box {
+        height: 100%;
+        background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/sd_nr_bj2.png") repeat-y;
+        background-size: 100% auto;
+    }
+
+    @mixin common-deco($bg) {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 14px;
+        display: block;
+        background: url($bg) no-repeat;
+        background-size: 375px auto;
+    }
+
+    &::before {
+        @include common-deco("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/sd_nr_bj1.png");
+        top: 0;
+    }
+
+    &::after {
+        @include common-deco("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/sd_nr_bj3.png");
+        bottom: 0;
+    }
+}

src/components/activity/newyear-2019/box-container/container.js

+import React, { Component } from 'react'
+import './box-container.scss'
+class Container extends Component {
+  render() {
+    return (
+      <div className={'box-container'}>
+        <div className="image-box">
+          {this.props.children}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Container

src/router/router-config.js

@@ -220,10 +220,17 @@ export default [
     },
     {
         path: '/activity',
+        exact: true,
         component: Activity,
     },
     {
         path: '/invite',
         component: Invite,
-    }
+    },
+
+    //双旦活动
+    {
+        path: '/activity/newyear-2019/landing',
+        component: loadable(() => import(/* webpackChunkName: 'newyear-2019-landing'*/ '@components/activity/newyear-2019/landing/index'))
+    },
 ]