python study

src/components/pythonStudy/index.js

+import React, { Component } from 'react';
+import { Accordion } from 'antd-mobile';
+import { HeaderBar } from '@/common';
+import { http } from '@/utils';
+import './index.scss';
+
+class PythonStudy extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      progress: '10%',
+    };
+  }
+
+  componentDidMount() {
+    this.fetchCourseDetail();
+  }
+
+  fetchCourseDetail = () => {
+    http.get(`${API['home']}/web/it_detail?id=181`).then(res => {
+      console.log(res);
+    });
+  }
+
+  onChange = (key) => {
+    console.log(key);
+  }
+
+  render() {
+    const { progress } = this.state;
+    return (
+      <div className="python-study">
+        <HeaderBar title='Python基础语法' arrow={true} />
+        <div className="python-study__header">
+          <div className="python-study__course">
+            <h2 className="python-study__course-name">Python人工智能</h2>
+            <p className="python-study__course-contact">
+              <span>添加助教微信入群：sheng546122</span>
+              <span>并备注您的学号：479409</span>
+            </p>
+          </div>
+          <div className="python-study__progress">
+            <h2 className="python-study__progress-title">学习进度</h2>
+            <div className="python-study__progress-bar">
+              <i style={{with: progress}}></i>
+              <span className="python-study__progress-tip" style={{left: progress}}>100%</span>
+            </div>
+          </div>
+        </div>
+        <Accordion 
+          defaultActiveKey="0" 
+          className="python-study__stage" 
+          onChange={this.onChange}
+        >
+          <Accordion.Panel header="第一阶段  千里始于足下" className="pad">
+            <h2 className="python-study__pass">
+              第0关  计算机发展及Python介绍
+              <i className="python-study__pass-tag">闯关完成</i>
+            </h2>
+            <div className="python-study__subject">
+              <i className="python-study__subject-icon"></i>
+              <i className="python-study__subject-status" data-status="complete"></i>
+              <div className="python-study__subject-content">
+                <h2 className="python-study__subject-title">基础练习基基础练习基础练习基础练习基础练习</h2>
+                <span className="python-study__subject-tag">必做练习</span>
+              </div>
+            </div>
+            <div className="python-study__subject" data-status="lock">
+              <i className="python-study__subject-icon"></i>
+              <i className="python-study__subject-status" data-status="lock"></i>
+              <div className="python-study__subject-content" >
+                <h2 className="python-study__subject-title" data-status="lock">基础练习基基础练习基础练习基础练习基础练习</h2>
+                <span className="python-study__subject-tag">必做练习</span>
+              </div>
+            </div>
+          </Accordion.Panel>
+        </Accordion>
+        <button className="python-study__button">开始学习</button>
+      </div>
+    )
+  }
+}
+
+export default PythonStudy;
\ No newline at end of file

src/components/pythonStudy/index.scss

+.am-accordion.python-study__stage .am-accordion-item .am-accordion-header {
+  height: 44px;
+  padding-left: 13px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  background-color: #CFDBE5;
+}
+
+html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-accordion-content .am-accordion-content-box::after {
+  display: none;
+}
+
+.am-accordion.python-study__stage .am-accordion-item .am-accordion-header i {
+  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/subject-icon-arrow.png');
+}
+
+.python-study {
+  height: 100%;
+  background-color: #F4F5F6;
+}
+
+.python-study__header {
+  margin: 10px 10px 18px;
+  border-radius: 5px;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.python-study__course {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 55px;
+  padding: 0 12px;
+  background-color: #1A9BFC;
+}
+
+.python-study__course-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.python-study__course-contact {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 12px;
+  color: rgba(255,255,255,.8);
+}
+
+.python-study__progress {
+  height: 66px;
+  padding: 0 12px;
+}
+
+.python-study__progress-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(51,51,51,.6);
+  line-height: 39px;
+}
+
+.python-study__progress-bar {
+  position: relative;
+  height: 3px;
+  margin: 11px 0 13px;
+  border-radius: 2px;
+  background-color: rgba(207,219,229,.6);
+
+  i {
+    position: absolute;
+    width: 10%;
+    height: 100%;
+    border-radius: 2px;
+    background-color: #1A9BFC;
+  }
+}
+
+.python-study__progress-tip {
+  position: absolute;
+  top: -26px;
+  width: 36px;
+  margin-left: -18px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  text-align: center;
+  line-height: 18px;
+  background-color: #1A9BFC;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -8px;
+    margin-left: -4px;
+    border: 4px solid;
+    border-color:  #1A9BFC transparent transparent;
+  }
+}
+
+.python-study__stage {
+  margin: 15px 10px 0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.python-study__pass {
+  margin: 0 13px;
+  padding-top: 7px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  line-height: 40px;
+}
+
+.python-study__pass-tag {
+  display: inline-block;
+  width: 62px;
+  margin-left: 6px;
+  border-radius: 11px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  color: rgba(26,155,252,1);
+  text-align: center;
+  line-height: 21px;
+  background-color: rgba(26,155,252,.1);;
+}
+
+.python-study__subject {
+  height: 67px;
+  margin: 0 8px 8px;
+  padding: 6px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  background-color: rgba(247,248,249,1);
+
+
+  &[data-status="lock"] {
+    background-color: rgba(247,248,249,.6);
+  }
+}
+
+.python-study__subject-icon {
+  float: left;
+  width: 55px;
+  height: 55px;
+  border-radius: 4px;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.python-study__subject-status {
+  position: absolute;
+  right: 17px;
+  width: 21px;
+  height: 21px;
+  background-size: cover;
+
+  &[data-status="complete"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/subject-icon-0.png');
+  }
+
+  &[data-status="lock"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/subject-icon-1.png');
+  }
+}
+
+.python-study__subject-content {
+  height: 100%;
+  margin-left: 55px;
+  padding: 0 33px 0 12px;
+}
+
+.python-study__subject-title {
+  font-size: 14px;
+  color: #333;
+  line-height: 18px;
+
+  &[data-status="lock"] {
+    color: #525C65;
+  }
+}
+
+.python-study__subject-tag {
+  display: inline-block;
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 12px;
+  color: rgba(82,92,101,.1);
+  line-height: 18px;
+  background-color: rgba(82,92,101,.1);
+}
+
+.python-study__button {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  border-style: none;
+  box-sizing: border-box;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  text-align: center;
+  background-color: #1A9BFC;
+}
\ No newline at end of file

src/router/router-config.js

@@ -235,4 +235,8 @@ export default [
         path: '/pythonShare',
         component: loadable(() => import('@/components/pythonShare'))
     },
+    {
+        path: '/pythonStudy',
+        component: loadable(() => import('@/components/pythonStudy'))
+    },
 ]