From 0dc7a1f582192f2b6d671614cfbcd3d01e8ae1e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E7=AB=A5=E5=B4=87?=
 <hetongchong@MacBook-Pro.local>
Date: Tue, 14 Dec 2021 13:02:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=BC=E5=AE=B9=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/home/FifthSection/index.jsx     |   4 +-
 src/home/FifthSection/index.scss    |  78 +++++++-------
 src/home/FirstSection/index.scss    |  20 ++--
 src/home/Footer/index.scss          |  31 ++++--
 src/home/FourthSection/index.scss   |  86 ++++++++-------
 src/home/SecondSection/index.jsx    |  11 +-
 src/home/SecondSection/index.scss   |  46 ++++----
 src/home/SeventhSection/index.scss  |  14 +++
 src/home/ThirdSection/index.scss    |  23 ++--
 src/home/index.jsx                  | 159 ++++++++++++++++++++--------
 src/home/index.scss                 |  86 ++++++++++++---
 src/modules/tpm/NewHeader.js        |   2 +-
 src/modules/tpm/NewHeader_backup.js |   4 +-
 13 files changed, 367 insertions(+), 197 deletions(-)

diff --git a/src/home/FifthSection/index.jsx b/src/home/FifthSection/index.jsx
index 49b49891e..191cd4961 100644
--- a/src/home/FifthSection/index.jsx
+++ b/src/home/FifthSection/index.jsx
@@ -118,7 +118,7 @@ function FifthSection({ fifth, history }) {
     });
   }, []);
 
