NSCC专区-资源列表页面

public/css/gitlink.min.css

@@ -16,6 +16,10 @@
   font-family: "alibabaReg";
   src: url("../fonts/ALIBABA-PUHUITI-REGULAR.TTF");
 }
+@font-face {
+  font-family: "ziyouwenyihei";
+  src: url("../fonts/ziyouwenyihei.ttf");
+}
 .header {
   width: 100%;
   height: 51px;

src/forge/Information/Component/publicBanner.jsx

@@ -1,4 +1,4 @@
-import React , { useState , useEffect } from 'react';
+import React , { useState , useEffect, Fragment } from 'react';
 import { Menu } from 'antd';
 import { Link } from 'react-router-dom';
 import { tempConfig } from '../tempInfo';
@@ -12,6 +12,7 @@ function PublicBanner(props){
   const { deptId } = props.match.params;
   const { pathname } = props.history.location;
   const { data:{sectionHomepageShow, sectionHomepageTitle, sectionProjectShow,sectionDataSetShow,sectionDataSetTitle, sectionProjectTitle, sectionResourceShow, sectionResourceTitle, sectionCmsShow, sectionCmsTitle, sectionMemberShow, sectionMemberTitle, sectionHelperShow, sectionHelperTitle}, data , adminUrl, temp } = props;
+  const isNSCC = deptId === "NSCC";
 
   useEffect(()=>{
     if(pathname){
@@ -47,12 +48,19 @@ function PublicBanner(props){
   },[pathname])
 
   return(
-    <div className="in_banner">
+    <div className={`in_banner ${isNSCC ? "bannerByNSCC" : ""}`}>
       <TopEdition bannerList={ data && data.bannerList && data.bannerList.split(",") }></TopEdition>
       {
         data && deptId !=='xjykyzx' &&
         <div className="zone_content">
-          <p className="main_t">{data.mainTitle}</p>
+          {!isNSCC && <p className="main_t">{data.mainTitle}</p>}
+          {isNSCC && <Fragment>
+            <img src={require('../img/new.png').default} alt='' width={158}/>
+          <p className="main_t_nscc">
+            <span className='title_n_1'>{data.mainTitle}</span>
+            <span className='font-25'> /SUPERCOMPUTING</span>
+          </p>
+          </Fragment>}
           <p className="sub_t" dangerouslySetInnerHTML={{ __html: data.subTitle }}></p>
         </div>
       }

src/forge/Information/Pages/source.jsx

@@ -1,5 +1,5 @@
-import React , { useEffect , useState } from 'react';
-import { Button, Input , Pagination, Spin, Tag } from 'antd';
+import React , { Fragment, useEffect , useState } from 'react';
+import { Button, Divider, Input , Pagination, Spin, Tag } from 'antd';
 import SourceIcon from '../img/sourceIcon.png';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
@@ -26,6 +26,21 @@ function Source(props){
   const [ isSpin , setIsSpin ] = useState(true);
   const limit = 21;
   const { id , temp, history, role, sectionResourceTitle } = props;
+  const isNSCC = deptId === "NSCC";
+
+  const sourceIconByName = {
+    "构建工具": "icon1",
+    "基础组件": "icon2",
+    "基因表达": "icon3",
+    "人工智能": "icon4",
+    "常用工具": "icon5",
+    "函数库": "icon6",
+    "地质": "icon7",
+    "Python包": "icon8",
+    "自研": "icon9",
+    "核物理": "icon10",
+    "全部": "icon11"
+}
 
   useEffect(()=>{
     let uuid = getUniqueIdentifier()
@@ -91,20 +106,28 @@ function Source(props){
   }
 
   return(
-    <div className={`${temp}_source_box`}>
+    <div className={`${temp}_source_box ${isNSCC ? "NSCC_source_box" : ""}`}>
       <div className="source_h">
-        <p className="in_title">{sectionResourceTitle}</p>
-        <div style={{marginTop:"30px",textAlign:"center"}} className='titleButBox'>
-          <Search
-            placeholder="请输入资源名称"
+        <p className="in_title">{sectionResourceTitle}{isNSCC && <Fragment><span className='font-bd font-30'> · </span><span className='primaryColor'>应用集市</span></Fragment>}</p>
+        <div className='titleButBox mt30' style={{justifyContent: isNSCC ? "space-between" : "center"}}>
+          {isNSCC ? <div className='searchByNSCC font-15'>
+            <span className='color-grey-70'>猜你想问</span>
+            <Divider type="vertical" style={{margin: '0 15px'}}/>
+            <Search placeholder={`请输入资源名称（共${total}个资源）`} onSearch={onSourceSearch} suffix={
+              <Fragment>
+                <img src={require("../img/search.png")} className='normal-icon'/>
+                <img src={require("../img/search1.png")} className='hover-icon'/>
+              </Fragment>
+            }/>
+          </div> : <Search
             onSearch={onSourceSearch}
             style={{width:'645px',borderColor:"#fff",boxShadow:"0px 0px 10px rgba(61, 85, 183, 0.1)"}}
             size="large"
             className="source_search_box"
             allowClear
             enterButton={temp === "zone" ? <span><i className="iconfont icon-sousuo5 font-15"/>搜索</span> :undefined}
-          />
-          {role && role.role !== "None" && <div className='createButs'>
+          />}
+          {role && role.role !== "None" && <div className='createButs ml20'>
             {role.role === "Member" && <Button size='large' type="primary" ghost className='mr20'>
               <Link to={`/zone/${deptId}/source/self`}>我的资源</Link>
             </Button>}
@@ -119,13 +142,20 @@ function Source(props){
             {
               zoneList && zoneList.length>0 &&
               <ul className="source_l_u">
-                <p>资源领域</p>
+                <p>{isNSCC ? "软件领域" : "资源领域"}</p>
                 <div>
-                  <li onClick={()=>{setChooseZoneId(undefined);window.scrollTo(0,450)}} className={!chooseZoneId ?"active":""}>全部</li>
+                  <li onClick={()=>{setChooseZoneId(undefined);window.scrollTo(0,450)}} className={!chooseZoneId ?"active":""}>
+                    {isNSCC && <img src={require(`../img/source/icon11${!chooseZoneId ? "_active" : ""}.png`)} style={{width: '24px'}} className='mr10'/>}
+                    全部
+                  </li>
                   {
                     zoneList.map((i,k)=>{
+                      const icon = `${sourceIconByName[i.name] || "icon12"}${i.id === chooseZoneId ? '_active.png' : '.png'}`
                       return(
-                        <li key={k} onClick={()=>{setChooseZoneId(i.id);window.scrollTo(0,450)}} className={`${chooseZoneId && chooseZoneId === i.id ? "active":""} task-hide`}>{i.name}</li>
+                        <li key={k} onClick={()=>{setChooseZoneId(i.id);window.scrollTo(0,450)}} className={`${chooseZoneId && chooseZoneId === i.id ? "active":""} task-hide`}>
+                          {isNSCC && <img src={require(`../img/source/${icon}`)} style={{width: '24px'}} className='mr10'/>}
+                          {i.name}
+                        </li>
                       )
                     })
                   }
@@ -133,8 +163,19 @@ function Source(props){
               </ul>
             }
             {
-              typeList && typeList.length>0 &&
-              <ul className="source_l_u">
+              typeList && typeList.length>0 && (isNSCC ? <div className=''>
+                <p className="borderRight">软件分类</p>
+                <div className='source_l_wrap'>
+                  <span onClick={()=>{setChooseTypeId(undefined);window.scrollTo(0,450)}} className={!chooseTypeId ?"active":""}>全部</span>
+                  {
+                    typeList.map((i,k)=>{
+                      return(
+                        <span key={k} onClick={()=>{setChooseTypeId(i.id);window.scrollTo(0,450)}} className={`${chooseTypeId && chooseTypeId === i.id ? "active":""} task-hide`}>{i.name}</span>
+                      )
+                    })
+                  }
+                </div>
+              </div> : <ul className="source_l_u">
                 <p className="borderRight">资源类别</p>
                 <div>
                   <li onClick={()=>{setChooseTypeId(undefined);window.scrollTo(0,450)}} className={!chooseTypeId ?"active":""}>全部</li>
@@ -146,7 +187,7 @@ function Source(props){
                     })
                   }
                 </div>
-              </ul>
+              </ul>)
             }
           </div>
           :""

src/forge/Information/index.scss

@@ -206,6 +206,27 @@
         }
       }
     }
+    &.bannerByNSCC{
+      .main_t_nscc{
+        line-height: normal;
+        width: max-content;
+        color: rgba(255, 255, 255, 0.9);
+        border-bottom: 1px solid transparent;
+        border-image: linear-gradient(135deg,#72f4fc 0%,#4ac0f3 39.2%,#468bff 100%) 1;
+        margin-bottom: -20px !important;
+      }
+      .title_n_1{
+        font-size: 45px;
+        background: linear-gradient(135deg,#72f4fc 0%,#beeaff 44.18%,#468bff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-family: "ziyouwenyihei";
+      }
+      .sub_t{
+        font-size:15px;
+        color:#ffffff;
+      }
+    }
   }
   .main_content{
     padding: 40px 0px 80px;
@@ -1667,11 +1688,9 @@
 .titleButBox{
   width: 1200px;
   margin: 0 auto;
-  position: relative;
+  display: flex;
+  align-items: center;
   .createButs{
-    position: absolute;
-    right: 0;
-    top: 0;
     button{
       border-color: var(--primary-color);
       color: var(--primary-color);
@@ -1961,3 +1980,107 @@
     }
   }
 }
+.NSCC_source_box{
+  background-image: url('./img/source-bg.png');
+  background-size: 100% 100%;
+  .source_h{
+    background: none;
+  }
+  &.zone_source_box .sources{
+    background: none;
+    border: none;
+  }
+  &.zone_source_box .sources .source_left_ul{
+    border-right: 1px solid rgba(76, 88, 118, 0.1);
+  }
+  &.zone_source_box .sources .source_left_ul li.active{
+    border-radius:10px;
+    background:linear-gradient(89.98deg,#ffffff 0%,rgba(255, 255, 255, 0.09) 100%);
+    border: none;
+  }
+  &.zone_source_box .sources .source_left_ul p, &.zone_source_box .sources .source_left_ul li{
+    padding-left: 26px;
+    height:48px;
+    line-height: 48px;
+  }
+  &.zone_source_box .sources .source_left_ul li{
+    border-right: none;
+  }
+  &.zone_source_box .sources .source_left_ul p{
+    margin-bottom: 10px !important;
+    &.borderRight{
+      margin-top: 10px !important;
+      border-right: none;
+    }
+  }
+  &.zone_source_box .sources .source_lists .source_lists_card{
+    background-image: url('./img/sourceCardBack1.png');
+    background-color: transparent;
+  }
+  .source_l_wrap{
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 26px;
+    span{
+      display: inline-block;
+      height: 32px;
+      line-height: 30px;
+      padding: 0 10px;
+      background: #edf1fa;
+      border-radius: 6px 6px 6px 6px;
+      margin-right: 10px;
+      margin-bottom: 10px !important;
+      border: 1px solid transparent;
+      font-size: 15px;
+      color: #4938b9;
+      cursor: pointer;
+      &.active{
+        background: rgba(73, 56, 185, 0.1);
+        border: 1px solid #5141bc;
+      }
+    }
+  }
+}
+.searchByNSCC{
+  flex: 1;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(to right, white, white),linear-gradient(90deg, #466aff 0%, #8d46ff 100%);
+  padding: 7px 10px 7px 30px;
+  display: flex;
+  align-items: center;
+  .ant-input-search{
+    flex: 1;
+  }
+  .ant-input{
+    border: none !important;
+  }
+  .anticon-search{
+    display: none;
+  }
+  img{
+    width:28px;
+  }
+  .hover-icon{
+    display: none;
+  }
+  &:hover{
+    border-color: #4C5876;
+    .normal-icon{
+      display: none;
+    }
+    .hover-icon{
+      display: inline-block;
+    }
+  }
+}
+
+.color-grey-70{
+  color: #707992;
+}
+
+.color-grey-aaa{
+  color: #aaafbe;
+}