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"?>
<project version="4">
<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$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
......@@ -17,41 +23,28 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/classify/courselist.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="101">
<caret line="52" column="27" selection-start-line="52" selection-start-column="27" selection-end-line="53" selection-end-column="9" />
<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" />
<state relative-caret-position="314">
<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" />
<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>
</state>
</provider>
</entry>
</file>
<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">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="147">
<caret line="7" column="13" selection-start-line="7" selection-start-column="13" selection-end-line="7" selection-end-column="13" />
<state relative-caret-position="122">
<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>
</provider>
</entry>
......@@ -68,6 +61,11 @@
<find>contact</find>
<find>href</find>
<find>display</find>
<find>e64a</find>
<find>icon</find>
<find>iconerji</find>
<find>class-course</find>
<find>animated</find>
</findStrings>
</component>
<component name="Git.Settings">
......@@ -83,11 +81,12 @@
<option value="$PROJECT_DIR$/src/common/ListView/index.js" />
<option value="$PROJECT_DIR$/src/common/Courseload/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/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/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>
</option>
</component>
......@@ -116,13 +115,20 @@
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="common" type="462c0819:PsiDirectoryNode" />
<item name="components" 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="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>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
......@@ -176,15 +182,16 @@
<option name="presentableId" value="Default" />
<updated>1555481508116</updated>
<workItem from="1555481509516" duration="544000" />
<workItem from="1555900140776" duration="8044000" />
<workItem from="1555900140776" duration="14306000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="8631000" />
<option name="totallyTimeSpent" value="14893000" />
</component>
<component name="ToolWindowManager">
<frame x="0" y="0" width="1440" height="900" extended-state="0" />
<editor active="true" />
<layout>
<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" />
......@@ -298,13 +305,6 @@
</state>
</provider>
</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">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="504">
......@@ -319,16 +319,6 @@
</state>
</provider>
</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">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="483">
......@@ -336,39 +326,57 @@
</state>
</provider>
</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">
<state relative-caret-position="147">
<caret line="7" column="10" selection-start-line="7" selection-end-line="7" selection-end-column="10" />
<state relative-caret-position="-632">
<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>
</provider>
</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">
<state relative-caret-position="292">
<caret line="124" column="37" lean-forward="true" selection-start-line="124" selection-start-column="37" selection-end-line="124" selection-end-column="37" />
<state relative-caret-position="441">
<caret line="21" column="47" selection-start-line="21" selection-start-column="47" selection-end-line="21" selection-end-column="47" />
<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/components/classify/index.js">
<entry file="file://$PROJECT_DIR$/src/common/Topscroll/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-269">
<caret line="60" column="30" lean-forward="true" selection-start-line="60" selection-start-column="30" selection-end-line="60" selection-end-column="30" />
<state relative-caret-position="42">
<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>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</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">
<provider selected="true" editor-type-id="text-editor">
<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>
<element signature="e#0#26#0" expanded="true" />
</folding>
......@@ -382,54 +390,79 @@
</state>
</provider>
</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">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="354">
<caret line="95" column="5" selection-start-line="95" selection-start-column="5" selection-end-line="97" selection-end-column="25" />
<state relative-caret-position="154">
<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>
</provider>
</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">
<state relative-caret-position="147">
<caret line="7" column="13" selection-start-line="7" selection-start-column="13" selection-end-line="7" selection-end-column="13" />
<state relative-caret-position="483">
<caret line="44" column="7" selection-start-line="44" selection-end-line="44" selection-end-column="7" />
</state>
</provider>
</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">
<state relative-caret-position="315">
<caret line="15" column="25" lean-forward="true" selection-start-line="15" selection-start-column="25" selection-end-line="15" selection-end-column="25" />
<state relative-caret-position="104">
<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>
<element signature="e#0#39#0" expanded="true" />
<element signature="e#131#1522#0" />
</folding>
</state>
</provider>
</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">
<state relative-caret-position="101">
<caret line="52" column="27" selection-start-line="52" selection-start-column="27" selection-end-line="53" selection-end-column="9" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
<state relative-caret-position="126">
<caret line="14" selection-start-line="14" selection-end-line="61" selection-end-column="1" />
</state>
</provider>
</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">
<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" />
<state relative-caret-position="314">
<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" />
<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>
</state>
</provider>
</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">
<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 relative-caret-position="122">
<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>
</provider>
</entry>
......
src/components/Index/index.js
......@@ -105,7 +105,7 @@ class Index extends Component {
})
}
</Carousel>
<div className="vip">
<div className="category-vip">
<a href="/#">
<img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
......
src/components/Index/index.scss
......@@ -117,7 +117,7 @@
}
}
.vip {
.category-vip {
width: 100%;
height: 106px;
border-radius: 5px;
......
src/components/classify/courselist.js
import React, {Component} from 'react';
import {VList} from '../../common';
import {Tabs, WhiteSpace} from 'antd-mobile';
import './courselist.scss';
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 = {
mockData:[
mockData: [
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
......@@ -45,38 +62,126 @@ class Classify extends Component {
price0: 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() {
const handleClick = () => {
console.log(1);
}
const tabs = [
{title: '机器学习'},
{title: '数学'},
{title: 'Linux'},
{title: '深度学习'},
{title: '数据结构'},
{title: 'Linux'},
{title: '数据结构'},
{title: '数学'},
];
return (
<div className='class-box'>
<ul>
{this.state.mockData.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact text-overflow-2'>{item.contact}</p>
<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>
<WhiteSpace/>
<i className={'iconfont iconiconfront-69 pull-down'} onClick={this.pulldown.bind(this)}></i>
<Tabs
tabs={tabs}
animated={false}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
<ul>
{this.state.mockData.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact text-overflow-2'>{item.contact}</p>
<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>
)
return (
<VList handleClick={handleClick} key={index} info={Info}></VList>
)
})}
</ul>
</div>
</div>
</div>
</div>
)
}
......
src/components/classify/courselist.scss
.class-box {
padding: 0 12px;
position: relative;
.v-list-item {
padding: 10px 0 0;
.content {
border: none;
.cover {
flex: inherit;
width: 42.2%;
img {
width: 100%;
}
......@@ -14,6 +20,7 @@
.info {
width: 52.3%;
position: relative;
.title {
font-size: 16px;
color: $color_333;
......@@ -21,14 +28,17 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.des {
position: absolute;
bottom: 0;
.course-price {
.new {
color: $red;
......@@ -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