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