专区遗留需求

2023-06-21 14:18:09 +08:00 · 2023-06-21 14:18:09 +08:00 · 4a7ac0aa85
parent 9adbe37b2b
commit 4a7ac0aa85
11 changed files with 293 additions and 147 deletions
--- a/public/css/edu-purge.css
+++ b/public/css/edu-purge.css
@ -3966,17 +3966,19 @@ html>body #ajax-indicator {
  text-align: center;
  height: 58px;
  box-sizing: border-box;
-  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
 }

 .head-nav ul#header-nav{
-  overflow: hidden;
+  /* overflow: hidden; */
  white-space: nowrap;
-  overflow-x: auto;
+  overflow-y: auto;
+  /* overflow-y: auto; */
  display: flex;
+  padding-bottom: 250px;
+  margin-bottom: -250px;
 }

 .head-nav ul#header-nav li{
@ -3984,11 +3986,11 @@ html>body #ajax-indicator {
  line-height: 58px;
  cursor: pointer;
  font-size: 16px;
-  padding-right:40px;
 }

 .head-nav ul#header-nav a {
  color: #fff;
+  margin: 0 20px;
 }

 .head-nav ul#header-nav li a:hover,.head-nav ul#header-nav li.active a {
--- a/public/index.html
+++ b/public/index.html
@ -33,10 +33,10 @@
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/alex/alex.all.global.min.css">
  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/iconfont.css">
-  <!-- <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/edu-purge.css"> -->
+  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/edu-purge.css">
  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/editormd.min.css">
-  <!-- <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/merge.css"> -->
-  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/gitlink.min.css">
+  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/merge.css">
+  <!-- <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/gitlink.min.css"> -->
  <%= htmlWebpackPlugin.tags.headTags %>
 </head>

