Merge pull request '教学实践页面' (#318) from durian/forgeplus-react:gitlink_server into gitlink_server

src/forge/TeachingPractice/Teaching.jsx

@@ -24,15 +24,16 @@ function Teaching(){
     <div className="teaching">
       <div className="tea_head">
         <div>
-          <div className='head_til1'>大规模实训课程体系</div>
-          <div className='head_til2'>集成化班级协同空间</div>
-          <div className='head_til3'>多联盟共建开源竞赛</div>
+          <a href="#teaching_part1"><div className='head_til1'>大规模实训课程体系</div></a>
+          <a href="#teaching_part2"><div className='head_til2'>集成化班级协同空间</div></a>
+          <a href="#teaching_part3"><div className='head_til3'>多联盟共建开源竞赛</div></a>
         </div>
-        <img src={head} />
+        <img src={head} onClick={() => window.open('https://www.educoder.net', '_blank')}/>
       </div>
 
       {/* 大规模实训课程体系 */}
       <div className="tea_part1">
+        <span id='teaching_part1'></span>
         <p className="tea_title">大规模实训课程体系</p>
         <p className="tips">谢绝纸上谈兵，精心打造教学、标注、练平一体化的实战环境</p>
         <div className="tea_small_title">
@@ -95,6 +96,7 @@ function Teaching(){
 
       {/* 集成化班级协同空间 */}
       <div className="tea_part2_bg">
+        <span id='teaching_part2'></span>
         <div className="tea_part2">
           <p className="tea_title">集成化班级协同空间</p>
           <p className="tips">支持实验、作业、视频、考试、毕设等十余种线上线下管理工具</p>
@@ -177,6 +179,7 @@ function Teaching(){
 
       {/* 多联盟共建开源竞赛 */}
       <div className="tea_part3_bg">
+        <span id='teaching_part3'></span>
         <div className="tea_part3">
           <p className="tea_title">多联盟共建开源竞赛</p>
           <p className="tips">聚焦开源定期开展有奖大型竞赛，让您的作品伴随您成长</p>

src/forge/TeachingPractice/Teaching.scss

@@ -26,9 +26,17 @@
       &:hover{opacity: 0.8; }
     }
   }
-  & .tea_part1 .vertical:hover, .tea_part2 .vertical:hover, .tea_part3 .content:hover, .practice div{
+  & .tea_part1 .vertical:hover, .tea_part2 .vertical:hover, .tea_part3 .content:hover, .practice div, .tea_head>div div, .tea_head>img{
     cursor: pointer;
   }
+  & .tea_part1>span{
+    position: relative;
+    top: -100px;
+  }
+  & .tea_part2_bg>span, .tea_part3_bg>span{
+    position: relative;
+    top: -50px;
+  }
 }
 .tea_head{
   display: flex;