banner

Author: taobaotest

build/app.css

@@ -6,31 +6,31 @@
     "start": "gulp"
   },
   "devDependencies": {
-    "react": "15.4.2",
-    "react-dom": "15.4.2",
-    "gulp": "3.9.1",
-    "gulp-util": "2.2.20",
-    "webpack": "1.9.11",
-    "webpack-dev-server": "1.2.9",
-    "css-loader": "0.6.12",
-    "node-sass": "4.5.0",
-    "sass-loader": "6.0.2",
-    "json-loader": "*",
-    "style-loader": "0.6.5",
-    "babel-loader": "6.4.0",
     "babel-core": "6.23.1",
-    "babel-preset-react": "6.23.0",
-    "babel-preset-es2015": "6.22.0",
-    "babel-preset-stage-0": "6.22.0",
+    "babel-eslint": "^6.0.5",
+    "babel-loader": "6.4.0",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-transform-object-assign": "6.22.0",
-    "extract-text-webpack-plugin": "1.0.1",
-    "node-libs-browser": "2.0.0",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-react": "6.23.0",
+    "babel-preset-stage-0": "6.22.0",
+    "css-loader": "0.6.12",
     "eslint": "^3.6.0",
-    "babel-eslint": "^6.0.5",
     "eslint-config-ali": "^1.0.0",
+    "eslint-plugin-import": "*",
     "eslint-plugin-react": "*",
-    "eslint-plugin-import": "*"
+    "extract-text-webpack-plugin": "1.0.1",
+    "gulp": "3.9.1",
+    "gulp-util": "2.2.20",
+    "json-loader": "*",
+    "node-libs-browser": "2.0.0",
+    "node-sass": "^4.7.2",
+    "react": "15.4.2",
+    "react-dom": "15.4.2",
+    "sass-loader": "6.0.2",
+    "style-loader": "0.6.5",
+    "webpack": "1.9.11",
+    "webpack-dev-server": "1.2.9"
   },
   "dependencies": {
     "exceed": "^1.7.2",

build/app.js

@@ -109,7 +109,6 @@ export default class Home extends React.Component {
     if(!_.isEmpty(architecture)) {
       return (
         <div className="pouch-home-architecture">
-          <img src="https://img.alicdn.com/tfs/TB1M29FXTtYBeNjy1XdXXXXyVXa-3840-1360.png"/>
           <h1>{architecture.title}</h1>
           <p>{architecture.description}</p>
           <br/><br/>
@@ -125,7 +124,6 @@ export default class Home extends React.Component {
     return (
       <div className="pouch-home-body">
         <div className="pouch-home-banner">
-          <img className="pouch-home-banner-bg" src="https://img.alicdn.com/tfs/TB1LEsTXqmWBuNjy1XaXXXCbXXa-3840-1120.png"/>
           <div className="pouch-cols-container">
             <img className="pouch-home-banner-img" src="https://img.alicdn.com/tfs/TB1VCQyXpOWBuNjy0FiXXXFxVXa-434-762.png"/>
             <div className="pouch-home-banner-rotate-img-wrap">

package.json

@@ -37,16 +37,11 @@
   height: 560px;
   position: relative;
   color: #FFF;
-  background: $bg_gray;
   overflow: hidden;
-  .pouch-home-banner-bg {
-    height: 560px;
-    width: 1920px;
-    position: absolute;
-    left: 50%;
-    top:0 ;
-    margin-left: -960px;
-  }
+  background-image: url("https://img.alicdn.com/tfs/TB1LEsTXqmWBuNjy1XaXXXCbXXa-3840-1120.png");
+  background-size: 1920px;
+  background-color: $bg_gray;
+  background-position: center top;
   img.pouch-home-banner-img {
     position: absolute;
     top: 80px;
@@ -365,9 +360,7 @@
         vertical-align: middle;
       }
     }
-
   }
-
 }
 
 .pouch-home-architecture {
@@ -377,6 +370,9 @@
   position: relative;
   overflow: hidden;
   transition-duration: 0.3s;
+  background-image: url("https://img.alicdn.com/tfs/TB1M29FXTtYBeNjy1XdXXXXyVXa-3840-1360.png");
+  background-size: 1920px;
+  background-position: center top;
   > img {
     width: 1920px;
     height: 680px;