样式优化

2023-07-04 11:07:44 +08:00 · 2023-07-04 11:07:44 +08:00 · 37997ccf78
parent 328a648004
commit 37997ccf78
23 changed files with 204 additions and 108 deletions
--- a/.umirc.js
+++ b/.umirc.js
@ -21,4 +21,7 @@ export default defineConfig({
      // 'pathRewrite': { '^/api' : '' },
    },
  },
+  metas: [
+    { name: 'viewport', content: '' },
+  ],
 });
--- a/dist.zip
+++ b/dist.zip
--- a/public/css/index.css
+++ b/public/css/index.css
@ -28,4 +28,11 @@
  .markdown-body {
    padding: 15px;
  }
+}
+
+.empty {
+  width: 276px;
+  height: 276px;
+  display: block;
+  margin: auto;
 }
--- a/public/image/empty.png
+++ b/public/image/empty.png
--- a/public/image/homePage/head-banner.png
+++ b/public/image/homePage/head-banner.png
--- a/public/image/information-header.png
+++ b/public/image/information-header.png
--- a/src/app.js
+++ b/src/app.js
@ -0,0 +1,4 @@
+ 
+export function onRouteChange({ clientRoutes, location }) {
+  document.title = '开源大会';
+}
--- a/src/constants/info.js
+++ b/src/constants/info.js
@ -41,19 +41,19 @@ export const information = {
      title: '大会论坛',
      eng: 'Conference Forum',
      anchor: 'forum',
-      id: 164
+      id: 1400
    },
    {
      title: '会议指南',
      eng: 'Conference Guide',
      anchor: 'guide',
-      id: 170
+      id: 1401
    },
    {
      title: '会议通知',
      eng: 'Meeting Notice',
      anchor: 'notice',
-      id: 562
+      id: 1402
    }
  ]
 }
@ -77,15 +77,28 @@ export const homePage = [
  },
 ]

+export const agendaDateList = ['10月21日', '10月22日']
+
 export const meetingAgenda = {
-  dateList: ['10月21日', '10月22日']
+  agendaIds: {
+    [agendaDateList[0]]: [1376, 1378],
+    [agendaDateList[1]]: [1380, 1382]
+  },
+  tencentMeeting: {
+    [agendaDateList[0]]: 360451552,
+    [agendaDateList[1]]: 360451553
+  },
+  bilibiliLive: {
+    [agendaDateList[0]]: 'https://live.bilibili.com/p/eden/area-tags?visit_id=am5kc4e3r4s0&areaId=0&parentAreaId=11',
+    [agendaDateList[1]]: 'https://live.bilibili.com/p/eden/area-tags?visit_id=am5kc4e3r4s0&areaId=0&parentAreaId=11'
+  },
+  live: {
+    [agendaDateList[0]]: 'https://live.bilibili.com/p/eden/area-tags?visit_id=am5kc4e3r4s0&areaId=0&parentAreaId=11',
+    [agendaDateList[1]]: 'https://live.bilibili.com/p/eden/area-tags?visit_id=am5kc4e3r4s0&areaId=0&parentAreaId=11'
+  }
 }

 export const config = {
-  zoneKey: 'uos',
-  zoneId: 102,
-  agendaIds: {
-    [meetingAgenda.dateList[0]]: [170, 170],
-    [meetingAgenda.dateList[1]]: [170, 170]
-  }
+  zoneKey: 'kydh',
+  zoneId: 139,
 }
