Merge pull request '红山开源的公告页面再改版' (#10) from durian/forgeplus-react:hotfix-hot-xiesi into hotfix-tab

This commit is contained in:
tongChong 2021-09-09 09:46:10 +08:00
commit 19d09c7901
4 changed files with 119 additions and 105 deletions

View File

@ -276,12 +276,14 @@ class Index extends Component {
<div className="ProjectListIndex">
<div className="list-left">
<ul className="list-l-Menu">
<li className="MenuTitle"><i className="iconfont icon-bianchengyuyan color-grey-9 font-15 mr5"></i>
语言</li>
<li className="MenuTitle" onClick={() => {this.getType();this.getListData(1,this.state.search, this.state.sort,this.state.category_id);}}>
<span><i className="iconfont icon-bianchengyuyan color-grey-9 font-15 mr5"></i>
语言</span></li>
<div className="list-affix">{typeList}</div>
</ul>
<ul className="list-l-Menu">
<li className="MenuTitle"><i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i></li>
<li className="MenuTitle" onClick={() => {this.getCategory();this.getListData(1,this.state.search, this.state.sort,undefined , this.state.languageId)}}>
<span><i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i></span></li>
<div className="list-affix">{categoryList}</div>
</ul>
</div>

View File

@ -168,7 +168,7 @@ form{
background-color: #fff;
.list-affix{
min-height: 20px;
max-height: 180px;
max-height: 240px;
overflow-y: auto;
}
& li{
@ -210,7 +210,7 @@ form{
width: 6px;
content: '';
height: 33px;
background: #4CACFF;
background: #1484EF;
}
.MenuTitle{
font-size: 16px;
@ -220,6 +220,21 @@ form{
line-height: 62px;
border-bottom: 1px solid #E0E0E0;
font-weight: 400;
span{
display: block;
width: 50%;
height: 100%;
cursor: pointer;
}
span:hover{
color: #1484EF;
.iconfont{
color: #1484EF !important;
}
}
}
.ant-menu-inline{
border:none;

View File

@ -1,21 +1,14 @@
import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { Menu, Pagination, Icon, Input } from 'antd';
import { Link } from "react-router-dom";
import { Pagination, Icon, Input } from 'antd';
import ItemList from '../components/itemList';
import Nodata from '../../../forge/Nodata';
import Loading from "../../../Loading";
// import { AbandonSvg, AllSvg, ChangeSvg, CallSvg, CheckSvg } from '../svg';
import noticePng from '../image/banner.png';
import { getNoticeList } from '../api';
import './index.scss';
const Search = Input.Search;
// const { SubMenu } = Menu;
// const defaultColor = '#848684';
// const activeColor = '#ffffff';
// const svgColor = '#1890ff';
export default (props) => {
@ -101,6 +94,7 @@ export default (props) => {
function sortNav() {
return <div className="notice-sort-nav">
<Search
size="large"
maxLength={20}
style={{ width: "56%" }}
placeholder="输入标题关键字不能超过20字符"
@ -114,27 +108,6 @@ export default (props) => {
</div>
}
// function onOpenChange(e) {
// if(e.length===2){
// if(e[1]==='sub1'){
// setTab('0');
// }else{
// setTab('7');
// }
// }else{
// if(e[0]==='sub1'){
// setTab('0');
// } else if (e[0] == 'sub2') {
// setTab('7');
// } else {
// setTab('8');
// }
// }
// setCurPage(1);
// setTitle('');
// setOrderBy('publishDateDesc');
// }
function handleClick(e) {
setTab(e.key);
setCurPage(1);
@ -142,6 +115,15 @@ export default (props) => {
setOrderBy('publishDateDesc');
}
function click(e){
console.log("aa");
console.log(e);
setTab(e);
setCurPage(1);
setTitle('');
setOrderBy('publishDateDesc');
}
function cont(param, titleStr, key, svgStr) {
return <React.Fragment>
<div className="item-head-title">
@ -252,33 +234,24 @@ export default (props) => {
<React.Fragment>
<img alt="图片加载失败" src={noticePng} width="100%"></img>
<div className="centerbox notice-list clearfix">
<div className="head-navigation">
{/* <div className="head-navigation">
<Link to="/">首页<span className="greater">&nbsp;&gt;&nbsp;</span></Link>
<span>公告</span>
</div>
</div> */}
<div className="body">
<div className="navigationMenu">
<Menu
onClick={handleClick}
// style={{width: 216 }}
mode="inline"
// onOpenChange={onOpenChange}
// defaultSelectedKeys={['4']}
// defaultOpenKeys={['sub1']}
>
<Menu.Item key="0" id={tab === '0' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-xiangmugonggao"></i>项目公告</span></Menu.Item>
{/* <SubMenu id={tab === '0' ? "menu-selected" : "menu"} key="sub1" title={<span className="itemClass"><i className="iconfont icon-xiangmugonggao"></i><span className="subMenuspan">项目公告</span></span>} > */}
<Menu.Item key="4" id={tab === '4' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-zhaobiaogonggao" style={{ marginLeft: '1.2em' }}></i>招标公告</span></Menu.Item>
<Menu.Item key="1" id={tab === '1' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-gengzhenggonggao" style={{ marginLeft: '1.2em' }}></i>更正公告</span></Menu.Item>
<Menu.Item key="2" id={tab === '2' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-zhongbiaogonggao" style={{ marginLeft: '1.2em' }}></i>中标公告</span></Menu.Item>
<Menu.Item key="3" id={tab === '3' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-feibiaogonggao" style={{ marginLeft: '1.2em' }}></i>废标公告</span></Menu.Item>
{/* </SubMenu> */}
<Menu.Item key="7" id={tab === '7' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-chengguo"></i>成果转化</span></Menu.Item>
{/* <SubMenu id={tab === '7' ? "menu-selected" : "menu"} key="sub2" title={<span className="itemClass"><i className="iconfont icon-chengguo"></i><span className="subMenuspan">成果转化</span></span>}> */}
<Menu.Item key="5" id={tab === '5' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-jishuzichan" style={{ marginLeft: '1.2em' }}></i>技术资产</span></Menu.Item>
<Menu.Item key="6" id={tab === '6' ? "menu-selected" : "menu"}><span className="itemClass"><i className="iconfont icon-chengjiaogonggao" style={{ marginLeft: '1.2em' }}></i>成交公告</span></Menu.Item>
{/* </SubMenu> */}
</Menu>
<ul className="menu-ul">
<li className="MenuTitle" onClick={()=>click('0')}><span><i className="iconfont icon-xiangmugonggao"></i>项目公告</span></li>
<li className={tab === '4' ? "active" : ""} onClick={()=>click('4')}><span>招标公告</span></li>
<li className={tab === '1' ? "active" : ""} onClick={()=>click('1')}><span>更正公告</span></li>
<li className={tab === '2' ? "active" : ""} onClick={()=>click('2')}><span>中标公告</span></li>
<li className={tab === '3' ? "active" : ""} onClick={()=>click('3')}><span>废标公告</span></li>
</ul>
<ul className="menu-ul">
<li className="MenuTitle" onClick={()=>click('7')}><span><i className="iconfont icon-chengguo"></i>成果转化</span></li>
<li className={tab === '5' ? "active" : ""} onClick={()=>click('5')}><span>技术资产</span></li>
<li className={tab === '6' ? "active" : ""} onClick={()=>click('6')}><span>成交公告</span></li>
</ul>
</div>
<div className="notice-center-content">
{sortNav()}

View File

@ -39,8 +39,11 @@
.notice-sort-nav{
display: flex;
justify-content: space-between;
padding: .625rem 1rem .5rem;
background: #f5f5f5;
padding: .3rem 2rem 1.5rem;
margin: 0px -1.25rem;
// border: 1px solid;
border-bottom: 1px solid #E0E0E0;
// background: #f5f5f5;
}
.notice-center-content{
@ -68,7 +71,6 @@
}
}
.ant-input-group-addon{
border: 0 !important;
}
@ -100,10 +102,11 @@
.body{
display: flex;
justify-content: space-between;
margin-top: -20px;
.navigationMenu{
margin-right: 24px;
width: 15.4em;
margin-right: 20px;
width: 20.8em;
caret-color: rgba(0, 0, 0, 0);
}
@ -112,50 +115,71 @@
}
}
#menu-selected{
background-color: #1890FF;
color: #fff;
.subMenuspan{
color: #fff;
.menu-ul{
background-color: white;
margin-bottom: 12px;
border-radius:2px;
.MenuTitle{
border-bottom: 1px solid #E0E0E0;
span{
display: block;
width: 50%;
height: 100%;
cursor: pointer;
border-bottom: 0px solid;
i{
color: #afaaae;
}
}
span:hover{
color: #1484EF;
.iconfont{
color: #1484EF !important;
}
}
}
li{
padding:0px 0px 0px 20px;
position: relative;
height: 62px;
line-height: 62px;
font-size: 16px;
color: #333;
span{
display: block;
height: 62px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
&:last-child > span{
border-bottom: none;
}
}
li:hover{
background: #fafafa;
}
.active::before{
position: absolute;
left: 0px;
top: 15px;
width: 6px;
content: '';
height: 30px;
background: #1484EF;
}
& i{
margin-right: 5px;
}
}
// #menu-selected>div>.itemClass>.iconfont{
// color: #fff;
// }
#menu-selected>.itemClass>.iconfont{
color: #fff;
}
#menu-selected .ant-menu-submenu-arrow::after,#menu-selected .ant-menu-submenu-arrow::before,#menu-selected .ant-menu-submenu-arrow:after,#menu-selected .ant-menu-submenu-arrow:before{
background: #fff;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
background-color: #fff;
color: #595959;
}
.ant-menu-item-active{
color: #1890FF;
}
.ant-menu-submenu-selected{
color: #595959;
}
.itemClass{
display: flex;
align-items: center;
font-size: 18px;
.iconfont{
margin-right:.75em;
color: #1890FF;
}
}
.ant-menu-vertical .ant-menu-item, .ant-menu-vertical-left .ant-menu-item, .ant-menu-vertical-right .ant-menu-item, .ant-menu-inline .ant-menu-item, .ant-menu-vertical .ant-menu-submenu-title, .ant-menu-vertical-left .ant-menu-submenu-title, .ant-menu-vertical-right .ant-menu-submenu-title, .ant-menu-inline .ant-menu-submenu-title{
margin-top: 0px;
margin-bottom: 0px;
.ant-input-group-addon .ant-btn-lg {
height: 40px;
}