Skip to content

M
mr-julyedu
Commit 6e0d7efc by xuzhenghua
Options

kanjia

parent 737a0fc0
Showing with 426 additions and 24 deletions
src/common/Course/index.js
......@@ -8,7 +8,7 @@ const Course = (props) => {
{props.top}
<Link to={`/detail?id=${props.id}`}>
<img src={props.img} alt=""/>
<p className="course-title">{props.title}</p>
<p className={`course-title ${props.className}`}>{props.title}</p>
</Link>
{props.bottom}
</li>
......
src/components/bargainMiddlePage/bargain-middle-page.scss
......@@ -46,10 +46,20 @@
.bargain-area {
width: 355px;
height: 247px;
background: $white;
border-radius: 3px;
margin-bottom: 10px;
padding-bottom: 20px;
.bargain-tip {
width: 100%;
height: 45px;
line-height: 45px;
padding-left: 10px;
border-bottom: 1px solid $sp_e7eaf1;
color: $redprice;
font-size: 14px;
}
.des {
display: flex;
......@@ -133,7 +143,6 @@
top: 0;
display: inline-block;
height: 100%;
width: 10%;
background: $bg_FADD29;
}
}
......@@ -159,9 +168,10 @@
-webkit-appearance: none;
}
.invalid-btn{
.invalid-btn {
background: $bg_999;
color: $white;
font-size: 16px;
box-shadow: none;
}
}
......@@ -199,7 +209,7 @@
align-items: center;
}
img {
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
......@@ -209,6 +219,10 @@
.nickname {
margin-right: 10px;
font-size: $font_14;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.rank-tag {
......@@ -217,6 +231,7 @@
color: $white;
font-size: $font_12;
flex: 0 0 auto;
border-radius: 2px;
}
}
}
......@@ -257,12 +272,11 @@
}
.course-title {
margin-bottom: 20px;
margin-bottom: 10px;
min-height: 38px;
}
.course-price {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
......@@ -302,14 +316,26 @@
border-radius: 2px;
border: none;
-webkit-appearance: none;
}
}
}
.more {
.preferential {
display: inline-block;
width: 100%;
height: 46px;
line-height: 46px;
font-size: $font_16;
color: $color_555;
text-align: center;
line-height: 46px;
}
.kanjia-icon {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
}
}
\ No newline at end of file
src/components/bargainMiddlePage/ranking/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
class Ranking extends Component {
constructor(props) {
super(props)
this.state = {
kanjiaIcon: require('../image/kanjia_icon.png')
}
}
// 关闭更多窗口
closeMore = () => {
this.props.boxHide(false);
}
render() {
return (
<div className={'ranking-box'}>
{
this.props.isShowMore &&
<MoreList list={this.props.list} limitPeople={this.props.limitPeople} closeMore={this.closeMore}
img={this.props.icon}/>
}
</div>
);
}
}
function MoreList(props) {
return (
<div className="moreMbc">
<div className="content">
<div className="title-box">
好友助力详情
</div>
<ul className='more-bargain-list'>
{
props.list && props.list.length > 0 && props.list.map((item, index) => {
return (
<li key={index} className='bargain-item'>
<img className='avatar' src={item.avatar_file} alt=""/>
<p className='name'>{item.user_name}</p>
<p className='bargain-status'>
<img className='kanjia-icon' src={props.img} alt=""/>
砍掉<span className={'price'}>{item.amount}</span>
</p>
</li>
)
})
}
</ul>
<div className='more-bargain-dec'>
超过{props.limitPeople}位好友助力可获得【砍价神器】
</div>
</div>
<i onClick={props.closeMore} className={'iconfont iconiconfront-2 close'}></i>
</div>
)
}
export default Ranking
\ No newline at end of file
src/components/bargainMiddlePage/ranking/index.scss 0 → 100644
.ranking-box {
.moreMbc {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px;
height: 340px;
background-color: $white;
border-radius: 3px;
margin: 130px auto 20px auto;
position: relative;
.title-box {
width: 100%;
height: 45px;
text-align: center;
color: $color_202426;
font-size: 16px;
line-height: 45px;
}
.more-bargain-list {
width: 100%;
height: 253px;
overflow: auto;
border-top: 1px solid $sp_e7eaf1;
padding: 0 15px;
background-color: $bg_f5f5f5;
.bargain-item {
border-bottom: 1px solid $sp_e7eaf1;
height: 50px;
display: flex;
position: relative;
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 10px;
margin-right: 10px;
}
.name {
font-size: 14px;
color: $color_333;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 50px;
}
.bargain-status {
line-height: 50px;
color: $color_333;
font-size: 14px;
position: absolute;
right: 0;
}
}
}
}
.more-bargain-dec {
width: 100%;
position: absolute;
bottom: 0;
height: 42px;
font-size: 12px;
color: $color_FF4000;
text-align: center;
line-height: 42px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
}
.kanjia-icon {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
}
}
\ No newline at end of file
src/components/detail/bargain/bargain.scss
......@@ -25,7 +25,7 @@
.intro-inner {
width: 341px;
height: 114px;
height: 118px;
padding-top: 15px;
background: $bg_FFF8EB;
border: 1px solid $color_FE2F2F;
......@@ -67,13 +67,25 @@
.status-outer {
width: 360px;
height: 134px;
padding: 5px;
background: $bg_FE2F2F;
display: flex;
justify-content: center;
align-items: center;
}
.status-over {
height: 99px !important;
.time-tobuy {
color: $color_FF4000;
font-size: 12px;
text-align: center;
line-height: 48px;
}
}
.status-inner {
width: 350px;
height: 124px;
......@@ -83,10 +95,22 @@
.first-row {
@include row-common;
padding: 10px 0;
padding: 13px 0;
display: flex;
justify-content: space-between;
.bargain-over {
display: inline-block;
margin-left: 10px;
padding: 0 4px;
height: 18px;
line-height: 18px;
background-color: $bg_666;
border-radius: 2px;
font-size: 12px;
color: $white;
}
.time {
display: inline-block;
width: 20px;
......@@ -138,6 +162,15 @@
font-size: $font_12;
color: $redprice;
}
.name {
font-size: 14px;
color: $color_333;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.third-row {
......@@ -160,19 +193,24 @@
}
}
.bargain-success {
display: flex;
flex-flow: column;
position: absolute;
top: 100px;
.overlay .bargain-close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-left: -11px;
}
.bargain-success {
width: 290px;
height: 109px;
padding: 15px 33px;
background: $white;
border-radius: 5px;
text-align: center;
margin: 100px auto 20px auto;
.title {
font-size: $font_16;
......@@ -191,4 +229,172 @@
.indicator {
color: $color_FE2F2F;
}
.moreMbc {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px;
height: 340px;
background-color: $white;
border-radius: 3px;
margin: 130px auto 20px auto;
position: relative;
.title-box {
width: 100%;
height: 45px;
text-align: center;
color: $color_202426;
font-size: 16px;
line-height: 45px;
}
.more-bargain-list {
width: 100%;
height: 253px;
overflow: auto;
border-top: 1px solid $sp_e7eaf1;
padding: 0 15px;
background-color: $bg_f5f5f5;
.bargain-item {
border-bottom: 1px solid $sp_e7eaf1;
height: 50px;
display: flex;
position: relative;
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 10px;
margin-right: 10px;
}
.name {
font-size: 14px;
color: $color_333;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 50px;
}
.bargain-status {
line-height: 50px;
color: $color_333;
font-size: 14px;
position: absolute;
right: 0;
}
}
}
}
.more-bargain-dec {
width: 100%;
position: absolute;
bottom: 0;
height: 42px;
font-size: 12px;
color: $color_FF4000;
text-align: center;
line-height: 42px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
}
}
.artifact-box, .use-artifact-box {
padding: 20px 0;
background-color: $bg_fff;
border-radius: 3px;
text-align: center;
margin: 200px auto 20px auto;
.top-tip {
font-size: 16px;
color: $color_333;
height: 16px;
line-height: 16px;
}
.middle-tip {
font-size: 14px;
color: $color_333;
height: 14px;
line-height: 14px;
margin-top: 15px;
}
.btm-tip {
font-size: 14px;
color: $color_666;
height: 14px;
line-height: 14px;
margin-top: 10px;
}
.use-artifact {
background-color: $bg_fff;
width: 84px;
height: 24px;
font-size: 14px;
border: 1px solid $redprice;
border-radius: 12px;
margin: 20px auto 0 auto;
color: $redprice;
}
.tubuy {
display: inline-block;
margin-top: 17px;
width: 81px;
height: 24px;
background-color: $redprice;
border-radius: 12px;
font-size: 16px;
color: $white;
border: none;
}
.indicator {
color: $color_FE2F2F;
}
}
.artifact-box {
width: 300px;
height: 130px;
}
.use-artifact-box {
width: 300px;
height: 148px;
.middle-tip {
color: $color_666;
}
}
\ No newline at end of file
src/components/detail/bargain/bargainInfo/index.js
......@@ -20,4 +20,4 @@ const BargainInfo = () => {
);
};
export default BargainInfo;
\ No newline at end of file
export default BargainInfo
\ No newline at end of file
src/components/detail/index.js
......@@ -53,8 +53,6 @@ class Detail extends Component {
}
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({auditionBox: val, singleBox: val})
......@@ -145,7 +143,10 @@ class Detail extends Component {
{/*砍价*/}
{
this.props.courseInfo && this.props.courseInfo.is_bargain &&
<Bargain/>
}
{/*课程介绍、大纲*/}
<OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
......
src/components/detail/single/index.js
......@@ -294,4 +294,4 @@ class Single extends Component {
}
export default Single;
export default Single
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