--- a/src/document.ejs
+++ b/src/document.ejs
@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Your App</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
--- a/src/layouts/footer.jsx
+++ b/src/layouts/footer.jsx
@ -9,12 +9,12 @@ function Footer(){
        </div>
        <span>CCF官方公众号</span>
      </div>
-      <div className={ style.qrCode }>
+      {/* <div className={ style.qrCode }>
        <div>
          <img src="http://fpoimg.com/200x200" alt=""  />
        </div>
        <span>CCF官方公众号</span>
-      </div>
+      </div> */}
      <div className={ style.host }>
        <span>主办单位：</span>
        <span>中国计算机学会</span>
--- a/src/layouts/header.jsx
+++ b/src/layouts/header.jsx
@ -3,24 +3,48 @@ import { Link, useLocation } from 'umi';
 import { menu } from '../constants/info'
 import style from './index.module.less'
 import icon from '../favicon.png'
+import { throttle } from '../utils/util'
+

 function Header(){
  const location = useLocation();
  const [showSubMenu, setShowSubMenu] = useState(false)
+  const [ headerOpacity, setHeaderOpacity ] = useState( location.pathname === '/' ? 0.35 : 1)

  const matchItem = (item) => {
    return item === location.pathname.split('/')[1]
  }

+  useEffect(()=>{
+    if (location.pathname === '/') {
+      window.addEventListener('scroll', throttleHandleScroll);
+      return ComponentWillUnmount;
+    } else {
+      ComponentWillUnmount()
+      setHeaderOpacity(1)
+    }
+  },[location.pathname])
+
+  function ComponentWillUnmount() {
+    window.removeEventListener("scroll", throttleHandleScroll);
+  }
+
+  function handleScroll() {
+    let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度
+    setHeaderOpacity( Math.max(scrollTop / 500, 0.35) )
+  }
+
+  const throttleHandleScroll = throttle(handleScroll, 100)
+
  return(
-    <div className={ style.header }>
+    <div className={ style.header } style={{ backgroundColor: `rgba(27, 62, 154, ${headerOpacity})` }}>
      <div className={ style.headerInfo }>
        <img src={ icon } alt="" />
        <span>开源大会</span>
      </div>
      <ul className={ style.menu }>
        {
-          menu && menu.length && menu.length > 0 && menu.map((item, key) => {
+          menu && menu.length > 0 && menu.map((item, key) => {
            return (
              <li key={key} 
                className={`${matchItem(item.link) ? `${style.menuItem} ${style.menuItemActive}` : style.menuItem}`}
--- a/src/layouts/index.jsx
+++ b/src/layouts/index.jsx
@ -5,17 +5,19 @@ import "github-markdown-css"
 const { Content } = Layout;
 import Header from './header'
 import Footer from './footer'
-import { Outlet } from 'umi'
+import { Outlet, useLocation } from 'umi'

 const App = () => {
-  document.title = '开源大会'
+
+  const location = useLocation();
+
  return (
    <Layout className={ style.layout }>
      <Header
      >
      </Header>
      <Content>
-        <div className={ style.siteLayoutContent }>
+        <div className={ style.siteLayoutContent } style={{ paddingTop: location.pathname === '/' ? '0' : '68px' }}>
          <Outlet/> 
        </div>
      </Content>
--- a/src/layouts/index.module.less
+++ b/src/layouts/index.module.less
@ -9,9 +9,9 @@ html body {
    top: 0;
    display: flex;
    height:68px;
-    width: 100vw;
+    width: 100%;
    align-items: center;
-    background-color:#1f2534;
+    background-color:rgba(27, 62, 154);
    box-shadow:0px 3px 6px rgba(56, 70, 87, 0.16);
    padding-left: 360px;
    color:#ffffff;
@ -85,7 +85,6 @@ html body {
    }
  }
  .siteLayoutContent {
-    margin-top: 68px;
    padding-bottom: 60px;
    background: #ffffff;
  }
@ -101,14 +100,14 @@ html body {
    align-items: center;
    justify-content: space-between;
    .footerContent {
+      width: 1200px;
      display: flex;
-      justify-content: center;
      flex: 1;
      margin-top: 50px;
      .qrCode {
        display: flex;
        flex-direction: column;
-        margin-right: 40px;
+        margin-right: 80px;
        align-items: center;
        &:last-child {
          margin-right: 70px;
@ -144,7 +143,7 @@ html body {
          opacity: 77%;
          color: #ffffff;
          font-size: 14px;
-          margin-bottom: 15px;
+          margin-bottom: 20px;
        }
        span:first-child {
          opacity: 1;
@ -164,4 +163,8 @@ html body {
      opacity: 60%;
    }
  }
+  .header, .footer, .siteLayoutContent {
+    min-width: 1400px;
+
+  }
 }
--- a/src/pages/homePage/conferenceGuide.jsx
+++ b/src/pages/homePage/conferenceGuide.jsx
@ -5,6 +5,7 @@ import titleIcon from 'img/homePage/title-icon.png'

 import { gethomePageDocList } from '../../utils/request/api'
 import { useEffect, useState } from 'react'
+import { history } from 'umi'

 function ConferenceGuide() {

@ -37,13 +38,13 @@ function ConferenceGuide() {
          <>
            <div className="guide-list">
              { newsList.map((i, k) => {
-                return <div className="guide-item" key={ k } >
+                return <div className="guide-item" key={ k } onClick={() => history.push(`/information/detail/${ i.id }`)}>
                  <p className="task-hide-2">{ i.name }</p>
                  <p className="item-time">{ i.publishTime }</p>
                  <img src={ right } alt="" />
                </div>
              })}
-              <a href="">查看更多资讯<img src={ right } alt="" /></a>
+              <a href="information">查看更多资讯<img src={ right } alt="" /></a>
            </div>
            <img src={ newsList[0].headImg } alt="" className="right-img"/>
          </>
--- a/src/pages/homePage/index.jsx
+++ b/src/pages/homePage/index.jsx
@ -5,6 +5,7 @@ import ConferenceGuide from './conferenceGuide';
 import Member from './member';
 import greenRight from 'img/homePage/green-right.png'
 import titleIcon from 'img/homePage/title-icon.png'
+import headBanner from 'img/homePage/head-banner.png'
 import { homePage } from '../../constants/info'
 import { getBaseInfo, getPartnerList } from '../../utils/request/api'
 import { useRef, useState, useEffect } from 'react';
@ -15,10 +16,14 @@ function HomePage(){

  const [ active, setActive ] = useState(0)
  const [ fixedMenuOpacity, setFixedMenuOpacity ] = useState(0)
+  const [ introductionOpacity, setIntroductionOpacity ] = useState(0)
  const [ mainInfo, setMainInfo ] = useState({})
  const [ partner, setPartner ] = useState([])

  useEffect(()=>{
+    if (document.documentElement.scrollTop > 200) {
+      setIntroductionOpacity( 1 );
+    }
    getMainInfo();
    getPartner();
    window.addEventListener('scroll', throttleHandleScroll);
@ -33,7 +38,8 @@ function HomePage(){
    let clientHeight = document.documentElement.clientHeight; //可视区域高度
    let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度

-    setFixedMenuOpacity((scrollTop - 650) / 100)
+    setFixedMenuOpacity((scrollTop - clientHeight) / 100);
+    setIntroductionOpacity( scrollTop / 200 );

    homePage.map((e, index) => {
      let f = checkPosi(e.id ,clientHeight,scrollTop);
@ -83,17 +89,15 @@ function HomePage(){

  return(
    <div className="page">
-
-      <div className="back-img-1"></div>
-      <div className="back-img-2"></div>
-
-      <div className="banner" style={{ backgroundImage: `url('http://fpoimg.com/1920x440')` }}></div>
+      <div className="banner">
+        <img src={ headBanner } alt="" />
+      </div>

      <div className="fixed-menu" style={{ opacity: fixedMenuOpacity }}>
-        <div className="guide-line" style={{ marginTop: `${ active * 38 + 27}px` }}><div></div><div></div></div>
+        <div className="guide-line" style={{ marginTop: `${ active * 56 + 9}px` }}><div></div><div></div></div>
        <div>
          {
-            homePage && homePage.length && homePage.length > 0 && homePage.map((item, key) => {
+            homePage && homePage.length > 0 && homePage.map((item, key) => {
              return (
                <div key={key} 
                  className={`${matchItem( key ) ? 'menu-item menu-item-active' : 'menu-item'}`}
@ -106,7 +110,7 @@ function HomePage(){
        </div>
      </div>

-      <div className="introduction">
+      <div className="introduction" style={{ opacity: introductionOpacity }}>
        <div className="module-header">
          <img src={ titleIcon } alt="" />
          <div className="title">
@ -119,7 +123,7 @@ function HomePage(){
        </div>
        <ul className="menu">
        {
-          homePage && homePage.length && homePage.length > 0 && homePage.map((item, key) => {
+          homePage && homePage.length > 0 && homePage.map((item, key) => {
            return (
              <li key={key} 
                className={`${matchItem(item.id) ? 'menu-item menu-item-active' : 'menu-item'}`}
@ -146,7 +150,7 @@ function HomePage(){
          </div>
        </div>
          {
-            partner && partner.length && partner.length > 0 &&
+            partner && partner.length > 0 &&
            <div className="partner-content">
              {
                partner.map((e, k) => {
--- a/src/pages/homePage/index.less
+++ b/src/pages/homePage/index.less
@ -7,7 +7,7 @@
    background: url('img/homePage/back-img-1.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
-    top: 933px;
+    top: 144px;
    right: 0;
    // opacity: 45%;
    width: 455px;
@ -17,7 +17,7 @@
    background: url('img/homePage/back-img-2.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
-    top: 1390px;
+    top: 600px;
    left: 0;
    // opacity: 45%;
    width: 670px;
@ -29,14 +29,14 @@
    position: absolute;
    top: 40px;
    // opacity: 45%;
-    width: 100vw;
+    width: 100%;
    height: 590px;
  }
  .back-img-4 {
    background: url('img/homePage/back-img-4.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
-    height: 1295px;
+    // height: 1295px;
    position: absolute;
    bottom: -60px;
    z-index: 0;
@ -65,10 +65,13 @@
    }
  }
  .banner {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    height:440px;
-    width: 100vw;
+    height: 100vh;
+    width: 100%;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
  }
  .fixed-menu {
    position: fixed;
@ -96,7 +99,7 @@
    .menu-item {
      height: 21px;
      line-height: 21px;
-      margin: 17.5px 16px;
+      margin: 0 16px 35px 16px;
    }
    .menu-item-active {
      color: #0d41c5;
@ -114,6 +117,8 @@
    background: #FFFFFF url('img/homePage/introduction-bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 48px 38px 0 38px;
+    transition: 0.1s all;
+    z-index: 100;
    .intro-content {
      width:1125px;
      height:179px;
@ -124,6 +129,7 @@
      color:#0e1015;
      padding: 20px 30px;
      line-height:32px;
+      font-size: 16px;
    }
    .menu {
      display: flex;
@ -153,6 +159,8 @@
    }
  }
  .agenda {
+    position: relative;
+    width: 100%;
    .date {
      display: flex;
      height: 46px;
@ -212,6 +220,7 @@
              border-bottom: 1px solid #aaafbe3a;
              margin-bottom: 24px;
              line-height: 18px;
+              font-size: 15px;
              span:not(:last-child) {
                display: inline-block;
                width: 180px;
@ -290,7 +299,7 @@
  }
  .guide {
    z-index: 1;
-    width: 100vw;
+    width: 100%;
    position: relative;
    .wrapper {
      margin: 0 auto;
@ -447,6 +456,7 @@
 .wrapper {
  width: 1200px;
  padding-top: 80px;
+  margin: auto;
 }

 .ant-carousel .slick-dots li.slick-active {
--- a/src/pages/homePage/meetingAgenda.jsx
+++ b/src/pages/homePage/meetingAgenda.jsx
@ -3,6 +3,7 @@ import subdot from 'img/homePage/item-dot-2.png'
 import main from 'img/homePage/main-icon.png'
 import sub from 'img/homePage/sub-icon.png'
 import titleIcon from 'img/homePage/title-icon.png'
+import empty from 'img/empty.png'

 import RenderHtml from '../../components/renderHtml'
 import { useLocation } from 'umi';
@ -10,13 +11,13 @@ import { Spin } from 'antd'
 import { Base64 } from 'js-base64';
 import { getDocList, getSubAgenda } from '../../utils/request/api'
 import { useState, useEffect } from 'react'
-import { config, meetingAgenda } from '../../constants/info'
+import { agendaDateList, meetingAgenda } from '../../constants/info'


 function MeetingAgenda(){

  const location = useLocation();
-  const [activeTab, setActiveTab] = useState(meetingAgenda.dateList[0])
+  const [activeTab, setActiveTab] = useState(agendaDateList[0])
  const [ mainList, setMainList ] = useState([])
  const [ subList, setSubList ] = useState([])
  const [ isSpin , setIsSpin ] = useState(false);
@ -26,11 +27,11 @@ function MeetingAgenda(){
  },[activeTab])

  const getMeetingAgendas = () => {
-    getDocList(config.agendaIds[activeTab][0], ).then(res => {
+    getDocList(meetingAgenda.agendaIds[activeTab][0], ).then(res => {
      setMainList(res.rows)
    })
    setIsSpin(true)
-    getSubAgenda(config.agendaIds[activeTab][1], ).then(res => {
+    getSubAgenda(meetingAgenda.agendaIds[activeTab][1], ).then(res => {
      let list = []
      res.rows.map(e => {
        e.content =  Base64.decode(e.content)
@ -41,52 +42,56 @@ function MeetingAgenda(){
    })
  }

-  return <div className="agenda wrapper" id="meeting-agenda">
-    <div className="module-header">
-      <img src={ titleIcon } alt="" />
-      <div className="title">
-        <span>会议议程</span>
-        <span>MEETING AGENDA</span>
-      </div>
-    </div>
-    <div className="date">
-      {
-        meetingAgenda.dateList.map((i ,k) => {
-          return <div
-            className={ `date-item ${ activeTab === i ? 'date-item-active' : '' }` }
-            onClick={() => { setActiveTab(i) }}
-            key={ k }
-            >
-              { i }
-            </div>
-        })
-      }
-    </div>
-    <div className="content">
-      <img src={ main } alt="" className="content-icon"/>
-      <div className="content-right">
-        <div className="meeting">
-          <span>腾讯会议号：360451552</span>
-          <a>进入B站直播间</a>
-          <a>进入直播间</a>
+  return <div className="agenda" id="meeting-agenda">
+    <div className="back-img-1"></div>
+    <div className="back-img-2"></div>
+    <div className="wrapper">
+      <div className="module-header">
+        <img src={ titleIcon } alt="" />
+        <div className="title">
+          <span>会议议程</span>
+          <span>MEETING AGENDA</span>
        </div>
-        <div className="agenda-detail">
-          <div className="top-dot"></div>
-          <div className="bottom-dot"></div>
-          <div className="dashed-line"></div>
-          <div className="agenda-list">
-            {
-              mainList && mainList.length > 0 && mainList.map((i,k) => {
-                return <p className="agenda-item" key={ k }>
-                    <span>{ i.name }</span>
-                  </p>
-              })
-            }
+      </div>
+      <div className="date">
+        {
+          agendaDateList.map((i ,k) => {
+            return <div
+              className={ `date-item ${ activeTab === i ? 'date-item-active' : '' }` }
+              onClick={() => { setActiveTab(i) }}
+              key={ k }
+              >
+                { i }
+              </div>
+          })
+        }
+      </div>
+      <div className="content">
+        <img src={ main } alt="" className="content-icon"/>
+        <div className="content-right">
+          <div className="meeting">
+            <span>腾讯会议号：{ meetingAgenda.tencentMeeting[activeTab] }</span>
+            <a href={ meetingAgenda.bilibiliLive[activeTab] } target='_blank' >进入B站直播间</a>
+            <a href={ meetingAgenda.live[activeTab] } target='_blank' >进入直播间</a>
+          </div>
+          <div className="agenda-detail">
+            <div className="top-dot"></div>
+            <div className="bottom-dot"></div>
+            <div className="dashed-line"></div>
+            <div className="agenda-list">
+              {
+                mainList && mainList.length > 0 ? mainList.map((i,k) => {
+                  return <p className="agenda-item" key={ k }>
+                      <span>{ i.name }</span>
+                    </p>
+                }):
+                <img className="empty" src={ empty } alt="" />
+              }
+            </div>
+            <div></div>
          </div>
-          <div></div>
        </div>
      </div>
-    </div>
      <div className="content">
        <img src={ sub } alt="" className="content-icon"/>
        <div className="content-right">
@ -97,7 +102,7 @@ function MeetingAgenda(){
            <Spin spinning={isSpin}>
              <div className="agenda-list2">
                {
-                  subList && subList.length > 0 && subList.map((i,k) => {
+                  subList && subList.length > 0 ? subList.map((i,k) => {
                    return <div className="agenda-item2" key={ k }>
                      <p className="item-title">
                        <img src={ subdot } alt="" />
@ -105,13 +110,15 @@ function MeetingAgenda(){
                      </p>
                      <RenderHtml className="meeting-card" value={ i.content } url={ location } />
                    </div>
-                  })
+                  }):                
+                  <img className="empty" src={ empty } alt="" />
                }
              </div>
            </Spin>
          </div>
        </div>
      </div>
+    </div>
  </div>
 }
 export default MeetingAgenda
--- a/src/pages/homePage/member.jsx
+++ b/src/pages/homePage/member.jsx
@ -4,6 +4,7 @@ import { Carousel } from 'antd'
 import { useState, useEffect } from 'react';
 import titleIcon from 'img/homePage/title-icon.png'
 import { getMemberList } from '../../utils/request/api'
+import empty from 'img/empty.png'


 function Member(props) {
@ -26,7 +27,7 @@ function Member(props) {
    for(let i = 0; i< array.length;) {
      newArray.push(array.slice(i, i += 10));
    }
-    setTopics(newArray)
+    setTopics([])
  }

  return <div className="member wrapper" id="member">
@ -38,7 +39,7 @@ function Member(props) {
      </div>
    </div>
    {
-      topics.length > 0 && 
+      topics.length > 0 ? 
      <Carousel className="member-list">
        {
          topics.map((e, k) => {
@ -53,7 +54,8 @@ function Member(props) {
            </div>
          })
        }
-      </Carousel>
+      </Carousel>:
+      <img className="empty" src={ empty } alt="" />
    }
  </div>
 }
--- a/src/pages/information/detail.jsx
+++ b/src/pages/information/detail.jsx
@ -35,10 +35,12 @@ function Detail() {
    {
      detail && 
      <div className="detail-content">
-        <Breadcrumb separator=">">
-          { cmsDir && <Breadcrumb.Item href="information">{ cmsDir.name }</Breadcrumb.Item> }
-          <Breadcrumb.Item>正文</Breadcrumb.Item>
-        </Breadcrumb>
+        {
+          location.pathname.includes('information') && <Breadcrumb separator=">">
+            { 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>
--- a/src/pages/information/index.jsx
+++ b/src/pages/information/index.jsx
@ -3,6 +3,7 @@ import { Spin, Divider } from 'antd';
 import { useState , useEffect } from 'react';
 import { information } from '../../constants/info';
 import { getDocList } from '../../utils/request/api'
+import empty from 'img/empty.png'

 function Information() {
  const [ isSpin , setIsSpin ] = useState(false);
@ -78,7 +79,7 @@ function Information() {
            </div>
            <div className="content-wrapper">
              {
-                informationList[e.anchor] && informationList[e.anchor].map(( e, k ) => {
+                informationList[e.anchor] && informationList[e.anchor].length > 0 ? informationList[e.anchor].map(( e, k ) => {
                  return <div className="content-item" key={ k }>
                    <div className="item-left">{ e.date2 }</div>
                    <div className="item-right">
@ -89,7 +90,8 @@ function Information() {
                      <a href={ `information/detail/${ e.id }` } className="read-more">阅读全文 →</a>
                    </div>
                  </div>
-                })
+                }):
+                <img className="empty" src={ empty } alt="" />
              }
            </div>
          </div>
--- a/src/pages/information/index.less
+++ b/src/pages/information/index.less
@ -4,7 +4,7 @@
    background-size: 100% 100%;
  }
  .header {
-    width: 100vw;
+    width: 100%;
    height: 220px;
    text-align: center;
    color: #ffffff;
--- a/src/pages/organization/index.less
+++ b/src/pages/organization/index.less
@ -1,19 +1,21 @@
 .organization {
-  width: 1200px;
+  // width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
-  // justify-content: center;
  min-height: 100vh;
  position: relative;
+  .ant-spin-nested-loading {
+    width: 1200px;
+  }
  .back-img {
    background-image: url('img/organization-bg.png');
    background-size: 100% auto;
    background-repeat: repeat-y;
    position: absolute;
    height: calc(100% + 60px);
-    width: 100vw;
+    width: 100%;
    top: 0;
  }
  .module {
--- a/src/utils/request/index.js
+++ b/src/utils/request/index.js
@ -7,7 +7,7 @@ function beforeFetch(){
  }

  const service = axios.create({
-    // baseURL: ,
+    // baseURL: 'https://testgetway.trustie.net/',
    timeout: 1800000, // 请求超时时间
  });