初始化glcc

src/App.js

@@ -112,6 +112,12 @@ const Teaching = Loadable({
   loader : () => import("./forge/TeachingPractice/Teaching"),
   loading: Loading,
 })
+
+const Glcc = Loadable({
+  loader : () => import("./glcc"),
+  loading: Loading,
+})
+
 // const CreateMerge = Loadable({
 //   loader: () => import('./forge/Merge/NewMerge'),
 //   loading: Loading,
@@ -376,6 +382,12 @@ class App extends Component {
                 render={(props) => <Teaching {...this.props} {...props} />}
               ></Route>
 
+              {/*glcc */}
+              <Route
+                path="/glcc"
+                render={(props) => <Glcc {...this.props} {...props} />}
+              ></Route>
+
               {/* 组织 */}
               <Route path={"/organize"}
                 render={

src/glcc/home/award/index.jsx

@@ -0,0 +1,14 @@
+import React  from 'react';
+import './index.scss';
+
+
+function Award() {
+
+  return(
+    <div className="award">
+      <h3 className="glcc-tit">奖金与奖励</h3>
+      <div className=""></div>
+    </div>
+  )
+}
+export default Award;

src/glcc/home/award/index.scss

@@ -0,0 +1,3 @@
+.award{
+  
+}

src/glcc/home/banner/index.jsx

@@ -0,0 +1,70 @@
+import React , { useEffect , useState } from 'react';
+import Slider from 'react-slick';
+import axios from 'axios';
+import { getImageUrl } from 'educoder';
+import './index.scss';
+// import Left from './Img/left.png';
+// import Right from './Img/right.png';
+
+
+let setting={
+  dots:true,
+  infinite: true,
+  speed: 2000,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  pauseOnDotsHover:true,
+  autoplaySpeed:5000,
+  pauseOnFocus:true,
+  autoplay:true,
+  arrows:true,
+  className:'glcc-banner'
+//   prevArrow:<button type='button' class='slick-prev slick-arrow'><img src={Left} width="70px" alt=""/></button>,
+//   nextArrow:<button type='button' class='slick-prev slick-arrow'><img src={Right} width="70px" alt=""/></button>
+}
+function Banner({register,current_user}) {
+
+  const [ bannerList , setBannerList ] = useState(undefined);
+
+  useEffect(()=>{
+    getBanner();
+  },[])
+
+  function getBanner() {
+    const url = `/topics.json?topic_type=banner`;
+    axios.get(url,{
+      params:{
+        limit:4
+      }
+    }).then(result=>{
+      if(result){
+        setBannerList(result.data.topics);
+      }
+    }).catch(error=>{})
+  }
+  return(
+    <Slider {...setting}>
+      {
+        bannerList && bannerList.length > 0 ?
+        bannerList.map((i,k)=>{
+          return(
+            <div className={`regform`}>
+              {/*  style={{backgroundImage:`url(${getImageUrl(i.image)})`}} */}
+              <div>
+                <img src={getImageUrl(i.image)} alt="" height="100%"/>
+                {
+                  k +1 === bannerList.length && (!(current_user && current_user.login)) ?
+                  <p className="regPrg"><a href={register}>立即注册</a></p>
+                  :""
+                }
+              </div>
+            </div>
+          )
+        })
+        :
+        ""
+      }
+    </Slider>
+  )
+}
+export default Banner;

src/glcc/home/banner/index.scss

@@ -0,0 +1,174 @@
+.glcc {
+  .glcc-banner {
+    position: relative;
+    background-image: linear-gradient(to right, #081843, #000a1d);
+    margin-bottom: 159px;
+  }
+  .slick-track {
+    height: 679px;
+    display: flex;
+    .slick-slide {
+      position: relative;
+      height: 100%;
+      div {
+        height: 100%;
+        .regform {
+          & > div {
+            overflow: hidden;
+            img {
+              height: 100%;
+              width: 1920px;
+              position: relative;
+              left: 50%;
+              margin-left: -960px;
+            }
+          }
+        }
+        .regPrg {
+          position: absolute;
+          z-index: 2;
+          width: 1200px;
+          left: 50%;
+          margin-left: -600px;
+          top: 54%;
+          margin-top: -23px;
+          a {
+            color: #fff !important;
+            display: inline-block;
+            background-color: #466aff;
+            border-radius: 5px;
+            height: 46px;
+            line-height: 46px;
+            width: 98px;
+            text-align: center;
+            font-size: 18px;
+            letter-spacing: 2px;
+            &:hover {
+              color: #ffffff !important;
+              background-color: #355cff;
+            }
+          }
+        }
+      }
+
+      // img{
+      //   position: absolute;
+      //   width: 100%;
+      //   height: 100%;
+      //   top:0px;
+      //   left: 0px;
+      //   z-index: 1;
+      // }
+    }
+  }
+  .slick-slider {
+    min-width: 1200px;
+    position: relative;
+    &:hover {
+      .slick-arrow {
+        display: block !important;
+        cursor: pointer;
+        z-index: 2;
+      }
+    }
+    .slick-arrow {
+      position: absolute;
+      top: 50%;
+      z-index: 1000;
+      background: transparent;
+      border: none;
+      margin-top: -50px;
+      display: none !important;
+      &:hover {
+        i {
+          color: rgba(225, 225, 225, 0.8);
+        }
+      }
+      i {
+        font-size: 50px !important;
+        color: rgba(225, 225, 225, 0.3);
+        transition: 0.3s;
+      }
+      &.slick-prev {
+        left: 50px;
+      }
+      &.slick-next {
+        right: 50px;
+      }
+    }
+    .slick-dots {
+      width: 1200px;
+      text-align: left;
+      left: 50%;
+      margin-left: -600px;
+      bottom: 25%;
+      position: absolute;
+      display: flex !important;
+      z-index: 2;
+      li {
+        background-color: rgba(225, 225, 225, 0.5);
+        position: relative;
+        height: 3px;
+        width: 46px;
+        margin-right: 15px;
+        &::after {
+          position: absolute;
+          left: 0px;
+          width: 0px;
+          top: 0px;
+          height: 100%;
+          content: "";
+          transition: 5.2s;
+          transition-property: width;
+        }
+        &.slick-active::after {
+          background-color: #fff;
+          width: 100%;
+        }
+        button {
+          position: absolute;
+          width: 100%;
+          height: 10px;
+          left: 0px;
+          background-color: transparent !important;
+          border: none;
+          cursor: pointer;
+          color: transparent;
+        }
+      }
+    }
+  }
+  .topEditionUl {
+    position: absolute;
+    width: 1244px;
+    //   background-image: url('./Img/top-bg.png');
+    height: 244px;
+    bottom: -139px;
+    left: 50%;
+    margin-left: -622px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    a {
+      // background-image: url('./Img/top-2.png');
+      height: 139px;
+      width: 353px;
+      padding: 15px 24px;
+      color: #fff;
+      margin: 0px 17px;
+      border-radius: 11px;
+      background-size: 100% 100%;
+      color: #fff !important;
+      &:hover {
+        box-shadow: 0px 2px 7px rgba(225, 225, 225, 0.85);
+      }
+      // &:first-child{
+      //   background-image: url('./Img/top-1.png');
+      // }
+      // &:last-child{
+      //   background-image: url('./Img/top-3.png');
+      // }
+    }
+  }
+}

src/glcc/home/contact/index.jsx

@@ -0,0 +1,14 @@
+import React  from 'react';
+import './index.scss';
+
+
+function Contact() {
+
+  return(
+    <div className="contact">
+      <h3 className="glcc-tit">新闻中心</h3>
+      <div className=""></div>
+    </div>
+  )
+}
+export default Contact;

src/glcc/home/contact/index.scss

@@ -0,0 +1,3 @@
+.contact{
+  
+}

src/glcc/home/index.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Banner from "./banner";
+import Lightspot from './lightspot';
+import TimerShaft from './timerShaft';
+import Award from "./award";
+import News from './news';
+import Partner from "./partner";
+
+import './index.scss';
+
+export default ()=>{
+  
+  return (
+      <div className="glcc">
+        <Banner />
+        <Lightspot />
+        <TimerShaft />
+        <Award />
+        <News />
+        <Partner />
+      </div>
+  )
+}

src/glcc/home/index.scss

@@ -0,0 +1,5 @@
+.glcc{
+    .glcc-tit{
+        text-align: center;
+    }
+}

src/glcc/home/lightspot/index.jsx

@@ -0,0 +1,14 @@
+import React  from 'react';
+import './index.scss';
+
+
+function Lightspot() {
+
+  return(
+    <div className="lightspot">
+      <h3 className="glcc-tit">活动亮点</h3>
+      <div className=""></div>
+    </div>
+  )
+}
+export default Lightspot;

src/glcc/home/lightspot/index.scss

@@ -0,0 +1,3 @@
+.lightspot{
+  
+}

src/glcc/home/news/index.jsx

@@ -0,0 +1,14 @@
+import React  from 'react';
+import './index.scss';
+
+
+function News() {
+
+  return(
+    <div className="news">
+      <h3 className="glcc-tit">新闻中心</h3>
+      <div className=""></div>
+    </div>
+  )
+}
+export default News;

src/glcc/home/news/index.scss

@@ -0,0 +1,3 @@
+.news{
+  
+}

src/glcc/home/partner/index.jsx

@@ -0,0 +1,14 @@
+import React  from 'react';
+import './index.scss';
+
+
+function Partner() {
+
+  return(
+    <div className="partner">
+      <h3 className="glcc-tit">组织方及合作伙伴</h3>
+      <div className=""></div>
+    </div>
+  )
+}
+export default Partner;

src/glcc/home/partner/index.scss

@@ -0,0 +1,3 @@
+.partner{
+  
+}

src/glcc/home/timerShaft/index.jsx

@@ -0,0 +1,14 @@
+import React  from 'react';
+import './index.scss';
+
+
+function TimerShaft() {
+
+  return(
+    <div className="timerShaft">
+      <h3 className="glcc-tit">时间规划</h3>
+      <div className=""></div>
+    </div>
+  )
+}
+export default TimerShaft;

src/glcc/home/timerShaft/index.scss

@@ -0,0 +1,3 @@
+.timerShaft{
+  
+}

src/glcc/index.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import { Route, Switch } from "react-router-dom";
+import { withRouter } from "react-router";
+
+import { SnackbarHOC } from "educoder";
+import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
+import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
+import "./index.scss";
+
+import Loadable from "react-loadable";
+import Loading from "../Loading";
+import { ImageLayerOfCommentHOC } from "../modules/page/layers/ImageLayerOfCommentHOC";
+
+
+{/* 任务管理审核 */}
+const Home = Loadable({
+  loader: () => import("./home"),
+  loading: Loading,
+});
+
+
+const Glcc = (propsF) => {
+
+  return (
+    <div className="newMain clearfix">
+      <Switch {...propsF}>
+        {/* 首页 */}
+        <Route
+          path="/glcc"
+          render={(props) => (
+            <Home {...propsF} {...props} />
+          )}
+        ></Route>
+
+      </Switch>
+    </div>
+  );
+}
+
+export default withRouter(
+  ImageLayerOfCommentHOC({
+    imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
+    parentSelector: ".newMain",
+  })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Glcc))))
+);