--- a/src/forge/Head/Header.js
+++ b/src/forge/Head/Header.js
@ -45,6 +45,7 @@ class NewHeader extends Component {
      visiblemyss: false,
      openSearch:false,
      visible:false,  //浮动消息框展示控制
+      showSubMenu: -1
    }
  }
  componentDidMount() {
@ -273,6 +274,7 @@ class NewHeader extends Component {
      user,
      isRender,
      visible,
+      showSubMenu
    } = this.state;
    let search_url = settings && settings.common && settings.common.search;
    return (
@ -301,7 +303,7 @@ class NewHeader extends Component {
            </div>
            {
              settings && settings.nav_logo_url ?
-              <a href={settings && settings.new_course.default_url} className={"fl mr50"}>
+              <a href={settings && settings.new_course.default_url} className={"fl mr30"}>
                <img alt="可控开源社区" className="logoimg" src={getImageUrl(`/${settings.nav_logo_url}`)}></img>
              </a>
              :
@ -318,8 +320,18 @@ class NewHeader extends Component {
                    var waiLian = (new_link && str.filter(item=>new_link.indexOf(item)>-1) );
                    var wl = waiLian && waiLian.length>0;
                    return (
-                      <li key={key} className={`${this.matchpaths(new_link) === true ? 'pr active' : 'pr'}`} style={{display:!is_hidden ? 'flex' : 'none'} }>
+                      <li key={key} 
+                        className={`${this.matchpaths(new_link) === true ? 'pr active' : 'pr'}`}
+                        style={{display:!is_hidden ? 'flex' : 'none'} }
+                        onMouseOver={ () => { this.setState( {showSubMenu: key }) } }
+                        onMouseOut={ () => { this.setState( {showSubMenu: -1 }) } }
+                      >
                        <a href={new_link} target={wl ? "_self":"_blank"}>{item.name}</a>
+                        <ul className={ `drop-down ${ showSubMenu === key ? 'drop-down-show' : '' }` } style={{ height : showSubMenu === key ? `${3 * 46}px` : 0 }}>
+                          <li className="drop-down-item"><a href={new_link} target={wl ? "_self":"_blank"}>埃拉拉拉拉拉啊啦啦啦</a></li>
+                          <li className="drop-down-item"><a href={new_link} target={wl ? "_self":"_blank"}>{item.name}</a></li>
+                          <li className="drop-down-item"><a href={new_link} target={wl ? "_self":"_blank"}>{item.name}</a></li>
+                        </ul>
                      </li>
                    )
                  })
--- a/src/forge/Head/header.scss
+++ b/src/forge/Head/header.scss
@ -363,4 +363,37 @@
    color: #FFFFFF!important;
    background-color: #355CFF;
  }
-}
+}
+
+.head-nav {
+  .pr {
+    justify-content: center;
+  }
+  .drop-down {
+    position: absolute;
+    top: 58px;
+    background-color: #ffffff;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    transition: height 0.2s ease-in-out;
+    overflow: hidden;
+    box-shadow:0px 0px 6px rgba(6, 44, 107, 0.15);
+    .drop-down-item {
+      height: 46px !important;
+      line-height: 46px !important;
+      padding-right:unset;
+      position: relative;
+      a {
+        color: #252b3a !important;
+        display: inline-block;
+        height: 100%;
+      }
+      &:hover {
+        background-color: #ebf0ff;
+      }
+      // &:not(:last-child) {
+      //   border-bottom: solid 1px #cccccc42;
+      // }
+    }
+  }
+}
--- a/src/forge/Information/Component/TopEdition.jsx
+++ b/src/forge/Information/Component/TopEdition.jsx
@ -0,0 +1,46 @@
+import React from 'react';
+import Slider from 'react-slick';
+import { getImageUrl } from 'educoder';
+import Left from '../../../home/Img/left.png';
+import Right from '../../../home/Img/right.png';
+import banner from '../img/mainbanner.png'
+
+
+
+let setting={
+  dots:true,
+  infinite: true,
+  speed: 2000,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  pauseOnDotsHover:true,
+  autoplaySpeed:5000,
+  pauseOnFocus:true,
+  autoplay:true,
+  arrows:true,
+  prevArrow: <img className='slick-prev slick-arrow' src={Left} width="70px" alt=""/>,
+  nextArrow: <img className='slick-prev slick-arrow' src={Right} width="70px" alt=""/>
+}
+function TopEdition(props) {
+  const { bannerList } = props
+
+
+  return(
+    <Slider {...setting}>
+      {
+        bannerList && bannerList.length > 0 ?
+        bannerList.map((i,k)=>{
+          return(
+            <div className={`regform`} key={ k }>
+              <div style={{backgroundImage:`url(${i})`}}></div>
+            </div>
+          )
+        })
+        :
+        <div className={`regform`} style={{backgroundImage:`url(${banner})`}}>
+        </div>
+      }
+    </Slider>
+  )
+}
+export default TopEdition;
--- a/src/forge/Information/Component/contributor.jsx
+++ b/src/forge/Information/Component/contributor.jsx
@ -36,7 +36,7 @@ function Contributor(props) {
            {
              showList.map((i,k)=>{
                return(
-                  <div className="container">
+                  <div className="container" key={ k }>
                    { i.name &&
                      <div className="c_item">
                        <Link to={`/${i.login}`}><img src={i.imageUrl} alt="" /></Link>
--- a/src/forge/Information/Component/partner.jsx
+++ b/src/forge/Information/Component/partner.jsx
@ -22,64 +22,44 @@ function Partner(props) {
  },[id])

  function getUnit(array){
-    const newArray = [];
-    for(let i = 0; i< array.length;) {
-      newArray.push(array.slice(i, i += 5));
+    const newArray =  array.map(e => {
+      if (e.zonePartnersList && e.zonePartnersList.length > 0) {
+        e.zonePartnersList[0].typeName = e.typeName
+      }
+      return e.zonePartnersList
+    })
+
+    while(newArray[1] && newArray[1].length + newArray[0].length <= 5) {
+      newArray[0] = [...newArray[0], ...newArray.splice(1, 1)]
    }
+    console.log(newArray)
    setTopics(newArray)
  }

-  function Init() {
-    let box = document.getElementById('scrollBox1');
-    scrollUp();
-    var myTimer = setInterval(scrollUp, 10);
-    // 鼠标移入container 元素上 清除定时器 停止滚动
-    box.onmouseover = () => {
-      clearInterval(myTimer);
-    }
-    // 鼠标移出container 元素上 继续滚动
-    // 60表示每隔60毫秒向上滚动一次
-    box.onmouseout = () => {
-      myTimer = setInterval(scrollUp, 10);
-    }
-  }
-
-  function scrollUp() {
-    let box = document.getElementById('scrollBox1');
-    if(box){
-      let con1 = document.getElementById('box1');
-      if (box.scrollLeft >= con1.clientWidth) {
-        box.scrollLeft = 0;
-      } else {
-        box.scrollLeft++;
-      }
-    }
-  }
-
  return(
-    <div id={"scrollBox1"}>
+    <ul className="boxmain zone_part_lists">
      {
        topics && topics.length>0 ?
-        <Slider {...settings} className="unitMainSlider">
-          {
-            topics.map((i, k)=>{
-              return(
-                <div key={ k } className="slickMainline">
-                {
-                  i.map((j,k1)=>{
-                    return(
+        topics.map((i, k)=>{
+          return(
+            <li key={ k }>
+              {
+                i.map((j,k1)=>{
+                  return(
+                    <div className="zone_part_item" key={ k1 }>
+                      { j.typeName && <span>{j.typeName}</span>}
                      <a key={ k1 } href={j.link} target="_blank"><img src={j.logo} alt=""/></a>
-                    )
-                  })
-                }
-                </div>
-              )
-            })
-          }
-        </Slider>
-        :""
+                    </div>
+                  )
+                })
+              }
+            </li>
+          )
+        })
+        :
+        ""
      }
-    </div>
+    </ul>
  )
 }
 export default Partner;
--- a/src/forge/Information/Component/projects.jsx
+++ b/src/forge/Information/Component/projects.jsx
@ -49,7 +49,7 @@ function Projects(props) {
          (projectList.length < 3 ? 
            projectList.map((i,k)=>{
              return(
-                <div className="container">
+                <div className="container" key={ k }>
                  <div className="zone_p_item">
                    {i.projectProperties && i.projectProperties.authorImageUrl && <img className="info_img" src={i.projectProperties.authorImageUrl} alt="" /> }
                    <p className="z_p_title task-hide" onClick={()=>window.open(i.projectURL)}>{i.projectProperties && i.projectProperties.name}</p>
@ -63,7 +63,7 @@ function Projects(props) {
              {
                projectList.map((i,k)=>{
                  return(
-                    <div className="container">
+                    <div className="container" key={ k }>
                      <div className="zone_p_item">
                        {i.projectProperties && i.projectProperties.authorImageUrl && <img className="info_img" src={i.projectProperties.authorImageUrl} alt="" /> }
                        <p className="z_p_title task-hide" onClick={()=>window.open(i.projectURL)}>{i.projectProperties && i.projectProperties.name}</p>
--- a/src/forge/Information/Component/publicBanner.jsx
+++ b/src/forge/Information/Component/publicBanner.jsx
@ -3,6 +3,7 @@ import { Menu } from 'antd';
 import banner from '../img/mainbanner.png'
 import { Link } from 'react-router-dom';
 import { tempConfig } from '../tempInfo';
+import TopEdition from './TopEdition'



@ -34,10 +35,11 @@ function PublicBanner(props){
  },[pathname])

  return(
-    <div className="in_banner" style={{backgroundImage:`url(${(data && data.bannerList && data.bannerList.split(",")[0]) || banner})`}}>
+    <div className="in_banner">
+      <TopEdition bannerList={ data && data.bannerList && data.bannerList.split(",") }></TopEdition>
      {
        data && 
-        <div>
+        <div className="zone_content">
          <p className="main_t">{data.mainTitle}</p>
          <p className="sub_t">{data.subTitle}</p>
        </div>
--- a/src/forge/Information/Pages/headerPageZone1.jsx
+++ b/src/forge/Information/Pages/headerPageZone1.jsx
@ -29,7 +29,7 @@ function HeaderPage(props){
  const [ newsList, setNewsList ] = useState(undefined);
  const [ partnerList, setParterList ] = useState(undefined);
  const { deptId } = props.match.params;
-  const { data, id, temp } = props;
+  const { data, id, temp, history } = props;

  const vision = [
    {imageUrl: vision0, title: '促进技术创新和应用', content: '通过开源硬件社区的建设，可以让更多的人参与到硬件开发中来，激发大众的创造力和创新精神，从而推动硬件领域的技术创新和实际应用。'},
@ -132,7 +132,7 @@ function HeaderPage(props){
          {
            vision.map((i, k) => {
              return (
-                <div className="vision_item">
+                <div className="vision_item" key={ k }>
                  <div className="vision_icon">
                    <img src={i.imageUrl} alt="" />
                  </div>
@ -169,8 +169,8 @@ function HeaderPage(props){
                newsList.map((i,k)=>{
                  return(
                    k > 0 && 
-                    <Link to={`/zone/${deptId}/newdetail/${i.id}`}>
-                      <li className="new_item">
+                    <div onClick={() => { history.push(`/zone/${deptId}/newdetail/${i.id}`) }}>
+                      <li className="new_item" style={{ display: 'inline-block' }}>
                        <p className="task-hide">
                          <span className="item_index">{k + 1}</span>
                          <Link className="zone_n_title" to={`/zone/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
@ -184,7 +184,7 @@ function HeaderPage(props){
                          <span className="flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></span>
                        </p>
                      </li>
-                    </Link>
+                    </div>
                  )
                })
              }
@ -214,9 +214,9 @@ function HeaderPage(props){
        <p className="sub_title mb50"><img src={ra} alt="" className="mr5" />成为社区成员，尽情发挥您的创意</p>
        <div className="c_role boxmain">
          {
-            communityInfo.map(i => {
+            communityInfo.map((i, k) => {
              return (
-                <div className="c_role_item">
+                <div className="c_role_item" key={ k }>
                  <p className="role_level">{ i.level }</p>
                  <p className="role_todo">{ i.todo }</p>
                  <div className="dot"></div>
@ -237,7 +237,7 @@ function HeaderPage(props){
          {
            growPathInfo.map((i, k) => {
              return (
-                <div className="grow_path_item">
+                <div className="grow_path_item" key={ k }>
                  { k % 2 === 1 && <div className="dot"></div> }
                  <div className="grow_path_type">
                    <div></div>
@ -256,9 +256,9 @@ function HeaderPage(props){
        <div className="line"></div>
        <div className="grow_introduction boxmain pt40">
          {
-            introDetail.map(i => {
+            introDetail.map((i, k) => {
              return (
-                <div className="intro_item">
+                <div className="intro_item" key={ k }>
                  <p className="intro_title">
                    <img src={i.icon} alt="" className="mr3" />
                    { i.title }
--- a/src/forge/Information/index.scss
+++ b/src/forge/Information/index.scss
@ -28,13 +28,17 @@
    height: 450px;
    position: relative;
    padding-bottom: 88px;
-    &>div{
+    .zone_content {
+      position: absolute;
      display: flex;
      width: 1200px;
-      margin: 0px auto;
      flex-direction: column;
      justify-content: center;
      height: 100%;
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, 0);
+      padding-bottom: 88px;
      .main_t{
        color:#78d0f5;
        font-size:40px;
@ -867,37 +871,6 @@
      }
    }
  }
-  .zone_parter{
-    background-color: #fff;
-    padding:70px 0px 90px;
-    .zone_part_lists{
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 70px;
-      li{
-        width: 170px;
-        height: 70px;
-        line-height: 70px;
-        margin-left: 36px;
-        margin-bottom: 30px!important;
-        color:#1f2329;
-        font-size:20px;
-        text-align: center;
-        background-color:#ffffff;
-        border-radius:8px;
-        box-shadow:0px 0px 15px rgba(28, 48, 175, 0.08);
-        &:first-child,&:nth-child(12){
-          margin-left: 0px;
-        }
-        &:nth-child(7){
-          margin-left: 103px;
-        }
-        &:nth-child(11){
-          margin-right: 103px;
-        }
-      }
-    }
-  }
 }
 .zone_VIP_box{
  padding:50px 0px;
@ -1059,46 +1032,42 @@
 .zone_parter{
  background-color: #fff;
  padding:70px 0px 90px;
-  #scrollBox1{
-    max-height: 332px;
-    overflow: hidden;
-    margin: 35px 0px 0px;
-    width: 100%;
-    .unitMainSlider{
-      width: 1200px;
-      margin:0px auto;
-      .slick-list{
-        height: 140px;
-        width: 100%;
-        overflow: hidden;
-        .slickMainline{
-          display: flex!important;
-          padding:10px 2px;
-          align-items: center;
-          justify-content: center;
-          a{
-            background: #FFFFFF;
-            box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.06);
-            border-radius: 4px;
-            border: 1px solid #FFFFFF;
-            margin-right: 20px;
-            padding:20px;
-            height: 120px;
-            width: 220px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            &:hover{
-              border: 1px solid #8FCEFF;
-            }
-            img{
-              max-width: 100%;
-              max-height: 100%;
-            }
-            &:last-child{
-              margin-right: 0px;
-            }
-          }
+  .zone_part_lists{
+    display: flex;
+    flex-direction: column;
+    margin-top: 70px;
+    li {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-end;
+      .zone_part_item {
+        color:#1f2329;
+        font-size:20px;
+        line-height:28px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      a {
+        display: inline-block;
+        width: 220px;
+        height: 88px;
+        line-height: 88px;
+        margin-right: 20px;
+        margin-top: 20px;
+        margin-bottom: 30px!important;
+        color:#1f2329;
+        font-size:20px;
+        text-align: center;
+        background-color:#ffffff;
+        border-radius:8px;
+        box-shadow:0px 0px 15px rgba(28, 48, 175, 0.08);
+        transition: 0.1s linear;
+        img{
+          max-height: 66px;
+        }
+        &:hover {
+          transform: translate(0, -5px);
        }
      }
    }
@ -1118,4 +1087,106 @@
      border-color: var(--primary-color);
    }
  }
+}
+.in_banner{
+  position: relative;
+  .slick-track{
+    height: 450px;
+    display: flex;
+    .slick-slide{
+      position: relative;
+      height:100%;
+      div{
+        height: 100%;
+        .regform{
+          &>div{
+            overflow: hidden;
+            height: 100%;
+            width: 100vw;
+            position: relative;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
+  }
+  .slick-slider{
+    min-width: 100vw;
+    position: relative;
+    &:hover{
+      .slick-arrow{
+        display: block!important;
+        cursor: pointer;
+        z-index: 2;
+      }
+    }
+    .slick-arrow{
+      width: 50px;
+      height: 50px;
+      position: absolute;
+      z-index: 1000;
+      display: none!important;
+      &:hover{
+        i{
+          color: rgba(225,225,225,0.8);
+        }
+      }
+      i{
+        font-size: 50px!important;
+        color: rgba(225,225,225,0.3);
+        transition: 0.3s;
+      }
+      &.slick-prev{
+        left: 50px;
+      }
+      &.slick-next{
+        right: 50px;
+      }
+    }
+    .slick-dots{
+      width: 1200px;
+      text-align: left;
+      left: 50%;
+      margin-left: -600px;
+      bottom: 25%;
+      position: absolute;
+      display: flex!important;
+      z-index: 2;
+      li{
+        background-color: rgba(225,225,225,0.5);
+        position: relative;
+        height: 3px;
+        width: 46px;
+        margin-right: 15px;
+        &::after{
+          position: absolute;
+          left: 0px;
+          width: 0px;
+          top:0px;
+          height: 100%;
+          content: "";
+          transition: 5.2s;
+          transition-property: width;
+        }
+        &.slick-active::after{
+          background-color: #fff;
+          width: 100%;
+        }
+        button{
+          position: absolute;
+          width: 100%;
+          height: 10px;
+          left:0px;
+          background-color: transparent!important;
+          border:none;
+          cursor: pointer;
+          color: transparent;
+          &::before {
+            content: "";
+          }
+        }
+      }
+    }
+  }
 }