m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

实训课程首页样式改版

Browse Source
topic_bank
caicai8 6 years ago
parent 3b76bb8a9c
commit b284b2f650
3 changed files with 154 additions and 30 deletions
Show Stats Download Patch File Download Diff File

43
public/react/src/modules/paths/ShixunPathCard.js
Unescape View File

@ -22,21 +22,21 @@ class ShixunPathCard extends Component{
pathList && pathList.map((item,key)=>{
return(
<div className="square-Item" id={"item_"+key}>
<div className="squareCard" id={"item_"+key}>
{
item.tag_name === null ? "" :
{/* item.tag_name === null ? "" :
<div className="tag-green">
<span className="tag-name">{item.tag_name}</span>
{/*<img src={getImageUrl('images/educoder/tag2.png')}/>*/}
</div>
}
<img src={getImageUrl('images/educoder/tag2.png')}/>
</div> */}
{
item.excellent === false ? "" :
<div className="tag-orange">
<span className="tag-name">开放课程</span>
<div className="tag_open">
<span className="tag_open_name">开放课程</span>
</div>
}
@ -45,28 +45,29 @@ class ShixunPathCard extends Component{
className="mt80 mb25"/>
<p className="font-14 color-white">非试用内容，需要授权</p>
</div>
<Link to={"/paths/"+item.id} className="square-img" >
<Link to={"/paths/"+item.id} className="squareImg" >
{/*target="_blank"*/}
<img alt="详情图片" src={"/"+item.image_url} style={{"display":"block"}}/>
<img alt="详情图片" src={getImageUrl("/"+item.image_url)}/>
</Link>
<div className="square-main">
<p className="task-hide">
<Link to={"/paths/"+item.id} className="justify color-grey-name" >{item.name}</Link>
<div className="mt20" style={{marginLeft:"1px"}}>
<p className="task-hide mb10">
<Link to={"/paths/"+item.id} className="justify cardName">{item.name}</Link>
{/*target="_blank"*/}
</p>
<p className="clearfix mt8 font-12 color-grey-B4">
<p className="clearfix squareInfo">
<Tooltip placement="bottom" title={"章节"}>
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-shixun fl mr3"></i>{item.stages_count}</span>
</Tooltip>
{/* <Tooltip placement="bottom" title={"章节"}> */}
{/* <i className="iconfont icon-shixun fl mr3"></i> */}
<span className="fl pr squareLine mr20">章节: {item.stages_count}</span>
{/* </Tooltip> */}
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{item.shixuns_count}</span>*/}
{/*</Tooltip>*/}
<Tooltip placement="bottom" title={"学习人数"}>
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{item.members_count}</span>
</Tooltip>
{/* <Tooltip placement="bottom" title={"学习人数"}> */}
{/* <i className="iconfont icon-chengyuan fl mr3"></i> */}
<span className="fl">学习人数: {item.members_count}</span>
{/* </Tooltip> */}
</p>
</div>
</div>

19
public/react/src/modules/paths/ShixunPathSearch.js
Unescape View File

@ -7,8 +7,8 @@ import Pagination from '@icedesign/base/lib/pagination';
import '@icedesign/base/lib/pagination/style.js';
import './ShixunPaths.css';
import path from '../../images/path/path.png';
const Search = Input.Search;
class ShixunPathSearch extends Component{
constructor(props) {
@ -122,9 +122,12 @@ class ShixunPathSearch extends Component{
{this.state.updata===undefined?"":<UpgradeModals
{...this.state}
/>}
<div className="path-head pr">
<div className="edu-txt-center pathNavLine">
<div className="inline path-nav">
<div className="pr">
<div className="pathImg">
<img src={path} width="100%"/>
</div>
<div className="edu-back-white padding20 pathIndexNav">
<ul className="educontent clearfix">
<li className={select > 0 ? "" : "active"}><a onClick={()=>this.changeSelect(null)}>全部</a></li>
{
sortList && sortList.map((item,key)=>{
@ -133,14 +136,14 @@ class ShixunPathSearch extends Component{
)
})
}
</ul>
</div>
</div>
</div>
<div className="mt20 educontent mb20 clearfix">
<div className="mt20 educontent mb20 clearfix mainPageArray">
{/*<a href="javascript:void(0)" className={ order == "publish_time" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("publish_time")}>全部</a>*/}
{/*<a href="javascript:void(0)" className={ order == "mine" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("mine")}>我的</a>*/}
<span className={ order == "updated_at" ? "fl mr20 font-16 bestChoose active pointer" : "fl mr20 font-16 bestChoose pointer"} onClick={ () => this.changeStatus("updated_at")}>最新</span>
<span className={ order == "myshixun_count" ? "fl mr20 font-16 bestChoose active pointer" : "fl mr20 font-16 bestChoose pointer"} onClick={ () => this.changeStatus("myshixun_count")}>最热</span>
<span className={ order == "updated_at" ? "active" : ""} onClick={ () => this.changeStatus("updated_at")}>最新</span>
<span className={ order == "myshixun_count" ? "active" : ""} onClick={ () => this.changeStatus("myshixun_count")}>最热</span>
{/*<div className="fr mr5 search-new">*/}
{/*/!* <Search*/}
{/*placeholder="请输入路径名称进行搜索"*/}

120
public/react/src/modules/paths/ShixunPaths.css
Unescape View File

@ -1,3 +1,123 @@
.pathImg{
background: #4CACFF
}
.pathIndexNav{
box-shadow:0px 4px 8px 0px rgba(0,0,0,0.04);
}
.pathIndexNav ul li{
float: left;
margin-right: 10px;
}
.pathIndexNav ul li a{
display: block;
font-size: 15px;
color: #333333;
padding:0px 20px;
border-radius:18px;
height: 32px;
line-height: 32px;
margin:5px 0px;
}
.pathIndexNav ul li.active a{
background: #DDECF9;
color: #4CACFF
}
/* 首页-最新最热 */
.mainPageArray span{
font-size: 14px;
float: left;
background: #EBEBEB;
padding: 0px 16px;
height: 30px;
line-height: 30px;
color: #666666;
margin-right: 20px;
cursor: pointer;
border-radius: 15px;
}
.mainPageArray span.active{
background: #4CACFF;
color: #fff;
}
/* path-card */
.squareCard{
position: relative;
width: 280px;
margin-right: 26px;
margin-bottom: 40px;
float: left;
border-radius: 6px;
}
.squareCard:nth-child(4n){
margin-right: 0px;
}
.squareCard .squareImg{
height: 175px;
width: 280px;
overflow: hidden;
display: block;
border-radius: 6px;
}
.squareCard .squareImg img{
transition: all 0.6s;
-webkit-transition: all 0.6s;
-o-transition: all 0.6s;
width: 100%;
}
.squareCard .squareImg img:hover{
transform: scale(1.2);
}
/* card info */
.cardName{
font-size: 16px;
font-weight: 600;
height: 20px;
line-height: 20px;
margin-bottom: 10px;
}
.squareLine:after{
position: absolute;
width: 1px;
height: 10px;
background: #adadad;
content: '';
right: -10px;
top:4px;
}
.squareInfo{
color: #777;
font-size: 12px;
font-weight: 400;
height: 18px;
line-height: 18px;
}
/* tag-开放课程 */
.tag_open {
position: absolute;
left: 0px;
top: 12px;
z-index: 1;
}
.tag_open .tag_open_name {
display: block;
width: auto;
background-color: #FF6800;
background-size: 100% 100%;
padding: 0px 8px;
color: #fff;
display: block;
height: 28px;
line-height: 28px;
border-radius: 0px 15px 15px 0px;
}
.paragraph:hover .status_li a{
display: block;
}

Write Preview
Loading…
Cancel
Save