Skip to content

M
mr-julyedu
Commit fe3d6a6d by baiguangyao
Options

解决bargain冲突

parents 61fb1335 70f08ce1
Showing with 340 additions and 0 deletions
.history/src/styles/variable_20190428184758.scss 0 → 100644
/*
* @ 文字颜色
*/
$active: #09f;
$white: #fff;
$black: #000;
$red: #f21;
$redprice: #ff3131;
$color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
$color_606: #606060;
$color_bbb: #BBB;
$color_202426: #202426;
$color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F;
/*
* @ 文字大小
*/
$font_30: 30px;
$font_28: 28px;
$font_26: 26px;
$font_24: 24px;
$font_22: 22px;
$font_20: 20px;
$font_18: 18px;
$font_16: 16px;
$font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_0078FF: #0078FF;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: #f7f9fc;
$bg_EBEFF5: #EBEFF5;
$bg_ccc: #ccc;
$bg_333: #333;
$bg_666: #666;
$bg_82BBFB: #82BBFB;
$bg_EBC05A: #EBC05A;
$bg_EBA216: #EBA216;
$bg_ff9898: #ff9898;
$bg_ff3131: #ff3131;
$bg_FFF8EB: #FFF8EB;
$bg_FFE400: #FFE400;
$bg_FFA200: #FFA200;
$bg_FE2F2F: #FE2F2F;
$bg_FADD29: #FADD29;
/*
* @ 分割线颜色
*/
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
$border_ddd: #ddd;
$border_e7eaf1: #E7EAF1;
$border_f31: #f31;
$border_ccc: #ccc;
/*
* @ 标签颜色
*/
$E0B97B: #E0B97B;
\ No newline at end of file
src/components/detail/bargain/bargain.scss 0 → 100644
.bargain {
padding: 8px;
border-top: 8px solid $bg_f5f5f5;
@mixin clean-button-style {
background: transparent;
border: none;
-webkit-appearance: none;
}
@mixin row-common{
width: 100%;
padding: 0 10px;
border-bottom: 1px solid $border_e7eaf1;
}
.intro-outer {
width: 360px;
height: 133px;
border: 5px solid $color_FE2F2F;
display: flex;
justify-content: center;
align-items: center;
}
.intro-inner {
width: 341px;
height: 114px;
padding-top: 15px;
background: $bg_FFF8EB;
border: 1px solid $color_FE2F2F;
border-radius: 3px;
& > div {
height: 100%;
}
p {
font-size: $font_14;
}
p:nth-child(1) {
margin-bottom: 3px;
}
p:nth-child(2) {
margin-bottom: 5px;
}
button {
@include clean-button-style;
width: 210px;
height: 39px;
border-radius: 20px;
box-shadow: 0 5px $bg_FFA200;
background: $bg_FFE400;
font-size: $font_16;
color: $color_FE2F2F;
}
}
.indicator {
color: $color_FE2F2F;
}
.status-outer {
width: 360px;
height: 134px;
background: $bg_FE2F2F;
display: flex;
justify-content: center;
align-items: center;
}
.status-inner {
width: 350px;
height: 124px;
padding: 0 10px;
background: $white;
border-radius: 3px;
.first-row {
@include row-common;
padding: 10px 0;
display: flex;
justify-content: space-between;
.time {
display: inline-block;
width: 20px;
height: 18px;
background: $bg_666;
border-radius: 2px;
text-align: center;
line-height: 18px;
font-size: $font_12;
color: $white;
}
.hour {
margin-left: 7px;
}
.sec {
margin-right: 5px;
}
}
.sec-row {
@include row-common;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
& > div {
display: flex;
justify-content: space-between;
align-items: center;
}
img {
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
}
button {
@include clean-button-style;
width: 62px;
height: 26px;
margin-left: 7px;
background: $bg_FADD29;
border-radius: 3px;
font-size: $font_12;
color: $redprice;
}
}
.third-row{
@include row-common;
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border: none;
button{
@include clean-button-style;
padding: 3px 9px;
border:1px solid $border_f31;
border-radius:11px;
color: $border_f31;
font-size: $font_12;
}
}
}
}
\ No newline at end of file
src/components/detail/bargain/index.js 0 → 100644
import React, { Component } from 'react';
import './bargain.scss'
import { Flex } from "antd-mobile";
const mockData = {
sum: 59,
}
class Bargain extends Component {
render() {
return (
<div className={'bargain'}>
{/*<BargainIntro/>*/}
<BargainStatus
/>
</div>
);
}
}
function BargainIntro() {
return (
<div className="intro-outer">
<div className="intro-inner">
<Flex direction={'column'} justify={'center'} className={'intro-wrapper'}>
<p>
邀请
<span className={'indicator'}>20位</span>
好友帮忙砍价可获得
<span className={'indicator'}>【砍价神器】</span>
</p>
<p>一刀绝杀，砍爆底价</p>
<Flex.Item>
<button>我要砍价</button>
</Flex.Item>
</Flex>
</div>
</div>
)
}
function BargainStatus() {
return (
<div className="status-outer">
<div className="status-inner">
<Flex direction={'column'}>
<div className={'first-row'}>
<div>
已砍<span className={'indicator'}>59元</span>
<span className={'time hour'}>23</span>:
<span className={'time min'}>59</span>:
<span className={'time sec'}>02</span>
后砍价结束
</div>
<div>15位好友助力></div>
</div>
<div className="sec-row">
<div>
<img src="http://b-ssl.duitang.com/uploads/item/201506/23/20150623212143_hATKH.jpeg" alt=""/>
<span>机器学习集训营</span>
</div>
<div>
<div>砍掉<span className={'indicator'}>25.3元</span></div>
<button>继续砍价</button>
</div>
</div>
<div className="third-row">
<div>
再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span className={'indicator'}>【砍价神器】</span>
</div>
{/*<button>立即领取</button>*/}
</div>
</Flex>
</div>
</div>
)
}
export default Bargain;
\ No newline at end of file
src/components/detail/index.js
import React, {Component} from 'react';
import {Tabs, WhiteSpace, Badge} from 'antd-mobile';
import './index.scss';
import Bargain from './bargain'
class Detail extends Component {
......@@ -658,6 +659,10 @@ class Detail extends Component {
<img className="ranking-ellipsis" src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
<button className="share">分享赚22元</button>
</div>
{/*砍价*/}
<Bargain/>
{/*课程介绍、大纲*/}
<div className='course-detail'>
<WhiteSpace/>
......
src/styles/variable.scss
......@@ -45,11 +45,18 @@ $bg_f7f9fc: #f7f9fc;
$bg_EBEFF5: #EBEFF5;
$bg_ccc: #ccc;
$bg_333: #333;
$bg_666: #666;
$bg_82BBFB: #82BBFB;
$bg_EBC05A: #EBC05A;
$bg_EBA216: #EBA216;
$bg_ff9898: #ff9898;
$bg_ff3131: #ff3131;
$bg_FFF8EB: #FFF8EB;
$bg_FFE400: #FFE400;
$bg_FFA200: #FFA200;
$bg_FE2F2F: #FE2F2F;
$bg_FADD29: #FADD29;
/*
* @ 分割线颜色
......
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