设计改版、问题修复

2023-07-06 14:25:04 +08:00 · 2023-07-06 14:25:04 +08:00 · fcaa95702d
parent d5f7c09268
commit fcaa95702d
16 changed files with 159 additions and 63 deletions
--- a/.umirc.js
+++ b/.umirc.js
@ -26,5 +26,6 @@ export default defineConfig({
    { name: 'viewport', content: '' },
  ],
  plugins: ['@umijs/plugins/dist/model'],
-  model: {}
+  model: {},
+  hash: true
 });
--- a/public/css/index.css
+++ b/public/css/index.css
@ -14,6 +14,14 @@
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
 }
+
+.task-hide-6 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
 .ant-spin-spinning {
  margin: auto;
 }
--- a/public/image/w_qr.png
+++ b/public/image/w_qr.png
--- a/src/components/memberitem/index.less
+++ b/src/components/memberitem/index.less
@ -5,7 +5,8 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  border-bottom: 1.5px solid linear-gradient(90deg,#08428e 0%,#019765 100%);;
+  border-bottom: 1.5px solid linear-gradient(90deg,#08428e 0%,#019765 100%);
+  margin-bottom: 35px;
  .head-img {
    width: 200px;
    height: 250px;
@ -29,11 +30,12 @@
    margin-top: 15px;
    color: #252b3a;
    font-size: 15px;
+    line-height: 1.5;
+    text-align: center;
  }
  .line {
-    margin-top: 3px;
    position: absolute;
-    bottom: 0;
+    bottom: -5px;
    width: 100%;
    height: 1.5px;
    background-image: linear-gradient(90deg,#08428e 0%,#019765 100%);
--- a/src/constants/info.js
+++ b/src/constants/info.js
@ -30,7 +30,7 @@ export const menu = [

 export const defaultPage = {
  '/register': 1410,
-  '/contact': 1410
+  '/contact': 1411
 }

 export const information = {
--- a/src/layouts/footer.jsx
+++ b/src/layouts/footer.jsx
@ -1,11 +1,12 @@
 import style from './index.module.less'
+import QRCode from 'img/w_qr.png'

 function Footer(){
  return <div className={ style.footer }>
    <div className={ style.footerContent }>
      <div className={ style.qrCode }>
        <div>
-          <img src="http://fpoimg.com/200x200" alt=""  />
+          <img src={ QRCode } alt=""  />
        </div>
        <span>CCF官方公众号</span>
      </div>
--- a/src/layouts/index.jsx
+++ b/src/layouts/index.jsx
@ -16,7 +16,7 @@ const App = () => {
      <Header
      >
      </Header>
-      <Content>
+      <Content className={ style.layoutContent }>
        <div className={ style.siteLayoutContent } style={{ paddingTop: location.pathname === '/' ? '0' : '68px' }}>
          <Outlet/> 
        </div>
--- a/src/layouts/index.module.less
+++ b/src/layouts/index.module.less
@ -3,6 +3,7 @@ html body {
  font-family:PingFang SC;
 }
 .layout {
+  min-height: 100vh;
  .header {
    position: fixed;
    z-index: 1000;
@ -85,8 +86,11 @@ html body {
    }
  }
  .siteLayoutContent {
-    padding-bottom: 60px;
+    // padding-bottom: 60px;
    background: #ffffff;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
  }
  .footer {
    padding: 0;
@ -165,6 +169,10 @@ html body {
  }
  .header, .footer, .siteLayoutContent {
    min-width: 1400px;
-
+  }
+  .layoutContent {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
  }
 }
--- a/src/pages/homePage/conferenceGuide.jsx
+++ b/src/pages/homePage/conferenceGuide.jsx
@ -11,6 +11,7 @@ import { history } from 'umi'
 function ConferenceGuide() {

  const [newsList, setNewsList] = useState([])
+  const [showImg, setShowImg] = useState(null)

  useEffect(()=>{
    getNewsList()
@ -39,7 +40,13 @@ function ConferenceGuide() {
          <>
            <div className="guide-list">
              { newsList.map((i, k) => {
-                return <div className="guide-item" key={ k } onClick={() => history.push(`/information/detail/${ i.id }`)}>
+                return <div 
+                  className="guide-item" 
+                  key={ k } 
+                  onClick={() => history.push(`/information/detail/${ i.id }`)}
+                  onMouseOver={ () => { setShowImg( i.headImg ) } }
+                  onMouseOut={ () => { setShowImg( null ) } }
+                >
                  <p className="task-hide-2">{ i.name }</p>
                  <p className="item-time">{ i.publishTime }</p>
                  <img src={ right } alt="" />
@ -47,7 +54,7 @@ function ConferenceGuide() {
              })}
              <a href="information">查看更多资讯<img src={ right } alt="" /></a>
            </div>
-            <img src={ newsList[0].headImg || defaultImg } alt="" className="right-img"/>
+            <img src={ showImg || defaultImg } alt="" className="right-img"/>
          </>
        }
      </div>
--- a/src/pages/homePage/index.jsx
+++ b/src/pages/homePage/index.jsx
@ -18,6 +18,7 @@ function HomePage(){
  const [ active, setActive ] = useState(0)
  const [ fixedMenuOpacity, setFixedMenuOpacity ] = useState(0)
  const [ introductionOpacity, setIntroductionOpacity ] = useState(0)
+  const [ show, setShow ] = useState(false)
  const [ mainInfo, setMainInfo ] = useState({})
  const [ partner, setPartner ] = useState([])

@ -79,6 +80,13 @@ function HomePage(){

  const getPartner = () => {
    getPartnerList().then(res => {
+      let noPartner = true
+      res.rows.map(e => {
+        if (e.zonePartnersList && e.zonePartnersList.length > 0) {
+          noPartner = false
+        }
+      })
+      setShow(!noPartner)
      setPartner(res.rows);
    }).catch(console.error())
  }
@ -119,7 +127,7 @@ function HomePage(){
            <span>INTRODUCTION TO THE CONFERENCE</span>
          </div>
        </div>
-        <div className="intro-content" dangerouslySetInnerHTML={{
+        <div className="intro-content task-hide-6" dangerouslySetInnerHTML={{
          __html: mainInfo.introductionContent
        }}>
          {/* { mainInfo.introductionContent } */}
@ -142,7 +150,7 @@ function HomePage(){
      </div>
      <MeetingAgenda></MeetingAgenda>
      <ConferenceGuide></ConferenceGuide>
-      <div className="back-img-4"></div>
+      <div className="back-img-4">
      <Member></Member>
      <div className="partner wrapper" id="partner">
        <div className="module-header">
@ -153,7 +161,7 @@ function HomePage(){
          </div>
        </div>
          {
-            partner && partner.length > 0 ?
+            show ?
            <div className="partner-content">
              {
                partner.map((e, k) => {
@ -163,13 +171,15 @@ function HomePage(){
                      <div className="type-title">
                        <img src={ greenRight } alt="" className="title-icon"/>
                        <span>{ e.typeName }</span>
-                        <div className="device"></div>
+                        {/* <div className="device"></div> */}
                      </div>
                      <div className="type-content">
                        {
                          e.zonePartnersList.map((i, subK) => {
                            return <a key={ subK } href={ i.link } target="_blank">
-                              <img src={ i.logo } alt=""/>
+                              <div>
+                                <img src={ i.logo } alt=""/>
+                              </div>
                            </a>
                          })
                        }
@ -198,6 +208,7 @@ function HomePage(){
          </div> */}
          <div></div>
      </div>
+      </div>
    </div>
  )
 }
--- a/src/pages/homePage/index.less
+++ b/src/pages/homePage/index.less
@ -34,12 +34,12 @@
  }
  .back-img-4 {
    background: url('img/homePage/back-img-4.png') no-repeat;
+    background-position-x: 40px;
    background-size: 100% 100%;
    width: 100%;
-    // height: 1295px;
-    position: absolute;
-    bottom: -60px;
    z-index: 0;
+    background-position: top 46px right 0;
+    padding-bottom: 60px;
  }
  .module-header {
    display: flex;
@ -109,7 +109,7 @@
    display: flex;
    flex-direction: column;
    width:1200px;
-    height:399px;
+    // height:399px;
    background-color:#ffffff;
    border-radius:8px;
    box-shadow:0px 3px 8px rgba(13, 65, 197, 0.04);
@ -121,7 +121,7 @@
    z-index: 100;
    .intro-content {
      width:1125px;
-      height:179px;
+      // height:179px;
      margin-top: 22px;
      background-color:#f7f9fd;
      border-radius:14px;
@ -130,6 +130,18 @@
      padding: 20px 30px;
      line-height:32px;
      font-size: 16px;
+      white-space: pre-wrap;
+      position: relative;
+      &::after {
+        content: "";
+        background-color:#f7f9fd;
+        height: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        z-index: 10;
+      }
    }
    .menu {
      display: flex;
@ -201,6 +213,16 @@
        .agenda-detail {
          border-top: 1px solid #aebee5;
          position: relative;
+          .top-dot {
+            position: absolute;
+            width:12px;
+            height:12px;
+            background-color:#0d41c5;
+            border-radius: 50%;
+            right: 0;
+            top: 0;
+            transform: translate(50%, -50%);
+          }
          .dashed-line {
            width: 85px;
            border-bottom: 1px dashed #0d41c5;
@ -221,9 +243,8 @@
              margin-bottom: 24px;
              line-height: 18px;
              font-size: 15px;
-              span:not(:last-child) {
-                display: inline-block;
-                width: 180px;
+              span {
+                white-space: pre;
              }
              &::before {
                left: -43px;
@ -316,13 +337,14 @@
      }
      .right-img {
        width: 544px;
-        height: 359px;
+        height: 374px;
+        object-fit: cover;
      }
      .guide-list {
        display: flex;
        flex-direction: column;
        width: 330px;
-        height: 359px;
+        height: 374px;
        overflow: visible;
        z-index: 10;
        background-color: #ffffff;
@ -331,11 +353,11 @@
          height: 103px;
          background-color: #ffffff;
          border-bottom: 1px solid #e2e8f5;
-          padding: 13px 15px;
+          padding: 10px 15px;
          position: relative;
          display: flex;
          flex-direction: column;
-          justify-content: space-around;
+          justify-content: space-between;
          transition: 0.3s all;
          cursor: pointer;
          & p:first-child {
@ -343,6 +365,7 @@
            font-weight:700;
            color:#0e1015;
            font-size:15px;
+            line-height: 1.3;
          }
          .item-time {
            color:#a1a5aa;
@ -353,8 +376,9 @@
            height: 30px;
            position: absolute;
            right: 20px;
+            top: 50;
            opacity: 0;
-            transform: rotate(-45deg);
+            transform: rotate(-45deg) translate(0, 50%);
            transition: 0.5s all;
          }
          &:hover {
@ -362,7 +386,7 @@
            box-shadow:0px 0px 12px rgba(91, 106, 101, 0.2);
            img {
              opacity: 1;
-              transform: rotate(0);
+              transform: rotate(0)  translate(0, 50%);
            }
            .item-time {
              color:#0d41c5;
@ -413,14 +437,12 @@
    .partner-content {
      display: flex;
      flex-wrap: wrap;
+      margin-top: 10px;
      .partner-type {
-        margin-top: 40px;
+        margin-top: 20px;
        margin-right: 30px;
        width:fit-content;
        height: 80px;
-        background-color: #ffffff;
-        border-radius: 8px;
-        box-shadow: 0px 0px 6px rgba(28, 48, 175, 0.03);
        display: flex;
        align-items: center;
        padding: 0 21px;
@ -431,22 +453,36 @@
          font-size: 20px;
          span {
            margin-left: 8px;
-            margin-right: 12px;
          }
          img {
            width: 17px;
            height: 14px;
          }
          .device {
-            width: 0.87px;
+            flex-shrink: 1;
+            width: 1px;
            height: 40.39px;
            background-image: linear-gradient(180deg,rgba(1, 151, 101, 0) 0%,#019765 48.53%,rgba(1, 151, 101, 0) 100%);
          }
        }
        .type-content {
+          display: flex;
+          div {
+            margin-left: 25px;
+            padding: 6px;
+            background-color:#ffffff;
+            border-radius:4px;
+            box-shadow:0px 0px 6px rgba(28, 48, 175, 0.03);
+            height: 60px;
+            width: 170px;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
          img {
-            margin-left: 10px;
            max-height: 45px;
+            max-width: 148px;
          }
        }
      }
@ -472,5 +508,5 @@
  }
 }
 .ant-carousel .slick-dots-bottom {
-  bottom: -46px;
+  bottom: -10px;
 }
--- a/src/pages/homePage/meetingAgenda.jsx
+++ b/src/pages/homePage/meetingAgenda.jsx
@ -30,19 +30,21 @@ function MeetingAgenda(){
  },[activeTab, dirList])

  const getMeetingAgendas = () => {
-    getDocList( dirList[`${activeTab}主会场`] ).then(res => {
+    dirList[`${activeTab}主会场`] && getDocList( dirList[`${activeTab}主会场`] ).then(res => {
      setMainList(res.rows)
    })
-    setIsSpin(true)
-    getSubAgenda( dirList[`${activeTab}分会场`] ).then(res => {
-      let list = []
-      res.rows.map(e => {
-        e.content =  Base64.decode(e.content)
-        list.push(e)
+    if (dirList[`${activeTab}分会场`]) {
+      setIsSpin(true)
+      getSubAgenda( dirList[`${activeTab}分会场`] ).then(res => {
+        let list = []
+        res.rows.map(e => {
+          e.content =  Base64.decode(e.content)
+          list.push(e)
+        })
+        setSubList(list)
+        setIsSpin(false)
      })
-      setSubList(list)
-      setIsSpin(false)
-    })
+    }
  }

  return <div className="agenda" id="meeting-agenda">
@ -85,7 +87,9 @@ function MeetingAgenda(){
              {
                mainList && mainList.length > 0 ? mainList.map((i,k) => {
                  return <p className="agenda-item" key={ k }>
-                      <span>{ i.name }</span>
+                      <span dangerouslySetInnerHTML={{
+                    __html: i.name
+                  }}></span>
                    </p>
                }):
                <img className="empty" src={ empty } alt="" />
--- a/src/pages/information/detail.jsx
+++ b/src/pages/information/detail.jsx
@ -37,19 +37,23 @@ function Detail() {
      <div className="detail-content">
        {
          location.pathname.includes('information') && <Breadcrumb separator=">">
-            { cmsDir && <Breadcrumb.Item href="information">{ cmsDir.name }</Breadcrumb.Item> }
+            { cmsDir && <Breadcrumb.Item href="/information">{ cmsDir.name }</Breadcrumb.Item> }
            <Breadcrumb.Item>正文</Breadcrumb.Item>
          </Breadcrumb>
        }
        <div className="detail-info">
-          <div className="info-text-main">
-            <p className="info-name">{ detail.name }</p>
-            <ul className="info-ul-value">
-              { cmsDir && <li>发布于{ cmsDir.createdAt }</li> }
-              { detail.visits && <li><img src={ views } alt="" className="mr5" />{ detail.visits }</li> }
-            </ul>
-          </div>
-          <Divider dashed={true}	/>
+          {
+            location.pathname.includes('information') && <>
+              <div className="info-text-main">
+                <p className="info-name">{ detail.name }</p>
+                <ul className="info-ul-value">
+                  { cmsDir && <li>发布于{ cmsDir.createdAt }</li> }
+                  { detail.visits && <li><img src={ views } alt="" className="mr5" />{ detail.visits }</li> }
+                </ul>
+              </div>
+              <Divider dashed={true}	/>
+            </>
+          }
          {
            content ?
            <RenderHtml className="informations_detail imageLayerParent" value={ content } url={ location } />
--- a/src/pages/information/index.jsx
+++ b/src/pages/information/index.jsx
@ -5,6 +5,7 @@ import { information } from '../../constants/info';
 import { getDocList } from '../../utils/request/api'
 import empty from 'img/empty.png'
 import { useModel } from 'umi';
+import { Link } from 'umi';

 function Information() {
  const [ isSpin , setIsSpin ] = useState(false);
@ -21,7 +22,7 @@ function Information() {
    setIsSpin(true);
    const requestList = [];
    information.category.map(e => {
-      requestList.push(getList(dirList[e.title], e.anchor)) 
+      dirList[e.title] && requestList.push(getList(dirList[e.title], e.anchor)) 
    })
    Promise.all(requestList).then(res => {
      let totalList = {}
@ -76,7 +77,8 @@ function Information() {
    <Spin spinning={isSpin}>
      {
        information.category.map((e) => {
-          return <div className="content" id={ e.anchor } key={ e.anchor }>
+          return <div className="content" key={ e.anchor }>
+            <div className="anchor"  id={ e.anchor }></div>
            <div className="content-title">
              <p>{ e.title }</p>
              <p>{ e.eng }</p>
@ -89,7 +91,8 @@ function Information() {
                    <div className="item-right">
                      <p className="time">{ e.date1 }</p>
                      <Divider style={{ color: 'rgba(9, 37, 77, 0.1)', margin: '0px' }}/>
-                      <p className="item-title task-hide">{ e.name }</p>
+                      <Link to={ `detail/${ e.id }` }  className="item-title task-hide">{ e.name }</Link>
+                      {/* <link className="item-title task-hide">{ e.name }</p> */}
                      <p className="item-desc task-hide-2">{ e.summary }</p>
                      <a href={ `information/detail/${ e.id }` } className="read-more">阅读全文 →</a>
                    </div>
--- a/src/pages/information/index.less
+++ b/src/pages/information/index.less
@ -1,4 +1,5 @@
 .information {
+  padding-bottom: 60px;
  .ant-spin-container {
    background: url('img/information-bg.png') no-repeat;
    background-size: 100% 100%;
@ -39,9 +40,14 @@
      }
    }
  }
+  .anchor {
+    position: absolute;
+    top: -50px;
+  }
  .content {
    width: 1200px;
    margin: auto;
+    position: relative;
    .content-title {
      width: 531px;
      height: 157px;
@ -88,6 +94,7 @@
            color: #252b3a;
            font-size: 18px;
            margin-top: 20px;
+            display: block;
          }
          .item-desc {
            color: #68757f;
@ -113,6 +120,8 @@
  background: url('img/information-detail-bg.png') no-repeat;
  background-size: 100% 100%;
  width: 100%;
+  flex-grow: 1;
+  padding-bottom: 60px;
  .detail-content {
    width: 1200px;
    margin: 0px auto;
--- a/src/pages/organization/index.less
+++ b/src/pages/organization/index.less
@ -1,11 +1,12 @@
 .organization {
-  // width: 1200px;
+  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  position: relative;
+  padding-bottom: 60px;
  .ant-spin-nested-loading {
    width: 1200px;
  }
@ -14,9 +15,10 @@
    background-size: 100% auto;
    background-repeat: repeat-y;
    position: absolute;
-    height: calc(100% + 60px);
+    height: 100%;
    width: 100%;
    top: 0;
+    padding-bottom: 60px;
  }
  .module {
    display: flex;