Skip to content

M
mr-julyedu
Commit c369b0cd by FE
Options

Merge branch 'student-register' into dev

parents da642bff ea2d0167
Showing with 102 additions and 113 deletions
src/components/college/banner.scss
.college-banner {
height: 100px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/college-banner.png');
// background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/college-banner.png');
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/m-banner.png');
background-size: cover;
}
\ No newline at end of file
src/components/college/courseList.js
......@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { http } from '@/utils';
import { HeaderBar } from "@/common";
import CollegeBanner from './banner';
import CollegeHeader from './header';
import './courseList.scss';
import { Toast } from 'antd-mobile';
......@@ -10,6 +11,7 @@ class CollegeCourse extends Component {
constructor(props) {
super(props);
this.state = {
header: '',
courseList: []
};
}
......@@ -25,8 +27,10 @@ class CollegeCourse extends Component {
const { code, data } = res.data;
if(code === 200) {
this.setState({
courseList: data
header: data.name,
courseList: data.data
});
document.title = `助力高校在线教学计划之${data.name}专区 - 七月在线`
}
});
}
......@@ -50,20 +54,23 @@ class CollegeCourse extends Component {
}
render() {
const { courseList = [] } = this.state;
const { courseList = [], header } = this.state;
return (
<>
<HeaderBar title={'助学计划'} arrow={true}/>
<CollegeBanner />
<div className="college-course__header">
<i className="header__decorate"></i>
<p className="header__desc">点击需要学习的课程封面，在课程详情页进入购买流程凭免单券免费兑换课程。</p>
</div>
<CollegeHeader
headerStyle={{
marginTop: '20px'
}}
title={header}
/>
<p className="college-course__desc">点击需要学习的课程封面，在课程详情页进入购买流程凭免单券免费兑换课程。</p>
<div className="college-course__body">
{
courseList.map(item => (
<div
className="college-course__item"
<div
className="college-course__item"
onClick={() => this.toCourseDetail(item.course_id)}
key={item.course_id}
>
......
src/components/college/courseList.scss
.college-course__header {
margin-top: 20px;
.header__decorate {
display: block;
width: 39px;
height: 3px;
margin: 0 auto;
border-radius: 2px;
background: linear-gradient(90deg,rgba(0,153,255,1) 0%,rgba(55,117,239,1) 100%);
}
.header__desc {
margin: 8px 19px 12px;
font-size: 12px;
color: #0099FF;
text-align: center;
line-height: 15px;
}
.college-course__desc {
margin: 8px 19px 12px;
font-size: 12px;
color: #0099FF;
text-align: center;
line-height: 15px;
}
.college-course__body {
......
src/components/college/header.js 0 → 100644
import React from 'react';
import './header.scss';
export default (props) => {
const { title, isDecorate = true, headerStyle = {} } = props;
return (
<>
<div className="college-header" style={headerStyle}>
<i className="college-header__icon" data-direction="left"></i>
<h2 className="college-header__text">{title}</h2>
<i className="college-header__icon" data-direction="right"></i>
</div>
{
isDecorate &&
<i className="college-header__decorate"></i>
}
</>
);
};
src/components/college/header.scss 0 → 100644
.college-header {
display: flex;
justify-content: center;
align-items: center;
height: 34px;
}
.college-header__icon {
width: 44px;
height: 8px;
background-size: cover;
&[data-direction="left"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/icon-left.png');
background-position: right;
}
&[data-direction="right"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/icon-right.png');
background-position: left;
}
}
.college-header__text {
margin: 0;
padding: 0 10px;
font-size: 14px;
font-weight: 500;
color: #525C65;
line-height: 1;
}
.college-header__decorate {
display: block;
width: 39px;
height: 3px;
margin: 0 auto;
border-radius: 2px;
background: linear-gradient(90deg,rgba(0,153,255,1) 0%,rgba(55,117,239,1) 100%);
}
\ No newline at end of file
src/components/college/index.js
......@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { http } from '@/utils';
import { HeaderBar } from "@/common";
import CollegeBanner from './banner';
import CollegeHeader from './header';
import './index.scss';
class CollegePage extends Component {
......@@ -26,15 +27,16 @@ class CollegePage extends Component {
componentDidMount() {
this.fetchSchoolList();
document.title = `免费提供在线教学系统 助力全国高校在线教学 - 七月在线`
}
fetchSchoolList = () => {
const { schoolList } = this.state;
http.get(`${API['home']}/sys/school/list`).then(res => {
console.log(res);
const { code, data } = res.data;
if(code === 200) {
this.setState({
schoolList: data,
schoolList: data.concat(schoolList),
});
}
});
......@@ -42,7 +44,9 @@ class CollegePage extends Component {
toCollegeCourse = (id) => {
const { history } = this.props;
history.push(`/college/${id}`);
if(id) {
history.push(`/college/${id}`);
}
}
render() {
......@@ -52,11 +56,11 @@ class CollegePage extends Component {
<HeaderBar title={'助学计划'} arrow={true}/>
<CollegeBanner />
<div className="college-page__banner"></div>
<CollegeHeader
<CollegeHeader
headerStyle={{
marginTop: '20px'
}}
title="助力高校在线教学计划，在线不停课"
title="助力高校在线教学计划"
/>
<p className="college-page__contact">免费入驻联系周先生：18910848502(微信同)</p>
{
......@@ -70,20 +74,20 @@ class CollegePage extends Component {
</div>
))
}
<CollegeHeader
<CollegeHeader
headerStyle={{
marginTop: '20px'
}}
isDecorate={false}
title="入驻学院"
title="入驻院校"
/>
<div className="college-page__college">
{
schoolList.map(({id, name, logo}) => (
<div
className="college__item"
<div
className="college__item"
onClick={() => this.toCollegeCourse(id)}
key={id}
key={id}
>
<i className="college__iamge" style={{'backgroundImage': `url(${logo})`}}></i>
<p className="college__name">{name}</p>
......@@ -96,21 +100,4 @@ class CollegePage extends Component {
}
}
const CollegeHeader = (props) => {
const { title, isDecorate = true, headerStyle = {} } = props;
return (
<>
<div className="college-header" style={headerStyle}>
<i className="college-header__icon" data-direction="left"></i>
<h2 className="college-header__text">{title}</h2>
<i className="college-header__icon" data-direction="right"></i>
</div>
{
isDecorate &&
<i className="college-header__decorate"></i>
}
</>
);
}
export default CollegePage;
\ No newline at end of file
src/components/college/index.scss
......@@ -43,25 +43,14 @@
}
.college-page__college {
display: flex;
flex-wrap: wrap;
// display: flex;
// flex-wrap: wrap;
padding: 4px 10px 0;
.college__item {
width: 166px;
// width: 166px;
margin: 0 5px 10px;
cursor: pointer;
&:hover {
.college__iamge {
border-color: #0099FF;
}
.college__name {
color: #0099ff;
}
}
}
.college__iamge {
......@@ -69,7 +58,7 @@
height: 60px;
border: 1px solid #ECECEC;
border-radius: 1px;
background-size: auto 100%;
background-size: auto 95%;
background-position: center;
background-repeat: no-repeat;
}
......@@ -81,45 +70,4 @@
text-align: center;
line-height: 16px;
}
}
.college-header {
display: flex;
justify-content: center;
align-items: center;
height: 34px;
}
.college-header__icon {
width: 44px;
height: 8px;
background-size: cover;
&[data-direction="left"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/icon-left.png');
background-position: right;
}
&[data-direction="right"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/icon-right.png');
background-position: left;
}
}
.college-header__text {
margin: 0;
padding: 0 10px;
font-size: 14px;
font-weight: 500;
color: #525C65;
line-height: 1;
}
.college-header__decorate {
display: block;
width: 39px;
height: 3px;
margin: 0 auto;
border-radius: 2px;
background: linear-gradient(90deg,rgba(0,153,255,1) 0%,rgba(55,117,239,1) 100%);
}
\ No newline at end of file
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