Skip to content

M
mr-julyedu
Commit 464678c7 by baiguangyao
Options

修改版本冲突

parents bb80e6ba f324c669
Showing with 1117 additions and 8 deletions
.history/src/router_20190426084819.js 0 → 100644
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Menu from './menu';
import Index from './components/Index';
import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
import CourseList from './components/classify/courselist';
import Search from './components/search/index';
import Order from './components/order/index';
import Preferential from './components/preferential/index';
import Search from './components/search/index'
import Detail from './components/detail/index'
import Examination from './components/examination'
import ExchangeCoupons from './components/coupons/exchange-coupons'
import UseCoupon from './components/coupons/use-coupons'
const router = () => (
<Router>
<Switch>
<Route exact path="/" component={Index}></Route>
<Route path="/index" component={Index}></Route>
<Route path='/classify' component={Classify}></Route>
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
<Route path='/courselist' component={CourseList}></Route>
<<<<<<< HEAD
<Route path='/preferential' component={Preferential}></Route>
<Route path='/search' component={Search}></Route>
<<<<<<< HEAD
<Route path='/order' component={Order}></Route>
=======
<Route path='/detail' component={Detail}></Route>
>>>>>>> 1b8018b78869174664aea7e35cd7b390866a55ea
=======
<Route path='/examination' component={Examination}></Route>
<Route path='/exchange-coupons' component={ExchangeCoupons}></Route>
<Route path='/use-coupon' component={UseCoupon}></Route>
>>>>>>> f324c669ca80cefcb68423247058c3703a568f61
</Switch>
<Menu/>
</Router>
)
export default router;
\ No newline at end of file
.history/src/styles/variable_20190426084913.scss 0 → 100644
/*
* @ 文字颜色
*/
$active: #09f;
$white: #fff;
$black: #000;
$red: #f21;
$redprice: #ff3131;
$color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
$color_606: #606060;
$color_202426: #202426;
$color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F;
/*
* @ 文字大小
*/
$font_30: 30px;
$font_28: 28px;
$font_26: 26px;
$font_24: 24px;
$font_22: 22px;
$font_20: 20px;
$font_18: 18px;
$font_16: 16px;
$font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_0078FF: #0078FF;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: hsl(216, 45%, 98%);
$bg_EBEFF5: #EBEFF5;
$bg_ccc: #ccc;
$bg_333: #333;
$bg_82BBFB: #82BBFB;
$bg_EBC05A: #EBC05A;
$bg_EBA216: #EBA216;
/*
* @ 分割线颜色
*/
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
$border_ddd: #ddd;
$border_e7eaf1: #E7EAF1;
$border_f31: #f31;
/*
* @ 标签颜色
*/
$E0B97B: #E0B97B;
\ No newline at end of file
.history/src/styles/variable_20190426084945.scss 0 → 100644
/*
* @ 文字颜色
*/
$active: #09f;
$white: #fff;
$black: #000;
$red: #f21;
$redprice: #ff3131;
$color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
$color_606: #606060;
$color_202426: #202426;
$color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F;
/*
* @ 文字大小
*/
$font_30: 30px;
$font_28: 28px;
$font_26: 26px;
$font_24: 24px;
$font_22: 22px;
$font_20: 20px;
$font_18: 18px;
$font_16: 16px;
$font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_0078FF: #0078FF;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: #f7f9fc;
$bg_EBEFF5: #EBEFF5;
$bg_ccc: #ccc;
$bg_333: #333;
$bg_82BBFB: #82BBFB;
$bg_EBC05A: #EBC05A;
$bg_EBA216: #EBA216;
/*
* @ 分割线颜色
*/
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
$border_ddd: #ddd;
$border_e7eaf1: #E7EAF1;
$border_f31: #f31;
/*
* @ 标签颜色
*/
$E0B97B: #E0B97B;
\ No newline at end of file
package.json
......@@ -139,6 +139,7 @@
},
"devDependencies": {
"babel-plugin-import": "^1.11.0",
"classnames": "^2.2.6",
"sass-resources-loader": "^2.0.0"
},
"theme": "./src/assets/theme/config.js"
......
src/common/CategoryTag/index.js
import React from 'react'
import './index.scss'
const Tag = (props) => {
return (
......
src/components/coupons/common/Coupon/coupon.scss 0 → 100644
$bg_type1: #FE6161;
$bg_type2: #E0B97B;
.coupon {
position: relative;
margin-bottom: 15px;
box-shadow: 0px 2px 16px -8px;
.coupon-info {
position: relative;
height: 95px;
padding: 10px 15px;
color: $white;
.type {
font-size: $font_14;
}
.denomination {
font-size: $font_26;
line-height: $font_26;
text-align: center;
span {
font-size: $font_12;
}
}
.expire {
text-align: center;
font-size: $font_12;
line-height: $font_16;
}
&.coupon-type1 {
background: $bg_type1;
}
&.coupon-type2 {
background: $E0B97B;
}
&.invalid{
background: $color_999;
}
& > .iconfont {
$size: 22px;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: $size;
height: $size;
display: none;
}
.check {
display: block;
}
ul {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
li {
$dot_width: 10px;
width: $dot_width;
height: $dot_width;
border-radius: 50%;
background: $white;
transform: translateY(50%);
}
}
}
.coupon-des {
padding: 10px 15px;
background: $white;
display: flex;
justify-content: space-between;
align-items: center;
.limit {
font-size: $font_12;
vertical-align: middle;
color: $color_666;
}
.use {
display: inline-block;
padding: 3px 8px;
font-size: $font_12;
color: $border_f31;
border: 1px solid $border_f31;
border-radius: 10px;
background: transparent;
-webkit-appearance: none;
}
}
}
\ No newline at end of file
src/components/coupons/common/Coupon/index.js 0 → 100644
import React, { Component } from 'react'
import './coupon.scss'
import classnames from 'classnames'
class Coupon extends Component {
constructor(props) {
super(props)
}
pick = () => {
let {purpose, select, invalid} = this.props
purpose === 'use' && !invalid && select && select(this.props.index)
}
GoToUse = () => {
this.props.toUse(this.props.index)
}
render() {
let {
type,
couponName,
denomination,
expire_time,
limit,
selected,
index,
invalid,
purpose
} = this.props
return (
<li className='coupon' onClick={this.pick}>
<div className={classnames('coupon-info', invalid ? 'invalid' : `coupon-type${type}`)}>
<p className='type'>{couponName}</p>
<p className='denomination'>{denomination} <span>元</span></p>
<p className='expire'>有效期至：{expire_time}</p>
{
purpose === 'use' &&
<i className={classnames('iconfont icondanseshixintubiao-5', {
check: (selected != undefined && !invalid) && (selected === index)
})}
/>
}
<ul>
{
new Array(19).fill('a').map((item, index) => {
return <li key={index}></li>
})
}
</ul>
</div>
<div className="coupon-des">
<span className='limit'>{limit}</span>
{
purpose === 'exchange' &&
<button
className='use'
onClick={this.GoToUse}
>立即使用
</button>
}
</div>
</li>
);
}
}
export default Coupon
\ No newline at end of file
src/components/coupons/common/ExchangeBar/exchange-bar.scss 0 → 100644
.exchange-bar {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px 12px;
border-bottom: 1px solid $border_e7eaf1;
button {
display: inline-block;
width: 84px;
height: 36px;
line-height: 36px;
font-size: $font_16;
color: $white;
background-color: $bg_ccc;
border: none;
-webkit-appearance: none;
&.active {
background-color: $active;
}
}
}
\ No newline at end of file
src/components/coupons/common/ExchangeBar/index.js 0 → 100644
import React, { Component } from 'react';
import './exchange-bar.scss'
import Input from '../Input'
import classnames from 'classnames'
class ExchangeBar extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
const {onChange, exchangeNum} = this.props
return (
<div className="exchange-bar">
<Input
placeholder={'请输入优惠码'}
onChange={onChange}
type={'number'}
/>
<button className={classnames({
active: exchangeNum && exchangeNum.length > 0
})}>兑换
</button>
</div>
);
}
}
export default ExchangeBar;
\ No newline at end of file
src/components/coupons/common/Input/index.js 0 → 100644
import React, { Component } from 'react';
import './input.scss'
import classnames from 'classnames'
class Input extends Component {
constructor(props) {
super(props)
this.state = {
value: ''
}
}
handleChange = (e) => {
this.setState({
value: e.target.value
})
this.props.onChange(e.target.value)
}
clearInput = () => {
this.setState({
value: ''
})
this.props.onChange('')
}
render() {
let {type, placeholder} = this.props
return (
<div className='custom-input-wrapper'>
<input
type={type}
className={classnames('custom-input')}
placeholder={placeholder}
onChange={this.handleChange}
value={this.state.value}
/>
<i
className={classnames('iconfont icondanseshixintubiao-3', {
hide: this.state.value.length === 0
})}
onClick={this.clearInput}
></i>
</div>
);
}
}
Input.defaultProps = {type: 'text', placeholder: ''}
export default Input;
\ No newline at end of file
src/components/coupons/common/Input/input.scss 0 → 100644
.custom-input-wrapper {
position: relative;
.custom-input {
width: 255px;
height: 36px;
padding-left: 10px;
border: 1px solid $border_ddd;
border-radius: 3px;
font-size: $font_12;
-webkit-appearance: none;
&::-webkit-input-placeholder {
color: $color_999;
}
}
.iconfont {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: $font_14;
color: $bg_ccc;
}
.hide {
display: none;
}
}
\ No newline at end of file
src/components/coupons/exchange-coupons/coupons.scss 0 → 100644
#coupons {
height: 100%;
display: flex;
flex-flow: column;
.empty {
padding-top: 140px;
background: $bg_f5f5f5;
flex: 1;
text-align: center;
color: $color_666;
font-size: $font_12;
.iconfont {
color: #ef4d4e;
font-size: $font_16;
}
}
.coupon-list {
padding: 15px 12px;
}
}
\ No newline at end of file
src/components/coupons/exchange-coupons/index.js 0 → 100644
import React, { Component } from 'react'
import './coupons.scss'
// import { Toast } from "antd-mobile";
import Coupon from '../common/Coupon'
import ExchangeBar from '../common/ExchangeBar'
const mockData = [
{
type: 1,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
{
type: 2,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
]
class ExchangeCoupons extends Component {
constructor(props) {
super(props)
this.state = {
exchangeNum: ''
}
}
onChange = (val) => {
this.setState({exchangeNum: val})
}
useCoupon = (val) => {
console.log(val)
}
componentDidMount() {
document.getElementsByClassName('tabbar')[0].style.display = 'none'
}
render() {
return (
<div id='coupons'>
<ExchangeBar
onChange={this.onChange}
exchangeNum={this.state.exchangeNum}
/>
<Content
coupons={mockData}
toUse={this.useCoupon}
showUseButton={true}
purpose={'exchange'}
/>
</div>
);
}
}
function Empty() {
return (
<div className='empty'>
<div>
<p><i className='iconfont iconfrench_fries'></i></p>
<p>静待活动，什么券都有~</p>
</div>
</div>
)
}
function Content({coupons, onClick, ...rest}) {
if (coupons.length === 0) {
return <Empty/>
}
return (
<ul className='coupon-list'>
{
mockData.map((item, index) => {
return <Coupon
{...item}
key={index}
onClick={onClick}
{...rest}
index={index}
/>
})
}
</ul>
)
}
/*function Text({text}) {
return Toast.info(text, 1)
}*/
export default ExchangeCoupons;
\ No newline at end of file
src/components/coupons/use-coupons/index.js 0 → 100644
import React, { Component } from 'react';
import './use-coupon.scss'
import ExchangeaBar from "../common/ExchangeBar";
import Coupon from '../common/Coupon'
const mockData = {
valid: [
{
type: 1,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
{
type: 2,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
],
invalid: [
{
type: 1,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
{
type: 1,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
]
}
class UseCoupon extends Component {
constructor(props) {
super(props)
this.state = {
selected: 0
}
}
select = (val) => {
console.log(val)
this.setState({
selected: val
})
}
componentDidMount() {
document.getElementsByClassName('tabbar')[0].style.display = 'none'
}
render() {
return (
<div className='use-coupon'>
<ExchangeaBar/>
<div className="coupons-area">
<Content
coupons={mockData.valid}
showUseButton={false}
selected={this.state.selected}
select={this.select}
purpose={'use'}
/>
{
mockData.invalid.length > 0 &&
(
<>
<div className='invalid-title'>- 不可使用的优惠券 -</div>
<Content
coupons={mockData.invalid}
selected={this.state.selected}
select={this.select}
purpose={'use'}
invalid={'invalid'}
/>
</>
)
}
</div>
</div>
);
}
}
function Content({coupons, selected, ...rest}) {
if (coupons.length === 0) {
return (
<div className='empty'>
<p>暂无可使用的优惠券</p>
</div>
)
}
return (
<ul>
{
coupons.map((item, index) => {
return (
<Coupon
key={index}
{...item}
selected={selected}
index={index}
{...rest}
></Coupon>
)
})
}
</ul>
)
}
export default UseCoupon;
\ No newline at end of file
src/components/coupons/use-coupons/use-coupon.scss 0 → 100644
.use-coupon {
height: 100%;
display: flex;
flex-flow: column;
.coupons-area {
padding: 15px 12px;
background: $bg_f5f5f5;
flex: 1;
.empty {
min-height: 211px;
line-height: 211px;
font-size: $font_12;
color: $color_666;
}
.invalid-title{
text-align: center;
font-size: $font_12;
line-height: 52px;
color: $color_999;
}
}
}
\ No newline at end of file
src/components/examination/OpenApp/index.js 0 → 100644
import React from 'react'
import './index.scss'
const OpenApp = () => {
return (
<div className='open-app'>
<p className='left'>更多试题请前往App查看</p>
<button className='right'>在APP打开</button>
</div>
)
}
export default OpenApp
\ No newline at end of file
src/components/examination/OpenApp/index.scss 0 → 100644
.open-app {
position: fixed;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 44px;
padding: 0 15px;
border-top: 1px solid $border_ddd;
background: $white;
.left {
font-size: $font_12;
color: $color_555;
}
.right {
width: 88px;
height: 22px;
border: 1px solid $active;
border-radius: 11px;
color: $active;
font-size: $font_12;
background: transparent;
}
}
\ No newline at end of file
src/components/examination/examination.scss 0 → 100644
@mixin padding {
padding: 14px 12px;
}
.examination {
display: flex;
flex-direction: column;
height: calc(100% - 44px);
.topic {
@include padding;
font-size: $font_16;
}
.category-tag {
padding: 4px;
margin-right: 10px;
font-size: $font_12;
background-color: $E0B97B;
color: $white;
}
.show-answer {
@include padding;
text-align: right;
span {
color: $active;
font-size: $font_14;
line-height: $font_14;
i {
transform: translateY(30%);
display: inline-block;
}
}
}
.options {
list-style: none;
li {
@include padding;
$padding: 7px;
font-size: $font_16;
margin-bottom: 7px;
padding-top: $padding;
padding-bottom: $padding;
}
.alphabet {
$size: 30px;
width: $size;
height: $size;
margin-right: 16px;
display: inline-block;
border: 1px solid $color_999;
border-radius: 50%;
text-align: center;
font-size: $font_14;
line-height: $size;
}
.active {
color: $active;
background: #F8F8Fb;
.alphabet {
border-color: $active;
}
}
}
.answer {
@include padding;
background-color: $bg_f5f5f5;
visibility: hidden;
overflow: auto;
flex: 1;
.legend {
font-size: $font_14;
color: $color_999;
}
.content {
font-size: $font_16;
}
&.scale {
animation: slideInDown .3s both;
}
}
.saq-content {
@include padding;
}
}
@keyframes slideInDown {
from {
transform: translate3d(0, -10%, 0);
}
to {
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
.slideInDown {
animation-name: slideInDown;
}
\ No newline at end of file
src/components/examination/index.js 0 → 100644
import React from 'react'
import './examination.scss'
import classnames from 'classnames'
import { Tag } from '../../common'
import OpenApp from './OpenApp'
const mockData = {
id: 2,
type: 1,
options: [
{
ans: '频繁模式挖掘',
id: 1,
},
{
ans: '分类和预测',
id: 2
},
{
ans: '数据预处理',
id: 3
},
{
ans: '数据流挖掘',
id: 4
},
],
ans: 2,
question: '将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务（）'
}
const answer = '@nishizhen：个人感觉逻辑回归和线性回归首先都是广义的线性回归，\n' +
'其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
'其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
'其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
'其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
'另外线性回归在整个实数域范围内进行预测，敏感度一致，而分类范围，需要在[0,1]。逻辑回归就是一种减小预测范围，将预测值限定为[0,1]间的一种回归模型，因而对于这类问题来说，逻辑回归的鲁棒性比线性回归的要好。\n' +
' '
const saq = '例子：\n' +
' >>>find_string(\'hello\\nworld\\n\',\'wor\')\n' +
'[\'wor\']\n' +
'>>>find_string(\'hello\\nworld\\n\',\'l*d\')\n' +
'[\'ld\']\n' +
'>>>find_string(\'hello\\nworld\\n\',\'o.\')\n' +
'[\'or\']\n'
export default class Examination extends React.Component {
constructor(props) {
super(props)
this.state = {
isShowAnswer: false
}
}
componentDidMount() {
document.getElementsByClassName('tabbar')[0].style.display = 'none';
}
showAnswer = () => {
this.setState({isShowAnswer: !this.state.isShowAnswer})
}
render() {
return (
<div className='examination'>
<div className="question-container">
<div className="topic">
<Tag className='category-tag'>深度学习</Tag>
{mockData.question}
</div>
{
mockData.type === 1 ? (
<MultipleChoice className='options' options={mockData.options}
correct={mockData.ans}
showCorrect={this.state.isShowAnswer}
/>
) : <SAQ content={saq}/>
}
{
!this.state.isShowAnswer &&
(
<div className="show-answer" onClick={this.showAnswer}>
<span>查看解析<i className='iconfont iconiconfront-69'></i></span>
</div>
)
}
</div>
{
this.state.isShowAnswer && <Answer content={answer} isShowAnswer></Answer>
}
<OpenApp></OpenApp>
</div>
)
}
}
function MultipleChoice({options, correct, showCorrect}) {
return (
<ul className='options'>
{
options.map((item, index) => (
<li key={index} className={classnames('option', {'active': correct === item.id && showCorrect})}>
<span className="alphabet">{String.fromCharCode(65 + index)}</span>
{item.ans}
</li>
))
}
</ul>
)
}
function SAQ({content}) {
return (
<p className={'saq-content'}>
{content}
</p>
)
}
function Answer({content, isShowAnswer}) {
return (
<div className={classnames('answer', {scale: isShowAnswer})}>
<p className='legend'>解析</p>
<p className='content'>
{content}
</p>
</div>
)
}
src/components/study/free-courses/free-courses.scss
......@@ -4,12 +4,6 @@
flex-wrap: wrap;
justify-content: space-between;
.state {
box-sizing: border-box;
border-radius: 0 10px 10px 0;
padding: 1px 5px;
}
.top {
position: absolute;
top: 10px;
......
src/router.js
......@@ -12,7 +12,9 @@ import Order from './components/order/index';
import Preferential from './components/preferential/index';
import Search from './components/search/index'
import Detail from './components/detail/index'
import Examination from './components/examination'
import ExchangeCoupons from './components/coupons/exchange-coupons'
import UseCoupon from './components/coupons/use-coupons'
......@@ -25,6 +27,7 @@ const router = () => (
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
<Route path='/courselist' component={CourseList}></Route>
<<<<<<< HEAD
<Route path='/preferential' component={Preferential}></Route>
<Route path='/search' component={Search}></Route>
<<<<<<< HEAD
......@@ -32,8 +35,13 @@ const router = () => (
=======
<Route path='/detail' component={Detail}></Route>
>>>>>>> 1b8018b78869174664aea7e35cd7b390866a55ea
=======
<Route path='/examination' component={Examination}></Route>
<Route path='/exchange-coupons' component={ExchangeCoupons}></Route>
<Route path='/use-coupon' component={UseCoupon}></Route>
>>>>>>> f324c669ca80cefcb68423247058c3703a568f61
</Switch>
<Menu />
<Menu/>
</Router>
)
......
src/styles/variable.scss
......@@ -60,3 +60,13 @@ $sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
$border_ddd: #ddd;
$border_e7eaf1: #E7EAF1;
$border_f31: #f31;
/*
* @ 标签颜色
*/
$E0B97B: #E0B97B;
\ 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