save

src/App.js

@@ -47,6 +47,10 @@ const ProjectDetail = Loadable({
   loader: () => import("./forge/Main/DetailAdaptor"),
   loading: Loading,
 });
+const Information = Loadable({
+  loader: () => import('./forge/Information/index'),
+  loading: Loading,
+})
 //forge安全设置
 const Security = Loadable({
   loader: () => import('./forge/SecuritySetting/Index'),
@@ -156,7 +160,7 @@ const Topic = Loadable({
 })
 
 // 此处仅维护前端可能的一级路由，不用进行项目或者组织判断的字段。
-const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize", "login", "register", "resetPassword", "aboutus","educoder", "glcc","bindlogin", "softbot"];
+const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize", "login", "register", "resetPassword", "aboutus","educoder", "glcc","bindlogin", "softbot","information"];
 
 class App extends Component {
   constructor(props) {
@@ -376,6 +380,14 @@ class App extends Component {
                   <ConfigurateBot {...this.props} {...p}/>
                 )}
               ></Route>
+              <Route
+                path={"/information"}
+                render={
+                  (props) => {
+                    return (<Information {...this.props} {...props} {...this.state} />)
+                  }
+                }>
+              </Route>
               <Route
                 path={"/settings"}
                 render={

src/forge/Information/Component/defaultImg.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+
+function DefaultImg({name,title}){
+
+  function randomNumberInRange(min, max) {
+    // ?️ 获取 min（含）和 max（含）之间的数字
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  return(
+    <div className="defaultBox">
+      <img src={require(`../img/back${randomNumberInRange(1,3)}.png`).default} alt="" className="back" />
+      <img src={require(`../img/color${randomNumberInRange(1,4)}.png`).default} alt="" className="color" />
+      <span className="d_name">
+        <span>{name}</span>
+        <span>{title}</span>
+      </span>
+    </div>
+  )
+}
+export default DefaultImg;

src/forge/Information/Component/hot.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+function Hot({list , title}){
+  return(
+    <div>
+      <p className="hot_title">{title}</p>
+      {
+        list && list.length>0 &&
+        <ul>
+          {
+            list.map((i,k)=>{
+              return(
+                <li>
+                  <span style={{opacity:k<3 ? `${1-((k+1)/10)}` :"0.3"}}>{k+1}</span>
+                  <a href="">{i.name}</a>
+                </li>
+              )
+            })
+          }
+        </ul>
+      }
+    </div>
+  )
+}
+export default Hot;

src/forge/Information/Component/publicBanner.jsx

@@ -0,0 +1,49 @@
+import React , { useState , useEffect } from 'react';
+import { Menu } from 'antd';
+import Menu1 from '../img/menu1.png';
+import Menu2 from '../img/menu2.png';
+import Menu3 from '../img/menu3.png';
+import Menu4 from '../img/menu4.png';
+import Menu5 from '../img/menu5.png';
+import { Link } from 'react-router-dom';
+
+
+
+function PublicBanner(props){
+  const [ key , setKey ] = useState("1");
+  const { pathname } = props.history.location;
+
+  useEffect(()=>{
+    if(pathname){
+      const info = /\/information\/[0-9]{0,}\/news/g;
+      if(pathname === '/information'){
+        setKey("1");
+      }
+      if(pathname === '/information/projects'){
+        setKey("2");
+      }
+      if(info.test(pathname)){
+        setKey("4");
+      }
+    }
+  },[pathname])
+
+  return(
+    <div className="in_banner">
+      <div>
+        <p className="main_t">主标题文案内容占一行</p>
+        <p className="sub_t">专区副标题文案内容专区副标题文案内容专区副标题文案内容专区副标题文案内容专区副标题文案内容专区副标题文案内容专区副标题文案内容</p>
+      </div>
+      <div className="bannerMenus">
+        <Menu mode={"horizontal"} selectedKeys={[key]}>
+          <Menu.Item key={"1"}><Link to={`/information`}><img src={Menu1} alt="" width="29px"/>首页</Link></Menu.Item>
+          <Menu.Item key={"2"}><Link to={`/information/projects`}><img src={Menu2} alt="" width="34px"/>开源项目</Link></Menu.Item>
+          <Menu.Item key={"3"}><img src={Menu3} alt="" width="33px"/>资源发布</Menu.Item>
+          <Menu.Item key={"4"}><Link to={`/information/113/news`}><img src={Menu4} alt="" width="32px"/>领域资讯</Link></Menu.Item>
+          <Menu.Item key={"5"}><img src={Menu5} alt="" width="27px"/>Sig小组</Menu.Item>
+        </Menu>
+      </div>
+    </div>
+  )
+}
+export default PublicBanner;

src/forge/Information/Pages/main.jsx

@@ -0,0 +1,130 @@
+import React , { useState , useEffect } from 'react';
+import Banner from '../Component/publicBanner';
+import { Menu } from 'antd';
+import Hot from '../Component/hot';
+import { Box , LongWidth  } from '../../Component/layout';
+import { Link } from 'react-router-dom';
+import guideArrow from '../img/guideArrow.png';
+import axios from 'axios';
+import shijian from '../img/shijian.png';
+import liulan from '../img/liulan.png';
+import emptydata from '../../Images/nodata.png';
+import DefaultImg from '../Component/defaultImg';
+
+
+function Main(props){
+  const [ key , setKey ] = useState("1");
+  const [ mainList , setMainList ] = useState(undefined);
+  const [ hotList , setHotList ] = useState(undefined);
+  const { deptId } = props.match.params;
+
+
+  useEffect(()=>{
+    if(deptId) {
+      getMainList();
+      getHotList();
+    }
+  },[deptId])
+
+  function getMainList(){
+    const url = `/cms/doc/open/dept/${deptId}/docOverviewList`;
+    axios.get(url).then(result=>{
+      if(result){
+        setMainList(result.data.rows);
+      }
+    }).catch(error=>{})
+  }
+
+  function getHotList(){
+    const url = `/cms/doc/open/dept/${deptId}/hotDocList`;
+    axios.get(url,{
+      params:{pageSize:15,pageNum:1}
+    }).then(result=>{
+      if(result){
+        setHotList(result.data.rows);
+      }
+    }).catch(error=>{})
+  }
+
+  function clickTab(k,idName){
+    setKey(k);
+  }
+
+  return(
+    <div>
+      <Banner {...props}/>
+      <div className="main_content">
+        <p className="in_title">领域资讯</p>
+        {
+          mainList && mainList.length>0 &&
+          <Menu mode={"horizontal"} selectedKeys={[key]}>
+            {
+              mainList.map((i,k)=>{
+                return(
+                  <Menu.Item key={`${k+1}`} onClick={()=>clickTab(`${k+1}`,`main_card_item_${k+1}`)}><a href={`/information/${deptId}/news#main_card_item_${k+1}`}>{i.name}</a></Menu.Item>
+                )
+              })
+            }
+          </Menu>
+        }
+        <div style={{width:'1200px',margin:"0px auto"}}>
+          <Box>
+            <LongWidth>
+              {
+                mainList && mainList.length>0 &&
+                mainList.map((i,k)=>{
+                  return(
+                    <div className="main_card radius4" id={`main_card_item_${k+1}`}>
+                      <div className="guide">
+                        <span>{i.name}</span>
+                        <Link to={`/information/${deptId}/news/${i.id}`}>更多<img src={guideArrow} alt="" width="14px"/></Link>
+                      </div>
+                      <div>
+                        {
+                          i.cmsDocList && i.cmsDocList.length>0 ? 
+                          i.cmsDocList.map((j,e)=>{
+                            return(
+                              <div className="main_card_item">
+                                {e===0 && 
+                                  (
+                                    i.headImg ?
+                                    <img src={i.headImg} alt=""/>
+                                    :
+                                    <DefaultImg name="GitLink" title="栏目一" />
+                                  )
+                                }
+                                <div style={{flex:1,width:0}}>
+                                  <Link to={`/information/${deptId}/news/${i.id}/${j.id}`} className={`sub_name ${e===0? "":"sub_i"}`}>{j.name}</Link>
+                                  <p className={`sub_desc ${e===0? "task-hide-2":"task-hide"}`}>
+                                  {j.summary}
+                                  </p>
+                                  <div className="sub_info">
+                                    <span><img src={shijian} alt="" />{j.publishTime}</span>
+                                    <span><img src={liulan} alt="" />{j.visits}</span>
+                                  </div>
+                                </div>
+                              </div>
+                            )
+                          })
+                          :
+                          <div style={{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",height:300}}>
+                            <img src={emptydata} alt="" width="230"/>
+                            <p className="font-15 color-grey-6 mt20">暂无数据~</p>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  )
+                })
+              }
+            </LongWidth>
+            <div className="short_width radius4">
+              <Hot title={"热门领域资讯"} list={hotList}/>
+            </div>
+          </Box>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default Main;

src/forge/Information/Pages/newsDetail.jsx

@@ -0,0 +1,58 @@
+import React,{ useState , useEffect } from 'react';
+import { Breadcrumb , Divider } from 'antd';
+import liulan from '../img/liulan.png';
+import Banner from '../Component/publicBanner';
+import RenderHtml from '../../../components/render-html';
+import { Base64 } from 'js-base64';
+import axios from 'axios';
+
+function NewsDetail(props){
+  const { deptId , cateId , id } = props.match.params;
+  const [ detail , setDetail ] = useState(undefined);
+  const [ cmsDir , setCmsDir ] = useState(undefined);
+
+  useEffect(()=>{
+    if(id){
+      getDetails();
+    }
+  },[id])
+
+  function getDetails(){
+    const url = `/cms/doc/open/${id}`;
+    axios.get(url).then(result=>{
+      if(result){
+        let data = result.data.data;
+        setDetail(data);
+        setCmsDir(data.cmsDir);
+      }
+    }).catch(error=>{})
+  }
+  return(
+    <div className="detail_news_all">
+      <Banner {...props} />
+      {
+        detail && 
+        <div style={{width:'1200px',margin:"0px auto",padding:"30px 0px"}}>
+          <Breadcrumb separator=">">
+            <Breadcrumb.Item href={`/information/${deptId}/news`}>领域资讯</Breadcrumb.Item>
+            { cmsDir && <Breadcrumb.Item href={`/information/${deptId}/news/${cateId}`}>{cmsDir.name}</Breadcrumb.Item> }
+            <Breadcrumb.Item>正文</Breadcrumb.Item>
+          </Breadcrumb>
+          <div className="info_text">
+            <div className="info_text_main">
+              <p className="i_name">{detail.name}</p>
+              <ul className="i_ul_value">
+                { cmsDir && <li>{cmsDir.name}</li> }
+                { cmsDir && <li>发布于{cmsDir.createdAt}</li> }
+                { detail.visits && <li><img src={liulan} alt="" className="mr5" />{detail.visits}</li> }
+              </ul>
+            </div>
+            <Divider dashed={true}	/>
+            <RenderHtml className="informations_detail imageLayerParent" value={Base64.decode(detail.content)} url={props.history.location} />
+          </div>
+        </div>
+      }
+    </div>
+  )
+}
+export default NewsDetail;

src/forge/Information/Pages/newsList.jsx

@@ -0,0 +1,156 @@
+import React , { useEffect , useState } from 'react';
+import PublicBanner from '../Component/publicBanner';
+import { Box , LongWidth  } from '../../Component/layout';
+import { Menu , Breadcrumb , Pagination } from 'antd';
+import Hot from '../Component/hot';
+import axios from 'axios';
+import shijian from '../img/shijian.png';
+import liulan from '../img/liulan.png';
+import DefaultImg from '../Component/defaultImg';
+import emptydata from '../../Images/nodata.png';
+
+function NewsList(props){
+  const { deptId , cateId } = props.match.params;
+  const [ pageNum , setPageNum ] = useState(1);
+  const [ total , setTotal ] = useState(0);
+  const pageSize = 15;
+  const [ columnList , setColumnList ] = useState(undefined);
+  const [ hostList , setHotList ] = useState(undefined);
+  const [ mainList , setMainList ] = useState(undefined);
+  const [ details , setDetails ] = useState(undefined);
+
+  useEffect(()=>{
+    if(deptId && cateId){
+      getMainList();
+    }
+  },[deptId,cateId,pageNum])
+
+  useEffect(()=>{
+    if(deptId && cateId){
+      getMainList();
+      getHotList();
+      getColumnList();
+      getColumnDetail();
+    }
+  },[deptId,cateId])
+
+  function getColumnDetail(){
+    const url = `/cms/doc/open/dir/${cateId}`;
+    axios.get(url).then(result=>{
+      if(result){
+        setDetails(result.data.data);
+      }
+    }).catch(error=>{})
+  }
+
+  function getColumnList(){
+    const url = `/cms/doc/open/dept/${deptId}/dirList`;
+    axios.get(url).then(result=>{
+      if(result){
+        setColumnList(result.data.rows);
+        setTotal(result.data.total);
+      }
+    }).catch(error=>{})
+  }
+
+  function getMainList(){
+    const url = `/cms/doc/open/dir/${cateId}/docList`;
+    axios.get(url,{
+      params:{
+        pageNum,pageSize
+      }
+    }).then(result=>{
+      if(result){
+        setMainList(result.data.rows);
+      }
+    }).catch(error=>{})
+  }
+
+  function getHotList(){
+    const url = `/cms/doc/open/dir/${cateId}/hotDocList`;
+    axios.get(url,{
+      params:{
+        pageNum:1,pageSize:15
+      }
+    }).then(result=>{
+      if(result){
+        setHotList(result.data.rows);
+      }
+    }).catch(errror=>{})
+  }
+
+  return(
+    <div className="info_news_list">
+      <PublicBanner {...props}/>
+      <div style={{width:'1200px',margin:"0px auto",padding:"30px 0px"}}>
+        <Breadcrumb separator=">">
+          <Breadcrumb.Item href={`/information/${deptId}/news`}>领域资讯</Breadcrumb.Item>
+          <Breadcrumb.Item>{details && details.name}</Breadcrumb.Item>
+        </Breadcrumb>
+        <p className="in_title mb30">{details && details.name}</p>
+        <Box>
+          {
+            columnList && columnList.length>0 && 
+            <div className="column_menu">
+              <Menu >
+                {
+                  columnList.map((i,k)=>{
+                    return(
+                      <Menu.Item key={k}>{i.name}</Menu.Item>
+                    )
+                  })
+                }
+              </Menu>
+            </div>
+          }
+          <div className="column_content">
+            <LongWidth>
+              <div className="main_card">
+                {
+                  mainList && mainList.length>0 ?
+                  mainList.map((i,k)=>{
+                    return(
+                      <div className="main_card_item" key={k}>
+                        {
+                          i.headImg ?
+                          <img src={i.headImg} alt=""/>
+                          :
+                          <DefaultImg name="GitLink" title={details && details.name} />
+                        }
+                        <div style={{flex:1,width:0}}>
+                          <a className={`sub_name`}>{i.name}</a>
+                          <p className={`sub_desc task-hide-2`}>
+                          {i.summary}
+                          </p>
+                          <div className="sub_info">
+                            <span><img src={shijian} alt="" />{i.publishTime}</span>
+                            <span><img src={liulan} alt="" />{i.visits}</span>
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  })
+                  :
+                  <div style={{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",height:500}}>
+                    <img src={emptydata} alt="" width="300"/>
+                    <p className="font-15 color-grey-6 mt20">暂无数据~</p>
+                  </div>
+                }
+                {
+                  total > pageSize &&
+                  <div style={{padding:"0px 25px"}}>
+                    <Pagination current={pageNum} pageSize={pageSize} total={total} showQuickJumper onChange={p=>{setPageNum(p)}}/>
+                  </div>
+                }
+              </div>
+            </LongWidth>
+            <div className="short_width">
+              <Hot title="热门领域资讯" list={hostList} />
+            </div>
+          </div>
+        </Box>
+      </div>
+    </div>
+  )
+}
+export default NewsList;

src/forge/Information/Pages/projectSource.jsx

@@ -0,0 +1,71 @@
+import React , { useEffect , useState } from 'react';
+import Banner from '../Component/publicBanner';
+import { Box , LongWidth  } from '../../Component/layout';
+import { Input , Dropdown , Menu } from 'antd';
+import { Link } from 'react-router-dom';
+const { Search } = Input
+
+function ProjectSource(props){
+  const menu = (
+    <Menu>
+      <Menu.Item>更新时间排序</Menu.Item>
+      <Menu.Item>创建时间排序</Menu.Item>
+      <Menu.Item>fork数量排序</Menu.Item>
+      <Menu.Item>点赞数量排序</Menu.Item>
+    </Menu>
+  )
+  return(
+    <div className="in_pro">
+      <Banner {...props}/>
+      <div className="boxmain" style={{paddingTop:"56px"}}>
+        <p className="in_title">开源项目</p>
+        <Box>
+          <ul className="in_pro_menu">
+            <li className="u_t">项目分类</li>
+            <li className="active">全部分类</li>
+            <li>项目分类</li>
+            <li>项目分类</li>
+          </ul>
+          <LongWidth>
+            <div className="in_list">
+              <div className="in_list_menu">
+                <Search 
+                  size={'large'} 
+                  placeholder="请输入项目名称" 
+                  style={{width:645}}
+                  enterButton={<span><i className="iconfont icon-sousuo5 font-15"/>搜索</span>}
+                />
+                <Dropdown overlay={menu} placement={"bottomRight"}>
+                  <a className="color-blue" style={{display:'flex',alignItems:'center'}}>排序<i className="iconfont icon-sanjiaoxing-down ml5"></i></a>
+                </Dropdown>
+              </div>
+              <div className="in_list_box">
+                <div>
+                  <Link to=""><img src="" alt="" className="author_img"/></Link>
+                  <div style={{flex:"1"}}>
+                    <p className="in_b_main">
+                      <Link to="">GitLink/React-Build</Link>
+                      <ul>
+                        <li><i className="iconfont icon-guanzhuicon mr4"></i>333</li>
+                        <li><i className="iconfont icon-xingzhuang font-15 mr4"></i>22</li>
+                        <li><i className="iconfont icon-morenfuke_icon1 font-16 mr4"></i>31</li>
+                      </ul>
+                    </p>
+                    <div className="in_b_desc task-hide-2">
+                      Gitlink平台，前端编译好的文件，直接将该文件放入后端项目中的public/react/build/目录下即可，如果没有build目录，直接将该入后端项目中的public/react/build/目录下即可，如果没有build目录，直接将该文件放入后端项直接将该文件放入后端
+                    </div>
+                    <ul className="in_b_tag">
+                      <li>html</li>
+                      <li>javascript</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </LongWidth>
+        </Box>
+      </div>
+    </div>
+  )
+}
+export default ProjectSource;

src/forge/Information/index.jsx

@@ -0,0 +1,83 @@
+import React ,{ useEffect } from "react";
+
+import { Route, Switch } from "react-router-dom";
+import { withRouter } from "react-router";
+
+import { SnackbarHOC } from "educoder";
+import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
+import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
+import Loadable from "react-loadable";
+import Loading from "../../Loading";
+import axios from 'axios';
+import { isDev } from 'educoder';
+import './index.scss';
+
+const ProjectSource = Loadable({
+  loader: () => import("./Pages/projectSource"),
+  loading: Loading,
+});
+const NewsDetail = Loadable({
+  loader: () => import("./Pages/newsDetail"),
+  loading: Loading,
+});
+const NewsList = Loadable({
+  loader: () => import("./Pages/newsList"),
+  loading: Loading,
+});
+const Main = Loadable({
+  loader: () => import("./Pages/main"),
+  loading: Loading,
+});
+function Index(props){
+  useEffect(()=>{
+    axios.interceptors.request.use(
+      config => {
+        var localproxy = "https://testgetway.gitlink.org.cn";
+        var proxy = "";
+        let url = "/api" +config.url;
+        if(isDev){
+          url = localproxy + url ;
+        }else{
+          url = proxy + url;
+        }
+        config.url =url;
+        return config;
+      },
+      err => {
+        return Promise.reject(err);
+      }
+    )
+  },[])
+  return(
+    <div className="information_main">
+      <Switch>
+        <Route
+          path="/information/:deptId/news/:cateId/:id"
+          render={(p) => (
+            <NewsDetail {...props} {...p}/>
+          )}
+        ></Route>
+        <Route
+          path="/information/:deptId/news/:cateId"
+          render={(p) => (
+            <NewsList {...props} {...p}/>
+          )}
+        ></Route>
+        <Route
+          path="/information/projects"
+          render={(p) => (
+            <ProjectSource {...props} {...p}/>
+          )}
+        ></Route>
+        <Route
+          path="/information/:deptId/news"
+          render={(p) => (
+            <Main {...props} {...p}/>
+          )}
+        ></Route>
+      </Switch>
+    </div>
+  )
+}
+export default withRouter((CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index))))
+);

src/forge/Information/index.scss

@@ -0,0 +1,492 @@
+.information_main{
+  background-color:#f3f5f8;
+  .ant-breadcrumb{
+    font-size: 15px;
+    margin-bottom: 20px;
+    .ant-breadcrumb-link{
+      color: #466aff;
+    }
+    & > span:last-child .ant-breadcrumb-link{
+      color: rgba(76, 88, 118, 1);
+    }
+  }
+  .in_title{
+    height:44px;
+    line-height:44px;
+    font-weight:500;
+    color:#1f2329;
+    font-size:32px;
+    text-align:center;
+  }
+  .in_banner{
+    background-image: url(./img/mainbanner.png);
+    background-size: 100% 100%;
+    // background-color:linear-gradient(270deg,#262a35 0%,rgba(38, 42, 53, 0.26) 42.94%,#262a35 100%);
+    height: 600px;
+    position: relative;
+    padding-bottom: 88px;
+    &>div{
+      display: flex;
+      width: 1200px;
+      margin: 0px auto;
+      flex-direction: column;
+      justify-content: center;
+      height: 100%;
+      .main_t{
+        color:#78d0f5;
+        font-size:40px;
+        line-height: 40px;
+        height: 40px;
+      }
+      .sub_t{
+        margin-top: 35px;
+        max-width:536px;
+        line-height:40px;
+        color:rgba(225,225,225,0.9);
+        font-size:16px;
+      }
+    }
+    .bannerMenus{
+      position: absolute;
+      width: 100%;
+      bottom: 0px;
+      background-color:rgba(54, 66, 101, .5);
+      height: 88px;
+      .ant-menu{
+        width: 1200px;
+        margin:0px auto;
+        background-color: transparent;
+        height: 100%;
+        font-size: 16px;
+        color: #fff;
+        border-bottom: none!important;
+        li{
+          height: 88px;
+          line-height: 88px;
+          border-bottom: none!important;
+          padding:0px ;
+          margin-right: 100px!important;
+          img{
+            margin-right: 10px;
+          }
+          &.ant-menu-item-selected a,a{
+            color: #fff!important;
+          }
+          &.ant-menu-item-selected::after{
+            content:"";
+            position: absolute;
+            width: 100%;
+            left: 0px;
+            height: 4px;
+            bottom: 1px;
+            background-color: #466aff;
+          }
+        }
+      }
+    }
+  }
+  .main_content{
+    padding: 40px 0px 80px;
+    .ant-menu{
+      height: 40px;
+      line-height: 30px;
+      border:none!important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 30px 0px 35px!important;
+      background-color: transparent;
+      li{
+        border: none!important;
+        font-size: 16px;
+        padding:0px ;
+        margin:0px 28px!important;
+        &.ant-menu-item-selected::after{
+          content:"";
+          position: absolute;
+          width: 100%;
+          left: 0px;
+          height: 2px;
+          bottom: -5px;
+          background-color: #466aff;
+        }
+      }
+    }
+  }
+  .short_width{
+    width: 371px;
+    margin-left: 30px;
+    background-color: #fff;
+    .hot_title{
+      height: 69px;
+      line-height: 69px;
+      border-bottom: 1px solid rgba(170, 175, 190, 0.31);
+      font-weight:700;
+      color:#1f2329;
+      font-size:18px;
+      margin:0px 25px 10px!important;
+    }
+    ul{
+      padding-bottom: 50px;
+      li{
+        display: flex;
+        height: 47px;
+        padding:0px 25px;
+        align-items: center;
+        &:hover{
+          background-color:rgba(243, 245, 248, 1) ;
+        }
+        a{
+          color:#1f2329;
+          font-size:14px;
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        &:hover{
+          color: #466aff;
+        }
+        span{
+          display: block;
+          width:22px;
+          text-align: center;
+          color: #fff;
+          height:22px;
+          line-height:22px;
+          background-color:#466aff;
+          opacity: 0.3;
+          border-radius:2px;
+          margin-right: 7px;
+        }
+      }
+    }
+  }
+  .radius4{
+    border-radius: 4px;
+  }
+  .main_card{
+    background-color: #fff;
+    padding:25px;
+    margin-bottom: 25px;
+    .main_card_item{
+      display: flex;
+      padding:24px 0px;
+      border-bottom: 1px solid rgba(170, 175, 190, 0.15);
+      &:last-child{
+        border-bottom: none;
+      }
+      & >div >img{
+        margin-right: 20px;
+        height: 117px;
+        max-width: 184px;
+        border-radius: 3px;
+      }
+      .sub_desc{
+        line-height: 26px;
+        height: 52px;
+        color: #4c5876;
+        margin-bottom: 8px!important;
+        &.task-hide{
+          height: 26px;
+        }
+      }
+      .sub_info{
+        height: 18px;
+        line-height: 18px;
+        font-size: 13px;
+        color: #8d95ac;
+        span{
+          margin-right: 40px;
+          img{
+            margin-right: 5px;
+          }
+        }
+      }
+      .sub_name{
+        height:25px;
+        color:#1f2329;
+        font-size:18px;
+        margin-bottom: 14px;
+        position: relative;
+        display: block;
+        line-height: 25px;
+        &.sub_i{
+          padding-left: 18px;
+          &::before{
+            content: "";
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            left: 0px;
+            top:7px;
+            border-radius: 50%;
+            background-color: #07a583;
+          }
+        }
+      }
+    }
+  }
+  .guide{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px dashed rgba(70, 106, 255, 0.48);
+    margin-bottom: 5px;
+    span{
+      display: block;
+      width: 113px;
+      height: 30px;
+      line-height: 30px;
+      padding-left: 9px;
+      color: #fff;
+      font-size:17px;
+      background-image: url(./img/guide.png);
+      background-size: 100% 100%;
+    }
+    a{
+      color:#466aff;
+      font-size:14px;
+      img{
+        margin-left: 6px;
+      }
+    }
+  }
+}
+.info_news_list{
+  .column_menu{
+    width: 90px;
+    background-color: #fff;
+    padding:10px 15px;
+    box-sizing: border-box;
+    margin-right: 25px;
+    border-radius: 8px;
+    margin-bottom: 80px;
+    min-height: 420px;
+    .ant-menu{
+      li{
+        padding:0px!important;
+        border:none!important;
+      }
+    }
+  }
+  .column_content{
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    background-color: #fff;
+    padding-right: 29px;
+    .main_card{
+      padding-right: 0px;
+    }
+    .short_width{
+      width: 321px;
+      ul li{
+        padding:0px 0px 0px 8px;
+      }
+    }
+    .hot_title{
+      margin:0px 0px 10px 8px !important;
+    }
+  }
+}
+.defaultBox{
+  position: relative;
+  width: 184px;
+  height: 117px;
+  margin-right: 20px;
+  img{
+    position: absolute;
+    left: 0px;
+    top:0px;
+    height: 100%;
+    &.back{
+      width: 100%;
+      z-index: 1;
+    }
+    &.color{
+      z-index: 2;
+    }
+  }
+  .d_name{
+    position: absolute;
+    z-index: 3;
+    width: 124px;
+    left: 0px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 15px;
+    line-height: 22px;
+    span{
+      display: block;
+      height: 22px;
+      line-height: 22px;
+      margin:3px 0px!important;
+    }
+  }
+}
+.boxmain{
+  width: 1200px;
+  margin:0px auto;
+}
+.detail_news_all{
+  .detail_banners{
+    background-image: url(./img/subbanner.png);
+    background-size: 100% 100%;
+    height: 260px;
+    position: relative;
+    padding-bottom: 88px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    .main_t{
+      height:50px;
+      line-height:50px;
+      font-weight:500;
+      color:#ffffff;
+      font-size:36px;
+      margin-bottom: 30px!important;
+    }
+    .sub_t{
+      height:21px;
+      line-height:21px;
+      color:rgba(255, 255, 255, 0.73);
+      font-size:15px;
+    }
+  }
+  .info_text{
+    background-color: #fff;
+    border-radius: 4px;
+    padding:30px 35px 50px;
+    .info_text_main{
+      .i_name{
+        color:#1f2329;
+        font-size:22px;
+        height: 30px;
+        line-height: 30px;
+        margin-bottom: 14px!important;
+      }
+      .i_ul_value{
+        display: flex;
+        align-items: center;
+        li{
+          color:#4c5876;
+          height: 20px;
+          line-height: 20px;
+          margin-right: 25px;
+        }
+      }
+    }
+  }
+}
+.in_pro{
+  padding-bottom: 80px;
+  .in_list{
+    padding:30px 30px 30px 35px;
+    background-color: #fff;
+    margin-top: 42px;
+    .in_list_menu{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 5px;
+    }
+    .in_list_box{
+      &>div{
+        display: flex;
+        align-items: flex-start;
+        padding:20px 0px;
+        .author_img{
+          width: 66px;
+          height: 66px;
+          border-radius: 10px;
+          margin-right: 20px;
+        }
+        .in_b_main{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 15px!important;
+          &>a{
+            font-weight:700;
+            color:#1f2329;
+            font-size:16px;
+            height: 22px;
+            line-height: 22px;
+          }
+          &>ul{
+            font-weight:500;
+            color:#5e6685;
+            font-size:15px;
+            display: flex;
+            align-items: center;
+            li{
+              margin-left: 30px;
+              display: flex;
+              align-items: center;
+              height: 22px;
+            }
+          }
+        }
+        .in_b_desc{
+          color: #4c5876;
+          line-height: 26px;
+          max-height: 52px;
+        }
+        .in_b_tag{
+          margin-top: 10px;
+          display: flex;
+          align-items: center;
+          li{
+            height:24px;
+            line-height:24px;
+            background-color:rgba(70, 106, 255, 0.12);
+            border-radius:2px;
+            margin-right: 12px;
+            color:#466aff;
+            font-size:13px;
+            padding:0px 7px;
+          }
+        }
+      }
+    }
+  }
+  .in_pro_menu{
+    margin-top: 42px;
+    width: 250px;
+    margin-right: 30px;
+    background-color: #fff;
+    padding:10px 0px;
+    li{
+      height: 60px;
+      line-height: 60px;
+      position: relative;
+      padding-left: 34px;
+      font-size:16px;
+      font-weight:500;
+      cursor: pointer;
+      color:#3d485d;
+      &.u_t{
+        font-weight:700;
+        color:#1f2329;
+        font-size:18px;
+      }
+      &.active{
+        color:#466aff;
+        background-image:linear-gradient(89.9deg,rgba(70, 106, 255, 0) 0%,rgba(70, 106, 255, 0.09) 100%);
+      }
+      &.active::after{
+        position: absolute;
+        right: 0px;
+        height: 100%;
+        content: "";
+        width: 3px;
+        background-color: #466aff;
+      }
+    }
+  }
+}