Skip to content

M
mr-julyedu
Commit 386f09e0 by xuzhenghua
Options

分类一部分

parent 9dbae6e5
Showing with 339 additions and 110 deletions
.idea/workspace.xml
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<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$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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" />
<change beforePath="$PROJECT_DIR$/src/components/classify/courselist.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/classify/courselist.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/classify/courselist.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/classify/courselist.scss" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/node_modules/" /> <ignored path="$PROJECT_DIR$/node_modules/" />
<ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" /> <ignored path="$PROJECT_DIR$/temp/" />
...@@ -17,41 +23,28 @@ ...@@ -17,41 +23,28 @@
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/classify/courselist.js"> <entry file="file://$PROJECT_DIR$/src/components/classify/courselist.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="101"> <state relative-caret-position="314">
<caret line="52" column="27" selection-start-line="52" selection-start-column="27" selection-end-line="53" selection-end-column="9" /> <caret line="162" column="39" lean-forward="true" selection-start-line="162" selection-start-column="39" selection-end-line="162" selection-end-column="39" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/common/Topscroll/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="148">
<caret line="12" column="32" selection-start-line="12" selection-start-column="32" selection-end-line="12" selection-end-column="32" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#0#39#0" expanded="true" />
<element signature="e#185#592#0" />
<element signature="e#496#851#0" />
<element signature="e#865#1220#0" />
<element signature="e#1234#1589#0" />
<element signature="e#2097#3488#0" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/styles/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="635">
<caret line="250" column="1" selection-start-line="250" selection-start-column="1" selection-end-line="250" selection-end-column="1" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/classify/courselist.scss"> <entry file="file://$PROJECT_DIR$/src/components/classify/courselist.scss">
<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="122">
<caret line="7" column="13" selection-start-line="7" selection-start-column="13" selection-end-line="7" selection-end-column="13" /> <caret line="94" column="17" selection-start-line="94" selection-start-column="17" selection-end-line="94" selection-end-column="17" />
<folding>
<marker date="1555928924379" expanded="true" signature="1358:1477" ph="..." />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
...@@ -68,6 +61,11 @@ ...@@ -68,6 +61,11 @@
<find>contact</find> <find>contact</find>
<find>href</find> <find>href</find>
<find>display</find> <find>display</find>
<find>e64a</find>
<find>icon</find>
<find>iconerji</find>
<find>class-course</find>
<find>animated</find>
</findStrings> </findStrings>
</component> </component>
<component name="Git.Settings"> <component name="Git.Settings">
...@@ -83,11 +81,12 @@ ...@@ -83,11 +81,12 @@
<option value="$PROJECT_DIR$/src/common/ListView/index.js" /> <option value="$PROJECT_DIR$/src/common/ListView/index.js" />
<option value="$PROJECT_DIR$/src/common/Courseload/index.js" /> <option value="$PROJECT_DIR$/src/common/Courseload/index.js" />
<option value="$PROJECT_DIR$/src/common/index.js" /> <option value="$PROJECT_DIR$/src/common/index.js" />
<option value="$PROJECT_DIR$/src/components/Index/index.js" />
<option value="$PROJECT_DIR$/src/components/classify/index.js" /> <option value="$PROJECT_DIR$/src/components/classify/index.js" />
<option value="$PROJECT_DIR$/src/components/classify/courselist.scss" />
<option value="$PROJECT_DIR$/src/components/classify/courselist.js" />
<option value="$PROJECT_DIR$/src/common/Topscroll/index.js" /> <option value="$PROJECT_DIR$/src/common/Topscroll/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/components/classify/courselist.js" />
<option value="$PROJECT_DIR$/src/components/classify/courselist.scss" />
</list> </list>
</option> </option>
</component> </component>
...@@ -116,13 +115,20 @@ ...@@ -116,13 +115,20 @@
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" /> <item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" /> <item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" />
<item name="common" type="462c0819:PsiDirectoryNode" /> <item name="components" type="462c0819:PsiDirectoryNode" />
</path> </path>
<path> <path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" /> <item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" /> <item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" />
<item name="components" type="462c0819:PsiDirectoryNode" /> <item name="components" type="462c0819:PsiDirectoryNode" />
<item name="classify" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="font" type="462c0819:PsiDirectoryNode" />
</path> </path>
<path> <path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" /> <item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
...@@ -176,15 +182,16 @@ ...@@ -176,15 +182,16 @@
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1555481508116</updated> <updated>1555481508116</updated>
<workItem from="1555481509516" duration="544000" /> <workItem from="1555481509516" duration="544000" />
<workItem from="1555900140776" duration="8044000" /> <workItem from="1555900140776" duration="14306000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="8631000" /> <option name="totallyTimeSpent" value="14893000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="0" y="0" width="1440" height="900" extended-state="0" /> <frame x="0" y="0" width="1440" height="900" extended-state="0" />
<editor active="true" />
<layout> <layout>
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.16420014" /> <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.16420014" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" /> <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
...@@ -298,13 +305,6 @@ ...@@ -298,13 +305,6 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/classify/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="42">
<caret line="45" column="7" lean-forward="true" selection-start-line="45" selection-start-column="7" selection-end-line="45" selection-end-column="7" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/study/study.scss"> <entry file="file://$PROJECT_DIR$/src/components/study/study.scss">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="504"> <state relative-caret-position="504">
...@@ -319,16 +319,6 @@ ...@@ -319,16 +319,6 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/VList/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="210">
<caret line="10" column="22" selection-start-line="10" selection-start-column="17" selection-end-line="10" selection-end-column="22" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/VList/index.scss"> <entry file="file://$PROJECT_DIR$/src/common/VList/index.scss">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="483"> <state relative-caret-position="483">
...@@ -336,39 +326,57 @@ ...@@ -336,39 +326,57 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/styles/variable.scss"> <entry file="file://$PROJECT_DIR$/src/styles/index.scss">
<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="-632">
<caret line="7" column="10" selection-start-line="7" selection-end-line="7" selection-end-column="10" /> <caret line="223" column="9" lean-forward="true" selection-start-line="223" selection-start-column="9" selection-end-line="223" selection-end-column="9" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js"> <entry file="file://$PROJECT_DIR$/src/common/Scroll/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="292"> <state relative-caret-position="441">
<caret line="124" column="37" lean-forward="true" selection-start-line="124" selection-start-column="37" selection-end-line="124" selection-end-column="37" /> <caret line="21" column="47" selection-start-line="21" selection-start-column="47" selection-end-line="21" selection-end-column="47" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#0#39#0" expanded="true" />
<element signature="e#193#1642#0" />
<element signature="e#1661#2535#0" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/classify/index.js"> <entry file="file://$PROJECT_DIR$/src/common/Topscroll/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-269"> <state relative-caret-position="42">
<caret line="60" column="30" lean-forward="true" selection-start-line="60" selection-start-column="30" selection-end-line="60" selection-end-column="30" /> <caret line="2" column="35" lean-forward="true" selection-start-line="2" selection-start-column="35" selection-end-line="2" selection-end-column="35" />
<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/VList/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="21">
<caret line="1" column="21" lean-forward="true" selection-start-line="1" selection-start-column="21" selection-end-line="1" selection-end-column="21" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Carousel/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="231">
<caret line="11" column="2" lean-forward="true" selection-start-line="11" selection-start-column="2" selection-end-line="11" selection-end-column="2" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Course/index.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="189"> <state relative-caret-position="189">
<caret line="9" column="58" selection-start-line="9" selection-start-column="43" selection-end-line="9" selection-end-column="58" /> <caret line="9" column="38" lean-forward="true" selection-start-line="9" selection-start-column="38" selection-end-line="9" selection-end-column="38" />
<folding> <folding>
<element signature="e#0#26#0" expanded="true" /> <element signature="e#0#26#0" expanded="true" />
</folding> </folding>
...@@ -382,54 +390,79 @@ ...@@ -382,54 +390,79 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="251">
<caret line="123" column="52" selection-start-line="123" selection-end-line="124" />
<folding>
<element signature="e#0#39#0" expanded="true" />
<element signature="e#193#1642#0" />
<element signature="e#1661#2535#0" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/font/iconfont.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="251">
<caret line="25" column="9" selection-start-line="25" selection-start-column="1" selection-end-line="25" selection-end-column="9" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.scss"> <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="354"> <state relative-caret-position="154">
<caret line="95" column="5" selection-start-line="95" selection-start-column="5" selection-end-line="97" selection-end-column="25" /> <caret line="119" column="15" lean-forward="true" selection-start-line="119" selection-start-column="15" selection-end-line="119" selection-end-column="15" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/classify/courselist.scss"> <entry file="file://$PROJECT_DIR$/src/styles/variable.scss">
<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="483">
<caret line="7" column="13" selection-start-line="7" selection-start-column="13" selection-end-line="7" selection-end-column="13" /> <caret line="44" column="7" selection-start-line="44" selection-end-line="44" selection-end-column="7" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/Scroll/index.js"> <entry file="file://$PROJECT_DIR$/src/components/classify/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="104">
<caret line="15" column="25" lean-forward="true" selection-start-line="15" selection-start-column="25" selection-end-line="15" selection-end-column="25" /> <caret line="42" column="9" lean-forward="true" selection-start-line="5" selection-start-column="6" selection-end-line="42" selection-end-column="9" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#0#39#0" expanded="true" />
<element signature="e#131#1522#0" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/components/classify/courselist.js"> <entry file="file://$PROJECT_DIR$/src/components/classify/index.scss">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="101"> <state relative-caret-position="126">
<caret line="52" column="27" selection-start-line="52" selection-start-column="27" selection-end-line="53" selection-end-column="9" /> <caret line="14" selection-start-line="14" selection-end-line="61" selection-end-column="1" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/common/Topscroll/index.js"> <entry file="file://$PROJECT_DIR$/src/components/classify/courselist.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="148"> <state relative-caret-position="314">
<caret line="12" column="32" selection-start-line="12" selection-start-column="32" selection-end-line="12" selection-end-column="32" /> <caret line="162" column="39" lean-forward="true" selection-start-line="162" selection-start-column="39" selection-end-line="162" selection-end-column="39" />
<folding> <folding>
<element signature="e#0#39#0" expanded="true" /> <element signature="e#0#39#0" expanded="true" />
<element signature="e#185#592#0" />
<element signature="e#496#851#0" />
<element signature="e#865#1220#0" />
<element signature="e#1234#1589#0" />
<element signature="e#2097#3488#0" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/styles/index.scss"> <entry file="file://$PROJECT_DIR$/src/components/classify/courselist.scss">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="635"> <state relative-caret-position="122">
<caret line="250" column="1" selection-start-line="250" selection-start-column="1" selection-end-line="250" selection-end-column="1" /> <caret line="94" column="17" selection-start-line="94" selection-start-column="17" selection-end-line="94" selection-end-column="17" />
<folding>
<marker date="1555928924379" expanded="true" signature="1358:1477" ph="..." />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
......
src/components/Index/index.js
...@@ -105,7 +105,7 @@ class Index extends Component { ...@@ -105,7 +105,7 @@ class Index extends Component {
}) })
} }
</Carousel> </Carousel>
<div className="vip"> <div className="category-vip">
<a href="/#"> <a href="/#">
<img <img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
......
src/components/Index/index.scss
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
} }
} }
.vip { .category-vip {
width: 100%; width: 100%;
height: 106px; height: 106px;
border-radius: 5px; border-radius: 5px;
......
src/components/classify/courselist.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import {VList} from '../../common'; import {VList} from '../../common';
import {Tabs, WhiteSpace} from 'antd-mobile';
import './courselist.scss'; import './courselist.scss';
class Classify extends Component { class Classify extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.ontabclick = this.ontabclick.bind(this)
}
handleClick() {
console.log(1);
}
ontabclick(tab, index) {
console.log(tab, index)
}
pulldown(){
alert(2)
}
state = { state = {
mockData:[ mockData: [
{ {
title: '三月面试求职三月面试求职三月面试求职', title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg', imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
...@@ -45,38 +62,126 @@ class Classify extends Component { ...@@ -45,38 +62,126 @@ class Classify extends Component {
price0: 100, price0: 100,
price1: 100 price1: 100
}, },
],
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Spark大数据',
'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '机器学习',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Linux',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '数学',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 200,
'price1': 2000
}
] ]
} }
render() { render() {
const handleClick = () => {
console.log(1); const tabs = [
} {title: '机器学习'},
{title: '数学'},
{title: 'Linux'},
{title: '深度学习'},
{title: '数据结构'},
{title: 'Linux'},
{title: '数据结构'},
{title: '数学'},
];
return ( return (
<div className='class-box'> <div className='class-box'>
<ul> <div>
{this.state.mockData.map((item, index) => { <WhiteSpace/>
const Info = ( <i className={'iconfont iconiconfront-69 pull-down'} onClick={this.pulldown.bind(this)}></i>
<div className="info"> <Tabs
<p className='title'>{item.title}</p> tabs={tabs}
<p className='contact text-overflow-2'>{item.contact}</p> animated={false}
<div className='des'> onTabClick={(tab, index) => this.ontabclick(tab, index)}
{item.isbuy === 0 && <p className="course-price"> >
<span className="new">¥{item.price0}</span> <div className='tabs'>
<span className="old">¥{item.price1}</span> <ul>
</p> {this.state.mockData.map((item, index) => {
} const Info = (
{item.isbuy === 1 && <div className="info">
<a href="/#" className="isbuy">已购买</a> <p className='title'>{item.title}</p>
} <p className='contact text-overflow-2'>{item.contact}</p>
</div> <div className='des'>
{item.isbuy === 0 && <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>
}
</div>
</div>
)
return (
<VList handleClick={this.handleClick} key={index} info={Info}></VList>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/>
</div>
<div className='mbc-box'>
<div className="tabcontent">
<div className="class-course">
<p className='course-items-title'>基础入门</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="/#" key={index} className='item-label'>{item.title}</a>
)
})
}
</div>
</div>
<div className="class-course">
<p className='course-items-title'>进阶提高</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="/#" key={index} className='item-label'>{item.title}</a>
)
})
}
</div> </div>
) </div>
return ( </div>
<VList handleClick={handleClick} key={index} info={Info}></VList> </div>
)
})}
</ul>
</div> </div>
) )
} }
......
src/components/classify/courselist.scss
.class-box { .class-box {
padding: 0 12px;
position: relative;
.v-list-item { .v-list-item {
padding: 10px 0 0;
.content { .content {
border: none; border: none;
.cover { .cover {
flex: inherit; flex: inherit;
width: 42.2%; width: 42.2%;
img { img {
width: 100%; width: 100%;
} }
...@@ -14,6 +20,7 @@ ...@@ -14,6 +20,7 @@
.info { .info {
width: 52.3%; width: 52.3%;
position: relative; position: relative;
.title { .title {
font-size: 16px; font-size: 16px;
color: $color_333; color: $color_333;
...@@ -21,14 +28,17 @@ ...@@ -21,14 +28,17 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.contact { .contact {
font-size: 14px; font-size: 14px;
color: $color_666; color: $color_666;
margin-top: 14px; margin-top: 14px;
} }
.des { .des {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
.course-price { .course-price {
.new { .new {
color: $red; color: $red;
...@@ -59,4 +69,84 @@ ...@@ -59,4 +69,84 @@
} }
} }
.tabs {
display: flex;
margin-top: 10px;
}
.pull-down {
width: 32px;
position: absolute;
top: 12px;
right: 0;
z-index: 2;
background-color: $bg_fff;
color: $color_666;
}
.mbc-box {
position: fixed;
left: 0;
top: 53px;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
.tabcontent {
width: 100%;
height: 303px;
overflow: auto;
background-color: $bg_fff;
border-top: 1px solid $sp_ddd;
padding-bottom: 30px;
.class-course {
width: 100%;
margin-top: 20px;
padding: 0 15px;
.course-items-title {
font-size: 13px;
color: $color_333;
}
.items-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item-banner {
display: inline-block;
width: 30.5%;
height: 76px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
}
.item-label {
display: inline-block;
width: 30.5%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: $bg_f4f4f4;
border-radius: 15px;
margin-top: 15px;
margin-bottom: -5px;
}
}
}
}
}
}
html:not([data-scale]) .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff;
}
.am-tabs-tab-bar-wrap {
padding-right: 30px;
} }
\ No newline at end of file
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