新增第一个特效的各种图片

src/home/index.jsx

@@ -1,7 +1,18 @@
 import React, { useEffect, useState } from 'react';
+import { Button } from 'antd';
 import NewSlide from "./NewSlide";
 import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
 
+import circle from './img/circle.png';
+import code from './img/code.png';
+import glass from './img/glass.png';
+import logo from './img/logo.png';
+import pillar from './img/pillar.png';
+import text1 from './img/text1.png';
+import text2 from './img/text2.png';
+import text3 from './img/text3.png';
+import text4 from './img/text4.png';
+
 import './index.scss';
 
 function HomePage(props) {
@@ -9,7 +20,38 @@ function HomePage(props) {
   return (
     <div className="homePage">
       <div className="first-edition">
+        <div className="grid-picture">
+          <div className="homepage-content">
 
+            <div className="website">
+              <h3 className="website-title">红山开源</h3>
+              <div className="website-vision">
+                <span>群智共享</span>
+                <span>开源开放</span>
+                <span>协同创新</span>
+                <span>择优孵化</span>
+              </div>
+              <div className="website-des">红山开源是一个依托互联网群体智慧实现世界范围内资源深度融合、开放共享和协同创新的开源社区，是集开源项目演化发展、科研任务众包、竞赛组织选拔和社区开放交流为一体的创新科研服务平台。红山开源致力于打造一个“开放、汇聚、协同、众创”的生态空间。
+              </div>
+              <Button className="website-more" type="primary">了解详情</Button>
+            </div>
+
+            <div className="play-img">
+              <img className="play-glass" src={glass}></img>
+              <img className="play-circle" src={circle}></img>
+              <img className="play-code"  src={code}></img>
+              <img className="play-pillar"  src={pillar}></img>
+              <img className="play-logo"  src={logo}></img>
+              <img className="play-text1"  src={text1}></img>
+              <img className="play-text2"  src={text2}></img>
+              <img className="play-text3"  src={text3}></img>
+              <img className="play-text4"  src={text4}></img>
+            </div>
+          </div>
+
+
+
+        </div>
       </div>
 
       <div className="waves-header">
@@ -30,21 +72,6 @@ function HomePage(props) {
             <use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
           </g>
         </svg>
-
-        {/* <svg class="hero-waves" viewBox="0 24 150 28 " preserveAspectRatio="none" shapeRendering="auto">
-          <defs>
-            <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">
-            </path></defs>
-          <g class="wave1">
-            <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
-            </use></g>
-          <g class="wave2">
-            <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
-            </use></g>
-          <g class="wave3">
-            <use xlinkHref="#wave-path" x="50" y="9" fill="#fff">
-            </use></g>
-        </svg> */}
       </div>
 
       <NewSlide></NewSlide>

src/home/index.scss

@@ -1,27 +1,131 @@
-.homePage{
-  margin-top:-6px;
+.homePage {
+  margin-top: -6px;
 
-  .first-edition{
+  .first-edition {
     height: 80vh;
     background: linear-gradient(
-    #1A2358 0%,
-    #12277B 33%,
-    #0C2D8F 67%,
-    #002A89 100%
-  );
+      #1a2358 0%,
+      #12277b 33%,
+      #0c2d8f 67%,
+      #002a89 100%
+    );
+  }
+
+  .grid-picture {
+    height: 100%;
+    background: url(./img/grid.png) no-repeat;
+  }
+
+  .homepage-content {
+    display: flex;
+    justify-content: space-between;
+    width: 1200px;
+    height: 100%;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  .website {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    // width: 48%;
+    height: 100%;
+    color: #fff;
+    .website-title {
+      color: #fff;
+      font-size: 34px;
+    }
+    .website-vision {
+      margin-bottom: 36px;
+      color: #ff832b;
+      font-size: 25px;
+      span {
+        margin-right: 30px;
+      }
+    }
+    .website-des {
+      font-size: 12px;
+      margin-bottom: 40px;
+    }
+    .website-more {
+      width: 140px;
+    }
+  }
+
+  .play-img {
+    display: flex;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 600px;
+    height: 580px;
+    img {
+      width: 25%;
+    }
+
+    .play-glass {
+      position: relative;
+      width: 50%;
+      z-index: 1;
+    }
+    .play-circle {
+      position: absolute;
+      // width: 25%;
+      // bottom: 0;
+      // right: 10%;
+
+      width: 25%;
+      bottom: 3%;
+      right: 18%;
+      z-index: 2;
+    }
+    .play-pillar {
+      position: absolute;
+      left: 0;
+      top: 25%;
+    }
+    .play-code {
+      position: absolute;
+      right: 0;
+      top: 10%;
+    }
+    .play-logo {
+      position: absolute;
+    }
+    .play-text1 {
+      position: absolute;
+      // right: 10%;
+      // z-index: 2;
+      
+      right: 10%;
+      z-index: 2;
+    }
+    .play-text2 {
+      position: absolute;
+      // bottom: 30%;
+      // left: 17.5%;
+      // z-index: 2;
+
+      bottom: 28%;
+      left: 13%;
+      z-index: 2;
+      width: 30%;
+    }
+    .play-text3 {
+      position: absolute;
+      right: 10%;
+      top: -6%;
+    }
+    .play-text4 {
+      position: absolute;
+      top: 0;
+      left: 20%;
+    }
   }
 }
 
-
-.hero-waves {
-  display: block;
-  width: 100%;
-  height: 200px;
-  position: relative;
-}
-
-
-
 .news-slide {
   margin: 20px auto;
   width: 600px;
@@ -29,9 +133,9 @@
   .slick-track > div {
     max-width: 500px;
     position: relative;
-    transition: all .7s;
+    transition: all 0.7s;
     border: 1px solid #fff;
-    .testimonial-item{
+    .testimonial-item {
       background: #ffffff;
       margin-bottom: 20px;
       padding: 30px 50px 40px 50px;
@@ -65,7 +169,7 @@
 .waves-header {
   position: relative;
   text-align: center;
-  background: #002A89;
+  background: #002a89;
   // background: linear-gradient(
   //   60deg,
   //   rgba(84, 58, 183, 1) 0%,

src/modules/tpm/NewHeader.js

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import AccountProfile from "../user/AccountProfile";
 import { getImageUrl,getLogoImageUrl } from 'educoder'
 import axios from 'axios';
-import { Modal, Input, message, notification } from 'antd';
+import { Modal, Input, message, notification, Button } from 'antd';
 
 import LoginDialog from '../login/LoginDialog';
 import GotoQQgroup from '../../modal/GotoQQgroup'
@@ -13,7 +13,7 @@ import 'antd/lib/radio/style/index.css';
 import 'antd/lib/input/style/index.css';
 import './TPMIndex.css';
 import './css/headerExcess.css';
-import logo from './images/logo.png';
+import logo from './images/hskylogo.png';
 
 const $ = window.$
 // TODO 这部分脚本从公共脚本中直接调用
@@ -621,10 +621,7 @@ class NewHeader extends Component {
       goshowqqgtounp,
     } = this.state;
 
-    let activeIndex = '';
-    if(match.path === '/'){
-      activeIndex = true;
-    }
+    let activeIndex =match.path === '/'?true: '';
 
     /*用户名称  用户头像url*/
     // let activeIndex = false;
@@ -724,15 +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 ?
-              <div className="logoDiv">
-                <img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={getLogoImageUrl(mygetHelmetapi2.nav_logo_url)}></img>
-                {
-                  activeIndex&&<div className="logo-text">
-                    <p>红山开源</p>
-                    <p className="logo-English">OSRedM</p>
-                  </div>
-                }
-              </div>
+                <img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={activeIndex?logo:getLogoImageUrl(mygetHelmetapi2.nav_logo_url)}></img>
               :
               ""
             }
@@ -777,7 +766,7 @@ class NewHeader extends Component {
           <div className="head-right">
             {this.props.user && this.props.user.login &&
               <div className="edu-menu-panel">
-                <i className={`iconfont icon-tianjiafangda ${activeIndex?'color-white':'color-grey-6'} `}></i>
+                <i className={`iconfont icon-tianjiafangda ${activeIndex?'color-home':'color-grey-6'} `}></i>
                 <div className="edu-menu-list" style={{ top: '48px' }}>
                   <div className="overPart"></div>
                   {
@@ -829,20 +818,15 @@ class NewHeader extends Component {
               </div>
             </Modal>
           </div>
-          {user === undefined ?
+          {user === undefined || user.login === "" ?
             <span className="font-15">
-              <a onClick={() => this.educoderlogin()} className={`mr5 ${activeIndex ? 'color-white' : 'color-grey-6'}`}>登录</a>
+              <a onClick={() => this.educoderlogin()} className={`mr5 ${activeIndex ? 'color-home' : 'color-grey-6'}`}>登录</a>
               {
-                mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url &&
-                <span><em className="vertical-line"></em><a className={`ml5 ${activeIndex ? 'color-white' : 'color-grey-6'}`} href={`${mygetHelmetapi2.new_course.register_url}`} target="_blank">注册</a></span>
-              }
-            </span>
-            : user.login === "" ?
-            <span className="font-15">
-              <a onClick={() => this.educoderlogin()} className={`mr5 ${activeIndex ? 'color-white' : 'color-grey-6'}`}>登录</a>
-              {
-                mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url &&
-                <span><em className="vertical-line"></em><a className={`ml5 ${activeIndex ? 'color-white' : 'color-grey-6'}`} href={`${mygetHelmetapi2.new_course.register_url}`} target="_blank">注册</a></span>
+                mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url && (
+                  activeIndex ?
+                    <Button className="register-button" type="primary" size="large">免费注册</Button> :
+                    <span><em className="vertical-line"></em><a className={`ml5 ${activeIndex ? 'color-home' : 'color-grey-6'}`} href={`${mygetHelmetapi2.new_course.register_url}`} target="_blank">注册</a></span>
+                )
               }
             </span>
             :

src/modules/tpm/css/headerExcess.css

@@ -1,3 +1,7 @@
+.homePage .head-nav ul#header-nav li a{
+  font-size: 15px;
+  color: #fff;
+}
 .head-nav ul#header-nav li:hover a, .head-nav ul#header-nav li.active a{
   color: #1484EF;
 }
@@ -15,29 +19,35 @@
   background-color: #1A2358;
   /* height: 64px; */
 }
-.newHeaders.homePage .head-nav ul#header-nav li a{
-  font-size: 15px;
-  color: #fff;
-}
-.logoDiv{
+
+/* .logoDiv{
   display: flex;
   align-items: center;
   color: #fff;
-}
+} */
 
 .homePage .logoDiv img{
   min-width: 45px;
   height: 45px;
 }
 
-.logo-text{
-  margin-left: .2em;
-  text-align: center;
-}
-.logo-text p{
-  line-height: 1.1;
+.homePage .color-home{
+  color: #fff;
 }
 
-.logo-English{
-  font-size: .8em;
+.homePage .color-home:hover{
+  color: #4154F1;
 }
+
+.homePage .ant-btn-primary{
+  background-color: #4154F1;
+  border-color: #4154F1;
+}
+
+.homePage .register-button{
+  height: 43px;
+  margin-left:20px;
+  padding: 0 25px;
+  font-size: 14px;
+
+}