云际专区合作伙伴样式修改

src/forge/Information/Pages/JCC/Component/index.scss

@@ -0,0 +1,58 @@
+.partner_jcc{
+  .grow_path {
+    height: 100px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .grow_path_item {
+      z-index: 10;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: self-start;
+      cursor: pointer;
+      transition: 1s;
+      .grow_path_type {
+        width: 82px;
+        height: 58px;
+        // color: black;
+        font-size: 15px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 10px;
+      }
+    }
+    .dot {
+      width:28px;
+      height:28px;
+      background-color:#ffffff;
+      border:7px solid;
+      border-color:#0d8dfd52;
+      border-radius: 50%;
+      transition: .5s;
+    }
+  }
+  .line {
+    height: 0px;
+    width: 1200px;
+    border-bottom: solid 1px #ddd;
+    transform: translate(0, -87px);
+  }
+  .zone_part_lists{
+    margin-top: 40px;
+    li {
+      max-height: 414px;
+      overflow-y: auto;
+      align-items: flex-start;
+    }
+  }
+  .type_active{
+    border-color: #0d8ffd !important;
+  }
+  ::-webkit-scrollbar
+  {
+      display: none;
+  }
+}

src/forge/Information/Pages/JCC/Component/partnerJcc.jsx

@@ -0,0 +1,81 @@
+import React , { useEffect } from 'react';
+import { useState } from 'react';
+import './index.scss'
+
+function Partner(props) {
+  const [ topics ,setTopics ] = useState(undefined);
+  const [ moreTypes ,setMoreTypes ] = useState(false);
+  const [ currentPartner ,setPartner] = useState(undefined);
+  const { id, partnerList } = props;
+  useEffect(()=>{
+    getUnit(partnerList);
+  },[id])
+
+  function getUnit(array){
+    const newArray = array
+    setMoreTypes(array.length > 1)
+    while(newArray[1] && newArray[1].length + newArray[0].length <= 5) {
+      newArray[0] = [...newArray[0], ...newArray.splice(1, 1)[0]]
+    }
+    setTopics(newArray)
+    setPartner(newArray[0][0].typeName)
+  }
+
+  return(
+    <div className='partner_jcc boxmain pt60 pb60'>
+      {
+        moreTypes &&
+        <div className="grow_path">
+          {
+            topics && topics.length>0 ?
+            topics.map((i, k) => {
+              return (
+                <div className="grow_path_item" key={ k } onClick={()=> setPartner(i[0].typeName)}>
+                  <div className={`dot ${i[0].typeName === currentPartner ? 'type_active' : ''}`}></div>
+                  <div className="grow_path_type">
+                    { i[0].typeName }
+                  </div>
+                </div>
+              )
+            })
+            :
+            ""
+          }
+        </div>
+      }
+      {
+        moreTypes && <div className="line"></div>
+      }
+      <ul className="zone_part_lists">
+        {
+          topics && topics.length>0 ?
+          topics.map((i, k)=>{
+            return(
+              <li key={ k } >
+                {
+                  i[0].typeName === currentPartner ?
+                  i.map((j,k1)=>{
+                    return(
+                      <div className="zone_part_item" key={ k1 }>
+                        {
+                          j.link ? <a key={ k1 } href={ j.link } target="_blank" ><img src={j.logo} alt=""/></a>
+                          :
+                          <div><img src={j.logo} alt=""/></div>
+                        }
+                      </div>
+                    )
+                  })
+                  :
+                  ""
+                }
+              </li>
+            )
+          })
+          :
+          ""
+        }
+      </ul>
+    </div>
+  )
+}
+export default Partner;

src/forge/Information/Pages/JCC/homePage.jsx

@@ -11,7 +11,7 @@ import { Link } from 'react-router-dom';
 import shijian from '../../img/shijian.png';
 import axios from 'axios';
 import Projects from '../../Component/projects';
-import Partner from '../../Component/partner';
+import PartnerJcc from './Component/partnerJcc';
 import '../../indexZone1.scss'
 import './index.scss'
 import { Popover, Tabs } from 'antd';
@@ -224,7 +224,7 @@ function HeaderPageJCC(props){
         data && data.partnersShow === 1 && partnerList && partnerList.length > 0 &&
         <div className="zone_parter">
           <p className="in_title">{ data.homepagePartnersTitle }</p>
-          <Partner id={ id } partnerList={ partnerList }></Partner>
+          <PartnerJcc id={ id } partnerList={ partnerList }></PartnerJcc>
         </div>
       }