forked from Gitlink/forgeplus-react
This commit is contained in:
parent
d86b07ae4a
commit
087d089705
12
src/App.js
12
src/App.js
|
|
@ -55,7 +55,10 @@ const Shixunnopage = Loadable({
|
|||
loader: () => import('./modules/404/Shixunnopage'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
const Projects =Loadable({
|
||||
loader: () => import('./mulan/Projects/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
//500页面
|
||||
const http500 = Loadable({
|
||||
loader: () => import('./modules/500/http500'),
|
||||
|
|
@ -204,6 +207,13 @@ class App extends Component {
|
|||
<Route path="/500" component={http500} />
|
||||
<Route path="/nopage" component={Shixunnopage} />
|
||||
|
||||
<Route path="/projects"
|
||||
render={
|
||||
(props) => (
|
||||
<Projects {...this.props} {...props} {...this.state}></Projects>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Route path="/license"
|
||||
render={
|
||||
(props) => (
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Nav from './Nav';
|
|||
function HomeHeader(props){
|
||||
return(
|
||||
<div className="homeHeader">
|
||||
|
||||
<Nav />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export function HomeHoc(Sub){
|
|||
return(
|
||||
<div style={{height:"100%",overflow:"auto"}}>
|
||||
<Header {...this.props} {...this.state}/>
|
||||
<div className="homebody"><Sub {...this.props} {...this.state}/></div>
|
||||
<div className="homebody" style={{paddingTop:"0px"}}><Sub {...this.props} {...this.state}/></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
line-height: 60px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
.homeHeader{
|
||||
position: fixed;
|
||||
|
|
@ -15,6 +16,18 @@
|
|||
top:0px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
z-index: 100;
|
||||
box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
|
||||
background: #312b2b;
|
||||
|
||||
ul{
|
||||
li{
|
||||
a{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.headDiv{
|
||||
width:1200px;
|
||||
|
|
@ -22,8 +35,9 @@
|
|||
.headerNav{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-bottom: 0px;
|
||||
li{
|
||||
padding:0px 18px;
|
||||
padding-right:30px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import logo from '../images/logo.png';
|
||||
function Nav(props){
|
||||
return(
|
||||
<div className="headDiv">
|
||||
<ul className="headerNav">
|
||||
<li><img src={logo} alt="" width="110px"/></li>
|
||||
<li><Link to={`/`}>首页</Link></li>
|
||||
<li><Link to={`/projects`}>开源软件</Link></li>
|
||||
<li><Link to={`/license/preface`}>开源许可证</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,178 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { HomeHoc } from './HOC/HomeHoc';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Index.scss';
|
||||
import logo1 from './images/coscl.jpg';
|
||||
import logo2 from './images/openeuler.jpg';
|
||||
import logo3 from './images/opengcc.jpg';
|
||||
import logo4 from './images/openlooKeng.png';
|
||||
import icon1 from './images/icon1.png';
|
||||
import icon2 from './images/icon2.png';
|
||||
import active1 from './images/active1.jpg';
|
||||
import active2 from './images/active2.png';
|
||||
import DefaultImg from './images/default.png';
|
||||
|
||||
function Index(props){
|
||||
return(
|
||||
<div>dsfdsdf首页</div>
|
||||
<div>
|
||||
<div className="homebase">
|
||||
<div className="baseinfo">
|
||||
<p>木兰开源社区</p>
|
||||
<p className="sub"><span>开放</span><span>共享</span>打造开源生态</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="homeproject">
|
||||
<div class="tit">开源软件推荐<em></em></div>
|
||||
<ul>
|
||||
<li>
|
||||
<div className="p_head">
|
||||
<p className="p_name task-hide-2">Labeled Risc-V</p>
|
||||
<img src={DefaultImg} alt="" height="50px"/>
|
||||
</div>
|
||||
<p className="p_author">中科院计算所</p>
|
||||
<p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="p_head">
|
||||
<p className="p_name task-hide-2">Labeled Risc-V</p>
|
||||
<img src={DefaultImg} alt="" height="50px"/>
|
||||
</div>
|
||||
<p className="p_author">中科院计算所</p>
|
||||
<p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="p_head">
|
||||
<p className="p_name task-hide-2">Labeled Risc-V</p>
|
||||
<img src={DefaultImg} alt="" height="50px"/>
|
||||
</div>
|
||||
<p className="p_author">中科院计算所</p>
|
||||
<p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="p_head">
|
||||
<p className="p_name task-hide-2">Labeled Risc-V</p>
|
||||
<img src={DefaultImg} alt="" height="50px"/>
|
||||
</div>
|
||||
<p className="p_author">中科院计算所</p>
|
||||
<p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="p_head">
|
||||
<p className="p_name task-hide-2">Labeled Risc-V</p>
|
||||
<img src={DefaultImg} alt="" height="50px"/>
|
||||
</div>
|
||||
<p className="p_author">中科院计算所</p>
|
||||
<p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="p_head">
|
||||
<p className="p_name task-hide-2">Labeled Risc-V</p>
|
||||
<img src={DefaultImg} alt="" height="50px"/>
|
||||
</div>
|
||||
<p className="p_author">中科院计算所</p>
|
||||
<p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="p_head">
|
||||
<p className="p_name task-hide-2">Labeled Risc-V</p>
|
||||
<img src={DefaultImg} alt="" height="50px"/>
|
||||
</div>
|
||||
<p className="p_author">中科院计算所</p>
|
||||
<p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="p_head">
|
||||
<p className="p_name task-hide-2">Labeled Risc-V</p>
|
||||
<img src={DefaultImg} alt="" height="50px"/>
|
||||
</div>
|
||||
<p className="p_author">中科院计算所</p>
|
||||
<p className="p_desc task-hide-2">基于精简指令集（RISC）原则的开源指令集架构，用于允许任何人设计、制造和销售RISC-V芯片和软件。</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="homeFirst">
|
||||
<div className="firstPanel">
|
||||
<div className="firstPanelBox">
|
||||
<div class="tit">关于我们<em></em></div>
|
||||
<div className="desc">
|
||||
木兰开源社区建立于2019年8月，是国家重点研发计划重点专项“云计算和大数据开源社区生态系统”的重要成果之一。旨在促进开源领域的交流，建立科教界和产业界开源交流互动平台，加强企业和行业用户之间的沟通，推进企业和个人开发者利用开源软件不断提升技术水平。从开源学习到商业代码托管，您可以从众多的开源开发项目中进行开发学习、主持和审查代码、管理项目和构建软件。
|
||||
</div>
|
||||
<ul className="aboutul">
|
||||
<li>
|
||||
<img src={icon1} alt="" width="84px"/>
|
||||
<span>918</span>
|
||||
<font>开源项目总数</font>
|
||||
</li>
|
||||
<li>
|
||||
<img src={icon2} alt="" width="84px"/>
|
||||
<span>10</span>
|
||||
<font>科技项目开源成果</font>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sourceAbout">
|
||||
<div class="tit">开源活动<em></em></div>
|
||||
<div className="sourceactive">
|
||||
<li style={{backgroundImage:`url(${active1})`}}></li>
|
||||
<li style={{backgroundImage:`url(${active2})`}}></li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={"homenews"}>
|
||||
<div class="tit">开源资讯<em></em></div>
|
||||
<div>
|
||||
<ul className="newsul">
|
||||
<li>
|
||||
<img src="" alt="" width="145px" height="96px"/>
|
||||
<div className="news-info">
|
||||
<p className="news-title"><Link to={""} target="_blank">官方宣布 Perl 7 计划</Link></p>
|
||||
<div className="news-desc task-hide-2">Perl 官方宣布了 Perl 7 计划。Perl 7 目前已经在开发中，但是在代码与语法上不会有太大的改变，其本质上是具有现代默认设置的 Perl 5，并为之后进行更大的更改奠定了基础。</div>
|
||||
<div className="news-time">2020/06/25 09:09</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="" alt="" width="145px" height="96px"/>
|
||||
<div className="news-info">
|
||||
<p className="news-title"><Link to={""} target="_blank">官方宣布 Perl 7 计划</Link></p>
|
||||
<div className="news-desc task-hide-2">Perl 官方宣布了 Perl 7 计划。Perl 7 目前已经在开发中，但是在代码与语法上不会有太大的改变，其本质上是具有现代默认设置的 Perl 5，并为之后进行更大的更改奠定了基础。</div>
|
||||
<div className="news-time">2020/06/25 09:09</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="" alt="" width="145px" height="96px"/>
|
||||
<div className="news-info">
|
||||
<p className="news-title"><Link to={""} target="_blank">官方宣布 Perl 7 计划</Link></p>
|
||||
<div className="news-desc task-hide-2">Perl 官方宣布了 Perl 7 计划。Perl 7 目前已经在开发中，但是在代码与语法上不会有太大的改变，其本质上是具有现代默认设置的 Perl 5，并为之后进行更大的更改奠定了基础。</div>
|
||||
<div className="news-time">2020/06/25 09:09</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="homeFooter">
|
||||
<ul className="homeFooterUl homeFooterParter">
|
||||
<li><img src={logo1} alt="" width="200px"/></li>
|
||||
<li><img src={logo2} alt="" width="200px"/></li>
|
||||
<li><img src={logo3} alt="" width="200px"/></li>
|
||||
<li><img src={logo4} alt="" width="200px"/></li>
|
||||
</ul>
|
||||
<ul className="homeFooterUl">
|
||||
<li><Link to={``}>关于我们</Link></li>
|
||||
<li><Link to={``}>帮助中心</Link></li>
|
||||
<li><Link to={``}>合作伙伴</Link></li>
|
||||
<li><Link to={``}>服务协议</Link></li>
|
||||
</ul>
|
||||
<div className="homefooterbase">
|
||||
<span>木兰开源社区版权所有 ©2020 技术支持:长沙智擎科技</span>
|
||||
<a href="http://www.beian.miit.gov.cn/" target="_blank" style={{color:"#666"}}>粤ICP备12009483号</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default HomeHoc(Index);
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
.homeFirst{
|
||||
background:url(./images/bg2.jpg)center center no-repeat;
|
||||
min-height: 450px;
|
||||
position: relative;
|
||||
margin-bottom: 90px;
|
||||
.firstPanel{
|
||||
position: absolute;
|
||||
top:70px;
|
||||
width: 100%;
|
||||
.firstPanelBox{
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: 400px;
|
||||
border-radius: 4px;
|
||||
padding:30px 0px ;
|
||||
background:url(./images/1_1.png) no-repeat;
|
||||
.desc{
|
||||
margin:20px auto 50px;
|
||||
line-height: 22px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
width: 880px;
|
||||
text-indent: 2em;
|
||||
text-align: justify;
|
||||
}
|
||||
.aboutul{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
li{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
span{
|
||||
font-size: 28px;
|
||||
line-height: 42px;
|
||||
font-weight: bold;
|
||||
}
|
||||
font{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeFooter{
|
||||
background: #fff;
|
||||
.homeFooterParter{
|
||||
padding:30px 0px;
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.homeFooterUl{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding:15px;
|
||||
li{
|
||||
padding:0px 40px;
|
||||
a{
|
||||
color: #ccc;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.homefooterbase{
|
||||
height: 38px;
|
||||
background: #333;
|
||||
line-height: 38px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.homebase{
|
||||
position: relative;
|
||||
min-height: 480px;
|
||||
background-image:url(./images/320.jpeg);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
color:#fff;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
p{
|
||||
margin-bottom:20px;
|
||||
text-align: center;
|
||||
}
|
||||
.sub{
|
||||
font-size: 28px;
|
||||
margin:0px;
|
||||
span{
|
||||
margin:0px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeproject{
|
||||
padding:60px 0px;
|
||||
ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
li{
|
||||
width: 22%;
|
||||
margin:0px 1.5%;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
|
||||
margin-bottom: 40px;
|
||||
.p_head{
|
||||
padding:25px 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-image: linear-gradient(#118af3, #8dcaf5);
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.p_author{
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
padding:0px 15px;
|
||||
margin: 0px;
|
||||
}
|
||||
.p_desc{
|
||||
line-height: 18px;
|
||||
color: #666;
|
||||
padding:0px 15px;
|
||||
margin: 10px 0px 18px 0px;
|
||||
}
|
||||
.p_name{
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 0px;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sourceAbout{
|
||||
padding:60px 0px;
|
||||
.sourceactive{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin:40px 0px;
|
||||
li{
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border-radius: 4px;
|
||||
margin:0px 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 22px;
|
||||
color: #444;
|
||||
font-weight: bold;
|
||||
margin-bottom: 45px;
|
||||
text-align: center;
|
||||
em{
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
margin: 18px auto 0;
|
||||
}
|
||||
}
|
||||
.homenews{
|
||||
padding:60px 0px;
|
||||
.newsul{
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
display:flex;
|
||||
width: 48%;
|
||||
margin-right: 2%;
|
||||
margin-bottom: 30px;
|
||||
&:nth-child(2n){
|
||||
margin-right: 0px;
|
||||
flex-flow: row-reverse;
|
||||
img{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n+1){
|
||||
img{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.news-title{
|
||||
font-size: 16px;
|
||||
margin-bottom:5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.news-time{
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.news-desc{
|
||||
line-height: 20px;
|
||||
}
|
||||
.news-info{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import React from 'react';
|
||||
import { HOC } from '../HOC/Index';
|
||||
import {Link} from 'react-router-dom';
|
||||
import Title from '../../forge/Component/Title';
|
||||
import { AlignCenter } from '../../forge/Component/layout';
|
||||
import './Index.scss';
|
||||
import DefaultImg from '../images/default.png';
|
||||
|
||||
function Index(props){
|
||||
return(
|
||||
<div className="panels">
|
||||
<div className="projectsList">
|
||||
<Title>基础类开源软件</Title>
|
||||
<div className="lists">
|
||||
<li>
|
||||
<Link to={``} className="listName">LAMP - Web开发平台</Link>
|
||||
<AlignCenter className="listInfo">
|
||||
<p className="listInfoDesc task-hide-2">LAMP是一个开源 Web开发平台，它使用Linux作为操作系统，使用Apache作为Web服务器，使用MySQL作为关系数据库管理系统，以及使用PHP作为面向对象的脚本语言。（有时使用Perl或Python代替PHP。）</p>
|
||||
<img src={DefaultImg} alt="" width="48px" className="ml10"/>
|
||||
</AlignCenter>
|
||||
<div className="listTag">
|
||||
<span>Go</span>
|
||||
<span>MIT</span>
|
||||
<span>Linux</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={``} className="listName">LAMP - Web开发平台</Link>
|
||||
<AlignCenter className="listInfo">
|
||||
<p className="listInfoDesc task-hide-2">LAMP是一个开源 Web开发平台，它使用Linux作为操作系统，使用Apache作为Web服务器，使用MySQL作为关系数据库管理系统，以及使用PHP作为面向对象的脚本语言。（有时使用Perl或Python代替PHP。）</p>
|
||||
<img src={DefaultImg} alt="" width="48px" className="ml10"/>
|
||||
</AlignCenter>
|
||||
<div className="listTag">
|
||||
<span>Go</span>
|
||||
<span>MIT</span>
|
||||
<span>Linux</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={``} className="listName">LAMP - Web开发平台</Link>
|
||||
<AlignCenter className="listInfo">
|
||||
<p className="listInfoDesc task-hide-2">LAMP是一个开源 Web开发平台，它使用Linux作为操作系统，使用Apache作为Web服务器，使用MySQL作为关系数据库管理系统，以及使用PHP作为面向对象的脚本语言。（有时使用Perl或Python代替PHP。）</p>
|
||||
<img src={DefaultImg} alt="" width="48px" className="ml10"/>
|
||||
</AlignCenter>
|
||||
<div className="listTag">
|
||||
<span>Go</span>
|
||||
<span>MIT</span>
|
||||
<span>Linux</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={``} className="listName">LAMP - Web开发平台</Link>
|
||||
<AlignCenter className="listInfo">
|
||||
<p className="listInfoDesc task-hide-2">LAMP是一个开源 Web开发平台，它使用Linux作为操作系统，使用Apache作为Web服务器，使用MySQL作为关系数据库管理系统，以及使用PHP作为面向对象的脚本语言。（有时使用Perl或Python代替PHP。）</p>
|
||||
<img src={DefaultImg} alt="" width="48px" className="ml10"/>
|
||||
</AlignCenter>
|
||||
<div className="listTag">
|
||||
<span>Go</span>
|
||||
<span>MIT</span>
|
||||
<span>Linux</span>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default HOC(Index);
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
.panels{
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
.projectsList{
|
||||
margin:20px;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
.lists{
|
||||
padding:20px 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
& > li{
|
||||
margin-right: 2%;
|
||||
border: 1px solid #eee;
|
||||
width: 32%;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
min-height: 200px;
|
||||
box-shadow: 0 4px 8px 0 rgba(95,101,105,0.1);
|
||||
&:hover{
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 20px 0 rgba(95,101,105,0.15);
|
||||
}
|
||||
&:nth-child(3){
|
||||
margin-right: 0px;
|
||||
}
|
||||
.listName{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding:10px 20px;
|
||||
height: 90px;
|
||||
background-image: linear-gradient(to right, #118af3, #8dcaf5);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.listInfo{
|
||||
padding:12px 20px 0px 20px;
|
||||
.listInfoDesc{
|
||||
line-height: 20px;
|
||||
margin:0px;
|
||||
color:#999;
|
||||
}
|
||||
}
|
||||
.listTag{
|
||||
padding:10px 20px;
|
||||
span{
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
background-color: #c5c5c5;
|
||||
color: #fff;
|
||||
padding:0px 5px;
|
||||
border-radius: 4px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 824 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Loading…
Reference in New Issue