Skip to content

M
mr-julyedu
Commit 69562b10 by xuzhenghua
Options

首页

parent c90532bb
Showing with 306 additions and 156 deletions
.idea/workspace.xml
......@@ -2,15 +2,15 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="60bc3527-5f9e-436f-8ed9-968e6eddd66e" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/components/Index/index.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/Index/topscroll.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/Index/carousel.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/Index/carousel.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Index/course.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/course.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Index/course.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/course.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Index/index.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Index/course.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/course.scss" 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/Index/scroll.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/scroll.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Index/topscroll.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/topscroll.js" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/node_modules/" />
<ignored path="$PROJECT_DIR$/.tmp/" />
......@@ -27,21 +27,20 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153">
<caret line="52" selection-start-line="52" selection-end-line="52" />
<state relative-caret-position="395">
<caret line="114" column="51" lean-forward="true" selection-start-line="114" selection-start-column="51" selection-end-line="114" selection-end-column="51" />
<folding>
<element signature="e#0#41#0" expanded="true" />
<element signature="e#274#2948#0" />
<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/components/Index/topscroll.js">
<entry file="file://$PROJECT_DIR$/src/components/Index/carousel.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="756">
<caret line="36" column="72" lean-forward="true" selection-start-line="36" selection-start-column="72" selection-end-line="36" selection-end-column="72" />
<state relative-caret-position="63">
<caret line="3" column="34" lean-forward="true" selection-start-line="3" selection-start-column="34" selection-end-line="3" selection-end-column="34" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
......@@ -52,17 +51,29 @@
<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="42">
<caret line="2" column="24" selection-start-line="2" selection-start-column="21" selection-end-line="2" selection-end-column="24" />
<state relative-caret-position="210">
<caret line="10" column="27" lean-forward="true" selection-start-line="10" selection-start-column="27" selection-end-line="10" selection-end-column="27" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/Index/course.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="714">
<caret line="42" column="20" lean-forward="true" selection-start-line="42" selection-start-column="20" selection-end-line="42" selection-end-column="20" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/config/webpack.config.js">
<entry file="file://$PROJECT_DIR$/src/components/Index/course.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="462">
<caret line="432" column="49" selection-start-line="432" selection-start-column="49" selection-end-line="432" selection-end-column="49" />
<state relative-caret-position="489">
<caret line="31" column="21" lean-forward="true" selection-start-line="31" selection-start-column="21" selection-end-line="31" selection-end-column="21" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
......@@ -93,6 +104,15 @@
<find>imgHeight</find>
<find>state</find>
<find>all_course</find>
<find>iconshouye</find>
<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>
</findStrings>
</component>
<component name="Git.Settings">
......@@ -103,17 +123,20 @@
<list>
<option value="$PROJECT_DIR$/src/components/Index/index.css" />
<option value="$PROJECT_DIR$/src/components/Index/course.css" />
<option value="$PROJECT_DIR$/src/components/Index/course.js" />
<option value="$PROJECT_DIR$/src/components/Index/course.scss" />
<option value="$PROJECT_DIR$/config/webpack.config.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/index.js" />
<option value="$PROJECT_DIR$/src/index.js" />
<option value="$PROJECT_DIR$/src/components/Index/index.scss" />
<option value="$PROJECT_DIR$/config/webpack.config.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/course.scss" />
<option value="$PROJECT_DIR$/src/components/Index/index.js" />
<option value="$PROJECT_DIR$/src/components/Index/course.js" />
</list>
</option>
</component>
<component name="ProjectFrameBounds" fullScreen="true">
<component name="ProjectFrameBounds" extendedState="6" fullScreen="true">
<option name="x" value="38" />
<option name="y" value="23" />
<option name="width" value="1402" />
......@@ -134,11 +157,6 @@
<path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="config" 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" />
</path>
<path>
......@@ -170,6 +188,7 @@
<property name="node.js.selected.package.eslint" value="$PROJECT_DIR$/node_modules/eslint" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="nodejs_package_manager_path" value="yarn" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
......@@ -217,17 +236,18 @@
<updated>1555481508116</updated>
<workItem from="1555481509516" duration="2393000" />
<workItem from="1555494639819" duration="2193000" />
<workItem from="1555583161462" duration="713000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="12034000" />
<option name="totallyTimeSpent" value="20676000" />
</component>
<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="6" />
<editor active="true" />
<layout>
<window_info active="true" content_ui="combo" id="Project" order="0" sideWeight="0.50240964" visible="true" weight="0.20295984" />
<window_info active="true" content_ui="combo" id="Project" order="0" sideWeight="0.50240964" visible="true" weight="0.19732206" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="npm" order="2" sideWeight="0.49759036" side_tool="true" weight="0.24242425" />
<window_info id="Favorites" order="3" side_tool="true" />
......@@ -298,23 +318,31 @@
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Tabbar/index.js" />
<entry file="file://$PROJECT_DIR$/src/index.css">
<entry file="file://$PROJECT_DIR$/src/components/Index/index.css" />
<entry file="file://$PROJECT_DIR$/src/common/Nav/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="112">
<caret line="8" column="26" lean-forward="true" selection-start-line="8" selection-start-column="26" selection-end-line="8" selection-end-column="26" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Nav/NavLink/index.scss">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/src/index.js">
<entry file="file://$PROJECT_DIR$/config/webpack.config.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="231">
<caret line="11" column="41" lean-forward="true" selection-start-line="11" selection-start-column="41" selection-end-line="11" selection-end-column="41" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
<state relative-caret-position="147">
<caret line="417" column="54" lean-forward="true" selection-start-line="417" selection-start-column="54" selection-end-line="417" selection-end-column="54" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/menu.js">
<entry file="file://$PROJECT_DIR$/src/components/Index/topscroll.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="21">
<caret line="2" lean-forward="true" selection-start-line="2" selection-end-line="2" />
<state relative-caret-position="84">
<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>
......@@ -325,61 +353,85 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.css">
<entry file="file://$PROJECT_DIR$/src/common/Nav/NavLink/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="489">
<caret line="27" column="19" lean-forward="true" selection-start-line="27" selection-start-column="19" selection-end-line="27" selection-end-column="19" />
<state relative-caret-position="231">
<caret line="11" column="40" lean-forward="true" selection-start-line="11" selection-start-column="40" selection-end-line="11" selection-end-column="40" />
<folding>
<element signature="e#0#40#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Nav/index.scss">
<entry file="file://$PROJECT_DIR$/src/menu.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="112">
<caret line="8" column="26" lean-forward="true" selection-start-line="8" selection-start-column="26" selection-end-line="8" selection-end-column="26" />
<state relative-caret-position="21">
<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>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Nav/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="42">
<caret line="2" column="34" lean-forward="true" selection-start-line="2" selection-end-line="3" />
<state relative-caret-position="273">
<caret line="13" column="53" selection-start-line="13" selection-start-column="43" selection-end-line="13" selection-end-column="53" />
<folding>
<element signature="e#0#41#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Nav/NavLink/index.scss">
<provider selected="true" editor-type-id="text-editor" />
<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/common/Nav/NavLink/index.js">
<entry file="file://$PROJECT_DIR$/src/index.js">
<provider selected="true" editor-type-id="text-editor">
<state>
<caret column="18" selection-start-column="18" selection-end-column="18" />
<state relative-caret-position="189">
<caret line="9" column="29" lean-forward="true" selection-start-line="9" selection-start-column="29" selection-end-line="9" selection-end-column="29" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/course.scss">
<entry file="file://$PROJECT_DIR$/src/index.css">
<provider selected="true" editor-type-id="text-editor">
<state>
<caret column="14" selection-start-column="1" selection-end-column="14" />
<state relative-caret-position="252">
<caret line="12" column="14" selection-start-line="12" selection-start-column="14" selection-end-line="12" selection-end-column="14" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/course.js">
<entry file="file://$PROJECT_DIR$/src/styles/variable.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="42">
<caret line="2" lean-forward="true" selection-start-line="2" selection-end-line="2" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
<state relative-caret-position="84">
<caret line="4" column="13" lean-forward="true" selection-start-line="4" selection-end-line="5" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/.history/config/webpack.config_20190418113120.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="279">
<caret line="267" column="37" selection-start-line="267" selection-start-column="25" selection-end-line="267" selection-end-column="37" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/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/Index/scroll.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="21">
<caret line="2" column="32" lean-forward="true" selection-start-line="2" selection-start-column="32" selection-end-line="2" selection-end-column="32" />
<state relative-caret-position="126">
<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>
......@@ -388,36 +440,45 @@
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153">
<caret line="52" selection-start-line="52" selection-end-line="52" />
<state relative-caret-position="395">
<caret line="114" column="51" lean-forward="true" selection-start-line="114" selection-start-column="51" selection-end-line="114" selection-end-column="51" />
<folding>
<element signature="e#0#41#0" expanded="true" />
<element signature="e#274#2948#0" />
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/topscroll.js">
<entry file="file://$PROJECT_DIR$/src/components/Index/carousel.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="756">
<caret line="36" column="72" lean-forward="true" selection-start-line="36" selection-start-column="72" selection-end-line="36" selection-end-column="72" />
<state relative-caret-position="63">
<caret line="3" column="34" lean-forward="true" selection-start-line="3" selection-start-column="34" selection-end-line="3" selection-end-column="34" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/course.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="714">
<caret line="42" column="20" lean-forward="true" selection-start-line="42" selection-start-column="20" selection-end-line="42" selection-end-column="20" />
</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="42">
<caret line="2" column="24" selection-start-line="2" selection-start-column="21" selection-end-line="2" selection-end-column="24" />
<state relative-caret-position="210">
<caret line="10" column="27" lean-forward="true" selection-start-line="10" selection-start-column="27" selection-end-line="10" selection-end-column="27" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/config/webpack.config.js">
<entry file="file://$PROJECT_DIR$/src/components/Index/course.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="462">
<caret line="432" column="49" selection-start-line="432" selection-start-column="49" selection-end-line="432" selection-end-column="49" />
<state relative-caret-position="489">
<caret line="31" column="21" lean-forward="true" selection-start-line="31" selection-start-column="21" selection-end-line="31" selection-end-column="21" />
<folding>
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
......
src/components/Index/carousel.js 0 → 100644
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/components/Index/carousel.scss 0 → 100644
.scroll-box {
width: 100%;
height: 92px;
overflow: auto;
position: relative;
margin-top: 15px;
.scroll-list {
height: 100%;
display: flex;
overflow: hidden;
position: absolute;
}
}::-webkit-scrollbar{
display:none;
}
src/components/Index/course.js
......@@ -10,6 +10,10 @@ class Course extends Component {
this.props.data.map((item, index) => {
return (
<li key={index}>
{item.isbuy === 1 && <span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>}
<a href="">
<img src={item.src} alt=""/>
<p className="course-title">{item.title}</p>
......
src/components/Index/course.scss
......@@ -8,7 +8,24 @@
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
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 {
width: 100%;
height:119px;
......@@ -17,13 +34,15 @@
.course-title {
font-size: 13px;
color: #333;
line-height: 19px;
margin-top: 9px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 19px;
margin-top: 9px;
box-orient: vertical;
}
.course-price {
......@@ -44,6 +63,7 @@
}
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
......
src/components/Index/index.js
......@@ -2,14 +2,16 @@ import React, {Component} from 'react';
import Course from './course.js';
import Scroll from './scroll.js';
import TopScroll from './topscroll.js';
import Carousel from './carousel.js';
import './index.scss';
class Index extends Component {
state = {
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'title': '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
......@@ -43,34 +45,54 @@ class Index extends Component {
'price0': 100,
'price1': 1000
}
],
tabdata: [
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'公开课'},
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'精品特惠'},
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'赚奖学金'},
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'每日一题'},
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'企业内训'}
]
}
render() {
return (
<div className='indexbox'>
<TopScroll data={this.state.dataList}></TopScroll>
<TopScroll data={this.state.dataList} height='168px'></TopScroll>
<div className="tabbox">
<ul>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/><span>公开课</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/><span>精品特惠</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/><span>赚奖学金</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/><span>每日一题</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/><span>企业内训</span></li>
{
this.state.tabdata.map((item,index)=>{
return (
<li key={index}>
<img src={item.src} alt=""/>
<span>{item.name}</span>
</li>
)
})
}
</ul>
</div>
<div className='category'>
<h2 className="title">近期直播</h2>
<Carousel>
{
this.state.dataList.map((item,index)=>{
return(
<li key={index} className='scroll-item'>
<a href="">
<img className="item-img" src={item.src} alt="" />
<div className="item-content">
<h2 className="item-title">{item.title}</h2>
<p className="item-teacher">讲师：{item.teacher}</p>
<p className="item-time">时间：{item.time}</p>
</div>
</a>
</li>
)
})
}
</Carousel>
<div className="vip">
<a href="">
<img
......@@ -86,7 +108,7 @@ class Index extends Component {
<div className='category'>
<h2 className="title">热门推荐</h2>
<a className="more" href="#">更多 ></a>
<Scroll data={this.state.dataList}></Scroll>
<Scroll data={this.state.dataList} height='106px'></Scroll>
<Course data={this.state.dataList}></Course>
</div>
<div className='category'>
......
src/components/Index/index.scss
......@@ -3,19 +3,29 @@
background-color: #fff;
}
.am-wingblank {
margin-top: 50px;
margin-top: 15px;
}
/*热门推荐轮播*/
.scroll {
width: 100%;
margin-left: 0!important;
margin-top: 12px;
margin-bottom: 5px;
}
/*
页面tab
*/
.tabbox {
width: 100%;
height: 103px;
padding: 20px;
padding: 20px 17px;
margin-top: 50px;
ul {
display: flex;
justify-content: space-between;
text-align: center;
li {
width: 64px;
img {
width: 40px;
height: 40px;
......@@ -24,14 +34,62 @@
span {
color: #606060;
font-size: 16px;
font-size: 13px;
display: block;
margin-top: 10px;
}
}
}
}
/*
近期直播
*/
.scroll-item {
display: inline-block;
width: 301px;
height: 100%;
margin-right: 20px;
box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1);
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
a {
width: 100%;
height: 100%;
padding: 10px;
display: flex;
.item-img {
width: 100px;
height: 72px;
margin-right: 8px;
}
.item-content .item-title, .item-teacher, .item-time {
max-width: 173px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.item-title {
font-size: 15px;
color: #333;
}
.item-teacher {
font-size: 13px;
color: #555;
margin-top: 6px;
}
.item-time {
font-size: 12px;
color: #999;
margin-top: 11px;
}
}
}
.vip {
width: 100%;
height: 106px;
......@@ -65,7 +123,9 @@
float: right;
}
}
/*
底部查看所有课程
*/
.all-course {
text-align: center;
padding-bottom: 30px;
......@@ -82,51 +142,3 @@
font-size: 12px;
}
}
//
//.person-item {
// display: inline-block;
// height: 92px;
// width: 301px;
// margin-right: 20px;
// border: 1px solid rgba(0, 0, 0, .1);
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
// border-radius: 5px;
//
// a {
// width: 100%;
// height: 100%;
// padding: 10px;
// display: flex;
//
// .item-img {
// width: 100px;
// height: 72px;
// margin-right: 8px;
// }
//
// .item-content .item-title, .item-teacher, .item-time {
// max-width: 173px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap
// }
//
// .item-title {
// font-size: 15px;
// color: #333;
// }
//
// .item-teacher {
// font-size: 13px;
// color: #555;
// margin-top: 11px;
// }
//
// .item-time {
// font-size: 12px;
// color: #999;
// margin-top: 20px;
// }
// }
//}
\ No newline at end of file
src/components/Index/scroll.js
......@@ -3,7 +3,7 @@ import { Carousel, WingBlank } from 'antd-mobile';
class Scroll extends Component {
render() {
return (
<WingBlank>
<WingBlank className='scroll'>
<Carousel
autoplay={true}
infinite
......@@ -12,7 +12,7 @@ class Scroll extends Component {
<a
key={val}
href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: '100px' }}
style={{ display: 'inline-block', width: '100%', height: this.props.height}}
>
<img
src={val.src}
......
src/components/Index/topscroll.js
......@@ -23,7 +23,7 @@ class TopScroll extends Component {
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -10 : 0,
height: '168px',
height: this.props.height,
boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
}}
>
......@@ -34,7 +34,7 @@ class TopScroll extends Component {
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({imgHeight: '168px'});
this.setState({imgHeight: this.props.height});
}}
/>
</a>
......
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