Commit 6087fee2 by baiguangyao

订单详情页面

parent ed4caa55
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { LocaleProvider } from 'antd-mobile'
import Menu from './menu';
import { HashRouter } from 'react-router-dom'
import Routes from './router'
// import '@/common/styles/common.scss'
class App extends Component {
render() {
return (
<LocaleProvider>
<HashRouter>
<Routes></Routes>
<Menu />
</HashRouter>
</LocaleProvider>
);
}
}
export default connect()(App);
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { LocaleProvider } from 'antd-mobile'
import { HashRouter } from 'react-router-dom'
import Routes from './router'
// import '@/common/styles/common.scss'
class App extends Component {
render() {
return (
<LocaleProvider>
<HashRouter>
<Routes></Routes>
</HashRouter>
</LocaleProvider>
);
}
}
export default connect()(App);
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldError } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
};
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm, formShape } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
static propTypes = {
form: formShape,
};
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm, formShape } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
static propTypes = {
form: formShape,
};
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm, formShape } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
static propTypes = {
form: formShape,
};
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm, formShape } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends React.Component {
static propTypes = {
form: formShape,
};
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export createForm()(Order);
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
checked: false,
checked1: true
}
}
handleClick = () => {
console.log(1);
}
render() {
// const { getFieldProps } = this.props.form;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form'
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form'
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { createForm } from 'rc-form'
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch
checked={this.state.checked}
onChange={() => {
this.setState({
checked: !this.state.checked,
});
}}
/>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch
checked={this.state.checked}
onChange={() => {
this.setState({
checked: !this.state.checked,
});
}}
/>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, Switch } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<Switch
checked={this.state.checked}}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
arrow="horizontal"
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div>姓名: 张三</div>
<div>QQ: 1084251364</div>
<div>电话: 13266532323</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div>姓名: 张三</div>
<div>QQ: 1084251364</div>
</div>
<div>电话: 13266532323</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div>姓名: 张三</div>
<div>QQ: 1084251364</div>
</div>
<div className="order-cell">
<div>电话: 13266532323</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div>姓名: 张三</div>
<div>QQ: 1084251364</div>
</div>
<div className="order-cell">
<div>电话: 13266532323</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className=" <div className=" order-cell">">姓名: 张三</div>
<div>QQ: 1084251364</div>
</div>
<div className="order-cell">
<div>电话: 13266532323</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>QQ: 1084251364</div>
</div>
<div className="order-cell">
<div>电话: 13266532323</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
<div className="order-card">
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
<div className="order-bar">
<div className="order-course"></div>
<div className="order-bar-text"></div>
<button type="button" className="order-button ">
<span className="order-button-text">提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
<div className="order-bar">
<div className="order-course"></div>
<div className="order-bar-text">
<div>
<span>合计:</span>
<span>¥ 30.50</span>
</div>
<div></div>
</div>
<button type="button" className="order-button ">
<span className="order-button-text">提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
<div className="order-bar">
<div className="order-course"></div>
<div className="order-bar-text">
<div>
<span>合计:</span>
<span>¥ 30.50</span>
</div>
<div>
<span>已优惠:</span>
<span>¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button ">
<span className="order-button-text">提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
<div className="order-bar">
<div className="order-course"></div>
<div className="order-bar-text">
<div className="order-amount">
<span >合计:</span>
<span>¥ 30.50</span>
</div>
<div className="order-preprice">
<span>已优惠:</span>
<span>¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button ">
<span className="order-button-text">提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
<div className="order-bar">
<div className="order-course"></div>
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span>¥ 30.50</span>
</div>
<div className="order-preprice">
<span>已优惠:</span>
<span>¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button ">
<span className="order-button-text">提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
<div className="order-bar">
<div className="order-course"></div>
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span className="order-amount-price">¥ 30.50</span>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button ">
<span className="order-button-text">提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
handleClick = () => {
console.log(1);
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
<div className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list">
<OrderList list={mockData}/>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
</div>
<div className="order-bar">
<div className="order-course">
<span class="order-course-text">2门课程</span>
</div>
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span className="order-amount-price">¥ 30.50</span>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button ">
<span className="order-button-text">提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
\ No newline at end of file
.order-wrapper{
width: 100%;
height: 100%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
height: 100%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
margin-left: 5px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
height: 100%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
margin-left: 5px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
height: 100%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
height: 100%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
height: 100%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
height: 100%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
height: 100%;
margin-bottom: 50%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50%;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
}
.order-course{
}
.order-bar-text{
}
.order-button{
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
}
.order-course{
margin-left: 15px;
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
}
.order-course{
margin-left: 15px;
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
}
.order-course{
margin-left: 15px;
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $color_fff;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
}
.order-course{
margin-left: 15px;
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
}
.order-course{
margin-left: 15px;
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
}
.order-course{
margin-left: 15px;
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
}
.order-course{
margin-left: 15px;
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
.order-preprice{
font-size: $font_12;
color: $color_555;
}
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
}
.order-course{
margin-left: 20px;
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
.order-preprice{
font-size: $font_12;
color: $color_555;
}
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
}
.order-course{
margin-left: 20px;
.order-course-text{
font-size: $font_16;
color: $color_333;
}
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
.order-preprice{
font-size: $font_12;
color: $color_555;
}
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
margin-top: 30%
}
.order-course{
margin-left: 20px;
.order-course-text{
font-size: $font_16;
color: $color_333;
}
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
.order-preprice{
font-size: $font_12;
color: $color_555;
}
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
margin-top: 30%;
}
.order-course{
margin-left: 20px;
.order-course-text{
font-size: $font_16;
color: $color_333;
}
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
.order-preprice{
font-size: $font_12;
color: $color_555;
}
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
color: $black;
background: $bg_f7f9fc;
}
.order-information{
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
margin-bottom: 0px;
color: $active;
}
.order-next{
line-height: 48px;
margin-bottom: 0px;
}
.order-list{
margin-top: 8px;
}
.order-infotext{
flex: 1;
line-height: 48px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
margin-top: 30%;
}
.order-course{
margin-left: 20px;
.order-course-text{
font-size: $font_16;
color: $color_333;
}
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
.order-preprice{
font-size: $font_12;
color: $color_555;
}
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
border: 1px solid transparent;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
}
.order-prefer-text{
}
}
.order-balanceprice{
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.am-list-item .am-list-line .am-list-content{
color: $color_333;
}
.order-balance{
margin-top: 8px;
.am-list-content{
color: $color_333;
font-size: $font_16;
}
}
\ No newline at end of file
import React, { Component } from 'react'
export default class orderinfo extends Component {
render() {
return (
<div>
</div>
)
}
}
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
export default class orderinfo extends Component {
render() {
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
</Flex.Item>
</Flex>
)
}
}
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem } from 'antd-mobile';
export default class orderinfo extends Component {
render() {
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="auto focus"
ref={el => this.autoFocusInst = el}
>标题</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="click the button below to focus"
ref={el => this.inputRef = el}
>标题</InputItem>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="auto focus"
ref={el => this.autoFocusInst = el}
>标题</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="click the button below to focus"
ref={el => this.inputRef = el}
>标题</InputItem>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="auto focus"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="click the button below to focus"
ref={el => this.inputRef = el}
>姓名</InputItem>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="auto focus"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="click the button below to focus"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="click the button below to focus"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<List style={{ margin: '5px 0', backgroundColor: 'white' }}>
<List.Item
extra={<Button type="ghost" size="small" inline>small</Button>}
multipleLine
>
Regional manager
<List.Item.Brief>
Can be collected, refund, discount management, view data and other operations
</List.Item.Brief>
</List.Item>
<List.Item
extra={<Button type="primary" size="small" inline>small</Button>}
multipleLine
>
Regional manager
<List.Item.Brief>
Can be collected, refund, discount management, view data and other operations
</List.Item.Brief>
</List.Item>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<List style={{ margin: '5px 0', backgroundColor: 'white' }}>
<List.Item
extra={<Button type="ghost" size="small" inline>small</Button>}
multipleLine
>
Regional manager
<List.Item.Brief>
Can be collected, refund, discount management, view data and other operations
</List.Item.Brief>
</List.Item>
<List.Item
extra={<Button type="primary" size="small" inline>small</Button>}
multipleLine
>
Regional manager
<List.Item.Brief>
Can be collected, refund, discount management, view data and other operations
</List.Item.Brief>
</List.Item>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<List style={{ margin: '5px 0', backgroundColor: 'white' }}>
<Button type="primary">primary</Button>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<WhiteSpace />
<List style={{ margin: '5px 0', backgroundColor: 'white' }}>
<Button type="primary">primary</Button>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<WhiteSpace />
<List style={{ margin: '5px 0', backgroundColor: 'white' }}>
<WingBlank>
<Button type="primary">primary</Button>
</WingBlank>
</List>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<WhiteSpace />
<WingBlank>
<Button type="primary">primary</Button>
</WingBlank>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<WhiteSpace />
<div style={{marginTop: '21px;'}}>
<WingBlank>
<Button type="primary">primary</Button>
</WingBlank>
</div>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<WhiteSpace />
<div style={{marginTop: '21px'}}>
<WingBlank>
<Button type="primary">primary</Button>
</WingBlank>
</div>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<WhiteSpace />
<div style={{marginTop: '21px'}}>
<WingBlank>
<Button type="primary">确认</Button>
</WingBlank>
</div>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
import React from 'react';
import { Nav } from './common';
class menu extends React.Component {
render(match) {
return (
<div className='tabbar' style={{ position: "fixed", width: "100%", bottom: 0,zIndex: '999' }}>
<Nav />
</div>
)
}
}
export default menu;
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 OrderInfo from './components/order/orderinfo';
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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
</Switch>
<Menu />
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
<Redirect to="/" />
</Switch>
<Menu />
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
<Redirect to="/" />
<Menu />
</Switch>
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
<Menu />
</Switch>
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
</Switch>
<Menu />
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
<Route component={Menu}></Route>
</Switch>
{/* <Menu /> */}
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
<Route ></Route>
</Switch>
<Menu />
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
const router = (props) => (
<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>
<Route path='/search' component={Search}></Route>
<Route path={`${props.match.url}/:type`} component={Order}></Route>
{/* <Route path='/orderinfo' component={OrderInfo}></Route> */}
</Switch>
<Menu />
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
const router = (props) => (
<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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
</Switch>
<Menu />
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
const router = (props) => (
<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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
</Switch>
{/* <Menu /> */}
</Router>
)
export default router;
\ No newline at end of file
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 OrderInfo from './components/order/orderinfo';
const router = (props) => (
<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>
<Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
</Switch>
<Menu />
</Router>
)
export default router;
\ No newline at end of file
/*
* @ 文字颜色
*/
$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;
/*
* @ 文字大小
*/
$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_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: #f7f9fc;
$bg_EBEFF5: #EBEFF5;
$bg_ff9898: #ff9898;
/*
* @ 分割线颜色
*/
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
...@@ -1962,6 +1962,14 @@ ...@@ -1962,6 +1962,14 @@
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz", "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==" "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg=="
}, },
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"requires": {
"babel-runtime": "6.x"
}
},
"asynckit": { "asynckit": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
...@@ -4305,6 +4313,11 @@ ...@@ -4305,6 +4313,11 @@
"utila": "~0.4" "utila": "~0.4"
} }
}, },
"dom-scroll-into-view": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz",
"integrity": "sha1-6PNnMt0ImwIBqI14Fdw/iObWbH4="
},
"dom-serializer": { "dom-serializer": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
...@@ -5652,8 +5665,7 @@ ...@@ -5652,8 +5665,7 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -5671,13 +5683,11 @@ ...@@ -5671,13 +5683,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -5690,18 +5700,15 @@ ...@@ -5690,18 +5700,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -5804,8 +5811,7 @@ ...@@ -5804,8 +5811,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -5815,7 +5821,6 @@ ...@@ -5815,7 +5821,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -5828,20 +5833,17 @@ ...@@ -5828,20 +5833,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -5858,7 +5860,6 @@ ...@@ -5858,7 +5860,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -5931,8 +5932,7 @@ ...@@ -5931,8 +5932,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -5942,7 +5942,6 @@ ...@@ -5942,7 +5942,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -6018,8 +6017,7 @@ ...@@ -6018,8 +6017,7 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -6049,7 +6047,6 @@ ...@@ -6049,7 +6047,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -6067,7 +6064,6 @@ ...@@ -6067,7 +6064,6 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -6106,13 +6102,11 @@ ...@@ -6106,13 +6102,11 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true
"optional": true
} }
} }
}, },
...@@ -11040,6 +11034,30 @@ ...@@ -11040,6 +11034,30 @@
"rc-animate": "2.x" "rc-animate": "2.x"
} }
}, },
"rc-form": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/rc-form/-/rc-form-2.4.4.tgz",
"integrity": "sha512-AHR2GGYJOlKG5jP6ZjqS+PVBrUUXt+kDJFgJeDw17k6RDVIrG1535MxDPgNmRXp2VM4GQij4sVvjaHvwFsUgCA==",
"requires": {
"async-validator": "~1.8.5",
"babel-runtime": "6.x",
"create-react-class": "^15.5.3",
"dom-scroll-into-view": "1.x",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.4",
"warning": "^4.0.3"
},
"dependencies": {
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
}
}
},
"rc-gesture": { "rc-gesture": {
"version": "0.0.22", "version": "0.0.22",
"resolved": "https://registry.npmjs.org/rc-gesture/-/rc-gesture-0.0.22.tgz", "resolved": "https://registry.npmjs.org/rc-gesture/-/rc-gesture-0.0.22.tgz",
......
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
"postcss-loader": "3.0.0", "postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0", "postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1", "postcss-safe-parser": "4.0.1",
"rc-form": "^2.4.4",
"react": "^16.8.6", "react": "^16.8.6",
"react-app-polyfill": "^0.2.2", "react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0", "react-dev-utils": "^8.0.0",
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, NavBar, List, Button } from 'antd-mobile'; import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index' import { OrderItem } from '@/common/index'
import "./order.scss" import "./order.scss"
...@@ -22,6 +22,14 @@ const mockData = [ ...@@ -22,6 +22,14 @@ const mockData = [
newprice: '980', newprice: '980',
price: '1280', price: '1280',
id: '110' id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
} }
] ]
...@@ -91,21 +99,51 @@ class Order extends Component { ...@@ -91,21 +99,51 @@ class Order extends Component {
<div className="order-infotext">完善报名信息</div> <div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i> <i className="iconfont iconiconfront-70 order-next"></i>
</div> </div>
<div className="order-information">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
<div className="order-list"> <div className="order-list">
<OrderList list={mockData}/> <OrderList list={mockData}/>
</div>
<div className="order-balance"> <div className="order-balance">
<List> <List>
<Item <Item
arrow="horizontal"
onClick={() => { }} onClick={() => { }}
className="order-prefer-text" className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
> >
余额抵扣 余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span> <span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
<i className=""></i> <i className="iconfont iconiconfront-22"></i>
</Item> </Item>
</List> </List>
</div> </div>
<div className="order-bar">
<div className="order-course">
<span class="order-course-text">2门课程</span>
</div>
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span className="order-amount-price">¥ 30.50</span>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button ">
<span className="order-button-text">提交订单</span>
</button>
</div> </div>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
......
.order-wrapper{ .order-wrapper{
width: 100%; width: 100%;
height: 100%; margin-bottom: 50px;
background-color: $bg_f5f5f5; background-color: $bg_f5f5f5;
} }
.order-tab{ .order-tab{
...@@ -27,6 +27,18 @@ ...@@ -27,6 +27,18 @@
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px; background-size: 80px;
} }
.order-cell{
width: 50%;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
margin-bottom: 10px;
}
}
.order-addsize{ .order-addsize{
font-size: 32px !important; font-size: 32px !important;
margin-bottom: 0px; margin-bottom: 0px;
...@@ -75,6 +87,61 @@ ...@@ -75,6 +87,61 @@
text-decoration: line-through; text-decoration: line-through;
} }
} }
.order-bar{
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
margin-top: 30%;
}
.order-course{
margin-left: 20px;
.order-course-text{
font-size: $font_16;
color: $color_333;
}
}
.order-bar-text{
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
.order-preprice{
font-size: $font_12;
color: $color_555;
}
}
.order-button{
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
border: 1px solid transparent;
}
.order-button-text{
}
.order-item{ .order-item{
.am-list-item{ .am-list-item{
padding-left: 15px; padding-left: 15px;
......
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<WhiteSpace />
<div style={{marginTop: '21px'}}>
<WingBlank>
<Button type="primary">确认</Button>
</WingBlank>
</div>
</div>
</Flex.Item>
</Flex>
)
}
}
const Basicorderinfo = createForm()(orderinfo);
export default Basicorderinfo;
\ No newline at end of file
...@@ -5,7 +5,7 @@ class menu extends React.Component { ...@@ -5,7 +5,7 @@ class menu extends React.Component {
render(match) { render(match) {
return ( return (
<div className='tabbar' style={{ position: "fixed", width: "100%", bottom: 0 }}> <div className='tabbar' style={{ position: "fixed", width: "100%", bottom: 0,zIndex: '999' }}>
<Nav /> <Nav />
</div> </div>
) )
......
...@@ -9,10 +9,11 @@ import My from './components/my'; ...@@ -9,10 +9,11 @@ import My from './components/my';
import CourseList from './components/classify/courselist'; import CourseList from './components/classify/courselist';
import Search from './components/search/index'; import Search from './components/search/index';
import Order from './components/order/index'; import Order from './components/order/index';
import OrderInfo from './components/order/orderinfo';
const router = () => ( const router = (props) => (
<Router> <Router>
<Switch> <Switch>
<Route exact path="/" component={Index}></Route> <Route exact path="/" component={Index}></Route>
...@@ -23,6 +24,7 @@ const router = () => ( ...@@ -23,6 +24,7 @@ const router = () => (
<Route path='/courselist' component={CourseList}></Route> <Route path='/courselist' component={CourseList}></Route>
<Route path='/search' component={Search}></Route> <Route path='/search' component={Search}></Route>
<Route path='/order' component={Order}></Route> <Route path='/order' component={Order}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
</Switch> </Switch>
<Menu /> <Menu />
</Router> </Router>
......
...@@ -39,6 +39,7 @@ $bg_f4f4f4: #f4f4f4; ...@@ -39,6 +39,7 @@ $bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5; $bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: #f7f9fc; $bg_f7f9fc: #f7f9fc;
$bg_EBEFF5: #EBEFF5; $bg_EBEFF5: #EBEFF5;
$bg_ff9898: #ff9898;
/* /*
......
...@@ -1569,6 +1569,13 @@ async-limiter@~1.0.0: ...@@ -1569,6 +1569,13 @@ async-limiter@~1.0.0:
resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8" resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg== integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
async-validator@~1.8.5:
version "1.8.5"
resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
dependencies:
babel-runtime "6.x"
async@^1.5.2: async@^1.5.2:
version "1.5.2" version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
...@@ -2769,7 +2776,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: ...@@ -2769,7 +2776,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1" safe-buffer "^5.0.1"
sha.js "^2.4.8" sha.js "^2.4.8"
create-react-class@^15.6.0: create-react-class@^15.5.3, create-react-class@^15.6.0:
version "15.6.3" version "15.6.3"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036" resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg== integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
...@@ -3338,6 +3345,11 @@ dom-converter@^0.2: ...@@ -3338,6 +3345,11 @@ dom-converter@^0.2:
dependencies: dependencies:
utila "~0.4" utila "~0.4"
dom-scroll-into-view@1.x:
version "1.2.1"
resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
integrity sha1-6PNnMt0ImwIBqI14Fdw/iObWbH4=
dom-serializer@0: dom-serializer@0:
version "0.1.1" version "0.1.1"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
...@@ -8430,6 +8442,19 @@ rc-collapse@~1.9.1: ...@@ -8430,6 +8442,19 @@ rc-collapse@~1.9.1:
prop-types "^15.5.6" prop-types "^15.5.6"
rc-animate "2.x" rc-animate "2.x"
rc-form@^2.4.4:
version "2.4.4"
resolved "https://registry.yarnpkg.com/rc-form/-/rc-form-2.4.4.tgz#ac0f3cc643724991c742d5ae6742777fbc0bcfbb"
integrity sha512-AHR2GGYJOlKG5jP6ZjqS+PVBrUUXt+kDJFgJeDw17k6RDVIrG1535MxDPgNmRXp2VM4GQij4sVvjaHvwFsUgCA==
dependencies:
async-validator "~1.8.5"
babel-runtime "6.x"
create-react-class "^15.5.3"
dom-scroll-into-view "1.x"
hoist-non-react-statics "^3.3.0"
lodash "^4.17.4"
warning "^4.0.3"
rc-gesture@~0.0.18, rc-gesture@~0.0.22: rc-gesture@~0.0.18, rc-gesture@~0.0.22:
version "0.0.22" version "0.0.22"
resolved "https://registry.yarnpkg.com/rc-gesture/-/rc-gesture-0.0.22.tgz#fbcbdd5b46387a978b3ede48b42748e8ff77dddd" resolved "https://registry.yarnpkg.com/rc-gesture/-/rc-gesture-0.0.22.tgz#fbcbdd5b46387a978b3ede48b42748e8ff77dddd"
...@@ -10606,6 +10631,13 @@ warning@^3.0.0: ...@@ -10606,6 +10631,13 @@ warning@^3.0.0:
dependencies: dependencies:
loose-envify "^1.0.0" loose-envify "^1.0.0"
warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"
watch@~0.18.0: watch@~0.18.0:
version "0.18.0" version "0.18.0"
resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986" resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
......
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