Skip to content

M
mr-julyedu
Commit 89a55e05 by xuzhenghua
Options

样式优化

parent caf05f78
Showing with 256 additions and 148 deletions
src/assets/css/variable.scss
......@@ -18,6 +18,7 @@ $color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F;
$color_FF4000: #FF4000;
$color_FF0000: #FF0000;
$color_525B65: #525B65;
/*
......
src/common/Course/course.scss
......@@ -8,7 +8,7 @@
width: 100%;
height: 119px;
min-height: 119px;
border-radius: 3px;
border-radius: 4px;
}
.course-status{
width: 100%;
......@@ -26,9 +26,9 @@
.course-title {
font-size: 14px;
color: $color_333;
color: $color_525B65;
min-height: 38px;
line-height: 19px;
margin-top: 9px;
line-height: 22px;
margin-top: 6px;
}
}
src/common/NavBar/index.js
......@@ -6,29 +6,29 @@ const navLinkConfig = [
{
to: '/',
exact: true,
icon: 'iconshouye-xianxing',
activeIcon: 'iconshouye1',
icon: 'index-icon',
activeIcon: 'index-icon-active',
text: '首页'
},
{
to: '/classify',
exact: false,
icon: 'iconfenlei-xianxing',
activeIcon: 'iconfenlei-chunse',
icon: 'classify-icon',
activeIcon: 'classify-icon-active',
text: '分类'
},
{
to: '/study',
exact: false,
icon: 'iconxuexi-xianxing',
activeIcon: 'iconxuexi-chunse',
icon: 'study-icon',
activeIcon: 'study-icon-active',
text: '学习'
},
{
to: '/my',
exact: false,
icon: 'iconwode-xianxing',
activeIcon: 'iconwode-chunse',
icon: 'my-icon',
activeIcon: 'my-icon-active',
text: '我的'
}
]
......@@ -46,7 +46,7 @@ const NavBar = React.memo(({location}) => {
key={icon}
{...rest}
>
<i className={`iconfont ${item.to.length > 1 ? location.pathname.startsWith(item.to) ? activeIcon : icon : location.pathname === item.to ? activeIcon : icon}`}/>
<i className={`icon ${item.to.length > 1 ? location.pathname.startsWith(item.to) ? activeIcon : icon : location.pathname === item.to ? activeIcon : icon}`}/>
<span>{text}</span>
</NavLink>
)
......
src/common/NavBar/index.scss
.nav-bar {
display: flex;
position: fixed;
width: 100%;
height: 50px;
bottom: 0;
left: 0;
z-index: 50;
background: $white;
border-top: 1px solid #ddd;
.index-icon {
background-image: url("./image/grey_sy_icon.png");
}
.index-icon-active {
background-image: url("./image/sy_icon.png");
}
.classify-icon{
background-image: url("./image/grey_liebiao_ed_icon.png");
}
.classify-icon-active {
background-image: url("./image/liebiao_ed_icon.png");
}
.study-icon {
background-image: url("./image/grey_study_icon.png");
}
.study-icon-active {
background-image: url("./image/study_icon.png");
}
.my-icon {
background-image: url("./image/grey_my_icon.png");
}
.my-icon-active {
background-image: url("./image/my.png");
}
.icon {
display: inline-block;
width: 22px;
height: 22px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-bottom: 4px;
}
.nav-item {
flex: auto;
display: flex;
position: fixed;
width: 100%;
height: 50px;
bottom: 0;
left: 0;
z-index: 50;
background: $white;
border-top: 1px solid #ddd;
.iconfont {
font-size: $font_24;
margin-bottom: 4px;
}
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
line-height: 1;
color: #666;
font-size: 12px;
.nav-item {
flex: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
line-height: 1;
color: #666;
font-size: 12px;
&.active {
color: $active;
}
&.active {
color: $active;
}
}
}
......
src/common/OrderList/orderlist.scss
......@@ -46,12 +46,12 @@
.order-title {
font-size: 16px;
color: $color_333;
color: $color_525B65;
}
.order-content {
font-size: 14px;
color: $color_666;
color: #777;
margin-top: 10px;
line-height: 18px;
}
......
src/common/VList/index.scss
.v-list-item {
height: 127px;
padding: 10px 10px 0;
height: 138px;
padding: 15px 15px 0;
.content {
display: flex;
height: 100%;
padding-bottom: 10px;
padding-bottom: 15px;
border-bottom: 1px solid $sp_e7eaf1;
.cover {
......@@ -16,7 +16,7 @@
img {
width: 150px;
height: 108px;
border-radius: 3px;
border-radius: 4px;
}
}
.course-status {
......
src/components/Index/all-course/index.js
......@@ -6,7 +6,7 @@ import './index.scss'
const AllCourseNavigation = React.memo(() => {
return <div className="all-course">
<Link to='/classify'>
<p>查看全部课程</p>
<p>查看全部课程 >></p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</Link>
</div>
......
src/components/Index/all-course/index.scss
......@@ -9,13 +9,13 @@
background: #fff;
p {
color: $color_555;
color: $active;
font-size: 16px;
margin-bottom: 10px;
}
span {
color: $color_999;
color: $color_525B65;
font-size: 12px;
}
}
\ No newline at end of file
src/components/Index/course-list/index.js
......@@ -52,13 +52,13 @@ const Module = function CourseList({module, toDetail}) {
{
module.show_more === 1 &&
<Link className="more" to='/classify'>更多 ></Link>
<Link className="more" to='/classify'>查看更多 ></Link>
}
{
module.show_more === 2 ?
module.name === '限时免费'
? <Link className="more" to={'/free'}>更多 ></Link>
: <Link className="more" to={module.more_page}>更多 ></Link>
? <Link className="more" to={'/free'}>查看更多 ></Link>
: <Link className="more" to={module.more_page}>查看更多 ></Link>
: null
}
{/* <LazyLoad offset={50}> */}
......
src/components/Index/course-list/index.scss
......@@ -7,7 +7,7 @@
background: #fff;
.title {
font-size: 16px;
color: $color_333;
color: $color_525B65;
display: inline-block;
.hot {
......@@ -26,7 +26,7 @@
}
.more {
color: $active;
color:rgba(81,91,101,.8);
font-size: 12px;
float: right;
}
......@@ -70,7 +70,7 @@
.course-price {
margin-top: 15px;
margin-top: 10px;
.new {
color: $red;
......
src/components/Index/index.scss
......@@ -137,10 +137,10 @@
}
span {
color: $color_606;
color: $color_525B65;
font-size: 14px;
display: block;
margin-top: 10px;
margin-top: 5px;
}
}
}
......@@ -155,7 +155,7 @@
.title {
font-size: 16px;
color: $color_333;
color: $color_525B65;
display: inline-block;
}
}
......@@ -237,20 +237,20 @@
.item-title {
font-size: 16px;
color: $color_333;
color: $color_525B65;
height: 16px;
line-height: 16px;
}
.item-teacher {
font-size: 14px;
color: $color_555;
font-size: 12px;
color: $color_525B65;
margin-top: 6px;
}
.item-time {
font-size: 12px;
color: $color_999;
color: $color_525B65;
margin-top: 11px;
}
}
......
src/components/classify/courselist.scss
......@@ -72,7 +72,7 @@ html, body, #root {
.title {
font-size: 16px;
color: $color_333;
color: $color_525B65;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -80,7 +80,7 @@ html, body, #root {
.contact {
font-size: 14px;
color: $color_666;
color: #777;
margin-top: 14px;
}
......
src/components/order/order.scss
......@@ -108,12 +108,12 @@
justify-content: space-around;
.order-title {
color: $color_333;
color: $color_525B65;
font-size: $font_16;
}
.order-content {
color: $color_666;
color: #777;
font-size: $font_14;
line-height: 18px;
}
......
src/components/order/payOrder/PayOrder.scss
......@@ -168,12 +168,12 @@
.order-title {
font-size: 16px;
color: $color_333;
color: $color_525B65;
}
.order-content {
font-size: 14px;
color: $color_666;
color: #777;
margin-top: 14px;
line-height: 18px;
}
......
src/components/preferential/index.scss
......@@ -60,7 +60,7 @@
.title {
font-size: 16px;
color: $color_333;
color: $color_525B65;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -70,7 +70,7 @@
.contact {
font-size: 14px;
color: $color_666;
color: #777;
margin-top: 14px;
}
......
src/components/purchased/index.scss
......@@ -47,7 +47,7 @@ html, body, #root {
.title {
font-size: 16px;
color: $color_333;
color: $color_525B65;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -57,7 +57,7 @@ html, body, #root {
.contact {
font-size: 14px;
color: $color_666;
color: #777;
margin-top: 14px;
}
......
src/components/search/index.js
......@@ -20,7 +20,7 @@ class Search extends PureComponent {
async componentDidMount() {
const res = await http.get(`${API['search-api']}/search_hot_word`);
const { errno, data } = res.data;
const { errno, data } = res.data;
if (errno === 0) {
this.setState({
hot_words: data.info.hot_words,
......@@ -92,7 +92,7 @@ class Search extends PureComponent {
}
<div className="search-land search-hot">
<label className={'search-history'}>
<span>热门搜索</span>
<span>热门搜索<img src={require('./image/hot.png')} alt=""/></span>
</label>
<div className="search-tag">
{
......@@ -109,7 +109,7 @@ class Search extends PureComponent {
})
: <div style={{textAlign: 'center', padding: '20px'}}>暂无热门</div>
}
</div>
</div>
</div>
......
src/components/search/index.scss
......@@ -10,7 +10,14 @@
justify-content: space-between;
span {
font-size: 16px;
color: #333;
font-size: 14px;
img {
display: inline-block;
width: 12px;
height: 8px;
margin-left: 5px;
}
}
img {
......
src/components/search/recommendation/recommendation.scss
......@@ -2,11 +2,18 @@
.recommendation {
padding: 0 15px;
margin-top: 20px;
.title {
width: 100%;
font-size: 15px;
padding: 20px 0 5px;
text-align: center;
color: #525C65;
background-image: url("../image/tj_bj.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 109px;
height: 21px;
margin: auto;
}
.courses {
......
src/components/search/search-result.js
......@@ -78,7 +78,7 @@ class SearchResult extends PureComponent {
}
handleScroll = throttle(() => {
let y = window.scrollY < 0? 0 : window.scrollY,
let y = window.scrollY < 0? 0 : window.scrollY,
headY = this.searchHead.current.offsetTop,
h = this.searchHead.current.offsetHeight;
if(y > this.prevScrollY) {
......@@ -97,7 +97,7 @@ class SearchResult extends PureComponent {
}
// if (y < this.prevScrollY) {
// if (this.state.swipeDirection === this.swipeDown) {
// y <= headY && this.state.searchHeadStyle.position !== 'fixed' &&
// y <= headY && this.state.searchHeadStyle.position !== 'fixed' &&
// this.setState({
// searchHeadStyle: {
// top: `0`,
......@@ -117,8 +117,8 @@ class SearchResult extends PureComponent {
// top: `${y}px`
// }
// })
// }
// })
// }
......@@ -189,7 +189,8 @@ class SearchResult extends PureComponent {
}
</ul>
: <div className="empty">
抱歉！没有搜到相关内容
<img src={require('./image/ss_empty.png')} alt=""/>
抱歉，没有搜到相关内容！
</div>
}
<Recommendation/>
......
src/components/search/search-result.scss
......@@ -17,6 +17,7 @@
ul {
list-style: none;
border-top:1px solid #ddd;
}
.v-list-item{
......@@ -32,14 +33,16 @@
.title{
overflow: hidden;
font-size: $font_14;
font-size: $font_16;
color:#525C65;
white-space: nowrap;
text-overflow: ellipsis;
}
.des {
font-size: $font_12;
font-size: $font_14;
color:#777;
line-height: 16px;
align-self: flex-start;
......@@ -64,10 +67,17 @@
.empty {
font-size: 12px;
color: $color_666;
padding: 30px 0;
color: #777;
padding: 50px 0 30px 0;
text-align: center;
background-color: #f5f5f5;
background-color: #fff;
border-top: 1px solid #ddd;
img {
width: 100px;
height: 81px;
display: block;
margin: 0 auto 15px auto;
}
}
.status {
......
src/components/search/search_header.scss
.search-head {
height: 44px;
display: flex;
background-color: #F7F9FC;
border-bottom: 1px solid #eee;
background-color: #fff;
.left {
width: 44px;
......@@ -22,11 +21,18 @@
flex: 1;
.am-search {
background-color: #F7F9FC;
background-color: #fff;
.am-search-input {
background: #F0F2F6;
border-radius: 44px;
.am-search-value {
border:1px solid rgba(225,228,230,1);
border-radius:13px;
color: #333;
font-size: 12px;
}
}
}
......@@ -63,8 +69,8 @@
padding: 0 12px;
margin-left: 0;
border-radius: 3px;
font-size: $font_14;
color: $color_333;
font-size: 14px;
color: $color_525B65;
}
.submit-btn--active {
color: $active;
......
src/components/study/myCourses/my-courses.scss
......@@ -11,6 +11,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $color_525B65;
}
.contact {
......
src/components/video/datum-catalog/datum-catalog.scss
.datum-catalog {
.prompt {
height: 30px;
line-height: 30px;
font-size: $font_12;
color: $color_333;
background-color: #FFF4CE;
text-align: center;
}
.am-accordion {
margin: 0 15px;
}
.file-name {
padding: 15px;
padding-bottom: 0;
}
.prompt {
height: 30px;
line-height: 30px;
font-size: $font_12;
color: $color_333;
background-color: #FFF4CE;
text-align: center;
}
& .file-name:last-of-type {
padding-bottom: 15px;
}
.file-name {
margin: 5px 0;
padding: 0 10px;
width: 301px;
height: 24px;
line-height: 24px;
background-color: #F7F8F9;
border-radius: 2px;
color: #525B65;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
font-size: 12px;
}
.am-accordion-content-box {
padding-bottom: 5px;
}
.am-accordion .am-accordion-item .am-accordion-header {
color: #333;
font-size: 14px;
padding: 0;
}
.am-accordion .am-accordion-item .am-accordion-header::after {
background-color: #fff!important;
}
.am-accordion-item .am-accordion-content .am-accordion-content-box::after {
background-color: #fff!important;
}
.am-accordion::before {
background-color: #fff !important;
}
.am-accordion-item {
border-bottom: 1px solid #E7E9F1;
}
}
\ No newline at end of file
src/components/video/recommendation/recommendation.scss
......@@ -15,13 +15,14 @@
.title{
font-size: 15px;
color: #525B65;
}
.des {
font-size: $font_14;
line-height: 16px;
align-self: flex-start;
color: #777;
}
.price {
......
src/components/video/video-catalog/index.js
......@@ -17,16 +17,16 @@ class VideoCatalog extends Component {
{
this.props.videoCatalog.map((item, index) => {
return (
<li
<li
key={item.id}
className={classnames({active: this.props.activeIndex === index})}
>
<div
className="video-title"
<div
className="video-title"
onClick={this.handleClick.bind(this, index)}
>
<span className="title">{item.name}</span>
<span className='duration'>{item.duration}</span>
<span className="title text-overflow-2">{item.name}</span>
{/*<span className='duration'>{item.duration}</span>*/}
<i className={classnames(`iconfont`,
[item.video_auth === 0
? 'iconiconfront-74'
......@@ -43,7 +43,7 @@ class VideoCatalog extends Component {
state: {from: `/play/video${window.location.search}`}
}}>
<div className="exercise">
课后练习：{item.practice.title}
<span className={'text-overflow-one'}>课后练习：{item.practice.title}</span>
<i className={classnames('iconfont', item.practice.is_tested ? 'iconiconfront-3' : '')}/>
</div>
</Link>
......@@ -51,7 +51,7 @@ class VideoCatalog extends Component {
) : (
<a href="javascript:void(0)">
<div className="exercise">
课后练习：{item.practice.title}
<span className={'text-overflow-one'}>课后练习：{item.practice.title}</span>
<i className={classnames('iconfont','iconiconfront-74')}/>
</div>
</a>
......@@ -66,14 +66,14 @@ class VideoCatalog extends Component {
state: {from: `/play/video${window.location.search}`}
}} key={index}>
<div className="exercise">
课后练习：{commonItem.title}
<span className={'text-overflow-one'}>课后练习：{commonItem.title}</span>
<i className={classnames('iconfont',commonItem.is_tested ? 'iconiconfront-3' : '')}/>
</div>
</Link>
) : (
<a href="javascript:void(0)">
<div className="exercise">
课后练习：{commonItem.title}
<span className={'text-overflow-one'}>课后练习：{commonItem.title}</span>
<i className={classnames('iconfont','iconiconfront-74')}/>
</div>
</a>
......
src/components/video/video-catalog/video-catalog.scss
.video-catalog {
& li:first-child{
border-top: 1px solid #E7EAF1;
color: #515B65;
border-top: 1px solid #E7E9F1;
ul {
margin: 0 15px;
}
li {
line-height: 44px;
border-bottom: 1px solid #E7EAF1;
padding: 0 15px;
border-bottom: 1px solid #E7E9F1;
&.active {
.video-title {
background-color: #F5FBFF;
color: $active;
}
.exercise{
border-top: 1px solid #E7EAF1;
font-size: $font_12;
.iconiconfront-3{
font-weight: bold;
......@@ -24,43 +20,51 @@
}
.video-title {
height: 44px;
margin: 0 -15px;
padding: 0 15px;
height: 100%;
padding: 12px 0;
display: flex;
justify-content: space-between;
align-items: center;
.iconfont{
font-size: 22px;
}
}
a:last-child {
.exercise {
margin-bottom: 15px;
font-size: 15px;
}
}
.exercise {
padding-left: 15px;
height: 35px;
background: #F5FBFF;
line-height: 35px;
padding: 0 10px;
height: 24px;
background: #F7F8F9;
line-height: 24px;
font-size: $font_12;
color: #000;
border-top: 1px solid transparent;
color: #525B65;
font-weight:500;
margin-bottom: 5px;
border-radius:2px;
display: flex;
justify-content: space-between;
span {
max-width: 90%;
}
&:last-child {
margin-bottom: 15px;
}
.iconfont {
font-size: 18px;
//font-weight: bold;
font-size: 16px;
}
}
}
.title {
display: inline-block;
width: 50%;
white-space: nowrap;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
width: 90%;
font-size: $font_14;
margin-right: 26px;
}
......
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