fork from bc4552c5a8

client/components/Intro/Intro.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'antd';
+import './Intro.scss';
+import { OverPack } from 'rc-scroll-anim';
+import TweenOne from 'rc-tween-one';
+import QueueAnim from 'rc-queue-anim';
+
+const IntroPart = props => (
+  <li className="switch-content">
+    <div className="icon-switch">
+      <Icon type={props.iconType} />
+    </div>
+    <div className="text-switch">
+      <p>
+        <b>{props.title}</b>
+      </p>
+      <p>{props.des}</p>
+    </div>
+  </li>
+);
+
+IntroPart.propTypes = {
+  title: PropTypes.string,
+  des: PropTypes.string,
+  iconType: PropTypes.string
+};
+
+class Intro extends React.PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    intro: PropTypes.shape({
+      title: PropTypes.string,
+      des: PropTypes.string,
+      img: PropTypes.string,
+      detail: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.string,
+          des: PropTypes.string
+        })
+      )
+    }),
+    className: PropTypes.string
+  };
+  render() {
+    const { intro } = this.props;
+    const id = 'motion';
+    const animType = {
+      queue: 'right',
+      one: { x: '-=30', opacity: 0, type: 'from' }
+    };
+    return (
+      <div className="intro-container">
+        <OverPack playScale="0.3">
+          <TweenOne
+            animation={animType.one}
+            key={`${id}-img`}
+            resetStyleBool
+            id={`${id}-imgWrapper`}
+            className="imgWrapper"
+          >
+            <div className="img-container" id={`${id}-img-container`}>
+              <img src={intro.img} />
+            </div>
+          </TweenOne>
+
+          <QueueAnim
+            type={animType.queue}
+            key={`${id}-text`}
+            leaveReverse
+            ease={['easeOutCubic', 'easeInCubic']}
+            id={`${id}-textWrapper`}
+            className={`${id}-text des-container textWrapper`}
+          >
+            <div key={`${id}-des-content`}>
+              <div className="des-title">{intro.title}</div>
+              <div className="des-detail">{intro.des}</div>
+            </div>
+            <ul className="des-switch" key={`${id}-des-switch`}>
+              {intro.detail.map(function(item, i) {
+                return (
+                  <IntroPart key={i} title={item.title} des={item.des} iconType={item.iconType} />
+                );
+              })}
+            </ul>
+          </QueueAnim>
+        </OverPack>
+      </div>
+    );
+  }
+}
+
+export default Intro;

client/components/Intro/Intro.scss

@@ -0,0 +1,74 @@
+$imgUrl: "../../../static/image/";
+$color-grey: #E5E5E5;
+$color-blue: #2395f1;
+$color-white: #fff;
+
+.intro-container{
+  .imgWrapper{
+    height: 100%;
+    width: 50%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+  }
+  .textWrapper{
+    display: block;
+    width: 50%;
+    height: 150px;
+    vertical-align: top;
+    position: absolute;
+    margin: auto;
+    right: 0;
+  }
+  .des-container{
+    padding-left: .15rem;
+    .des-title{
+      font-size: .24rem;
+      margin-bottom: .1rem;
+    }
+    .des-detail{
+      font-size: .15rem;
+      margin-bottom: .2rem;
+    }
+    .des-switch{
+      .switch-content{
+        float: left;
+        width: 50%;
+        max-height: .85rem;
+        font-size: .14rem;
+        padding: .1rem .15rem .1rem 0;
+        div{
+          float: left;
+        }
+        .icon-switch{
+          height: .4rem;
+          width: .4rem;
+          border-radius: .02rem;
+          background-color: $color-blue;
+          margin-right: .1rem;
+          color: $color-white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: .18rem;
+        }
+        .text-switch{
+          width: calc(100% - .65rem);
+        }
+      }
+    }
+  }
+  .img-container{
+    height: 100%;
+    width: 100%;
+    padding-right: .15rem;
+    //background-image: url("#{$imgUrl}demo-img.png");
+    img{
+      height: 100%;
+      width: 100%;
+      border: .01rem solid $color-grey;
+      box-shadow : 0 0 3px 1px $color-grey;
+      border-radius: .04rem;
+    }
+  }
+}