update slider

sayll · Apr 24, 2017 · d1074e6 · d1074e6
1 parent df79d16
commit d1074e6
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 93 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -22,6 +22,9 @@ rules:
   arrow-parens:
     - warn
     - as-needed
+  brace-style:
+    - error
+    - stroustrup
   comma-dangle:
     - error
     - only-multiline
@@ -39,11 +42,10 @@ rules:
   react/jsx-uses-vars: warn
   react/forbid-prop-types: off
   jsx-a11y/no-static-element-interactions: off
-  semi:
-    - error
-    - always
+  semi: off
 
 globals:
   document: false
   window: false
+  localStorage: true
   fetch: true
diff --git a/app/html/index.html b/app/html/index.html
@@ -17,6 +17,8 @@
   <meta name="keyword" content="">
   <meta name="description" content="">
   <meta name="Sayll" content="kilol@qq.com">
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
   <title>React</title>
 </head>
 <body>

diff --git a/app/view/index/components/Root/Slider/index.jsx b/app/view/index/components/Root/Slider/index.jsx
@@ -1,36 +1,30 @@
-import React from 'react';
-import ReactSwipes from 'react-swipes';
-import { Link } from 'react-router-dom';
-import './slider.pcss';
-import Img from '../../../../../source/img/service/slider.png';
+import React from 'react'
+import Slider from 'react-slick'
+import './slider.pcss'
+import img from '../../../../../source/img/service/slider.png'
 
-const items = [
-  { img: Img, key: 0 },
-  { img: Img, key: 1 },
-  { img: Img, key: 2 },
-];
-// swipes 的配置
-const opt = {
-  // https://github.com/younth/react-swipes
-  distance: document.body.clientWidth,
-};
-
-function Slider() {
+export default function Sliders() {
+  const settings = {
+    accessibility: true, // 是否开启箭头
+    className: 'mySlider',
+    adaptiveHeight: true, // 自动调整幻灯片高度
+    arrows: false, // 是否显示箭头导航
+    autoplay: true,
+    autoplaySpeed: 2500,
+    dots: true, // 导航点
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  }
   return (
-    <div className="viewport">
-      <ReactSwipes className="card-slide" options={opt}>
-        {
-          items.map(item => (
-            <div className="item" key={item.key}>
-              <Link to="/">
-                <img src={item.img} alt="" />
-              </Link>
-            </div>
-          ))
-        }
-      </ReactSwipes>
-    </div>
-  );
-}
-
-export default Slider;
+    <Slider id="slider" {...settings}>
+      <div><img src={img} alt="" /></div>
+      <div><img src={img} alt="" /></div>
+      <div><img src={img} alt="" /></div>
+      <div><img src={img} alt="" /></div>
+      <div><img src={img} alt="" /></div>
+      <div><img src={img} alt="" /></div>
+    </Slider>
+  )
+}
diff --git a/app/view/index/components/Root/Slider/slider.pcss b/app/view/index/components/Root/Slider/slider.pcss
@@ -1,22 +1,11 @@
-img {
-  vertical-align: top;
-}
-.viewport {
-  width: 300%;
-  overflow: hidden;
-  margin: 0 auto;
-  -webkit-transform: translateZ(0);
-}
-
-.item {
-  box-sizing: border-box;
-  width: 750px;
-  height: 370px;
-  background: #EFEFEF;
-  float: left;
-  color: #666;
+.mySlider {
+  position: relative;
   & img{
     width: 100%;
-    height: 100%;
+    height: 400px;
   }
-}
+  & .slick-dots{
+    position: absolute;
+    bottom: 10px;
+  }
+}
diff --git a/app/view/index/containers/App.jsx b/app/view/index/containers/App.jsx
@@ -1,28 +1,28 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { HashRouter as Router, Route } from 'react-router-dom';
-import { asyncComponent } from 'react-async-component';
-import createHistory from 'history/createHashHistory';
-import SelectArea from './SelectArea';
+import React from 'react'
+import { connect } from 'react-redux'
+import { HashRouter as Router, Route } from 'react-router-dom'
+import { asyncComponent } from 'react-async-component'
+import createHistory from 'history/createHashHistory'
+import SelectArea from './SelectArea'
 // import { UserIsAuthenticated, UserIsNotAuthenticated } from '../auth';