-  function goTask(item){
+  function goTask(item) {
     history.push(`/task?type=${item.id}`)
     // console.log(item);
   }
@@ -131,7 +131,7 @@ function FifthSection({ fifth, history }) {
           <ul className="icon-circle">
             {
               taskCategoryArr.map((item, i) => {
-                return (<li key={item.id} onClick={()=>{goTask(item)}}>
+                return (<li key={item.id} onClick={() => { goTask(item) }}>
                   <i className={`iconfont icon-${item.icon}`}></i>
                   <span>{item.name}</span>
                 </li>)
diff --git a/src/home/FifthSection/index.scss b/src/home/FifthSection/index.scss
index 256adc713..6d91d3129 100644
--- a/src/home/FifthSection/index.scss
+++ b/src/home/FifthSection/index.scss
@@ -17,8 +17,8 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
 
   .circle-wave {
     position: relative;
-    width: 600px;
-    height: 700px;
+    width: 37.5em;
+    height: 43.75em;
     flex: none;
 
     &:hover .icon-circle {
@@ -31,26 +31,26 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
   }
   .icon-circle {
     position: absolute;
-    width: 560px;
-    height: 560px;
+    width: 35em;
+    height: 35em;
     border-radius: 50%;
     animation: iconCircle infinite 20s linear;
 
     li {
-      width: 70px;
-      height: 70px;
+      width: 4.375em;
+      height: 4.375em;
       position: absolute;
       background-color: #254dea;
       border-radius: 50%;
       color: #fff;
-      line-height: 70px;
+      line-height: 4.375em;
       text-align: center;
       left: 50%;
-      margin-left: -20px;
-      margin-top: -20px;
+      margin-left: -1.25em;
+      margin-top: -1.25em;
       cursor: pointer;
       .iconfont {
-        font-size: 24px !important;
+        font-size: 1.5em !important;
         cursor: pointer;
       }
     }
@@ -59,7 +59,7 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
       li:nth-child(#{$i}) {
         background: nth($bgcolorlist, $i);
         transform: rotate(($i - 1) * $deg);
-        transform-origin: 20px 300px;
+        transform-origin: 1.25em 18.75em;
         span {
           transform: rotate(($i - 1) * $deg2);
           animation: iconItem#{$i} infinite 20s linear;
@@ -105,10 +105,10 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
 
   .circleBox {
     position: relative;
-    right: 15px;
-    width: 160px;
-    height: 160px;
-    margin: 200px auto 0;
+    right: .95em;
+    width: 10em;
+    height: 10em;
+    margin: 12.5em auto 0;
   }
 
   .circle1,
@@ -116,8 +116,8 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
   .circle3,
   .circle4,
   .circle5 {
-    width: 160px;
-    height: 160px;
+    width: 10em;
+    height: 10em;
     border-radius: 50%;
     position: absolute;
   }
@@ -130,14 +130,14 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
   }
 
   .circle-center {
-    width: 100px;
-    height: 100px;
+    width: 6.25em;
+    height: 6.25em;
     padding: 1em 1.25em;
     border-radius: 50%;
     background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%);
     color: #fff;
     text-align: center;
-    font-size: 20px;
+    font-size: 1.25em;
     line-height: 1.4;
   }
 
@@ -219,10 +219,10 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
   }
 
   .task-main {
-    margin:-40px 0  0 40px;
+    margin:-2.5em 0  0 2.5em;
     .home-line {
       text-align: left;
-      margin-bottom: 25px !important;
+      margin-bottom: 1.56em !important;
     }
   }
 
@@ -231,29 +231,29 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
     background: inherit;
     .ant-collapse-item {
       border: 0;
-      margin-bottom: 15px;
+      margin-bottom: .95em;
     }
     .ant-collapse-item:last-child,
     .ant-collapse-item:last-child > .ant-collapse-header {
-      border-radius: 6px 6px 0 0;
+      border-radius: .375em .375em 0 0;
     }
 
     .ant-collapse-header {
-      height: 78px;
+      height: 4.875em;
       background: #ffffff;
-      box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04);
-      border-radius: 6px;
-      font-size: 18px;
+      box-shadow: 0px 0px .625em 5px rgba(38, 118, 255, 0.04);
+      border-radius: .375em;
+      font-size: 1.125em;
       color: #0a1255;
       letter-spacing: 0;
       font-weight: 500;
-      padding: 27px 45px 27px 36px;
+      padding: 27px 45px 27px 3.375em;
 
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
 
-      max-width: 560px;
+      max-width: 35em;
 
       .ant-collapse-arrow {
         display: inline-flex;
@@ -271,12 +271,12 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
 
     .ant-collapse-item-active {
       background: #ffffff;
-      box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04);
-      border-radius: 6px;
+      box-shadow: 0px 0px .625em 5px rgba(38, 118, 255, 0.04);
+      border-radius: .375em;
       border: 0;
       .ant-collapse-header {
         height: 48px;
-        padding: 15px 36px;
+        padding: .95em 3.375em;
         background: #596cee;
         color: #fff;
         border-bottom-left-radius: 0px;
@@ -289,13 +289,13 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
     }
 
     .ant-collapse-content > .ant-collapse-content-box {
-      padding: 16px 28px;
+      padding: 1.375em 28px;
     }
   }
 
   .collapse-des {
-    height: 56px;
-    font-size: 15px;
+    height: 5.375em;
+    font-size: .95em;
     color: #3a4772;
     letter-spacing: 0;
     line-height: 28px;
@@ -320,11 +320,11 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
       color: #ea0000;
     }
     .collapse-content-money {
-      margin-left: 16px;
+      margin-left: 1.375em;
       color: #ea0000;
     }
     .collapse-content-time {
-      margin-left: 16px;
+      margin-left: 1.375em;
     }
   }
 
@@ -332,7 +332,7 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
     color: #4154f1;
     border-color: #4154f1;
     position: absolute;
-    right: 20px;
+    right: 1.25em;
   }
   .waves {
     position: relative;
diff --git a/src/home/FirstSection/index.scss b/src/home/FirstSection/index.scss
index 6839ddb03..3d29156ff 100644
--- a/src/home/FirstSection/index.scss
+++ b/src/home/FirstSection/index.scss
@@ -1,13 +1,19 @@
 .home-first-section {
   height: 90vh;
   min-height: 650px;
+  // background: linear-gradient(
+  //   #1a2358 0%,
+  //   #12277b 33%,
+  //   #0c2d8f 67%,
+  //   #002a89 100%
+  // );
   background: linear-gradient(
-    #1a2358 0%,
-    #12277b 33%,
-    #0c2d8f 67%,
-    #002a89 100%
+    #0037AF 0%,
+    #0c2d8f 100%,
   );
 
+  // #003FCC 100%
+
   .grid-picture {
     position: relative;
     height: 100%;
@@ -40,7 +46,7 @@
     color: #fff;
     .website-title {
       color: #fff;
-      font-size: 34px;
+      font-size: 2.4em;
     }
     .website-vision {
       display: flex;
@@ -50,9 +56,9 @@
       font-size: 25px;
     }
     .website-des {
-      font-size: 16px;
+      font-size: 1em;
       line-height: 2.3;
-      margin-bottom: 40px;
+      margin-bottom: 1.5em;
       opacity: 0.8;
     }
 
diff --git a/src/home/Footer/index.scss b/src/home/Footer/index.scss
index 5445bb918..976e460b3 100644
--- a/src/home/Footer/index.scss
+++ b/src/home/Footer/index.scss
@@ -1,13 +1,15 @@
 .home-footer {
   height: 40vh;
-  width: 100vw;
-  background: #162046;
+  min-width: 100vw;
+  // background: #162046;
+  background: linear-gradient(#cbdcff 0%, #162046 5%, #162046 100%);
+
   overflow: hidden;
   .arc {
     position: relative;
     margin: -15vh -5vw 0 -5vw;
     height: 30vh;
-    width: 110vw;
+    // width: 110vw;
     // background: linear-gradient(#cbdcff 0%, #bbccef 100%);
     background: #cbdcff;
     border-radius: 50%;
@@ -41,18 +43,31 @@
     border-radius: 10px;
     margin-right: 3px;
   }
-  .police-number{
+  .police-number {
     color: #bdc2d1;
   }
 
-  .footer-email{
+  .footer-email {
     display: inline-flex;
-    .iconfont{
+    .iconfont {
       margin-right: 2px;
     }
   }
 
-  .footerbottom{
-    background-color:#162046 !important;
+  .footerbottom {
+    background-color: #162046 !important;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .home-footer {
+    height: 400px;
+    .arc {
+      margin: -100px -100px 0;
+      height: 200px;
+      border-radius: 50%;
+    }
+    .footer-main{
+      height: 200px;
+    }
   }
 }
diff --git a/src/home/FourthSection/index.scss b/src/home/FourthSection/index.scss
index 34ab2b09d..c7e066d40 100644
--- a/src/home/FourthSection/index.scss
+++ b/src/home/FourthSection/index.scss
@@ -1,32 +1,38 @@
 .home-fourth-section {
   text-align: center;
   min-height: 45vh;
-  padding: 30px 0 20px 0;
+  padding: 1.95em 0 1.25em 0;
   background: url(../img/4-map.png) no-repeat;
 
+  .homepage-btn{
+    margin-top:1.25em;
+  }
   .fourth-main {
-    margin: 20px auto;
+    margin: 1.25em auto;
   }
   .fourth-title {
     display: flex;
   }
   .fourth-main-title {
-    width: 400px;
-    margin-right: 50px;
+    width: 33%;
+    margin-right: 4.5%;
   }
 
   .code-box {
     position: relative;
-    width: 750px;
+    width: 62.5%;
     img {
       float: left;
-      width: 240px;
+      width: 32%;
+    }
+    &>img{
+      max-width: 20vw;
     }
   }
   .code-box-action {
-    width: 500px;
-    height: 332px;
-    border-radius: 20px;
+    width: 67%;
+    height: 20.75em;
+    border-radius: 1.25em;
   }
   .code-box-picture {
     position: relative;
@@ -40,26 +46,26 @@
 
   .code-box-code {
     position: absolute;
-    top: 100px;
-    left: 160px;
+    top: 6.25em;
+    left: 10em;
     background: #fff;
-    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);
+    box-shadow: 0px 0px .25em .25em rgba(0, 0, 0, 0.06);
     opacity: 0;
   }
 
   .hadoopCode {
-    border-radius: 5px;
-    margin: 10px;
+    border-radius: .3em;
+    margin: .625em;
     background: #1c1c25;
-    padding: 18px 20px;
+    padding: 1.125em 1.25em;
     flex: 1;
     position: relative;
     li {
       display: flex;
       flex-wrap: wrap;
-      font-size: 12px;
+      font-size: .75em;
       font-weight: 500;
-      line-height: 25px;
+      line-height: 2.1em;
       color: #e1e1e1;
     }
   }
@@ -72,9 +78,9 @@
     margin-bottom: 0;
     .codenum {
       display: inline-block;
-      width: 15px;
+      width: .95em;
       text-align: left;
-      margin-right: 15px;
+      margin-right: .95em;
     }
     .code-green {
       color: #00fa30;
@@ -114,7 +120,7 @@
     position: relative;
     display: flex;
     justify-content: space-between;
-    padding: 20px 0;
+    padding: 1.25em 0;
     opacity: 0;
   }
 
@@ -123,21 +129,21 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    width: 254px;
-    height: 193px;
-    border: 1px dashed #517df1;
-    border-radius: 6px;
+    width: 15.875em;
+    height: 12em;
+    border: .1em dashed #517df1;
+    border-radius: 0.375em;
 
     .fourth-item-img {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 72px;
-      height: 72px;
+      width: 4.5em;
+      height: 4.5em;
       background: #ffffff;
       border-radius: 50%;
-      box-shadow: 0px 0px 8px 7px rgba(38, 118, 255, 0.04);
+      box-shadow: 0px 0px .5em .5em rgba(38, 118, 255, 0.04);
     }
 
     .fourth-item-circle {
@@ -150,39 +156,39 @@
     .fourth-item-circle::after {
       content: "";
       position: absolute;
-      width: 8px;
-      height: 8px;
+      width: .5em;
+      height: .5em;
       border-radius: 50%;
       background: linear-gradient(-45deg, #0949ff 0, #03bdff 100%);
     }
     .fourth-item-circle::before {
-      top: -4px;
-      left: 32px;
+      top: -.25em;
+      left: 2em;
     }
     .fourth-item-circle::after {
-      left: 32px;
-      bottom: -4px;
+      left: 2em;
+      bottom: -.25em;
     }
 
     .fourth-item-title {
       margin: 0.5em auto 0;
       font-family: PingFangSC-Medium;
-      font-size: 20px;
+      font-size: 1.25em;
       color: #0a1255;
       font-weight: 500;
     }
 
     .fourth-item-des {
       font-family: PingFangSC-Medium;
-      font-size: 16px;
+      font-size: 1em;
       color: #777988;
-      line-height: 32px;
+      line-height: 2em;
       font-weight: 500;
     }
   }
 
   .project-item:nth-child(2) {
-    margin-top: 80px;
+    margin-top: 5em;
     border-color: #df0757;
     .fourth-item-circle {
       animation: turnCircle2 infinite 10s linear;
@@ -194,7 +200,7 @@
   }
 
   .project-item:nth-child(3) {
-    margin-top: 160px;
+    margin-top: 10em;
     border-color: #00ffa4;
     .fourth-item-circle::before,
     .fourth-item-circle::after {
@@ -203,7 +209,7 @@
   }
 
   .project-item:nth-child(4) {
-    margin-top: 140px;
+    margin-top: 8.75em;
     border-color: #8b5ff0;
     .fourth-item-circle {
       animation: turnCircle2 infinite 10s linear;
@@ -339,3 +345,5 @@
     }
   }
 }
+
+
diff --git a/src/home/SecondSection/index.jsx b/src/home/SecondSection/index.jsx
index d8d3cc76f..b72627914 100644
--- a/src/home/SecondSection/index.jsx
+++ b/src/home/SecondSection/index.jsx
@@ -15,7 +15,7 @@ let setting = {
   slidesToShow: 3,
   slidesToScroll: 1,
   pauseOnDotsHover: true,
-  autoplaySpeed: 4000,
+  autoplaySpeed: 400000,
   centerMode: true,
   centerPadding: "10px",
   // pauseOnFocus: true,
@@ -56,7 +56,7 @@ function SecondSection({ second ,main_web_site_url}) {
   return (
     <React.Fragment>
       <h2 className="homePage-blue-tit">社区动态</h2>
-      <h4 className="homePage-subhead">社区动态副标题社区动态副标题社区动态副标题</h4>
+      <h4 className="homePage-subhead">为社区用户提供自主交流空间，实现思维碰撞和智慧融合</h4>
       <Line />
       <div className="homepage-main community-main">
 
@@ -108,9 +108,12 @@ function SecondSection({ second ,main_web_site_url}) {
           <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
         </defs>
         <g className="parallax">
-          <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(4,22,112,0.2)" />
+          {/* <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(4,22,112,0.2)" />
           <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(4,22,112,0.2)" />
-          <use xlinkHref="#wave-path" x="50" y="9" fill="#041670" />
+          <use xlinkHref="#wave-path" x="50" y="9" fill="#041670" /> */}
+          <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" />
+          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" />
+          <use xlinkHref="#wave-path" x="50" y="9" fill="#0037AF" />
         </g>
       </svg>
     </React.Fragment>
diff --git a/src/home/SecondSection/index.scss b/src/home/SecondSection/index.scss
index 9a9e7dbc6..a46220470 100644
--- a/src/home/SecondSection/index.scss
+++ b/src/home/SecondSection/index.scss
@@ -5,26 +5,26 @@
   margin-bottom: -10px;
 
   .community-left-tit {
-    font-size: 20px;
+    font-size: 1.15em;
     color: #000870;
   }
 
   .community-main {
     display: flex;
     justify-content: space-between;
-    margin: 20px auto 50px;
+    margin: 1.25em auto 3.15em;
     text-align: left;
 
     .homepage-btn {
-      margin-top: 40px;
+      margin-top: 2.5em;
     }
   }
 
   .community-english {
-    font-size: 20px;
+    font-size: 1.25em;
     opacity: 0.88;
     color: #e67a21;
-    margin-right: 20px;
+    margin-right: 1.25em;
   }
 
   .community-star {
@@ -38,17 +38,17 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: 600px;
+    width: 50%;
     padding-right: 20px;
     opacity: 0;
     text-align: left;
   }
   .community-left-content {
-    font-size: 15px;
+    font-size: .95em;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #3c476e;
-    line-height: 36px;
+    line-height: 2.25em;
   }
 
   .community-active {
@@ -75,14 +75,14 @@
 }
 
 .home-second-section-slide {
-  width: 600px;
+  width: 50%;
   .slick-track > div {
-    max-width: 500px;
+    max-width: 83.3%;
     position: relative;
     transition: all 0.7s;
   }
   .news-slide-item {
-    height: 180px;
+    height: 11.25em;
     overflow: hidden;
     background-image: linear-gradient(
       to bottom right,
@@ -93,22 +93,17 @@
       #c6d3ff 100%
     );
     margin-bottom: 10px;
-    padding: 20px 30px 26px;
+    padding: 1.25em 1.8em 1.6em;
     border: 1px solid #fff;
-    border-radius: 6px;
+    border-radius: .3em;
 
-    // & > .iconfont {
-    //   float: right;
-    //   font-size: 25px !important;
-    //   color: rgb(239, 122, 48);
-    // }
     .slide-title {
       display: flex;
       align-items: center;
     }
     .slide-title-content {
       color: #000870;
-      font-size: 18px;
+      font-size: 1em;
       margin-bottom: 0 !important;
       flex: auto;
     }
@@ -118,9 +113,9 @@
       margin-right: 1em;
       color: #fff;
       border-radius: 50%;
-      width: 28px;
-      height: 28px;
-      line-height: 28px;
+      width: 1.75em;
+      height: 1.75em;
+      line-height: 1.75em;
       background: linear-gradient(
         272deg,
         #4154f1 0%,
@@ -134,9 +129,9 @@
     .slide-tag {
       flex: none;
       color: #fff;
-      padding: 3px 13px;
+      padding: .2em .75em;
       background: #586dff;
-      border-radius: 3px;
+      border-radius: .2em;
     }
 
     .slide-tag-1{
@@ -153,13 +148,14 @@
 
 
     .news-time {
-      font-size: 15px;
+      font-size: .95em;
       font-weight: 400;
       color: #3c476e;
     }
 
     p {
       color: #3c476e;
+      font-size: .9em;
     }
   }
   .slick-center {
diff --git a/src/home/SeventhSection/index.scss b/src/home/SeventhSection/index.scss
index 712758d5f..3dabc1b87 100644
--- a/src/home/SeventhSection/index.scss
+++ b/src/home/SeventhSection/index.scss
@@ -138,3 +138,17 @@
     }
   }
 }
+
+@media screen and (max-width: 1400px){
+  .home-seventh-section .clients{
+    width: 86%;
+    left:8%;
+  }
+}
+
+@media screen and (max-width: 1200px){
+  .home-seventh-section .clients{
+    width: 80%;
+    left:11%;
+  }
+}
diff --git a/src/home/ThirdSection/index.scss b/src/home/ThirdSection/index.scss
index db2a5ceb9..e54fad120 100644
--- a/src/home/ThirdSection/index.scss
+++ b/src/home/ThirdSection/index.scss
@@ -1,10 +1,11 @@
 .home-third-section {
   color: #fff;
   background: linear-gradient(
-    #041670 0%,
-    #2951DA 100%
+    #0037AF 0%,
+    #2951DA 100%,
   );
   text-align: center;
+    // #041670 0%,
 
   .ball-background{
     background: url(../img/3-ballBg.png) no-repeat;
@@ -13,7 +14,7 @@
   .third-tit {
     padding-top: 1.75em;
     color: #fff;
-    font-size: 34px;
+    font-size: 2em;
   }
 
   .third-main {
@@ -24,18 +25,18 @@
   }
 
   .circle-item > h4 {
-    margin-top: 20px;
+    margin-top: 1.25em;
     color: #fff;
     font-weight: 600;
-    font-size: 18px;
+    font-size: 1.15rem;
   }
 
   .circle-item-box {
     position: relative;
-    width: 164px;
-    height: 164px;
+    width: 10.25em;
+    height: 10.25em;
     box-sizing: border-box;
-    padding: 4px;
+    padding: .25em;
     border-radius: 50%;
     background-image: linear-gradient(
       to bottom right,
@@ -55,7 +56,7 @@
     height: 100%;
     border-radius: 50%;
     background: #12277b;
-    font-size: 48px;
+    font-size: 3em;
     font-weight: 600;
     span {
       background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
@@ -65,8 +66,8 @@
 
     &::before {
       position: absolute;
-      left: -8px;
-      top: -8px;
+      left: -5%;
+      top: -5%;
       content: "";
       background-image: url(../img/3-dashCircle.png);
       width: 110%;
diff --git a/src/home/index.jsx b/src/home/index.jsx
index 2f54ade5d..286a41060 100644
--- a/src/home/index.jsx
+++ b/src/home/index.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
+import { isMobile } from 'educoder';
 import './index.scss';
 
 import FirstSection from './FirstSection';
@@ -23,18 +24,32 @@ function HomePage({ history }) {
   }, []);
 
   const [first, setFirst] = useState(true);
-  const [second, setSecond] = useState(false);
+  const [second, setSecond] = useState(isMobile);
   const [third, setThird] = useState(false);
   const [fourth, setFourth] = useState(false);
   const [fifth, setFifth] = useState(false);
   const [sixth, setSixth] = useState(false);
 
+
   let settings = JSON.parse(localStorage.chromesetting);
   let main_web_site_url = settings.main_web_site_url;
 
+  useEffect(() => {
+    let userAgentInfo = navigator.userAgent;
+    let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+    let flag = false;
+    for (let v = 0; v < Agents.length; v++) {
+      if (userAgentInfo.indexOf(Agents[v]) > -1) {
+        flag = true;
+        break;
+      }
+    }
+    console.log('flag:' + flag)
+  }, [])
 
   function scrollListener() {
     let clientHeight = document.body.clientHeight;
+    let clientWidth = document.body.clientWidth;
     let secondSection = document.querySelector(".home-second-section").offsetTop;
     let thirdSection = document.querySelector(".home-third-section").offsetTop;
     let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
@@ -44,60 +59,114 @@ function HomePage({ history }) {
 
     let top = document.documentElement.scrollTop;
 
+
+
     // console.log("thirdSection:" + thirdSection);
     // console.log("thirdSection:" + thirdSection);
     // console.log("fourthSection:" + fourthSection);
     // console.log("fifthSection:" + fifthSection);
     // console.log("sixthSection:" + sixthSection);
     // console.log("seventhSection:" + seventhSection);
-    // console.log("top:" + top);
 
-    // 第一个动效
-    if (top >= clientHeight - 300) {
-      setFirst(false);
+    // 平板电脑及电脑
+    if (!isMobile) {
+      // 第一个动效
+      if (top >= clientHeight - 300) {
+        setFirst(false);
+      } else {
+        setFirst(true);
+      }
+
+      // 第二个动效
+      if (top >= secondSection - 600 && top < thirdSection) {
+        setSecond(true);
+      }
+      if (top < 100 || top > thirdSection - 100) {
+        setSecond(false);
+      }
+
+      // 第三个动效
+      if (top >= thirdSection - 600 && top < fourthSection) {
+        setThird(true);
+      }
+      if (top < secondSection || top > fourthSection - 100) {
+        setThird(false);
+      }
+
+      // 第四个动效
+      if (top >= fourthSection - 600 && top < fifthSection) {
+        setFourth(true);
+      }
+      if (top < thirdSection || top > fifthSection) {
+        setFourth(false);
+      }
+
+      // 第五个动效
+      if (top >= fifthSection - 600 && top < sixthSection) {
+        setFifth(true);
+      }
+      if (top < fourthSection || top > sixthSection) {
+        setFifth(false);
+      }
+
+      // 第六个动效
+      if (top >= sixthSection - 600 && top < seventhSection - 100) {
+        setSixth(true);
+      }
+      if (top < fifthSection || top > seventhSection - 100) {
+        setSixth(false);
+      }
     } else {
-      setFirst(true);
+      // 手机
+      // 第一个动效
+
+      if (top >= clientHeight - 100) {
+        setFirst(false);
+      } else {
+        setFirst(true);
+      }
+
+      // 第二个动效
+      if (top < thirdSection) {
+        setSecond(true);
+      }
+      if (top > thirdSection) {
+        setSecond(false);
+      }
+
+      // 第三个动效
+      if (top >=  200 && top < fifthSection) {
+        setThird(true);
+      }
+      if (top < 200 || top > sixthSection - 100) {
+        setThird(false);
+      }
+
+      // 第四个动效
+      if (top >= 500) {
+        setFourth(true);
+      }
+      if (top < 500 || top > fifthSection) {
+        setFourth(false);
+      }
+
+      // 第五个动效
+      if (top >= thirdSection - 600 && top < sixthSection) {
+        setFifth(true);
+      }
+      if (top < secondSection || top > sixthSection) {
+        setFifth(false);
+      }
+
+      // 第六个动效
+      if (top >= fourthSection - 600) {
+        setSixth(true);
+      }
+      if (top < thirdSection) {
+        setSixth(false);
+      }
     }
 
-    // 第二个动效
-    if (top >= secondSection - 600 && top < thirdSection) {
-      setSecond(true);
-    }
-    if (top < 100 || top > thirdSection - 100) {
-      setSecond(false);
-    }
-
-    // 第三个动效
-    if (top >= thirdSection - 600 && top < fourthSection) {
-      setThird(true);
-    }
-    if (top < secondSection || top > fourthSection - 100) {
-      setThird(false);
-    }
-
-    // 第四个动效
-    if (top >= fourthSection - 600 && top < fifthSection) {
-      setFourth(true);
-    }
-    if (top < thirdSection || top > fifthSection) {
-      setFourth(false);
-    }
-
-    // 第五个动效
-    if (top >= fifthSection - 600 && top < sixthSection) {
-      setFifth(true);
-    }
-    if (top < fourthSection || top > sixthSection) {
-      setFifth(false);
-    }
-
-    // 第六个动效
-    if (top >= sixthSection - 600 && top < seventhSection - 100) {
-      setSixth(true);
-    }
-    if (top < fifthSection || top > seventhSection - 100) {
-      setSixth(false);
-    }
 
   }
 
diff --git a/src/home/index.scss b/src/home/index.scss
index 67a78287b..6ee51656d 100644
--- a/src/home/index.scss
+++ b/src/home/index.scss
@@ -1,6 +1,7 @@
 .homePage {
   background: #fff;
-  min-width: 800px;
+  font-size: 16px;
+  // min-width: 800px;
   // 首页多个部分公共样式
 
   // 1行省略号
@@ -27,7 +28,7 @@
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 5;
-    line-clamp:5;
+    line-clamp: 5;
     -webkit-box-orient: vertical;
   }
 
@@ -38,17 +39,20 @@
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 8;
-    line-clamp:8;
+    line-clamp: 8;
     -webkit-box-orient: vertical;
   }
 
-  .link{
+  .link {
     cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
   }
 
   .ant-btn-primary {
-    background-color: #4154f1;
-    border-color: #4154f1;
+    background-color: #2a3ee9;
+    border-color: #2a3ee9;
     height: 56px;
     box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important;
     border-radius: 6px;
@@ -57,9 +61,13 @@
     width: 140px;
     height: 56px;
     font-size: 16px;
-    .icon-gengduoicon{
-      margin-left:5px;
-      color: #FFBF2D;
+    &:hover {
+      background-color: #4154f1;
+      border-color: #4154f1;
+    }
+    .icon-gengduoicon {
+      margin-left: 5px;
+      color: #ffbf2d;
       font-size: 16px !important;
     }
   }
@@ -70,7 +78,7 @@
   .homepage-main {
     width: 1200px;
     max-width: 98%;
-    margin: 0 auto;
+    margin: -1px auto 0;
   }
 
   .homePage-blue-tit {
@@ -102,7 +110,8 @@
   // 首页特定头部样式起
 
   &.newHeaders {
-    background-color: #1a2358;
+    // background-color: #1a2358;
+    background-color: #0037af;
   }
   .head-nav {
     min-width: auto;
@@ -146,7 +155,7 @@
   position: relative;
   width: 100%;
   height: 8vh;
-  bottom: -.5vh;
+  bottom: -0.5vh;
 }
 // .waves-low {
 //   height: 6vh;
@@ -178,9 +187,58 @@
     transform: translate3d(85px, 0, 0);
   }
 } /*Shrinking for mobile*/
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
   .waves {
-    height: 8vh;
+    height: 6vh;
   }
 }
 // 波浪样式止
+
+@media screen and (min-width: 2000px) {
+  .homePage {
+    font-size: 20px;
+    .homepage-main {
+      width: 1600px;
+    }
+    .home-first-section{
+      .website{
+        margin-right:7%;
+      }
+      .play-img {
+        width: 50%;
+        .play-circle{
+          right: 21%;
+        }
+        .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
+          right:26.1%
+        }
+      }
+    } 
+    
+  }
+}
+
+
+@media screen and (min-width: 2000px) {
+  .homePage {
+    font-size: 20px;
+    .homepage-main {
+      width: 1600px;
+    }
+    .home-first-section{
+      .website{
+        margin-right:7%;
+      }
+      .play-img {
+        width: 50%;
+        .play-circle{
+          right: 21%;
+        }
+        .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
+          right:26.1%
+        }
+      }
+    } 
+    
+  }
+}
diff --git a/src/modules/tpm/NewHeader.js b/src/modules/tpm/NewHeader.js
index 2cb2f6623..a01c96a05 100644
--- a/src/modules/tpm/NewHeader.js
+++ b/src/modules/tpm/NewHeader.js
@@ -721,7 +721,7 @@ class NewHeader extends Component {
           <a href={mygetHelmetapi2 && mygetHelmetapi2.new_course.default_url} className={"fl mr30"} style={{minWidth:"45px"}}>
             {
               mygetHelmetapi2 && mygetHelmetapi2.nav_logo_url ?
-                <img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={activeIndex?logo:getLogoImageUrl(mygetHelmetapi2.nav_logo_url)}></img>
+                <img alt="红山开源社区" className="logoimg" style={{ heigth: "40px" }} src={activeIndex?logo:getLogoImageUrl(mygetHelmetapi2.nav_logo_url)}></img>
               :
               ""
             }
diff --git a/src/modules/tpm/NewHeader_backup.js b/src/modules/tpm/NewHeader_backup.js
index 13c3c2a0d..0081969bd 100644
--- a/src/modules/tpm/NewHeader_backup.js
+++ b/src/modules/tpm/NewHeader_backup.js
@@ -772,14 +772,14 @@ class NewHeader extends Component {
             mygetHelmetapi2.nav_logo_url &&
             mygetHelmetapi2.nav_logo_url ? (
               <img
-                alt="可控开源社区"
+                alt="红山开源社区"
                 className="logoimg"
                 style={{ heigth: "40px" }}
                 src={getImageUrl(mygetHelmetapi2.nav_logo_url)}
               ></img>
             ) : (
               <img
-                alt="可控开源社区"
+                alt="红山开源社区"
                 className="logoimg"
                 style={{ heigth: "40px" }}
                 src={getImageUrl("images/educoder/headNavLogo.png?1526520218")}