Skip to content

M
mr-julyedu
Commit cf96ba89 by baiguangyao
Options

.

parents 188be836 094ee096
Showing with 685 additions and 23 deletions
.gitignore
......@@ -10,7 +10,7 @@
# production
/build
.idea/
# misc
.DS_Store
.env.local
......
config/webpack.config.js
......@@ -435,7 +435,6 @@ module.exports = function(webpackEnv) {
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
......
src/common/Scroll/index.js 0 → 100644
import React, {Component} from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
class Scroll extends Component {
render() {
return (
<WingBlank className='scroll'>
<Carousel
autoplay={true}
infinite
>
{this.props.data.map(val => (
<a
key={val}
href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: this.props.height}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
);
}
}
export default Scroll
src/common/Topscroll/index.js 0 → 100644
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
class Topscroll extends Component {
state = {
slideIndex:0
}
render() {
return (
<div className='top-scroll'>
<WingBlank>
<Carousel className="space-carousel"
frameOverflow="visible"
cellSpacing={10}
slideWidth={0.8}
autoplay
infinite
dotActiveStyle={{
width: '18px',
height: '8px',
background: '#fff',
borderRadius: '4px',
}}
beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
afterChange={index => this.setState({ slideIndex: index })}
>
{this.props.data.map((val, index) => (
<a
key={val}
href="http://www.alipay.com"
style={{
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -6 : 0,
height: this.state.slideIndex === index ? this.props.actheight : this.props.height,
}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top', height: '100%' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
// this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
</div>
);
}
}
export default Topscroll
src/common/VList/index.js 0 → 100644
import React from 'react';
import './index.scss'
const VList = (props) => {
return (
<li className='v-list-item'>
<div className="content">
<div className="cover" onClick={props.handleClick}>
<img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' alt=""/>
</div>
{props.info}
</div>
</li>
);
};
export default VList;
\ No newline at end of file
src/common/VList/index.scss 0 → 100644
.v-list-item {
height: 127px;
padding: 10px 10px 0;
.content {
display: flex;
height: 100%;
padding-bottom: 10px;
border-bottom: 1px solid $sp_e7eaf1;
.cover {
flex: 1 0 auto;
margin-right: 16px;
img {
width: 150px;
height: 108px;
border-radius: 3px;
}
}
}
}
\ No newline at end of file
src/common/carousel/carousel.scss 0 → 100644
.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 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/course/course.scss 0 → 100644
.course-item {
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
position: relative;
img {
width: 100%;
height: 119px;
}
.course-title {
font-size: 14px;
color: $color_333;
line-height: 19px;
margin-top: 9px;
}
}
src/common/course/index.js 0 → 100644
import React from 'react';
import './course.scss'
const Course = (props) => {
return (
<li className='course-item'>
{props.top}
<a href="/#">
<img src={props.data.src} alt=""/>
<p className="course-title text-overflow-2">{props.data.title}</p>
</a>
{props.bottom}
</li>
);
};
export default Course;
src/common/index.js
// 底部路由
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' // 首页正常轮播图
src/components/Index/index.scss 0 → 100644
.index-box {
overflow: hidden;
background-color: $bg_fff;
}
.top-scroll {
margin-top: 15px;
height: 168px;
position: relative;
.am-wingblank.am-wingblank-lg {
margin: 0;
}
img {
border-radius: 6px;
}
.slider-decorator-0 {
position: absolute;
top: 125px;
.am-carousel-wrap {
text-align: right;
padding-right: 50px;
}
}
}
/*热门推荐轮播*/
.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;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
span {
color: $color_606;
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: $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: 15px;
color: $color_333;
}
.item-teacher {
font-size: 13px;
color: $color_555;
margin-top: 6px;
}
.item-time {
font-size: 12px;
color: $color_999;
margin-top: 11px;
}
}
}
.vip {
width: 100%;
height: 106px;
border-radius: 5px;
margin-top: 20px;
img {
width: 100%;
height: 106px;
border-radius: 5px;
}
}
/*课程公共样式*/
.category {
width: 100%;
border-top: 8px solid #F3F4F8;
padding: 20px 15px 15px 15px;
.title {
font-size: 15px;
color: $color_333;
display: inline-block;
}
.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;
.iconerji {
font-size: 14px !important;
display: inline-block;
margin-right: 4px;
}
}
.course-price {
margin-top: 15px;
.new {
color: $red;
font-size: 15px;
}
.old {
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;
}
}
src/components/classify/index.js
import React, { Component } from 'react';
import './index.scss';
class Classify extends Component {
render() {
return(
<div>
分类
<div className='class-box'>
<div className="class-title">分类</div>
<div class="class-course">
<p>集训营</p>
<a href=""></a><a href=""></a><a href=""></a>
</div>
</div>
)
}
......
src/components/classify/index.scss 0 → 100644
.class-box {
background-color: $bg_fff;
}
.class-title {
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
background-color: #F7F9FC;
font-size: 16px;
color: $color_333;
}
\ No newline at end of file
src/components/study/index.js
import React, { Component } from 'react';
import React, { Component } from 'react'
import './study.scss'
import { Flex } from 'antd-mobile'
import { NavLink, Route, Switch } from "react-router-dom";
import MyCourses from "./my-courses";
class Study extends Component {
render() {
const {match} = this.props;
return (
<div>
学习
</div>
<section id='study'>
<Flex className='tab'>
<Flex.Item>
<NavLink to={`${match.url}/my-course`} activeClassName='active'>我的课程</NavLink>
</Flex.Item>
<Flex.Item>
<NavLink to={`${match.url}/free-course`} activeClassName='active'>免费课程</NavLink>
</Flex.Item>
</Flex>
<Switch>
<Route path={`${this.props.match.path}/my-course`} component={MyCourses}/>
<Route path={`${this.props.match.path}/free-course`} render={() => {
return (
<div>bbb</div>
)
}}/>
</Switch>
</section>
)
}
}
export default Study;
\ No newline at end of file
export default Study
\ No newline at end of file
src/components/study/my-courses/index.js 0 → 100644
import React from "react"
import { VList } from '../../../common'
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒'
},
]
export default function MyCourses(props) {
const handleClick = () => {
console.log(1);
}
return (
<ul>
{mockData.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact'>{item.contact}</p>
<p className='des'>
<span className='time'>{item.time}</span>
<span className='record'>{item.record}</span>
</p>
</div>
)
return (
<VList handleClick={handleClick} {...item} key={index} info={Info}></VList>
)
})}
</ul>
)
}
\ No newline at end of file
src/components/study/study.scss 0 → 100644
$tabHeight: 44px;
$tabFontSize: 15px;
#study {
height: 100%;
background: $bg_fff;
.tab {
height: $tabHeight;
line-height: $tabHeight;
text-align: center;
background: #F7F9FC;
a {
display: inline-block;
height: $tabHeight;
font-size: $tabFontSize;
}
}
.active {
color: $active;
border-bottom: 1px solid $active;
}
.info {
display: flex;
flex-wrap: wrap;
.title {
font-size: 15px;
font-weight: 400;
}
.contact {
font-size: 13px;
color: $red;
}
.des {
align-self: center;
color: $color_999;
font-size: 11px;
.time {
margin-right: 10px;
}
}
}
}
\ No newline at end of file
src/index.css
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
......@@ -8,6 +10,10 @@ body {
-moz-osx-font-smoothing: grayscale;
}
#root{
height: 100%;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
......
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import Router from './router';
// import { Provider } from 'react-redux';
......
src/styles/index.scss
......@@ -10,7 +10,7 @@ $link-visited: #333; // 设置链接访问后的颜色
$main-color: #09f; // 主体颜色
// 字体
$font-family-zh: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
$font-family-zh: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
$font-family-en: Arial, sans-serif !default;
// 盒子模型
......@@ -80,14 +80,17 @@ body {
a {
text-decoration: none;
outline: none;
&:hover,
&:link,
&:focus {
text-decoration: none;
}
&:visited {
}
}
// 暂时放置样式，后期需处理
.homeImg {
display: block;
......@@ -112,21 +115,27 @@ a {
}
// 背景颜色
.bg-white { background-color: #fff }
.bg-white {
background-color: #fff
}
// 间隔
.pt20 {
padding-top: 20px;
}
.pt30 {
padding-top: 30px;
}
.pt40 {
padding-top: 40px;
}
.pt50 {
padding-top: 50px;
}
.pt60 {
padding-top: 60px;
}
......@@ -137,16 +146,45 @@ a {
}
// 请保证你的设计稿为750px宽，如果有其余字体大小，请在私有样式中设置
.font-20 {font-size: 0.2rem;}
.font-24 {font-size: 0.24rem;}
.font-26 {font-size: 0.26rem;}
.font-28 {font-size: 0.28rem;}
.font-30 {font-size: 0.3rem;}
.font-32 {font-size: 0.32rem;}
.font-34 {font-size: 0.34rem;}
.font-36 {font-size: 0.36rem;}
.font-38 {font-size: 0.38rem;}
.font-40 {font-size: 0.4rem;}
.font-20 {
font-size: 0.2rem;
}
.font-24 {
font-size: 0.24rem;
}
.font-26 {
font-size: 0.26rem;
}
.font-28 {
font-size: 0.28rem;
}
.font-30 {
font-size: 0.3rem;
}
.font-32 {
font-size: 0.32rem;
}
.font-34 {
font-size: 0.34rem;
}
.font-36 {
font-size: 0.36rem;
}
.font-38 {
font-size: 0.38rem;
}
.font-40 {
font-size: 0.4rem;
}
// 设置block
.block {
......@@ -203,6 +241,7 @@ a {
flex-direction: row;
flex-wrap: wrap;
}
// 水平居中
.hor-center {
display: flex;
......@@ -210,6 +249,7 @@ a {
flex-wrap: nowrap;
justify-content: center;
}
// 垂直居中
.ver-center {
display: flex;
......@@ -295,7 +335,9 @@ img {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
/* autoprefixer: off; */
-webkit-box-orient: vertical;
/* autoprefixer: on; */
}
// 字符超出两行溢出隐藏
......@@ -304,7 +346,9 @@ img {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/* autoprefixer: off; */
-webkit-box-orient: vertical;
/* autoprefixer: on; */
}
// 字符超出三行溢出隐藏
......@@ -313,7 +357,9 @@ img {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
/* autoprefixer: off; */
-webkit-box-orient: vertical;
/* autoprefixer: on; */
}
// 浮动控制
......@@ -323,6 +369,7 @@ img {
content: '';
display: table;
}
&:after {
clear: both;
}
......@@ -351,21 +398,27 @@ img {
.z-50 {
z-index: 50;
}
.z-100 {
z-index: 100;
}
.z-150 {
z-index: 150;
}
.z-200 {
z-index: 200;
}
.z-250 {
z-index: 250;
}
.z-max {
z-index: 999999;
}
.overflow-h {
overflow: hidden;
}
......@@ -390,6 +443,7 @@ input[type="radio"] {
background: none;
outline: none;
}
input[type="radio"]:before {
position: absolute;
content: '';
......@@ -404,6 +458,7 @@ input[type="radio"]:before {
border-radius: 50%;
outline: 0;
}
input[type="radio"]:checked:after {
position: absolute;
z-index: 50;
......@@ -418,6 +473,7 @@ input[type="radio"]:checked:after {
border-radius: 50%;
outline: 0;
}
input[type="radio"]:checked:before {
position: absolute;
z-index: 100;
......
src/styles/variable.scss
......@@ -4,10 +4,12 @@
$active: #09f;
$white: #fff;
$black: #000;
$red: #f21;
$color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
$color_606: #606060;
/*
......@@ -34,7 +36,11 @@ $bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
<<<<<<< HEAD
$bg_f7f9fc: #f7f9fc;
=======
$body-bg: #fff;
>>>>>>> 094ee096ff756aa5c604062239b08df66a43ab10
/*
......@@ -47,4 +53,3 @@ $sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
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