Skip to content

M
mr-julyedu
Commit 44fd952c by xuzhenghua
Options

组件

parent 8510ff53
Showing with 163 additions and 153 deletions
.idea/workspace.xml
......@@ -2,11 +2,14 @@
<project version="4">
<component name="ChangeListManager">
<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/carousel/carousel.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/common/carousel/carousel.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/common/carousel/carousel.scss" 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/common/scroll/scroll.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/common/scroll/topscroll.js" beforeDir="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/styles/variable.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/variable.scss" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/node_modules/" />
<ignored path="$PROJECT_DIR$/.tmp/" />
......@@ -20,60 +23,19 @@
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-467">
<caret line="166" column="66" selection-start-line="166" selection-start-column="62" selection-end-line="166" selection-end-column="66" />
<state relative-caret-position="334">
<caret line="126" column="28" lean-forward="true" selection-start-line="119" selection-start-column="30" selection-end-line="126" selection-end-column="28" />
<folding>
<element signature="e#0#39#0" expanded="true" />
<element signature="e#275#1694#0" />
<element signature="e#1713#2342#0" />
<element signature="e#3088#4531#0" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<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>
</provider>
</entry>
</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>
</component>
<component name="FileTemplateManagerImpl">
......@@ -87,7 +49,6 @@
<component name="FindInProjectRecents">
<findStrings>
<find>sass</find>
<find>setState</find>
<find>constructor</find>
<find>icoName</find>
<find>ReactDOM</find>
......@@ -104,11 +65,13 @@
<find>erji</find>
<find>345</find>
<find>#09f</find>
<find>color</find>
<find>react-native</find>
<find>GridExample</find>
<find>map</find>
<find>course-title</find>
<find>props</find>
<find>setState</find>
<find>color</find>
</findStrings>
</component>
<component name="Git.Settings">
......@@ -129,11 +92,18 @@
<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.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.scss" />
<option value="$PROJECT_DIR$/src/common/Course/course.scss" />
<option value="$PROJECT_DIR$/src/common/carousel/carousel.scss" />
<option value="$PROJECT_DIR$/src/common/carousel/carousel.js" />
<option value="$PROJECT_DIR$/src/common/Carousel/index.js" />
<option value="$PROJECT_DIR$/src/common/Topsrroll/index.js" />
<option value="$PROJECT_DIR$/src/common/Topscroll/index.js" />
<option value="$PROJECT_DIR$/src/common/Scroll/index.js" />
<option value="$PROJECT_DIR$/src/common/index.js" />
<option value="$PROJECT_DIR$/src/styles/variable.scss" />
<option value="$PROJECT_DIR$/src/components/Index/index.scss" />
<option value="$PROJECT_DIR$/src/components/Index/index.js" />
</list>
</option>
</component>
......@@ -165,7 +135,14 @@
<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="Index" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
......@@ -243,12 +220,12 @@
<workItem from="1555481509516" duration="2393000" />
<workItem from="1555494639819" duration="2193000" />
<workItem from="1555583161462" duration="713000" />
<workItem from="1555596885912" duration="7849000" />
<workItem from="1555596885912" duration="10544000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="28525000" />
<option name="totallyTimeSpent" value="31220000" />
</component>
<component name="ToolWindowManager">
<frame x="0" y="0" width="1440" height="900" extended-state="6" />
......@@ -374,13 +351,6 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/carousel/carousel.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="315">
<caret line="15" lean-forward="true" selection-start-line="15" selection-end-line="15" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/study/study.scss">
<provider selected="true" editor-type-id="text-editor" />
</entry>
......@@ -430,107 +400,142 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/scroll/scroll.js">
<entry file="file://$PROJECT_DIR$/src/common/Scroll/topscroll.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="105">
<caret line="6" column="25" lean-forward="true" selection-start-line="6" selection-start-column="25" selection-end-line="6" selection-end-column="25" />
<state relative-caret-position="31">
<caret line="4" lean-forward="true" selection-start-line="4" selection-end-line="4" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/scroll/topscroll.js">
<entry file="file://$PROJECT_DIR$/src/components/study/my-courses/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="31">
<caret line="4" lean-forward="true" selection-start-line="4" selection-end-line="4" />
<state relative-caret-position="321">
<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>
<element signature="e#0#39#0" expanded="true" />
<element signature="e#0#25#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="105">
<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/styles/index.scss">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/src/common/carousel/carousel.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="189">
<caret line="9" column="20" lean-forward="true" selection-start-line="9" selection-start-column="20" selection-end-line="9" selection-end-column="20" />
<state relative-caret-position="126">
<caret line="6" column="32" selection-start-line="6" selection-start-column="32" selection-end-line="6" selection-end-column="32" />
<folding>
<element signature="e#0#39#0" expanded="true" />
<element signature="e#1#27#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/index.js">
<entry file="file://$PROJECT_DIR$/src/common/Carousel/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="63">
<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 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/components/study/my-courses/index.js">
<entry file="file://$PROJECT_DIR$/src/common/Scroll/scroll.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="321">
<caret line="41" column="30" lean-forward="true" selection-start-line="41" selection-start-column="30" selection-end-line="41" selection-end-column="30" />
<state relative-caret-position="210">
<caret line="10" column="49" selection-start-line="10" selection-start-column="49" selection-end-line="10" selection-end-column="49" />
<folding>
<element signature="e#0#25#0" expanded="true" />
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/VList/index.js">
<entry file="file://$PROJECT_DIR$/src/common/Course/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="105">
<caret line="5" column="36" lean-forward="true" selection-start-line="5" selection-start-column="36" selection-end-line="5" selection-end-column="36" />
<state relative-caret-position="63">
<caret line="3" selection-start-line="3" selection-end-line="18" />
<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/Scroll/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" />
<state relative-caret-position="42">
<caret line="2" column="32" lean-forward="true" selection-start-line="2" selection-start-column="32" selection-end-line="2" selection-end-column="32" />
<folding>
<element signature="e#1006#1032#0" expanded="true" />
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<entry file="file://$PROJECT_DIR$/src/common/Topscroll/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-467">
<caret line="166" column="66" selection-start-line="166" selection-start-column="62" selection-end-line="166" selection-end-column="66" />
<state relative-caret-position="63">
<caret line="3" column="14" lean-forward="true" selection-start-line="3" selection-start-column="14" selection-end-line="3" selection-end-column="14" />
<folding>
<element signature="e#0#39#0" expanded="true" />
<element signature="e#275#1694#0" />
<element signature="e#1713#2342#0" />
<element signature="e#3088#4531#0" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.scss">
<entry file="file://$PROJECT_DIR$/src/common/index.js">
<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 relative-caret-position="147">
<caret line="7" lean-forward="true" selection-start-line="7" selection-end-line="7" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/styles/index.scss">
<provider selected="true" editor-type-id="text-editor" />
<entry file="file://$PROJECT_DIR$/src/common/Carousel/carousel.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="168">
<caret line="8" column="21" lean-forward="true" selection-start-line="8" selection-start-column="21" selection-end-line="8" selection-end-column="21" />
</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="63">
<caret line="3" column="20" lean-forward="true" selection-start-line="3" selection-start-column="20" selection-end-line="3" selection-end-column="20" />
</state>
</provider>
</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 relative-caret-position="-315">
<caret line="6" column="11" lean-forward="true" selection-start-line="6" selection-start-column="11" selection-end-line="6" selection-end-column="11" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Course/course.scss">
<entry file="file://$PROJECT_DIR$/src/components/Index/index.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 relative-caret-position="341">
<caret line="190" column="11" selection-start-line="190" selection-start-column="6" selection-end-line="190" selection-end-column="11" />
</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="334">
<caret line="126" column="28" lean-forward="true" selection-start-line="119" selection-start-column="30" selection-end-line="126" selection-end-column="28" />
<folding>
<element signature="e#0#39#0" expanded="true" />
<element signature="e#1713#2342#0" />
</folding>
</state>
</provider>
</entry>
......
src/common/scroll/scroll.js → src/common/Scroll/index.js
......@@ -33,3 +33,4 @@ class Scroll extends Component {
}
export default Scroll
src/common/scroll/topscroll.js → src/common/Topscroll/index.js
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
class TopScroll extends Component {
class Topscroll extends Component {
state = {}
render() {
......@@ -45,4 +45,4 @@ class TopScroll extends Component {
}
}
export default TopScroll
export default Topscroll
src/common/carousel/carousel.js deleted 100644 → 0
import React, {Component} from 'react';
import './carousel.scss';
class Carousel extends Component {
render() {
return (
<div className='scroll-box'>
<ul className='scroll-list'>
{this.props.children}
</ul>
</div>
)
}
}
export default Carousel
src/common/carousel/carousel.scss
.scroll-box {
width: 100%;
height: 92px;
overflow: auto;
position: relative;
margin-top: 15px;
......
src/common/carousel/index.js 0 → 100644
import React from 'react';
import './carousel.scss'
const Carousel = (props) => {
return (
<div className='scroll-box'>
<ul className='scroll-list'>
{props.children}
</ul>
</div>
)
};
export default Carousel;
src/common/index.js
// 底部路由
export { default as Nav } from './Nav'
export { default as VList } from './VList'
export { default as Course } from './Course'
\ No newline at end of file
export { default as Course } from './Course' // 课程状态（试听 正在直播）+封面+标题+ 详情
export { default as Carousel } from './Carousel' // 横向滚动
export { default as Topscroll } from './Topscroll' // 首页头部轮播
export { default as Scroll } from './Scroll' // 首页正常轮播图
src/components/Index/index.js
import React, {Component} from 'react';
import {Course, VList} from '../../common'
import Scroll from '../../common/scroll/scroll.js';
import TopScroll from '../../common/scroll/topscroll.js';
import Carousel from '../../common/carousel/carousel.js';
import {Course, Carousel,Scroll,Topscroll} from '../../common'
import './index.scss';
class Index extends Component {
state = {
dataList: [
......@@ -42,8 +38,8 @@ class Index extends Component {
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 100,
'price1': 1000
'price0': 200,
'price1': 2000
}
],
tabdata: [
......@@ -74,7 +70,7 @@ class Index extends Component {
const top = <div>333</div>
return (
<div className='indexbox'>
<TopScroll data={this.state.dataList} height='168px'></TopScroll>
<Topscroll data={this.state.dataList} height='168px'></Topscroll>
<div className="tabbox">
<ul>
{
......@@ -121,12 +117,14 @@ class Index extends Component {
<h2 className="title">新上好课</h2>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
// const top = (
// {
// item.isbuy === '1' && <span className='audition'>
// <i className={'iconfont iconerji'}></i>
// 试听
// </span>
// }
// )
const bottom = (
<p className="course-price">
<span className="new">¥{item.price0}</span>
......
src/components/Index/index.scss
.indexbox {
overflow: hidden;
background-color: #fff;
background-color: $bg_fff;
}
.am-wingblank {
......@@ -39,7 +39,7 @@
}
span {
color: #606060;
color: $color_606;
font-size: 13px;
display: block;
margin-top: 10px;
......@@ -57,7 +57,7 @@
height: 100%;
margin-right: 20px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
background-color: #fff;
background-color: $bg_fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
......@@ -82,18 +82,18 @@
.item-title {
font-size: 15px;
color: #333;
color: $color_333;
}
.item-teacher {
font-size: 13px;
color: #555;
color: $color_555;
margin-top: 6px;
}
.item-time {
font-size: 12px;
color: #999;
color: $color_999;
margin-top: 11px;
}
}
......@@ -121,12 +121,12 @@
.title {
font-size: 15px;
color: #333;
color: $color_333;
display: inline-block;
}
.more {
color: #09f;
color: $active;
font-size: 12px;
float: right;
}
......@@ -141,13 +141,13 @@
margin-bottom: 50px;
p {
color: #555;
color: $color_555;
font-size: 15px;
margin-bottom: 10px;
}
span {
color: #999;
color: $color_999;
font-size: 12px;
}
}
......@@ -165,9 +165,9 @@
width: 54px;
height: 18px;
line-height: 18px;
background-color: #09f;
background-color: $bg_active;
font-size: 12px;
color: #fff;
color: $white;
text-align: center;
border-radius: 1px;
......@@ -183,12 +183,12 @@
margin-top: 15px;
.new {
color: #FF2121;
color: $red;
font-size: 15px;
}
.old {
color: #999;
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
......@@ -201,12 +201,18 @@
margin-top: 15px;
width: 61px;
height: 18px;
background-color: #09f;
background-color: $bg_active;
border-radius: 9px;
color: #fff;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
/*
横向滚动
*/
.scroll-box {
height: 92px;
}
src/styles/variable.scss
......@@ -9,6 +9,7 @@ $color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
$color_606: #606060;
/*
......
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