Skip to content

M
mr-julyedu
Commit 2d772622 by xuzhenghua
Options

首页分类头部

parent 554db2fd
Showing with 196 additions and 93 deletions
src/common/Carousel/carousel.scss deleted 100644 → 0
.scroll-box {
width: 100%;
overflow: auto;
position: relative;
margin-top: 15px;
.scroll-list {
height: 100%;
display: flex;
overflow: hidden;
position: absolute;
}
}::-webkit-scrollbar{
display:none;
}
src/common/Carousel/index.js deleted 100644 → 0
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/VList/index.js
......@@ -6,6 +6,7 @@ const VList = (props) => {
<li className='v-list-item'>
<div className="content">
<div className="cover" onClick={props.handleClick}>
{props.status}
<img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' alt=""/>
</div>
{props.info}
......
src/common/VList/index.scss
......@@ -11,14 +11,24 @@
.cover {
flex: 1 0 auto;
margin-right: 16px;
position: relative;
img {
width: 150px;
height: 108px;
border-radius: 3px;
}
}
.course-status {
width: 100%;
height: 24px;
position: absolute;
bottom: -1px;
border-radius: 0 0 3px 3px;
text-align: center;
line-height: 24px;
color: $white;
font-size: 13px;
}
}
}
\ No newline at end of file
src/common/index.js
......@@ -2,7 +2,4 @@
export { default as Nav } from './Nav'
export { default as VList } from './VList'
export { default as Course } from './Course' // 课程状态（试听 正在直播）+封面+标题+ 详情
export { default as Carousel } from './Carousel' // 横向滚动
export { default as Topscroll } from './Topscroll' // 首页头部轮播
export { default as Scroll } from './Scroll' // 首页正常轮播图
export { default as Tag } from './CategoryTag'
src/components/Index/index.js
import React, {Component} from 'react';
import {Course, Carousel, Scroll, Topscroll} from '../../common'
import {Course} from '../../common'
import Scroll from './scroll'
import Topscroll from './topscroll'
import './index.scss';
class Index extends Component {
......@@ -65,10 +67,18 @@ class Index extends Component {
}
]
}
toSearch() {
window.location.href ='/search'
}
render() {
return (
<div className='index-box'>
<div className='header'>
<img className="logo" src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" alt="" />
<button className='to-app'>在APP打开</button>
<i className='iconfont iconiconfront- search' onClick={this.toSearch.bind(this)}></i>
</div>
<Topscroll data={this.state.dataList} height='155px' actheight='168px'></Topscroll>
<div className="tabbox">
......@@ -87,7 +97,8 @@ class Index extends Component {
</div>
<div className='category'>
<h2 className="title">近期直播</h2>
<Carousel>
<div className='scroll-box'>
<ul className='scroll-list'>
{
this.state.dataList.map((item, index) => {
return (
......@@ -104,7 +115,9 @@ class Index extends Component {
)
})
}
</Carousel>
</ul>
</div>
<div className="category-vip">
<a href="/#">
<img
......
src/components/Index/index.scss
.index-box {
overflow: hidden;
background-color: $bg_fff;
}
.top-scroll {
margin-top: 15px;
.header {
width: 100%;
height: 44px;
background-color: $bg_fff;
padding: 10px 15px;
.logo {
width: 78px;
height: 20px;
}
.to-app {
margin-left: 10px;
width: 88px;
height: 22px;
border: 1px solid $bg_active;
border-radius: 11px;
background-color: $bg_fff;
font-size: 12px;
color: $active;
vertical-align: top;
}
.search {
font-size: 22px!important;
float: right;
margin-top: -6px;
}
}
.top-scroll {
touch-action: pan-y;
margin-top: 7px;
height: 168px;
position: relative;
......@@ -19,25 +49,28 @@
.slider-decorator-0 {
position: absolute;
top: 125px;
.am-carousel-wrap {
text-align: right;
padding-right: 50px;
}
}
}
}
/*热门推荐轮播*/
/*热门推荐轮播*/
.scroll {
.scroll {
width: 100%;
margin-left: 0 !important;
margin-top: 12px;
margin-bottom: 5px;
}
touch-action: pan-y;
}
/*
页面tab
*/
.tabbox {
/*
页面tab
*/
.tabbox {
width: 100%;
height: 103px;
padding: 20px 17px;
......@@ -58,18 +91,28 @@
span {
color: $color_606;
font-size: 13px;
font-size: 14px;
display: block;
margin-top: 10px;
}
}
}
}
}
/*
近期直播
*/
.scroll-item {
/*
近期直播
*/
.scroll-box {
width: 100%;
overflow: auto;
position: relative;
margin-top: 15px;
.scroll-list {
height: 100%;
display: flex;
overflow: hidden;
position: absolute;
.scroll-item {
display: inline-block;
width: 301px;
height: 100%;
......@@ -99,12 +142,12 @@
}
.item-title {
font-size: 15px;
font-size: 16px;
color: $color_333;
}
.item-teacher {
font-size: 13px;
font-size: 14px;
color: $color_555;
margin-top: 6px;
}
......@@ -115,9 +158,14 @@
margin-top: 11px;
}
}
}
}
}
}::-webkit-scrollbar{
display:none;
}
.category-vip {
.category-vip {
width: 100%;
height: 106px;
border-radius: 5px;
......@@ -128,17 +176,17 @@
height: 106px;
border-radius: 5px;
}
}
}
/*课程公共样式*/
.category {
/*课程公共样式*/
.category {
width: 100%;
border-top: 8px solid #F3F4F8;
padding: 20px 15px 15px 15px;
.title {
font-size: 15px;
font-size: 16px;
color: $color_333;
display: inline-block;
}
......@@ -148,9 +196,9 @@
font-size: 12px;
float: right;
}
}
}
.course-detail {
.course-detail {
width: 100%;
display: flex;
justify-content: space-between;
......@@ -181,7 +229,7 @@
.new {
color: $red;
font-size: 15px;
font-size: 16px;
}
.old {
......@@ -205,27 +253,27 @@
text-align: center;
line-height: 18px;
}
}
}
/*
横向滚动
*/
.scroll-box {
/*
横向滚动
*/
.scroll-box {
height: 92px;
}
}
/*
底部查看所有课程
*/
.all-course {
/*
底部查看所有课程
*/
.all-course {
text-align: center;
padding-bottom: 30px;
margin-bottom: 50px;
p {
color: $color_555;
font-size: 15px;
font-size: 16px;
margin-bottom: 10px;
}
......@@ -233,5 +281,6 @@
color: $color_999;
font-size: 12px;
}
}
}
}
\ No newline at end of file
src/common/Scroll/index.js → src/components/Index/scroll.js
import React, {Component} from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
class Scroll extends Component {
export default class Scroll extends Component {
render() {
return (
<WingBlank className='scroll'>
......@@ -32,5 +32,5 @@ class Scroll extends Component {
}
}
export default Scroll
src/common/Topscroll/index.js → src/components/Index/topscroll.js
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
class Topscroll extends Component {
export default class Topscroll extends Component {
state = {
slideIndex:0
}
......@@ -53,4 +53,3 @@ class Topscroll extends Component {
}
}
export default Topscroll
src/components/classify/courselist.scss
.class-child {
.search-nav {
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: $bg_f7f9fc;
display: flex;
justify-content: space-between;
.am-search {
width: 81%;
background-color: $bg_f7f9fc;
}
.am-search-input,.am-search-synthetic-ph,.am-search-value{
text-align: left;
padding-left: 15px;
height: 26px;
line-height: 26px;
}
.am-search-input {
background-color: $bg_EBEFF5;
border-radius: 13px;
}
.shopping-cart,.return {
font-size: 18px !important;
}
}
.class-content {
padding: 0 12px;
position: relative;
.v-list-item {
padding: 10px 0 0;
......@@ -14,12 +46,18 @@
img {
width: 100%;
}
.course-status {
background-color: rgba(224, 46, 36, 0.6);
}
}
}
.info {
width: 52.3%;
position: relative;
display: block;
.title {
font-size: 16px;
......@@ -42,7 +80,7 @@
.course-price {
.new {
color: $red;
font-size: 15px;
font-size: 16px;
}
.old {
......@@ -72,24 +110,49 @@
.tabs {
display: flex;
margin-top: 10px;
margin-bottom: 50px;
}
.pull-down {
width: 32px;
position: absolute;
top: 12px;
top: 4px;
right: 0;
z-index: 2;
background-color: $bg_fff;
color: $color_666;
}
.am-tabs-tab-bar-wrap {
padding-right: 20px;
}
.am-tabs-default-bar-tab {
width: auto !important;
margin-right: 20px;
}
.am-tabs-default-bar-tab-active {
color: $active;
border-bottom: 2px solid $active !important;
}
.am-tabs-default-bar-underline {
display: none;
}
.am-whitespace.am-whitespace-md {
height: 0 !important;
}
}
.mbc-box {
position: fixed;
left: 0;
top: 53px;
top: 88px;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
background-color: rgba(0, 0, 0, .6);
.tabcontent {
width: 100%;
height: 303px;
......@@ -97,13 +160,14 @@
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;
font-size: 14px;
color: $color_333;
}
......@@ -142,11 +206,8 @@
}
}
}
}
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
src/components/classify/index.scss
......@@ -18,7 +18,7 @@
padding: 0 15px;
.course-items-title {
font-size: 13px;
font-size: 14px;
color: $color_333;
img {
......
src/styles/variable.scss
......@@ -37,6 +37,7 @@ $bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: #f7f9fc;
$bg_EBEFF5: #EBEFF5;
/*
......
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