Skip to content

M
mr-julyedu
Commit 2d772622 by xuzhenghua
Options

首页分类头部

parent 554db2fd
Showing with 421 additions and 318 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,24 +97,27 @@ class Index extends Component {
</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='scroll-box'>
<ul className='scroll-list'>
{
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>
)
})
}
</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;
height: 168px;
position: relative;
.header {
width: 100%;
height: 44px;
background-color: $bg_fff;
padding: 10px 15px;
.am-wingblank.am-wingblank-lg {
margin: 0;
}
.logo {
width: 78px;
height: 20px;
}
img {
border-radius: 6px;
}
.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;
}
.slider-decorator-0 {
position: absolute;
top: 125px;
.am-carousel-wrap {
text-align: right;
padding-right: 50px;
.search {
font-size: 22px!important;
float: right;
margin-top: -6px;
}
}
}
/*热门推荐轮播*/
.scroll {
width: 100%;
margin-left: 0 !important;
margin-top: 12px;
margin-bottom: 5px;
}
/*
页面tab
*/
.tabbox {
width: 100%;
height: 103px;
padding: 20px 17px;
ul {
display: flex;
justify-content: space-between;
text-align: center;
li {
width: 64px;
.top-scroll {
touch-action: pan-y;
margin-top: 7px;
height: 168px;
position: relative;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.am-wingblank.am-wingblank-lg {
margin: 0;
}
img {
border-radius: 6px;
}
span {
color: $color_606;
font-size: 13px;
display: block;
margin-top: 10px;
.slider-decorator-0 {
position: absolute;
top: 125px;
.am-carousel-wrap {
text-align: right;
padding-right: 50px;
}
}
}
}
/*
近期直播
*/
.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: $bg_fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
a {
/*热门推荐轮播*/
.scroll {
width: 100%;
height: 100%;
padding: 10px;
display: flex;
margin-left: 0 !important;
margin-top: 12px;
margin-bottom: 5px;
touch-action: pan-y;
}
.item-img {
width: 100px;
height: 72px;
margin-right: 8px;
/*
页面tab
*/
.tabbox {
width: 100%;
height: 103px;
padding: 20px 17px;
ul {
display: flex;
justify-content: space-between;
text-align: center;
li {
width: 64px;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
span {
color: $color_606;
font-size: 14px;
display: block;
margin-top: 10px;
}
}
}
}
.item-content .item-title, .item-teacher, .item-time {
max-width: 173px;
/*
近期直播
*/
.scroll-box {
width: 100%;
overflow: auto;
position: relative;
margin-top: 15px;
.scroll-list {
height: 100%;
display: flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
position: absolute;
.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: $bg_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: 16px;
color: $color_333;
}
.item-teacher {
font-size: 14px;
color: $color_555;
margin-top: 6px;
}
.item-time {
font-size: 12px;
color: $color_999;
margin-top: 11px;
}
}
}
}
}::-webkit-scrollbar{
display:none;
}
.item-title {
font-size: 15px;
color: $color_333;
.category-vip {
width: 100%;
height: 106px;
border-radius: 5px;
margin-top: 20px;
img {
width: 100%;
height: 106px;
border-radius: 5px;
}
}
.item-teacher {
font-size: 13px;
color: $color_555;
margin-top: 6px;
/*课程公共样式*/
.category {
width: 100%;
border-top: 8px solid #F3F4F8;
padding: 20px 15px 15px 15px;
.title {
font-size: 16px;
color: $color_333;
display: inline-block;
}
.item-time {
.more {
color: $active;
font-size: 12px;
color: $color_999;
margin-top: 11px;
float: right;
}
}
}
.category-vip {
width: 100%;
height: 106px;
border-radius: 5px;
margin-top: 20px;
img {
.course-detail {
width: 100%;
height: 106px;
border-radius: 5px;
}
}
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.audition {
position: absolute;
top: 10px;
width: 54px;
height: 18px;
line-height: 18px;
background-color: $bg_active;
font-size: 12px;
color: $white;
text-align: center;
border-radius: 1px;
.iconerji {
font-size: 14px !important;
display: inline-block;
margin-right: 4px;
}
}
/*课程公共样式*/
.category {
width: 100%;
border-top: 8px solid #F3F4F8;
padding: 20px 15px 15px 15px;
.course-price {
margin-top: 15px;
.title {
font-size: 15px;
color: $color_333;
display: inline-block;
}
.new {
color: $red;
font-size: 16px;
}
.more {
color: $active;
font-size: 12px;
float: right;
}
}
.course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.audition {
position: absolute;
top: 10px;
width: 54px;
height: 18px;
line-height: 18px;
background-color: $bg_active;
font-size: 12px;
color: $white;
text-align: center;
border-radius: 1px;
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.iconerji {
font-size: 14px !important;
.isbuy {
display: inline-block;
margin-right: 4px;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
/*
横向滚动
*/
.scroll-box {
height: 92px;
}
.course-price {
margin-top: 15px;
/*
底部查看所有课程
*/
.all-course {
text-align: center;
padding-bottom: 30px;
margin-bottom: 50px;
.new {
color: $red;
font-size: 15px;
p {
color: $color_555;
font-size: 16px;
margin-bottom: 10px;
}
.old {
span {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
/*
横向滚动
*/
.scroll-box {
height: 92px;
}
/*
底部查看所有课程
*/
.all-course {
text-align: center;
padding-bottom: 30px;
margin-bottom: 50px;
p {
color: $color_555;
font-size: 15px;
margin-bottom: 10px;
}
span {
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 {
padding: 0 12px;
position: relative;
.v-list-item {
padding: 10px 0 0;
.search-nav {
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: $bg_f7f9fc;
display: flex;
justify-content: space-between;
.content {
border: none;
.am-search {
width: 81%;
background-color: $bg_f7f9fc;
}
.cover {
flex: inherit;
width: 42.2%;
.am-search-input,.am-search-synthetic-ph,.am-search-value{
text-align: left;
padding-left: 15px;
height: 26px;
line-height: 26px;
}
img {
width: 100%;
}
}
.am-search-input {
background-color: $bg_EBEFF5;
border-radius: 13px;
}
.info {
width: 52.3%;
position: relative;
.shopping-cart,.return {
font-size: 18px !important;
}
}
.title {
font-size: 16px;
color: $color_333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.class-content {
padding: 0 12px;
position: relative;
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.v-list-item {
padding: 10px 0 0;
.content {
border: none;
.des {
position: absolute;
bottom: 0;
.cover {
flex: inherit;
width: 42.2%;
.course-price {
.new {
color: $red;
font-size: 15px;
img {
width: 100%;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
.course-status {
background-color: rgba(224, 46, 36, 0.6);
}
}
}
.info {
width: 52.3%;
position: relative;
display: block;
.isbuy {
display: inline-block;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
.title {
font-size: 16px;
color: $color_333;
overflow: hidden;
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;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
}
}
}
.tabs {
display: flex;
margin-top: 10px;
}
.tabs {
display: flex;
margin-top: 10px;
margin-bottom: 50px;
}
.pull-down {
width: 32px;
position: absolute;
top: 12px;
right: 0;
z-index: 2;
background-color: $bg_fff;
color: $color_666;
.pull-down {
width: 32px;
position: absolute;
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