-import '../pcss/app.pcss';
+import '../pcss/app.pcss'
 
-const history = createHistory();
+const history = createHistory()
 /* const Login = asyncComponent({
   resolve: () => System.import('./Login')
 }); */
 const Root = asyncComponent({
   resolve: () => System.import('./Root')
-});
+})
 const User = asyncComponent({
   resolve: () => System.import('./User')
-});
+})
 const Service = asyncComponent({
   resolve: () => System.import('./Service')
-});
+})
 const Order = asyncComponent({
   resolve: () => System.import('./Order')
-});
+})
 
 function App() {
   return (
@@ -39,12 +39,13 @@ function App() {
         <Route path={'/order'} component={Order} />
       </div>
     </Router>
-  );
+  )
 }
+
 // UserIsAuthenticated
-App.propTypes = {};
+App.propTypes = {}
 
 function mapStateToProps(state) {
-  return state;
+  return state
 }
-export default connect(mapStateToProps)(App);
+export default connect(mapStateToProps)(App)
diff --git a/app/view/index/containers/User.jsx b/app/view/index/containers/User.jsx
@@ -1,15 +1,20 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import Header from '../components/Header';
-import Footer from '../components/Footer';
-import Home from '../components/User/Home';
-import Card from '../components/User/Card';
-import Recharge from '../components/User/Recharge';
-import RecordRecharge from '../components/User/RecordRecharge';
-import Record from '../components/User/Record';
-import Introduce from '../components/User/Introduce';
-import Address from '../components/User/Address';
-import AddAddress from '../components/User/AddAddress';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Route } from 'react-router-dom'
+import { asyncComponent } from 'react-async-component'
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import Home from '../components/User/Home'
+import Card from '../components/User/Card'
+import Recharge from '../components/User/Recharge'
+import RecordRecharge from '../components/User/RecordRecharge'
+import Record from '../components/User/Record'
+import Address from '../components/User/Address'
+import AddAddress from '../components/User/AddAddress'
+
+const Introduce = asyncComponent({
+  resolve: () => System.import('../components/User/Introduce')
+})
 
 function User({ match }) {
   return (
@@ -73,7 +78,13 @@ function User({ match }) {
       <Route path={'/user/address'} component={Address} />
       <Route path={'/user/addAddress'} component={AddAddress} />
     </div>
-  );
+  )
 }
 
-export default User;
+User.defaultProps = {
+  match: {}
+}
+User.propTypes = {
+  match: PropTypes.object
+}
+export default User
diff --git a/app/view/index/pcss/app.pcss b/app/view/index/pcss/app.pcss
@@ -12,21 +12,21 @@ html, body {
   margin: 0 auto;
 }
 
-#box{
+#box {
   min-height: 100vh;
   background: #fff;
 }
 
 #footer {
-  height: 70px; /*px*/
+  height: 80px; /*px*/
   background-color: rgba(0, 0, 0, 0);
   & ul {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
-    height: 70px; /*px*/
-    line-height: 70px; /*px*/
+    height: 80px; /*px*/
+    line-height: 80px; /*px*/
     border-top: 2px solid #eee; /*px*/
     background-color: #fff;
   }
@@ -105,10 +105,11 @@ html, body {
 #rootMenu {
   width: 100%;
   border-bottom: 2px solid #eee; /*px*/
-  padding-bottom: 20px;
+  padding: 10px 0;
   background-color: #fff;
   & li {
     float: left;
+    height: 115px; /*px*/
     width: 20%;
     text-align: center;
     & img {
@@ -123,8 +124,8 @@ html, body {
   padding: 15px;
   /* 顶层图片 */
   & .banner {
+    height: 220px; /*px*/
     width: 100%;
-    height: 220px;
   }
   & .textContent {
     padding: 0 10px;

diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "react-immutable-proptypes": "^2.1.0",
     "react-redux": "^5.0.3",
     "react-router-dom": "next",
-    "react-swipes": "^1.0.4",
+    "react-slick": "^0.14.11",
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.6.0",
     "redux-actions": "^2.0.2",