实训课程首页样式改版

public/react/src/modules/paths/ShixunPathCard.js

@@ -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')}/>*/}
+                            <img src={getImageUrl('images/educoder/tag2.png')}/>
-                          </div>
+                          </div> */}
-                      }
+                      
 
 
 											{
 												item.excellent === false ? "" :
-													<div className="tag-orange">
+													<div className="tag_open">
-														<span className="tag-name">开放课程</span>
+														<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">
+                      <div className="mt20" style={{marginLeft:"1px"}}>
-                        <p className="task-hide">
+                        <p className="task-hide mb10">
-                          <Link to={"/paths/"+item.id}  className="justify color-grey-name" >{item.name}</Link>
+                          <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={"章节"}>
+                          {/* <Tooltip placement="bottom" title={"章节"}> */}
-                              <span className="mr10 fl squareIconSpan"><i className="iconfont icon-shixun fl mr3"></i>{item.stages_count}</span>
+                            {/* <i className="iconfont icon-shixun fl mr3"></i> */}
-                          </Tooltip>
+                            <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={"学习人数"}> */}
-                          <Tooltip placement="bottom" title={"学习人数"}>
+                            {/* <i className="iconfont icon-chengyuan fl mr3"></i> */}
-                              <span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{item.members_count}</span>
+                            <span className="fl">学习人数: {item.members_count}</span>
-                          </Tooltip>
+                          {/* </Tooltip> */}
                         </p>
                       </div>
                     </div>

public/react/src/modules/paths/ShixunPathSearch.js

@@ -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="pr">
-            <div className="edu-txt-center pathNavLine">
+            <div className="pathImg">
-              <div className="inline path-nav">
+              <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,18 +136,18 @@ class ShixunPathSearch extends Component{
                       )
                     })
                   }
-              </div>
+              </ul>
             </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 == "updated_at" ? "active" : ""} 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 == "myshixun_count" ? "active" : ""} onClick={ () => this.changeStatus("myshixun_count")}>最热</span>
             {/*<div className="fr mr5 search-new">*/}
               {/*/!* <Search*/}
               {/*placeholder="请输入路径名称进行搜索"*/}
-              {/*id="subject_search_input"*/}
+              {/*id="subject_search_input"*/} 
               {/*value={search}*/}
               {/*onInput={this.inputSearchValue}*/}
               {/*onSearch={this.searchValue}*/}

public/react/src/modules/paths/ShixunPaths.css

@@ -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;
 }