Skip to content

M
mr-julyedu
Commit a981fa38 by xuzhenghua
Options

detail

parent 39f37417
Showing with 285 additions and 197 deletions
src/assets/css/variable.scss
...@@ -71,6 +71,7 @@ $bg_0198FE: #0198FE; ...@@ -71,6 +71,7 @@ $bg_0198FE: #0198FE;
$bg_F4AAA7: #F4AAA7; $bg_F4AAA7: #F4AAA7;
$bg_E02E24: #E02E24; $bg_E02E24: #E02E24;
$bg_007FD0: #007FD0; $bg_007FD0: #007FD0;
$bg_FF0000: #FF0000;
/* /*
......
src/common/NavBar/index.js
...@@ -6,25 +6,25 @@ const navLinkConfig = [ ...@@ -6,25 +6,25 @@ const navLinkConfig = [
{ {
to: '/', to: '/',
exact: true, exact: true,
icon: 'iconshouye', icon: 'iconshouye-xianxing',
text: '首页' text: '首页'
}, },
{ {
to: '/classify', to: '/classify',
exact: false, exact: false,
icon: 'iconiconfront-16', icon: 'iconfenlei-xianxing',
text: '分类' text: '分类'
}, },
{ {
to: '/study', to: '/study',
exact: false, exact: false,
icon: 'iconxuexi', icon: 'iconxuexi-xianxing',
text: '学习' text: '学习'
}, },
{ {
to: '/my', to: '/my',
exact: false, exact: false,
icon: 'iconhome', icon: 'iconwode-xianxing',
text: '我的' text: '我的'
} }
] ]
......
src/components/detail/index.js
...@@ -102,15 +102,15 @@ class Detail extends Component { ...@@ -102,15 +102,15 @@ class Detail extends Component {
{ {
courseInfo.is_baoming === 1 && courseInfo.is_baoming === 1 &&
<div className='group'> <div className='group'>
上课QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.course_qq} 上课QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.uid}
</div> </div>
} }
{/*vip课程显示*/} {/*vip课程显示*/}
{ {
this.state.isvip === 1 && courseInfo.vip_range &&
<div className="vip"> <div className="vip">
<p>已开通年会员：2019/03/02 — 2020/03/02</p> <p>已开通年会员：{courseInfo.vip_range}</p>
<p>年会员QQ群：967114537，加群请备注您的学号：479409</p> <p>年会员QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.uid}</p>
</div> </div>
} }
...@@ -136,7 +136,10 @@ class Detail extends Component { ...@@ -136,7 +136,10 @@ class Detail extends Component {
title={courseInfo.course_title}/> title={courseInfo.course_title}/>
{/*分享赚钱*/} {/*分享赚钱*/}
{
courseInfo.is_dist &&
<ShareRank shareRank={this.state.shareRank} openRanking={this.openRanking} boxHide={this.boxHide}/> <ShareRank shareRank={this.state.shareRank} openRanking={this.openRanking} boxHide={this.boxHide}/>
}
{/*砍价*/} {/*砍价*/}
<Bargain/> <Bargain/>
......
src/components/detail/index.scss
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
} }
.group, .vip { .group, .vip {
margin: 0 12px; margin: 10px 12px 0 12px;
padding: 10px 12px; padding: 10px 12px;
text-align: center; text-align: center;
color: $white; color: $white;
...@@ -129,53 +129,4 @@ ...@@ -129,53 +129,4 @@
background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%); background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%);
} }
.share-ranking {
height: 60px;
line-height: 25px;
padding: 15px 12px;
border-top: 8px solid $bg_f5f5f5;
display: flex;
position: relative;
font-size: 12px;
.title {
font-size: 14px;
margin-right: 12px;
}
.ranking-mess {
margin-right: 20px;
img {
width: 22px;
height: 22px;
border-radius: 50%;
vertical-align: middle;
}
i {
display: inline-block;
margin-left: 5px;
color: $color_333;
font-style: normal;
}
}
.ranking-ellipsis {
width: 22px;
height: 22px;
border-radius: 50%;
}
.share {
position: absolute;
right: 12px;
padding: 5px 6px;
border: 1px solid $red;
border-radius: 3px;
color: $red;
background-color: $bg_fff;
}
}
} }
\ No newline at end of file
src/components/detail/outline/index.js
import React, {Component} from 'react' import React, {Component} from 'react'
import {Tabs, WhiteSpace} from 'antd-mobile' import {Tabs, WhiteSpace} from 'antd-mobile'
import './index.scss' import './index.scss'
import {api, getParam, http} from "@/utils";
class OutLine extends Component { class OutLine extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = {
stageInfo: []
}
} }
htmlDecode = (content) => { htmlDecode = (content) => {
...@@ -14,15 +18,24 @@ class OutLine extends Component { ...@@ -14,15 +18,24 @@ class OutLine extends Component {
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
} }
componentDidMount() {
http.get(`${api.home}/m/course/syllabuses/${getParam('id')}`).then((res) => {
if (res.data.code === 200) {
this.setState({
stageInfo: res.data.data
})
}
})
}
render() { render() {
const tabs = [ const tabs = [
{title: '介绍'}, {title: '介绍'},
{title: '大纲'} {title: '大纲'}
]; ];
let stageInfo = ''
let introduce = '' let introduce = ''
if (this.props.data.stage_info && this.props.data.course_info) { if (this.props.data.course_info) {
stageInfo = this.props.data.stage_info
introduce = this.props.data.course_info introduce = this.props.data.course_info
} }
return ( return (
...@@ -34,12 +47,12 @@ class OutLine extends Component { ...@@ -34,12 +47,12 @@ class OutLine extends Component {
<p>讲师：{introduce.teachers}</p> <p>讲师：{introduce.teachers}</p>
<p>课时：{introduce.course_hour}</p> <p>课时：{introduce.course_hour}</p>
<p>时间：{introduce.start_time}</p> <p>时间：{introduce.start_time}</p>
<div className='dec' dangerouslySetInnerHTML={{__html:this.htmlDecode(introduce.intro)}}></div> <div className='dec' dangerouslySetInnerHTML={{__html: this.htmlDecode(introduce.intro)}}></div>
</div> </div>
{/*大纲*/} {/*大纲*/}
<div className='outline'> <div className='outline'>
{ {
stageInfo && stageInfo.length > 0 && stageInfo.map((item, index) => { this.state.stageInfo && this.state.stageInfo.length > 0 && this.state.stageInfo.map((item, index) => {
return ( return (
<div className='stagebox' key={index}> <div className='stagebox' key={index}>
<h1 className='stage text-overflow-1'>{item.stage_name}</h1> <h1 className='stage text-overflow-1'>{item.stage_name}</h1>
...@@ -49,37 +62,45 @@ class OutLine extends Component { ...@@ -49,37 +62,45 @@ class OutLine extends Component {
<ul key={index}> <ul key={index}>
<h2 className='classhour'> <h2 className='classhour'>
<span className='title text-overflow-1'>{item.name}</span> <span className='title text-overflow-1'>{item.name}</span>
{/*
class_status
0-未购买未开单集购买
1-未购买已开单集购买
2-已购买直播结束已上传视频
3-已购买未开课、已购买直播结束
4-已购买直播中
5-课程不能试听
6-可试听且有试听权限
7-可试听但无试听权限
*/}
{ // 试听 { // 试听
item.is_video === 1 && item.class_status === 7 &&
<span className='btn-right-10 audition' <span className='btn-right-10 audition'
onClick={this.props.toAudition}>试听 onClick={this.props.toAudition}>试听
<i className='iconfont iconcelluar'></i> <i className='iconfont iconcelluar'></i>
</span> </span>
} }
{ // 未购买未开单集购买：上锁标志，点击提示购买 { // 未购买未开单集购买：上锁标志，点击提示购买
item.is_class === 0 && item.video_auth === 0 && item.is_video === 0 && item.class_status === 0 &&
<i className='iconfont iconiconfront-74 icon-right-22'></i> <i className='iconfont iconiconfront-74 icon-right-22'></i>
} }
{ // 未购买已开单集购买：显示单集价格，点击购买单集 { // 未购买已开单集购买：显示单集价格，点击购买单集
item.is_class === 1 && item.video_auth === 0 && item.class_status === 1 &&
<span className='btn-right-10 singleset' <span className='btn-right-10 singleset'
onClick={e=>this.props.toSingleset(item)} >¥ {item.class_price}</span> onClick={e => this.props.toSingleset(item)}>¥ {item.class_price}</span>
} }
{ {
// 已购买直播中：正在直播，点击进入直播间 item.class_status === 4 &&
item.video_auth === 1 && item.is_video === 4 && item.video_auth === 1 && item.is_video === 4 &&
<span className='live icon-right-22'>正在直播<i <span className='live icon-right-22'>正在直播<i
className='iconfont icondanseshixintubiao-23'></i></span> className='iconfont icondanseshixintubiao-23'></i></span>
} }
{ {
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程 // 已购买直播结束已上传视频：正常播放按钮，点击播放课程
item.video_auth === 1 && item.is_video === 5 && item.class_status === 2 &&
<i className='iconfont icondanseshixintubiao-23 icon-right-22'></i> <i className='iconfont icondanseshixintubiao-23 icon-right-22'></i>
} }
{
// 已购买未开课、已购买直播结束：空
}
</h2> </h2>
{ {
item.point.map((item, index) => { item.point.map((item, index) => {
......
src/components/detail/shareRank/index.js
...@@ -5,12 +5,21 @@ import {api, getParam, http} from "@/utils"; ...@@ -5,12 +5,21 @@ import {api, getParam, http} from "@/utils";
class ShareRank extends Component { class ShareRank extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = {
list: '',
rankingslice: ''
}
} }
componentDidMount() { componentDidMount() {
// http.get(`${api.home}/dist/rankList/${getParam('id')`).then((res) => { http.get(`${api.home}/dist/rankList/${getParam('id')}`).then((res) => {
// if (res.data.code === 200) {
// }) this.setState({
list: res.data.data,
rankingslice: res.data.data.slice(0,2)
})
}
})
} }
// 关闭弹窗 // 关闭弹窗
...@@ -23,12 +32,17 @@ class ShareRank extends Component { ...@@ -23,12 +32,17 @@ class ShareRank extends Component {
<div className='share-ranking'> <div className='share-ranking'>
<span className="title">排行榜：</span> <span className="title">排行榜：</span>
<div className='ranking-box' onClick={this.props.openRanking}> <div className='ranking-box' onClick={this.props.openRanking}>
<span className="ranking-mess"><img {
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg" this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item,index)=>{
alt=""/><i>22元</i></span> return(
<span className="ranking-mess"><img <span key={index} className="ranking-mess">
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg" <img src={item.head_imgurl} alt=""/>
alt=""/><i>22元</i></span> <i>{item.amount}元</i>
</span>
)
})
}
<img className="ranking-ellipsis" <img className="ranking-ellipsis"
src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/> src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
</div> </div>
...@@ -43,12 +57,21 @@ class ShareRank extends Component { ...@@ -43,12 +57,21 @@ class ShareRank extends Component {
<span className="tips">只展示前9名用户</span> <span className="tips">只展示前9名用户</span>
</div> </div>
<ul> <ul>
<li> {
<img src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/e769a844b4.png" alt=""/> this.state.list && this.state.list.length > 0 && this.state.list.map((item,index)=>{
<span className='course-title'>机器学习集机器学习集</span> return(
<span className='course-price'>270元</span> <li key={index}>
<img src={item.head_imgurl} alt=""/>
<span className='course-title'>{item.user_name}</span>
<span className='course-price'>{item.amount}元</span>
</li> </li>
)
})
}
</ul> </ul>
<div className='shareBtn'>
<button>分享赚67元</button>
</div>
</div> </div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i> <i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div> </div>
......
src/components/detail/shareRank/index.scss
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.ranking-mess { .ranking-mess {
float: left; float: left;
margin-right: 20px; margin-right: 15px;
img { img {
width: 22px; width: 22px;
...@@ -129,6 +129,22 @@ ...@@ -129,6 +129,22 @@
} }
} }
} }
.shareBtn {
width: 100%;
height: 44px;
text-align: center;
button {
border: none;
width: 105px;
height: 24px;
margin-top: 10px;
background: linear-gradient(90deg, $bg_FF0000 0%, $bg_FF4000 100%);
border-radius: 12px;
font-size: 14px;
color: $white;
}
}
} }
.close { .close {
......
src/components/my/index.scss
.my-tab{
.flex-container {
.my-tab {
width: 100%; width: 100%;
height: 44px; height: 44px;
font-size: $font_16; font-size: $font_16;
background: $bg_f7f9fc; background: $bg_f7f9fc;
} }
.my-list{
.avatar-wrap{ .my-list {
.avatar-wrap {
padding: 15px 20px; padding: 15px 20px;
} }
} }
.my-isvip{
.my-isvip {
width: 100%; width: 100%;
height: 43px; height: 43px;
background-image: url("./image/vip_bg.png"); background-image: url("./image/vip_bg.png");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 3px; border-radius: 3px;
} }
.my-stu{
font-size: 12px;
}
.my-stu {
font-size: 12px;
}
// 修改List组件默认样式 // 修改List组件默认样式
.am-list-item{ .am-list-item {
padding-left: 22px; padding-left: 22px;
padding-right: 8px; padding-right: 8px;
} }
.am-list-item .am-list-line-multiple{
.am-list-item .am-list-line-multiple {
padding-right: 0px !important; padding-right: 0px !important;
} }
.am-list-thumb{
img{ .am-list-thumb {
img {
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
} }
.am-list-brief{
.am-list-brief {
color: $color_333 !important; color: $color_333 !important;
} }
.am-list-header{
.am-list-header {
padding: 2.5px 0; padding: 2.5px 0;
background: $bg_f5f5f5; background: $bg_f5f5f5;
} }
.am-list-content{
i{ .am-list-content {
i {
vertical-align: middle; vertical-align: middle;
margin-top: -1px; margin-top: -1px;
display: inline-block; display: inline-block;
...@@ -53,21 +62,26 @@ ...@@ -53,21 +62,26 @@
margin: 10px 12px 10px 0; margin: 10px 12px 10px 0;
font-size: 30px !important; font-size: 30px !important;
} }
} }
.am-list-line-multiple::after{
.am-list-line-multiple::after {
background-color: transparent !important; background-color: transparent !important;
} }
.my-list{
.am-list-body::after{ .my-list {
.am-list-body::after {
background-color: transparent !important; background-color: transparent !important;
} }
} }
.am-list-content i{
.am-list-content i {
margin: 0; margin: 0;
margin-top: -4px; margin-top: -4px;
margin-right: 10px; margin-right: 10px;
} }
.am-list-body::before{
.am-list-body::before {
background-color: transparent !important; background-color: transparent !important;
height: 0 !important; height: 0 !important;
}
} }
\ No newline at end of file
src/components/order/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile'; import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index' import { OrderItem } from '@/common/index'
import { Link } from 'react-router-dom'
import "./order.scss" import "./order.scss"
...@@ -37,7 +38,7 @@ const mockData = [ ...@@ -37,7 +38,7 @@ const mockData = [
function OrderList(props) { function OrderList(props) {
const listData = props.list; const listData = props.list;
return ( return (
<div style={{"padding": "0 15px"}}> <div>
{ {
listData.map((item, index) => { listData.map((item, index) => {
const Info = ( const Info = (
...@@ -75,7 +76,7 @@ class Order extends Component { ...@@ -75,7 +76,7 @@ class Order extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
perfect: true
} }
} }
handleClick = () => { handleClick = () => {
...@@ -94,12 +95,17 @@ class Order extends Component { ...@@ -94,12 +95,17 @@ class Order extends Component {
> >
课程报名 课程报名
</NavBar> </NavBar>
<div className="order-information"> {
!this.state.perfect &&
<Link to='/orderinfo' className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i> <i className="iconfont iconiconfront-6 order-addsize"></i>
<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> </Link>
<div className="order-information"> }
{
this.state.perfect &&
<div className="order-information2">
<i className="iconfont iconiconfront-20"></i> <i className="iconfont iconiconfront-20"></i>
<div className="order-cell"> <div className="order-cell">
<div className="name">姓名: 张三</div> <div className="name">姓名: 张三</div>
...@@ -110,6 +116,7 @@ class Order extends Component { ...@@ -110,6 +116,7 @@ class Order extends Component {
<div>QQ: 1084251364</div> <div>QQ: 1084251364</div>
</div> </div>
</div> </div>
}
<div className="order-list"> <div className="order-list">
<OrderList list={mockData}/> <OrderList list={mockData}/>
</div> </div>
...@@ -121,7 +128,7 @@ class Order extends Component { ...@@ -121,7 +128,7 @@ class Order extends Component {
extra={<i className="iconfont icondanseshixintubiao-5"></i>} 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="iconfont iconiconfront-22"></i> <i className="iconfont iconiconfront-22"></i>
</Item> </Item>
</List> </List>
...@@ -140,7 +147,7 @@ class Order extends Component { ...@@ -140,7 +147,7 @@ class Order extends Component {
<span className="order-preprice-price">¥ 200.50</span> <span className="order-preprice-price">¥ 200.50</span>
</div> </div>
</div> </div>
<button type="button" className="order-button "> <button type="button" className="order-button">
<span className="order-button-text">提交订单</span> <span className="order-button-text">提交订单</span>
</button> </button>
</div> </div>
......
src/components/order/order.scss
.order-wrapper{ .order-wrapper {
width: 100%; width: 100%;
margin-bottom: 50px; margin-bottom: 50px;
background-color: $bg_f5f5f5; background-color: $bg_f5f5f5;
}
.order-tab{ .order-tab {
color: $black; color: $black;
background: $bg_f7f9fc; background: $bg_f7f9fc;
} }
.order-information{
.order-information {
display: flex; display: flex;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
padding: 28px 15px; padding: 29px 15px;
color: $color_555; color: $color_555;
background-color: $bg_fff; background-color: $bg_fff;
position: relative; position: relative;
} }
.order-information::before{
.order-information::before {
content: ''; content: '';
left: 0; left: 0;
right: 0; right: 0;
...@@ -26,107 +29,135 @@ ...@@ -26,107 +29,135 @@
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); 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: 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{
.order-cell {
width: 50%; width: 50%;
height: 45px;
font-size: $font_14; font-size: $font_14;
color: $color_333; color: $color_333;
margin-left: 20px; margin-left: 20px;
line-height: 20px; line-height: 20px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
.name{
.name {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.order-addsize{
font-size: 32px !important; .order-addsize {
font-size: 22px !important;
margin-bottom: 0px; margin-bottom: 0px;
height: 22px;
color: $active; color: $active;
} line-height: 22px;
.order-next{ }
line-height: 48px;
.order-next {
line-height: 22px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.order-list{
.order-list {
margin-top: 8px; margin-top: 8px;
background-color: $white; background-color: $white;
} .public-content {
.order-infotext{ padding: 10px 15px;
}
}
.order-infotext {
flex: 1; flex: 1;
line-height: 48px; height: 22px;
line-height: 22px;
margin-left: 10px; margin-left: 10px;
font-size: $font_16; font-size: $font_16;
color: $color_555; color: $color_555;
} }
.order-info {
.order-info {
color: $color_666; color: $color_666;
font-size: $font_14; font-size: $font_14;
.order-title{
.order-title {
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color: $color_333; color: $color_333;
font-size: $font_16; font-size: $font_16;
} }
.order-content{
.order-content {
margin-top: 10px; margin-top: 10px;
color: $color_666; color: $color_666;
font-size: $font_14; font-size: $font_14;
line-height: 18px; line-height: 18px;
} }
.order-des{
.order-des {
margin-top: 10px; margin-top: 10px;
} }
.order-newprice{
.order-newprice {
color: $redprice; color: $redprice;
font-size: $font_16; font-size: $font_16;
margin-right: 15px; margin-right: 15px;
} }
.order-price{
.order-price {
color: $color_999; color: $color_999;
font-size: $font_12; font-size: $font_12;
text-decoration: line-through; text-decoration: line-through;
} }
} }
.order-bar{ .order-bar {
width: 100%;
position: fixed;
bottom: 0;
z-index: 2;
height: 50px; height: 50px;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
align-items: center; align-items: center;
background-color: $bg_fff; background-color: $bg_fff;
margin-top: 30%; }
}
.order-course{ .order-course {
margin-left: 20px; margin-left: 20px;
.order-course-text{
.order-course-text {
font-size: $font_16; font-size: $font_16;
color: $color_333; color: $color_333;
} }
} }
.order-bar-text{
.order-bar-text {
flex: 1; flex: 1;
font-weight: 500; font-weight: 500;
text-align: right; text-align: right;
color: #323233; color: #323233;
padding-right: 12px; padding-right: 20px;
.order-amount{
.order-amount {
font-size: $font_14; font-size: $font_14;
color: $color_333; color: $color_333;
.order-amount-price{
.order-amount-price {
color: $redprice; color: $redprice;
} }
} }
.order-preprice{
.order-preprice {
font-size: $font_12; font-size: $font_12;
color: $color_555; color: $color_555;
} }
} }
.order-button{
.order-button {
width: 110px; width: 110px;
height: 50px; height: 50px;
display: inline-block; display: inline-block;
position: relative;
padding: 0; padding: 0;
background-color: $bg_ff9898; background-color: $bg_ff9898;
color: $white; color: $white;
...@@ -138,35 +169,28 @@ ...@@ -138,35 +169,28 @@
-webkit-appearance: none; -webkit-appearance: none;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
border: 1px solid transparent; border: 1px solid transparent;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
} }
}
.v-list-item { .v-list-item {
margin-top: 8px; margin-top: 8px;
padding: 10px 15px 0 15px; padding: 10px 15px 0 15px;
.content{
.content {
border-bottom: none; border-bottom: none;
} }
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
} }
.order-prefer-text{
.order-prefer {
.am-list-line {
padding: 0 15px;
} }
} }
.order-balanceprice{
.order-balanceprice {
color: $color_666; color: $color_666;
font-size: $font_12; font-size: $font_12;
.order-money{
.order-money {
color: #ff2121; color: #ff2121;
font-size: $font_12 !important; font-size: $font_12 !important;
font-weight: normal; font-weight: normal;
...@@ -174,15 +198,37 @@ ...@@ -174,15 +198,37 @@
vertical-align: middle; vertical-align: middle;
margin: 0; margin: 0;
} }
} }
.am-list-item .am-list-line .am-list-content{ .am-list-item .am-list-line .am-list-content {
color: $color_333; color: $color_333;
} }
.order-balance{ .order-list {
margin-top: 8px; .am-list-item {
.am-list-content{ padding-left: 0 !important;
}
}
.order-balance {
height: 44px;
line-height: 44px;
margin: 8px 0 50px 0;
.am-list-item {
padding-left: 0 !important;
}
.am-list-line {
padding: 0 15px;
}
.am-list-content {
color: $color_333; color: $color_333;
font-size: $font_16; font-size: $font_16;
.iconiconfront-22 {
font-size: 18px;
margin-left: 15px;
}
}
} }
} }
\ No newline at end of file
src/router/router-config.js
...@@ -6,6 +6,7 @@ import Classify from '@/components/classify'; ...@@ -6,6 +6,7 @@ import Classify from '@/components/classify';
import My from '@/components/my'; import My from '@/components/my';
import CourseList from '@/components/classify/courselist'; import CourseList from '@/components/classify/courselist';
import Order from '@/components/order/index'; import Order from '@/components/order/index';
import Orderinfo from '@/components/order/orderinfo';
import Preferential from '@/components/preferential/index'; import Preferential from '@/components/preferential/index';
import Search from '@/components/search/index' import Search from '@/components/search/index'
import SearchResult from '@/components/search/search-result' import SearchResult from '@/components/search/search-result'
...@@ -59,6 +60,10 @@ export default [ ...@@ -59,6 +60,10 @@ export default [
component: Order component: Order
}, },
{ {
path: '/orderinfo',
component: Orderinfo
},
{
path: '/detail', path: '/detail',
component: Detail component: Detail
}, },
......
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