Skip to content

M
mr-julyedu
Commit 8510ff53 by xuzhenghua
Options

课程组件

parent 6fddde37
Showing with 331 additions and 176 deletions
.idea/workspace.xml
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="60bc3527-5f9e-436f-8ed9-968e6eddd66e" name="Default Changelist" comment=""> <list default="true" id="60bc3527-5f9e-436f-8ed9-968e6eddd66e" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/src/common/Course/course.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/common/Course/course.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/common/course/course.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/common/course/course.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/common/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/common/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Index/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/index.js" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/Index/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Index/index.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/index.scss" afterDir="false" />
</list> </list>
<ignored path="$PROJECT_DIR$/node_modules/" /> <ignored path="$PROJECT_DIR$/node_modules/" />
<ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/.tmp/" />
...@@ -19,8 +23,8 @@ ...@@ -19,8 +23,8 @@
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js"> <entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="430"> <state relative-caret-position="-467">
<caret line="121" column="53" selection-start-line="121" selection-start-column="45" selection-end-line="121" selection-end-column="53" /> <caret line="166" column="66" selection-start-line="166" selection-start-column="62" selection-end-line="166" selection-end-column="66" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#0#39#0" expanded="true" />
<element signature="e#275#1694#0" /> <element signature="e#275#1694#0" />
...@@ -31,18 +35,45 @@ ...@@ -31,18 +35,45 @@
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/common/course/course.js"> <entry file="file://$PROJECT_DIR$/src/common/Course/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="252"> <state relative-caret-position="231">
<caret line="12" column="52" lean-forward="true" selection-start-line="12" selection-start-column="34" selection-end-line="12" selection-end-column="52" /> <caret line="11" column="26" lean-forward="true" selection-start-line="11" selection-start-column="26" selection-end-line="11" selection-end-column="26" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#1006#1032#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/Index/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1077">
<caret line="199" column="26" lean-forward="true" selection-start-line="199" selection-start-column="26" selection-end-line="200" selection-end-column="21" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/common/Course/course.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="399">
<caret line="19" column="4" selection-start-line="19" selection-start-column="4" selection-end-line="19" selection-end-column="4" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/styles/variable.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="93">
<caret line="7" column="10" selection-start-line="7" selection-end-line="7" selection-end-column="10" />
</state>
</provider>
</entry>
</file>
</leaf> </leaf>
</component> </component>
<component name="FileTemplateManagerImpl"> <component name="FileTemplateManagerImpl">
...@@ -92,14 +123,17 @@ ...@@ -92,14 +123,17 @@
<option value="$PROJECT_DIR$/src/components/Index/scroll.js" /> <option value="$PROJECT_DIR$/src/components/Index/scroll.js" />
<option value="$PROJECT_DIR$/src/components/Index/topscroll.js" /> <option value="$PROJECT_DIR$/src/components/Index/topscroll.js" />
<option value="$PROJECT_DIR$/src/index.js" /> <option value="$PROJECT_DIR$/src/index.js" />
<option value="$PROJECT_DIR$/src/components/Index/index.scss" />
<option value="$PROJECT_DIR$/src/components/Index/carousel.js" /> <option value="$PROJECT_DIR$/src/components/Index/carousel.js" />
<option value="$PROJECT_DIR$/src/components/Index/carousel.scss" /> <option value="$PROJECT_DIR$/src/components/Index/carousel.scss" />
<option value="$PROJECT_DIR$/src/components/Index/course.scss" /> <option value="$PROJECT_DIR$/src/components/Index/course.scss" />
<option value="$PROJECT_DIR$/src/components/Index/course.js" /> <option value="$PROJECT_DIR$/src/components/Index/course.js" />
<option value="$PROJECT_DIR$/src/common/course/course.scss" /> <option value="$PROJECT_DIR$/src/common/course/course.scss" />
<option value="$PROJECT_DIR$/src/common/course/course.js" /> <option value="$PROJECT_DIR$/src/common/course/course.js" />
<option value="$PROJECT_DIR$/src/common/index.js" />
<option value="$PROJECT_DIR$/src/common/Course/index.js" />
<option value="$PROJECT_DIR$/src/components/Index/index.js" /> <option value="$PROJECT_DIR$/src/components/Index/index.js" />
<option value="$PROJECT_DIR$/src/components/Index/index.scss" />
<option value="$PROJECT_DIR$/src/common/Course/course.scss" />
</list> </list>
</option> </option>
</component> </component>
...@@ -133,6 +167,12 @@ ...@@ -133,6 +167,12 @@
<item name="src" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" />
<item name="common" type="462c0819:PsiDirectoryNode" /> <item name="common" type="462c0819:PsiDirectoryNode" />
</path> </path>
<path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="styles" type="462c0819:PsiDirectoryNode" />
</path>
</expand> </expand>
<select /> <select />
</subPane> </subPane>
...@@ -203,12 +243,12 @@ ...@@ -203,12 +243,12 @@
<workItem from="1555481509516" duration="2393000" /> <workItem from="1555481509516" duration="2393000" />
<workItem from="1555494639819" duration="2193000" /> <workItem from="1555494639819" duration="2193000" />
<workItem from="1555583161462" duration="713000" /> <workItem from="1555583161462" duration="713000" />
<workItem from="1555596885912" duration="5360000" /> <workItem from="1555596885912" duration="7849000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="26036000" /> <option name="totallyTimeSpent" value="28525000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="0" y="0" width="1440" height="900" extended-state="6" /> <frame x="0" y="0" width="1440" height="900" extended-state="6" />
...@@ -293,51 +333,60 @@ ...@@ -293,51 +333,60 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/Nav/NavLink/index.js"> <entry file="file://$PROJECT_DIR$/src/font/iconfont.css">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="231"> <state relative-caret-position="251">
<caret line="11" column="40" lean-forward="true" selection-start-line="11" selection-start-column="40" selection-end-line="11" selection-end-column="40" /> <caret line="25" column="9" selection-start-line="25" selection-start-column="1" selection-end-line="25" selection-end-column="9" />
<folding>
<element signature="e#0#40#0" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/font/iconfont.css"> <entry file="file://$PROJECT_DIR$/.history/config/webpack.config_20190418113120.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="251"> <state relative-caret-position="279">
<caret line="25" column="9" selection-start-line="25" selection-start-column="1" selection-end-line="25" selection-end-column="9" /> <caret line="267" column="37" selection-start-line="267" selection-start-column="25" selection-end-line="267" selection-end-column="37" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/styles/variable.scss"> <entry file="file://$PROJECT_DIR$/src/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="84"> <state relative-caret-position="189">
<caret line="4" column="13" lean-forward="true" selection-start-line="4" selection-end-line="5" /> <caret line="9" column="11" lean-forward="true" selection-start-line="9" selection-start-column="11" selection-end-line="9" selection-end-column="11" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/.history/config/webpack.config_20190418113120.js"> <entry file="file://$PROJECT_DIR$/src/menu.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="279"> <state relative-caret-position="21">
<caret line="267" column="37" selection-start-line="267" selection-start-column="25" selection-end-line="267" selection-end-column="37" /> <caret line="1" column="31" lean-forward="true" selection-start-line="1" selection-start-column="31" selection-end-line="1" selection-end-column="31" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.scss"> <entry file="file://$PROJECT_DIR$/src/index.css">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="210"> <state relative-caret-position="252">
<caret line="10" column="27" selection-start-line="10" selection-start-column="27" selection-end-line="10" selection-end-column="27" /> <caret line="12" column="14" selection-start-line="12" selection-start-column="14" selection-end-line="12" selection-end-column="14" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/study/index.js"> <entry file="file://$PROJECT_DIR$/src/common/carousel/carousel.scss">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="126"> <state relative-caret-position="315">
<caret line="6" column="17" lean-forward="true" selection-start-line="6" selection-start-column="17" selection-end-line="6" selection-end-column="17" /> <caret line="15" lean-forward="true" selection-start-line="15" selection-end-line="15" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/study/study.scss">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/src/common/VList/index.scss">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Nav/index.js"> <entry file="file://$PROJECT_DIR$/src/common/Nav/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="231"> <state relative-caret-position="231">
...@@ -348,43 +397,49 @@ ...@@ -348,43 +397,49 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/index.js"> <entry file="file://$PROJECT_DIR$/src/common/Nav/NavLink/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="189"> <state relative-caret-position="84">
<caret line="9" column="11" lean-forward="true" selection-start-line="9" selection-start-column="11" selection-end-line="9" selection-end-column="11" /> <caret line="4" column="49" lean-forward="true" selection-start-line="4" selection-start-column="49" selection-end-line="4" selection-end-column="49" />
<folding> <folding>
<element signature="e#0#26#0" expanded="true" /> <element signature="e#0#40#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/menu.js"> <entry file="file://$PROJECT_DIR$/src/common/Course/course.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="21"> <state relative-caret-position="27">
<caret line="1" column="31" lean-forward="true" selection-start-line="1" selection-start-column="31" selection-end-line="1" selection-end-column="31" /> <caret line="19" column="27" lean-forward="true" selection-start-line="19" selection-start-column="27" selection-end-line="19" selection-end-column="27" />
<folding> <folding>
<element signature="e#0#26#0" expanded="true" /> <element signature="e#919#945#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/index.js"> <entry file="file://$PROJECT_DIR$/src/components/my/index.js">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/src/components/study/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="21"> <state relative-caret-position="91">
<caret line="1" column="38" lean-forward="true" selection-start-line="1" selection-start-column="38" selection-end-line="1" selection-end-column="38" /> <caret line="9" column="31" lean-forward="true" selection-start-line="9" selection-start-column="31" selection-end-line="9" selection-end-column="31" />
<folding>
<element signature="e#0#40#0" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/index.css"> <entry file="file://$PROJECT_DIR$/src/common/scroll/scroll.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="252"> <state relative-caret-position="105">
<caret line="12" column="14" selection-start-line="12" selection-start-column="14" selection-end-line="12" selection-end-column="14" /> <caret line="6" column="25" lean-forward="true" selection-start-line="6" selection-start-column="25" selection-end-line="6" selection-end-column="25" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/my/index.js">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/src/common/scroll/topscroll.js"> <entry file="file://$PROJECT_DIR$/src/common/scroll/topscroll.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="31"> <state relative-caret-position="31">
...@@ -395,44 +450,57 @@ ...@@ -395,44 +450,57 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/scroll/scroll.js"> <entry file="file://$PROJECT_DIR$/src/common/carousel/carousel.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="105"> <state relative-caret-position="189">
<caret line="6" column="25" lean-forward="true" selection-start-line="6" selection-start-column="25" selection-end-line="6" selection-end-column="25" /> <caret line="9" column="20" lean-forward="true" selection-start-line="9" selection-start-column="20" selection-end-line="9" selection-end-column="20" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#0#39#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/carousel/carousel.scss"> <entry file="file://$PROJECT_DIR$/src/common/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="315"> <state relative-caret-position="63">
<caret line="15" lean-forward="true" selection-start-line="15" selection-end-line="15" /> <caret line="3" column="44" lean-forward="true" selection-start-line="3" selection-start-column="44" selection-end-line="3" selection-end-column="44" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/carousel/carousel.js"> <entry file="file://$PROJECT_DIR$/src/components/study/my-courses/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="63"> <state relative-caret-position="321">
<caret line="3" column="34" selection-start-line="3" selection-start-column="34" selection-end-line="3" selection-end-column="34" /> <caret line="41" column="30" lean-forward="true" selection-start-line="41" selection-start-column="30" selection-end-line="41" selection-end-column="30" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#0#25#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/course/course.scss"> <entry file="file://$PROJECT_DIR$/src/common/VList/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="147"> <state relative-caret-position="105">
<caret line="19" column="22" lean-forward="true" selection-start-line="19" selection-start-column="22" selection-end-line="19" selection-end-column="22" /> <caret line="5" column="36" lean-forward="true" selection-start-line="5" selection-start-column="36" selection-end-line="5" selection-end-column="36" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Course/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="231">
<caret line="11" column="26" lean-forward="true" selection-start-line="11" selection-start-column="26" selection-end-line="11" selection-end-column="26" />
<folding>
<element signature="e#1006#1032#0" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js"> <entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="430"> <state relative-caret-position="-467">
<caret line="121" column="53" selection-start-line="121" selection-start-column="45" selection-end-line="121" selection-end-column="53" /> <caret line="166" column="66" selection-start-line="166" selection-start-column="62" selection-end-line="166" selection-end-column="66" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#0#39#0" expanded="true" />
<element signature="e#275#1694#0" /> <element signature="e#275#1694#0" />
...@@ -442,13 +510,27 @@ ...@@ -442,13 +510,27 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/course/course.js"> <entry file="file://$PROJECT_DIR$/src/components/Index/index.scss">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="252"> <state relative-caret-position="1077">
<caret line="12" column="52" lean-forward="true" selection-start-line="12" selection-start-column="34" selection-end-line="12" selection-end-column="52" /> <caret line="199" column="26" lean-forward="true" selection-start-line="199" selection-start-column="26" selection-end-line="200" selection-end-column="21" />
<folding> </state>
<element signature="e#0#39#0" expanded="true" /> </provider>
</folding> </entry>
<entry file="file://$PROJECT_DIR$/src/styles/index.scss">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/src/styles/variable.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="93">
<caret line="7" column="10" selection-start-line="7" selection-end-line="7" selection-end-column="10" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Course/course.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="399">
<caret line="19" column="4" selection-start-line="19" selection-start-column="4" selection-end-line="19" selection-end-column="4" />
</state> </state>
</provider> </provider>
</entry> </entry>
......
src/common/course/course.js deleted 100644 → 0
import React, {Component} from 'react';
import './course.scss';
class Course extends Component {
render() {
return (
<div>
<ul className="course-detail">
{
this.props.data.map((item, index) => {
return (
<li key={index}>
{this.props.top}
<a href="">
<img src={item.src} alt=""/>
<p className="course-title">{item.title}</p>
</a>
{this.props.bottom}
</li>
)
})
}
</ul>
</div>
)
}
}
export default Course
src/common/course/course.scss
.course-detail { .course-item {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
li {
width: 47.8%; width: 47.8%;
margin-top: 15px; margin-top: 15px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative; position: relative;
.audition {
position: absolute;
top: 10px;
width: 54px;
height: 18px;
line-height: 18px;
background-color: #09f;
font-size: 12px;
color: #fff;
text-align: center;
border-radius: 1px;
.iconerji {
font-size: 14px !important;
display: inline-block;
margin-right: 4px;
}
}
img { img {
width: 100%; width: 100%;
height: 119px; height: 119px;
} }
.course-title { .course-title {
font-size: 13px; font-size: 14px;
color: #333; color: $color_333;
line-height: 19px; line-height: 19px;
margin-top: 9px; margin-top: 9px;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
}
.course-price {
margin-top: 15px;
.new {
color: #FF2121;
font-size: 15px;
}
.old {
color: #999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: #09f;
border-radius: 9px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
}
} }
} }
src/common/course/index.js 0 → 100644
import React from 'react';
import './course.scss'
const Course = (props) => {
return (
<li className='course-item'>
{props.top}
<a href="">
<img src={props.data.src} alt=""/>
<p className="course-title">{props.data.title}</p>
</a>
{props.bottom}
</li>
);
};
export default Course;
src/common/index.js
// 底部路由 // 底部路由
export { default as Nav } from './Nav' export { default as Nav } from './Nav'
export { default as VList } from './VList' export { default as VList } from './VList'
export { default as Course } from './Course'
\ No newline at end of file
src/components/Index/index.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import Course from '../../common/course/course.js'; import {Course, VList} from '../../common'
import Scroll from '../../common/scroll/scroll.js'; import Scroll from '../../common/scroll/scroll.js';
import TopScroll from '../../common/scroll/topscroll.js'; import TopScroll from '../../common/scroll/topscroll.js';
import Carousel from '../../common/carousel/carousel.js'; import Carousel from '../../common/carousel/carousel.js';
...@@ -119,29 +119,106 @@ class Index extends Component { ...@@ -119,29 +119,106 @@ class Index extends Component {
</div> </div>
<div className='category'> <div className='category'>
<h2 className="title">新上好课</h2> <h2 className="title">新上好课</h2>
<Course data={this.state.dataList} top={ <ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'> <span className='audition'>
<i className={'iconfont iconerji'}></i> <i className={'iconfont iconerji'}></i>
试听 试听
</span> </span>
} bottom = { )
<p>{top}</p> const bottom = (
}></Course> <p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
// {item.isbuy === 1 &&
// <a href="" className="isbuy">已购买</a>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div> </div>
<div className='category'> <div className='category'>
<h2 className="title">热门推荐</h2> <h2 className="title">热门推荐</h2>
<a className="more" href="#">更多 ></a> <a className="more" href="#">更多 ></a>
<Scroll data={this.state.dataList} height='106px'></Scroll> <Scroll data={this.state.dataList} height='106px'></Scroll>
<Course data={this.state.dataList}></Course> <ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
// {item.isbuy === 1 &&
// <a href="" className="isbuy">已购买</a>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div> </div>
<div className='category'> <div className='category'>
<h2 className="title">基础入门</h2> <h2 className="title">基础入门</h2>
<a className="more" href="#">更多 ></a> <a className="more" href="#">更多 ></a>
<Course data={this.state.dataList}></Course> <ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
// {item.isbuy === 1 &&
// <a href="" className="isbuy">已购买</a>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div> </div>
<div className='category'> <div className='category'>
<h2 className="title">就业班</h2> <h2 className="title">就业班</h2>
<Course data={this.state.dataList}></Course> <ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
// {item.isbuy === 1 &&
// <a href="" className="isbuy">已购买</a>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div> </div>
<div className="category all-course"> <div className="category all-course">
<p>查看全部课程</p> <p>查看全部课程</p>
......
src/components/Index/index.scss
...@@ -2,16 +2,19 @@ ...@@ -2,16 +2,19 @@
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
} }
.am-wingblank { .am-wingblank {
margin-top: 15px; margin-top: 15px;
} }
/*热门推荐轮播*/ /*热门推荐轮播*/
.scroll { .scroll {
width: 100%; width: 100%;
margin-left: 0!important; margin-left: 0 !important;
margin-top: 12px; margin-top: 12px;
margin-bottom: 5px; margin-bottom: 5px;
} }
/* /*
页面tab 页面tab
*/ */
...@@ -20,12 +23,15 @@ ...@@ -20,12 +23,15 @@
height: 103px; height: 103px;
padding: 20px 17px; padding: 20px 17px;
margin-top: 50px; margin-top: 50px;
ul { ul {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
li { li {
width: 64px; width: 64px;
img { img {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -41,6 +47,7 @@ ...@@ -41,6 +47,7 @@
} }
} }
} }
/* /*
近期直播 近期直播
*/ */
...@@ -49,10 +56,11 @@ ...@@ -49,10 +56,11 @@
width: 301px; width: 301px;
height: 100%; height: 100%;
margin-right: 20px; margin-right: 20px;
box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
background-color: #fff; background-color: #fff;
border: 1px solid rgba(0, 0, 0, .1); border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px; border-radius: 5px;
a { a {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -90,6 +98,7 @@ ...@@ -90,6 +98,7 @@
} }
} }
} }
.vip { .vip {
width: 100%; width: 100%;
height: 106px; height: 106px;
...@@ -104,7 +113,6 @@ ...@@ -104,7 +113,6 @@
} }
/*课程公共样式*/ /*课程公共样式*/
.category { .category {
width: 100%; width: 100%;
...@@ -123,6 +131,7 @@ ...@@ -123,6 +131,7 @@
float: right; float: right;
} }
} }
/* /*
底部查看所有课程 底部查看所有课程
*/ */
...@@ -142,3 +151,62 @@ ...@@ -142,3 +151,62 @@
font-size: 12px; font-size: 12px;
} }
} }
.course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.audition {
position: absolute;
top: 10px;
width: 54px;
height: 18px;
line-height: 18px;
background-color: #09f;
font-size: 12px;
color: #fff;
text-align: center;
border-radius: 1px;
.iconerji {
font-size: 14px !important;
display: inline-block;
margin-right: 4px;
}
}
.course-price {
margin-top: 15px;
.new {
color: #FF2121;
font-size: 15px;
}
.old {
color: #999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: #09f;
border-radius: 9px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment