Skip to content

M
mr-julyedu
Commit 923eb032 by xuzhenghua
Options

样式

parent c28b7ac2
Showing with 74 additions and 33 deletions
src/assets/css/index.scss
...@@ -74,6 +74,7 @@ body { ...@@ -74,6 +74,7 @@ body {
color: $body-color; color: $body-color;
background-color: $body-bg; background-color: $body-bg;
font-size: 0.24rem; font-size: 0.24rem;
padding-bottom: constant(safe-area-inset-bottom);
} }
// Links // Links
......
src/common/Tag/index.js
...@@ -3,7 +3,7 @@ import './tag.scss' ...@@ -3,7 +3,7 @@ import './tag.scss'
export default class Tag extends PureComponent { export default class Tag extends PureComponent {
render() { render() {
return ( return (
<span className="tag" {...this.props}> <span className={this.props.name} {...this.props}>
{this.props.children} {this.props.children}
</span> </span>
) )
......
src/common/Tag/tag.scss
.tag{ .tagLately, .tagHot{
display: block; display: block;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
...@@ -6,9 +6,12 @@ ...@@ -6,9 +6,12 @@
margin-bottom: 10px; margin-bottom: 10px;
font-size:12px; font-size:12px;
padding:4px 10px; padding:4px 10px;
color:#555; border-radius: 11px;
border-radius: 3px;
float: left; float: left;
background-color: #f0f2f5; background-color: #F5F5F5;
line-height: 20px; line-height: 20px;
color: #666;
}
.tagHot{
color: #333;
} }
\ No newline at end of file
src/components/Index/index.scss
...@@ -156,10 +156,12 @@ ...@@ -156,10 +156,12 @@
margin-top: 15px; margin-top: 15px;
.scroll-list { .scroll-list {
height: 100%; height: 102px;
margin: 5px 0;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
padding: 5px;
.scroll-item { .scroll-item {
display: inline-block; display: inline-block;
...@@ -168,7 +170,6 @@ ...@@ -168,7 +170,6 @@
margin-right: 20px; margin-right: 20px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
background-color: $bg_fff; background-color: $bg_fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px; border-radius: 5px;
.item-box { .item-box {
...@@ -211,7 +212,7 @@ ...@@ -211,7 +212,7 @@
} }
.item-btn { .item-btn {
padding: 0 5px; padding: 0 12px;
height: 20px; height: 20px;
text-align: center; text-align: center;
border: none; border: none;
...@@ -354,7 +355,7 @@ ...@@ -354,7 +355,7 @@
横向滚动 横向滚动
*/ */
.scroll-box { .scroll-box {
height: 92px; height: 112px;
} }
...@@ -387,7 +388,7 @@ ...@@ -387,7 +388,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 51;
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6);
.live-room-content { .live-room-content {
......
src/components/classify/index.js
...@@ -131,7 +131,10 @@ function ClassCourseBox(props) { ...@@ -131,7 +131,10 @@ function ClassCourseBox(props) {
return ( return (
<div className="class-course"> <div className="class-course">
<p className='course-items-title'> <p className='course-items-title'>
{
props.title &&
<img src={require('./image/tips.png')} alt=""/> <img src={require('./image/tips.png')} alt=""/>
}
{props.title} {props.title}
</p> </p>
{props.type === 1 && {props.type === 1 &&
......
src/components/detail/btnstatus/index.scss
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
background-color: $bg_fff; background-color: $bg_fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid $sp_e7eaf1; box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1);
z-index: 3; z-index: 3;
.consult { .consult {
......
src/components/detail/index.scss
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
// height: 66px; // height: 66px;
border-top: 1px solid #e7eaf1; border-top: 1px solid #e7eaf1;
margin: 0 12px; margin: 0 12px;
display: flow-root; display: flex;
label { label {
float: left; float: left;
......
src/components/detail/outline/index.js
...@@ -105,13 +105,13 @@ class OutLine extends Component { ...@@ -105,13 +105,13 @@ class OutLine extends Component {
{ {
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程 // 已购买直播结束已上传视频：正常播放按钮，点击播放课程
!introduce.is_aist && item.class_status === 2 && !introduce.is_aist && item.class_status === 2 &&
<Link to={`/play?id=${introduce.v_course_id}`} className='iconfont icondanseshixintubiao-23 icon-right-22'></Link> <Link to={`/play?id=${introduce.v_course_id + '&video_id=' + item.video_id}`} className='iconfont icondanseshixintubiao-23 icon-right-22'></Link>
} }
{ {
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习 // 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && item.is_open && introduce.is_baoming === 1 && introduce.is_aist && item.is_open && introduce.is_baoming === 1 &&
<Link to={`/play?id=${introduce.v_course_id}`} className='aist aist_open'></Link> <Link to={`/play?id=${introduce.v_course_id + '&video_id=' + item.video_id}`} className='aist aist_open'></Link>
} }
......
src/components/examination/index.js
...@@ -2,13 +2,14 @@ import React, { PureComponent } from 'react' ...@@ -2,13 +2,14 @@ import React, { PureComponent } from 'react'
import './examination.scss' import './examination.scss'
import classnames from 'classnames' import classnames from 'classnames'
import { Tag } from '../../common' import {HeaderBar, Tag} from '../../common'
import OpenApp from './OpenApp' import OpenApp from './OpenApp'
import { http, html, htmlDecode} from '@/utils' import { http, html, htmlDecode} from '@/utils'
import { config } from 'rxjs'; import { config } from 'rxjs';
import { Object } from 'core-js'; import { Object } from 'core-js';
export default class Examination extends PureComponent { export default class Examination extends PureComponent {
constructor(props) { constructor(props) {
...@@ -45,6 +46,7 @@ export default class Examination extends PureComponent { ...@@ -45,6 +46,7 @@ export default class Examination extends PureComponent {
} = this.state } = this.state
return ( return (
<div className='examination'> <div className='examination'>
<HeaderBar title='每日一题' arrow={true} cart={false}></HeaderBar>
<div className="question-container"> <div className="question-container">
<div className="topic"> <div className="topic">
<Tag className='category-tag'>{category}</Tag> <Tag className='category-tag'>{category}</Tag>
......
src/components/my/index.js
...@@ -75,9 +75,8 @@ class My extends PureComponent { ...@@ -75,9 +75,8 @@ class My extends PureComponent {
</Item> </Item>
</Link> </Link>
{ {
(isVIP === 0 || !isVIP) && !isVIP &&
<a href="javascript:;" className="my-isvip" onClick={() => this.toCourseDetail(139)}></a> <a href="javascript:;" className="my-isvip" onClick={() => this.toCourseDetail(139)}></a>
// <Link className="my-isvip" to={`/detail?id=139`}></Link>
} }
</List> </List>
} }
...@@ -89,8 +88,12 @@ class My extends PureComponent { ...@@ -89,8 +88,12 @@ class My extends PureComponent {
{list} {list}
{
!uid &&
<div className="am-list-header"></div> <div className="am-list-header"></div>
}
<List className="my-list-content"> <List className="my-list-content">
<Link to='/purchased'> <Link to='/purchased'>
<Item arrow="horizontal"> <Item arrow="horizontal">
......
src/components/my/index.scss
.flex-container { .flex-container {
.my-tab { .my-tab {
width: 100%; width: 100%;
......
src/components/preferential/index.scss
...@@ -116,6 +116,7 @@ ...@@ -116,6 +116,7 @@
.am-tabs-default-bar-tab-active { .am-tabs-default-bar-tab-active {
background: linear-gradient(90deg, $bg_active 0%, #5077F3 100%); background: linear-gradient(90deg, $bg_active 0%, #5077F3 100%);
color: $white; color: $white;
border: none!important;
} }
.am-tabs-default-bar-underline { .am-tabs-default-bar-underline {
display: none; display: none;
......
src/components/scholarship/CategoryItem/CategoryItem.scss
...@@ -35,11 +35,14 @@ ...@@ -35,11 +35,14 @@
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
width: 90px; padding: 0 10px;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
background-color: #ff4000; background-color: #ff4000;
border-radius: 3px; border-radius: 3px;
} }
} }
.am-tabs-default-bar-content .am-tabs-default-bar-tab{
width: 100px!important;
}
} }
src/components/scholarship/index.js
...@@ -237,7 +237,7 @@ class _Scholarship extends Component { ...@@ -237,7 +237,7 @@ class _Scholarship extends Component {
<Flex justify='between'> <Flex justify='between'>
<i className={'iconfont iconiconfront-68 back'} onClick={this.goback}></i> <i className={'iconfont iconiconfront-68 back'} onClick={this.goback}></i>
<span className={"common-ft-15"}>账户资金</span> <span className={"common-ft-15"}>账户资金</span>
<i className={'iconfont iconaccounttip tip-info'} onClick={this.showDocument}></i> <i className={'iconfont iconiconfront-22 tip-info'} onClick={this.showDocument}></i>
</Flex> </Flex>
</WingBlank> </WingBlank>
<WhiteSpace></WhiteSpace> <WhiteSpace></WhiteSpace>
......
src/components/scholarship/scholarship.scss
...@@ -5,9 +5,11 @@ ...@@ -5,9 +5,11 @@
.common-ft-14 { .common-ft-14 {
font-size: 14px; font-size: 14px;
} }
.common-ft-15 { .common-ft-15 {
font-size: 15px; font-size: 15px;
} }
.common-ft-25 { .common-ft-25 {
font-size: 25px; font-size: 25px;
} }
...@@ -22,15 +24,18 @@ ...@@ -22,15 +24,18 @@
.tip-info { .tip-info {
font-size: 22px; font-size: 22px;
} }
.draw-cash { .draw-cash {
width: 80px; width: 80px;
height: 30px; height: 30px;
line-height: 30px;
border: 1px solid rgba(255, 255, 255, 1); border: 1px solid rgba(255, 255, 255, 1);
border-radius: 15px; border-radius: 15px;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
} }
.login-check { .login-check {
width: 90px; width: 90px;
height: 30px; height: 30px;
...@@ -40,11 +45,13 @@ ...@@ -40,11 +45,13 @@
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
} }
.drawCash { .drawCash {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
} }
} }
.runtimeList { .runtimeList {
height: 30px; height: 30px;
background-color: #FFF4CE; background-color: #FFF4CE;
...@@ -59,4 +66,17 @@ ...@@ -59,4 +66,17 @@
color: $bg_ff3131; color: $bg_ff3131;
} }
//.am-tabs-default-bar {
// border-bottom: 1px solid #E7EAF1;
//}
//.am-tabs-default-bar-top .am-tabs-default-bar-content, .am-tabs-default-bar-bottom .am-tabs-default-bar-content {
// display: flex;
// justify-content: space-around;
//}
//.am-tabs-default-bar-top .am-tabs-default-bar-tab {
// width: 60px !important;
//}
//.am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
// background-color: #fff!important;
//}
} }
src/components/search/index.js
...@@ -73,7 +73,7 @@ class Search extends PureComponent { ...@@ -73,7 +73,7 @@ class Search extends PureComponent {
key={i} key={i}
to={`/search-result?word=${encodeURIComponent(v)}`} to={`/search-result?word=${encodeURIComponent(v)}`}
> >
<Tag>{v}</Tag> <Tag name={"tagLately"}>{v}</Tag>
</Link> </Link>
) )
}) })
...@@ -82,7 +82,7 @@ class Search extends PureComponent { ...@@ -82,7 +82,7 @@ class Search extends PureComponent {
</div> </div>
</div> </div>
<div className="search-land search-hot"> <div className="search-land search-hot">
<label> <label className={'search-history'}>
<span>热门搜索</span> <span>热门搜索</span>
</label> </label>
<div className="search-tag"> <div className="search-tag">
...@@ -94,7 +94,7 @@ class Search extends PureComponent { ...@@ -94,7 +94,7 @@ class Search extends PureComponent {
to={`/search-result?word=${encodeURIComponent(v)}`} to={`/search-result?word=${encodeURIComponent(v)}`}
onClick={this.storeHistory.bind(this, v)} onClick={this.storeHistory.bind(this, v)}
> >
<Tag>{v}</Tag> <Tag name={"tagHot"}>{v}</Tag>
</Link> </Link>
) )
}) })
......
src/components/search/search_header.scss
.search-head{ .search-head{
height:44px; height:44px;
display: flex; display: flex;
background-color: #fff; background-color: #F7F9FC;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
.left{ .left{
width:44px; width:44px;
...@@ -18,9 +18,10 @@ border-bottom: 1px solid #eee; ...@@ -18,9 +18,10 @@ border-bottom: 1px solid #eee;
.center{ .center{
flex: 1; flex: 1;
.am-search{ .am-search{
background-color: #fff; background-color: #F7F9FC;
.am-search-input{ .am-search-input{
background-color: #f7f7f7; background-color: #EBEFF5;
border-radius:44px; border-radius:44px;
} }
} }
......
src/components/video/index.js
...@@ -318,7 +318,7 @@ class Video extends Component { ...@@ -318,7 +318,7 @@ class Video extends Component {
getVideoList = () => { getVideoList = () => {
http.get(`${API.home}/m/course/play/${this.courseID}`) http.get(`${API.home}/m/course/play/${this.courseID + '?video_id=' + getParam('video_id')}`)
.then(res => { .then(res => {
const data = res.data const data = res.data
if (data.code === 200) { if (data.code === 200) {
......
src/components/video/recommendation/index.js
...@@ -62,8 +62,8 @@ class Recommendation extends PureComponent { ...@@ -62,8 +62,8 @@ class Recommendation extends PureComponent {
this.state.list.map(item => { this.state.list.map(item => {
const Info = ( const Info = (
<div className="info"> <div className="info">
<p className='title'>{item.course_title}</p> <p className='title text-overflow-1'>{item.course_title}</p>
<p className='des'>{item.simpledescription}</p> <p className='des text-overflow-2'>{item.simpledescription}</p>
<Bottom <Bottom
item={item} item={item}
/> />
......
src/components/video/recommendation/recommendation.scss
.recommendation { .recommendation {
padding-top: 20px; margin-top: 15px;
border-top: 10px solid #f5f5f5;
& > .title { & > .title {
font-size: $font_16; font-size: $font_16;
padding-left: 15px; padding-left: 15px;
margin-top: 15px;
} }
.info { .info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 52.3%;
.title{ .title{
font-size: 15px; font-size: 15px;
...@@ -37,5 +40,4 @@ ...@@ -37,5 +40,4 @@
align-self: flex-end; align-self: flex-end;
} }
} }
} }
\ No newline at end of file
src/components/video/video.scss
...@@ -15,6 +15,8 @@ $tabHeight: 44px; ...@@ -15,6 +15,8 @@ $tabHeight: 44px;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: #09f;
border: none;
} }
} }
...@@ -101,7 +103,7 @@ $tabHeight: 44px; ...@@ -101,7 +103,7 @@ $tabHeight: 44px;
max-height: $tabHeight; max-height: $tabHeight;
line-height: $tabHeight; line-height: $tabHeight;
text-align: center; text-align: center;
background: #F7F9FC; background: #fff;
flex: 1 0 auto; flex: 1 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
......
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