Skip to content

M
mr-julyedu
Commit bb80e6ba by baiguangyao
Options

.

parents ed4caa55 1b8018b7
Showing with 482 additions and 5 deletions
.history/src/router_20190425190102.js 0 → 100644
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Menu from './menu';
import Index from './components/Index';
import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
import CourseList from './components/classify/courselist';
import Search from './components/search/index';
import Order from './components/order/index';
import Preferential from './components/preferential/index';
import Search from './components/search/index'
import Detail from './components/detail/index'
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='/preferential' component={Preferential}></Route>
<Route path='/search' component={Search}></Route>
<<<<<<< HEAD
<Route path='/order' component={Order}></Route>
=======
<Route path='/detail' component={Detail}></Route>
>>>>>>> 1b8018b78869174664aea7e35cd7b390866a55ea
</Switch>
<Menu />
</Router>
)
export default router;
\ No newline at end of file
src/components/classify/courselist.js
......@@ -370,6 +370,7 @@ class Classify extends Component {
<Tabs
tabs={tabs}
animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
......
src/components/classify/courselist.scss
......@@ -206,8 +206,8 @@
}
}
}
.am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff!important;
}
}
html:not([data-scale]) .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff;
}
src/components/classify/index.scss
.class-box {
background-color: $bg_fff;
}
.class-title {
width: 100%;
......@@ -74,3 +73,4 @@
border-radius: 5px;
}
}
}
src/components/detail/index.scss 0 → 100644
.detail-box {
position: relative;
.toapp {
position: absolute;
right: 0;
top: 117px;
width: 82px;
height: 32px;
text-align: center;
line-height: 32px;
background: linear-gradient(-90deg, $bg_active 0%, $bg_0078FF 100%);
border-radius: 16px 0 0 16px;
font-size: 12px;
color: $white;
z-index: 1;
}
.detail-header {
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: $bg_f7f9fc;
display: flex;
justify-content: space-between;
.shopping-cart, .return {
font-size: 18px !important;
}
.herder {
font-size: 16px;
color: $color_202426;
}
}
.course-content {
margin: 15px 12px 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid $sp_e7eaf1;
display: flex;
justify-content: space-between;
.cover {
width: 42.2%;
height: 108px;
img {
border-radius: 3px;
width: 100%;
height: 100%;
}
}
.info {
width: 52.3%;
position: relative;
display: block;
.title {
font-size: 16px;
color: $color_333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 10px;
}
.des {
position: absolute;
bottom: 0;
.course-price {
.new {
color: $red;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
width: 66px;
height: 27px;
background-color: $bg_ccc;
color: $white;
border-radius: 3px;
font-size: 12px;
text-align: center;
line-height: 27px;
}
}
}
}
.promise {
padding: 15px 12px;
height: 66px;
label {
float: left;
display: block;
text-align: center;
font-size: 12px;
width: 54px;
height: 18px;
background-color: $bg_333;
color: $white;
border-radius: 6px 0 6px 0;
}
p {
width: 75%;
float: left;
margin-left: 15px;
font-size: 12px;
color: $color_333;
}
}
.group, .vip {
margin: 0 12px;
padding: 10px 12px;
text-align: center;
color: $white;
font-size: 12px;
border-radius: 6px 6px 0 0;
}
.group {
background-color: $bg_82BBFB;
}
.vip {
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;
}
}
.course-detail {
border-top: 8px solid $bg_f5f5f5;
margin-bottom: 50px;
.am-whitespace-md {
height: 0;
}
.am-tabs-default-bar-tab {
width: auto !important;
}
.am-tabs-default-bar-content {
border-bottom: 1px solid $sp_e7eaf1;
display: flex;
justify-content: space-around;
}
.am-tabs-default-bar-tab-active {
color: $active;
border-bottom: 1px solid $active !important;
}
.am-tabs-default-bar-underline {
display: none;
}
.am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff !important;
}
.introduce {
padding: 15px 12px;
font-size: 14px;
color: $color_555;
}
.outline {
padding: 15px 0 15px 12px;
background-color: $bg_f5f5f5;
.stagebox {
margin-bottom: 15px;
}
.stage {
font-size: 14px;
color: $color_333;
}
.classhour {
height: 33px;
background-color: $bg_fff;
color: $color_4B4B4B;
line-height: 33px;
font-size: 14px;
padding-left: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
.points {
font-size: 12px;
color: $color_666;
margin-left: 10px;
margin-top: 10px;
}
.red {
color: $color_FE2F2F;
}
}
}
}
\ No newline at end of file
src/components/preferential/index.scss 0 → 100644
.preferential {
.search-nav {
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: $bg_f7f9fc;
display: flex;
justify-content: space-between;
.am-search {
width: 81%;
background-color: $bg_f7f9fc;
}
.am-search-input, .am-search-synthetic-ph, .am-search-value {
text-align: left;
padding-left: 15px;
height: 26px;
line-height: 26px;
}
.am-search-input {
background-color: $bg_EBEFF5;
border-radius: 13px;
}
.shopping-cart, .return {
font-size: 18px !important;
}
}
.class-content {
padding: 0 12px;
position: relative;
margin-top: 15px;
.v-list-item {
padding: 10px 0 0;
.content {
border: none;
.cover {
flex: inherit;
width: 42.2%;
img {
width: 100%;
}
.course-status {
background-color: rgba(224, 46, 36, 0.6);
}
}
}
.info {
width: 52.3%;
position: relative;
display: block;
.title {
font-size: 16px;
color: $color_333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.des {
position: absolute;
bottom: 0;
.course-price {
.price {
color: $red;
font-size: 12px;
}
.new {
color: $red;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
}
}
.tabs {
display: flex;
margin-top: 5px;
margin-bottom: 50px;
}
.am-tabs-default-bar-tab {
width: 82px !important;
height: 24px;
color: $bg_active;
border: 1px solid $bg_active!important;
border-radius: 12px;
margin-right: 20px;
font-size: 12px;
}
.am-tabs-default-bar-tab-active {
background: linear-gradient(90deg, $bg_active 0%, #5077F3 100%);
color: $white;
}
.am-tabs-default-bar-underline {
display: none;
}
.am-whitespace.am-whitespace-md {
height: 0 !important;
}
.am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: rgba(0,0,0,0);
}
}
}
src/router.js
......@@ -9,6 +9,10 @@ import My from './components/my';
import CourseList from './components/classify/courselist';
import Search from './components/search/index';
import Order from './components/order/index';
import Preferential from './components/preferential/index';
import Search from './components/search/index'
import Detail from './components/detail/index'
......@@ -21,8 +25,13 @@ const router = () => (
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
<Route path='/courselist' component={CourseList}></Route>
<Route path='/preferential' component={Preferential}></Route>
<Route path='/search' component={Search}></Route>
<<<<<<< HEAD
<Route path='/order' component={Order}></Route>
=======
<Route path='/detail' component={Detail}></Route>
>>>>>>> 1b8018b78869174664aea7e35cd7b390866a55ea
</Switch>
<Menu />
</Router>
......
src/styles/variable.scss
......@@ -11,6 +11,9 @@ $color_555: #555;
$color_666: #666;
$color_999: #999;
$color_606: #606060;
$color_202426: #202426;
$color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F;
/*
......@@ -28,17 +31,23 @@ $font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_0078FF: #0078FF;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: #f7f9fc;
$bg_EBEFF5: #EBEFF5;
$bg_ccc: #ccc;
$bg_333: #333;
$bg_82BBFB: #82BBFB;
$bg_EBC05A: #EBC05A;
$bg_EBA216: #EBA216;
/*
......
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