公共VList组件，全局注入公共scss变量

config/webpack.config.js

@@ -110,7 +110,16 @@ module.exports = function(webpackEnv) {
             sourceMap: isEnvProduction && shouldUseSourceMap,
           },
         });
+        if(preProcessor == 'sass-loader' && !cssOptions.modules){
+            loaders.push({
+                loader: require.resolve('sass-resources-loader'),
+                options: {
+                    resources: [require.resolve('../src/styles/variable.scss')]
+                }
+            })
+        }
     }
+    console.log(loaders);
     return loaders;
   };
 

package.json

@@ -133,7 +133,8 @@
     ]
   },
   "devDependencies": {
-    "babel-plugin-import": "^1.11.0"
+    "babel-plugin-import": "^1.11.0",
+    "sass-resources-loader": "^2.0.0"
   },
   "theme": {
     "brand-primary": "green",

src/common/VList/index.js

+import React from 'react';
+import './index.scss'
+
+const VList = (props) => {
+    return (
+        <li className='v-list-item'>
+            <div className="content">
+                <div className="cover" onClick={props.handleClick}>
+                    <img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' alt=""/>
+                </div>
+                {props.info}
+            </div>
+        </li>
+    );
+};
+
+export default VList;
\ No newline at end of file

src/common/VList/index.scss

+.v-list-item {
+    height: 127px;
+    padding: 10px 10px 0;
+
+    .content {
+        display: flex;
+        height: 100%;
+        padding-bottom: 10px;
+        border-bottom: 1px solid $sp_e7eaf1;
+
+        .cover {
+            flex: 1 0 auto;
+            margin-right: 16px;
+
+            img {
+                width: 150px;
+                height: 108px;
+                border-radius: 3px;
+            }
+        }
+
+
+    }
+}
\ No newline at end of file

src/common/index.js

 // 底部路由
 export { default as Nav } from './Nav'
+export { default as VList } from './VList'
\ No newline at end of file

src/components/study/index.js

-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import './study.scss'
+
+import { Flex } from 'antd-mobile'
+import { NavLink, Route, Switch } from "react-router-dom";
+import MyCourses from "./my-courses";
+
+
 
 class Study extends Component {
 
     render() {
+        const {match} = this.props;
         return (
-            <div>
-                学习
-            </div>
+            <section id='study'>
+                <Flex className='tab'>
+                    <Flex.Item>
+                        <NavLink to={`${match.url}/my-course`} activeClassName='active'>我的课程</NavLink>
+                    </Flex.Item>
+                    <Flex.Item>
+                        <NavLink to={`${match.url}/free-course`} activeClassName='active'>免费课程</NavLink>
+                    </Flex.Item>
+                </Flex>
+                <Switch>
+                    <Route path={`${this.props.match.path}/my-course`} component={MyCourses}/>
+                    <Route path={`${this.props.match.path}/free-course`} render={() => {
+                        return (
+                            <div>bbb</div>
+                        )
+                    }}/>
+                </Switch>
+            </section>
         )
     }
 
 }
 
-export default Study;
\ No newline at end of file
+export default Study
\ No newline at end of file

src/components/study/my-courses/index.js

+import React from "react"
+import { VList } from '../../../common'
+
+const mockData = [
+    {
+        title: '三月面试求职班',
+        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
+        contact: 'QQ群：449141326',
+        time: '03月12日',
+        record: '学习到第2课2分33秒'
+    },
+    {
+        title: '三月面试求职班',
+        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
+        contact: 'QQ群：449141326',
+        time: '03月12日',
+        record: '学习到第2课2分33秒'
+    },
+    {
+        title: '三月面试求职班',
+        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
+        contact: 'QQ群：449141326',
+        time: '03月12日',
+        record: '学习到第2课2分33秒'
+    },
+    {
+        title: '三月面试求职班',
+        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
+        contact: 'QQ群：449141326',
+        time: '03月12日',
+        record: '学习到第2课2分33秒'
+    },
+]
+
+export default function MyCourses(props) {
+    const handleClick = () => {
+        console.log(1);
+    }
+    return (
+        <ul>
+            {mockData.map((item, index) => {
+                const Info = (
+                    <div className="info">
+                        <p className='title'>{item.title}</p>
+                        <p className='contact'>{item.contact}</p>
+                        <p className='des'>
+                            <span className='time'>{item.time}</span>
+                            <span className='record'>{item.record}</span>
+                        </p>
+                    </div>
+                )
+                return (
+                    <VList handleClick={handleClick} {...item} key={index} info={Info}></VList>
+                )
+            })}
+        </ul>
+    )
+}
\ No newline at end of file

src/components/study/study.scss

+$tabHeight: 44px;
+$tabFontSize: 15px;
+
+#study {
+    height: 100%;
+    background: $bg_fff;
+
+    .tab {
+        height: $tabHeight;
+        line-height: $tabHeight;
+        text-align: center;
+        background: #F7F9FC;
+
+        a {
+            display: inline-block;
+            height: $tabHeight;
+            font-size: $tabFontSize;
+        }
+    }
+
+    .active {
+        color: $active;
+        border-bottom: 1px solid $active;
+    }
+
+    .info {
+        display: flex;
+        flex-wrap: wrap;
+
+        .title {
+            font-size: 15px;
+            font-weight: 400;
+        }
+
+        .contact {
+            font-size: 13px;
+            color: $red;
+        }
+
+        .des {
+            align-self: center;
+            color: $color_999;
+            font-size: 11px;
+
+            .time {
+                margin-right: 10px;
+            }
+        }
+    }
+}
\ No newline at end of file

src/index.css

+html,
 body {
+  height: 100%;
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -8,6 +10,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+#root{
+  height: 100%;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
+import './index.css'
 
 import Router from './router';
 // import { Provider } from 'react-redux';

src/styles/variable.scss

@@ -4,6 +4,7 @@
 $active: #09f;
 $white: #fff;
 $black: #000;
+$red: #f21;
 $color_333: #333;
 $color_555: #555;
 $color_666: #666;
@@ -47,4 +48,3 @@ $sp_e7eaf1: #e7eaf1;
 /*
  *  @ 边框颜色
  */
-