智算网络作为单独版块及调整平台优势图标

custom/public/css/git.openi.css

@@ -66,11 +66,17 @@
   background: #DFE9F0; 
   padding-top: 0;
   border: none;
-  margin-bottom: 13em;
+  margin-bottom: 11em;
 }
 .ui.secondary.hometop.segment #navbar{
   z-index: 10;
 }
+.ui.secondary.c2net.segment{
+  background: #f8faff; 
+  margin-bottom: 5em;
+  padding-top: 2em;
+  border: none;
+}
 
 .hometop .ui.secondary.menu .active.item{
   color: #000;
@@ -134,6 +140,9 @@
 .i-code-pic > img{
   margin-bottom: -3.0rem;
 }
+.i-env .ui.cards>.card{
+  box-shadow:none;
+}
 .i-env .ui.cards>.card>.image{
   background: none;
 }
@@ -144,18 +153,17 @@
 #homenews{
   position: relative;
   z-index: 9;
-  bottom: -9em;
-  width: 500px;
+  bottom: -6em;
 }
 #homenews > p{
   color: #BBBBBB;
   margin-left: 2.3em;
 }
 .homenews{
-  border-radius: 1.2em;
+  border-radius: 2em;
   background-color: rgba(16, 16, 16, .9);
   position: relative;
-  padding: 1.0em 1.0em 1.0em 1.3em;
+  padding-left: 2.3em !important;
 }
 .homeorg, .homepro, .homemodel, .i-env{ 
   position: relative;
@@ -164,7 +172,7 @@
 .homenews::before{
   content: '';
   position: absolute;
-  left: 2em;
+  left: 3em;
   top: 0;
   bottom: 0;
   background-color: rgba(105, 192, 255, .4);
@@ -209,8 +217,7 @@
   height: auto;
   border-top: 2px solid #3291F8;
   border-right: 2px solid #3291F8;
-  border-bottom: 2px solid #3291F8;
-  border-radius: 0 4.0em 4.0em 0;
+  border-radius: 0 4.0em 0 0;
   width: 10em;
   z-index: 6;
 }
@@ -381,11 +388,8 @@
 
 /* rotation3D */
 #app{
-  position: absolute;
-  right: 0px;
   width: 800px;
-  top: 30px;
-  z-index: 6;
+  margin: 0 auto;
 }
 .aiData{
   position: absolute;  
@@ -400,7 +404,7 @@
   font-size: 1.1rem;
 }
 .rotation3D-baseMap{
-  position: absolute; left: 0; right: 0; top: 160px; margin: auto;
+  position: absolute; left: 0; right: 0; top: 270px; margin: auto;
   width: 800px; height: 516px;
   background: url("../rotation3D/img/baseMap.png") no-repeat;
   background-size: cover;

custom/public/rotation3D/rotation3D.css

@@ -3,8 +3,8 @@
   椭圆会使内部失真    transform: rotateX(50deg);
 */
 .rotation3D{
-    position: relative; width: 800px; height: 800px; cursor: move; user-select: none;
-    margin: 0 auto; margin-top: -40px;
+    position: relative; width: 800px; height: 600px; cursor: move; user-select: none;
+    margin: 0 auto;
     /* border: 1px solid white; border-radius: 100%; */
 }
 .rotation3D .center{
@@ -57,15 +57,18 @@
     content: "西安未来人工智能计算中心";
 }
 .itemList .rotation3D__item:nth-child(7) .cont p::after{
-    content: "中原人工智能计算中心";
+    content: "更多接入中…";
 }
 .itemList .rotation3D__item:nth-child(8) .cont p::after{
-    content: "成都人工智能计算中心";
+    content: "中原人工智能计算中心";
 }
 .itemList .rotation3D__item:nth-child(9) .cont p::after{
-    content: "横琴先进智能计算中心";
+    content: "成都人工智能计算中心";
 }
 .itemList .rotation3D__item:nth-child(10) .cont p::after{
+    content: "横琴先进智能计算中心";
+}
+.itemList .rotation3D__item:nth-child(11) .cont p::after{
     content: "国家超级计算济南中心";
 }
 

public/home/home.js

@@ -17,7 +17,7 @@ var swiperNewMessage = new Swiper(".newslist", {
     },
 });
 var swiperEvent = new Swiper(".event-list", {
-    slidesPerView: 2,
+    slidesPerView: 3,
     spaceBetween: 30,
     pagination: {
         el: ".swiper-pagination",

templates/base/footer.tmpl

@@ -47,7 +47,7 @@
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
 {{template "custom/footer" .}}
 {{if .PageIsHome}}
-	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
+	<!--script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script-->
 	<script src="/rotation3D/vue-2.6.10.min.js"></script>
 	<script src="/rotation3D/rotation3D.js?v={{MD5 AppVer}}"></script>
 	<script>
@@ -61,7 +61,8 @@
 					{ name:'北大人工智能集群系统', type:'green', icon:'', },
 					{ name:'合肥类脑智能开放平台', type:'green', icon:'', },
 					{ name:'武汉人工智能计算中心', type:'green', icon:'', },
-					{ name:'西安未来人工智能计算中心', type:'green', icon:'', },
+					{ name:'西安未来人工智能计算中心', type:'green', icon:'', },					
+					{ name:'……', type:'yellow', icon:'', },
 					{ name:'中原人工智能计算中心', type:'green', icon:'', },
 					{ name:'成都人工智能计算中心', type:'green', icon:'', },
 					{ name:'横琴先进智能计算中心', type:'green', icon:'', },
@@ -74,10 +75,10 @@
 					farScale: 0.6,
 					// farScale: 1,
 					xRadius: 0,  //x半径压缩
-					yRadius: 240,  //y半径压缩
+					yRadius: 130,  //y半径压缩
 					// yRadius: 0,  //y半径压缩
-					autoPlay:true,
-					autoPlayDelay:6000,
+					// autoPlay:true,
+					// autoPlayDelay:6000,
 				})
 	
 			},

templates/home.tmpl

@@ -1,80 +1,30 @@
 {{template "base/head_home" .}}
     <div class="ui vertical masthead secondary hometop segment">
-        <div class="ui container" style="position: relative;">
-            <div id="app" v-cloak>
-				<!--数据
-				<div class="aiData">
-					<p>完成AI任务<br><strong id="completed_task">1716</strong></p>
-					<p>运行AI任务<br><strong id="running_task">120</strong></p>
-					<p>等待AI任务<br><strong id="wait_task">80</strong></p>
-				</div>-->
-                <!--底座-->
-                <div class="rotation3D-baseMap"></div>
-                <!--旋转3D-->
-                <div id="rotation3D" class="rotation3D">
-                    <button class="center">中心</button>
-					
-                    <div class="itemList">
-                        <div class="rotation3D__item" :class="item.type" v-for="item in itemList">
-                            <div class="scale">
-                                <div class="baseImg"></div>
-                                <div class="cont">
-                                    <i class="iconfont" :class="item.icon"></i>
-                                    <p></p>
-                                </div>
-                            </div>
-                        </div>
+        <div class="ui container" style="position: relative;">            
+            <div class="ui center homebanner">
+                <h1 class="ui huge header">
+                    {{.page_title}}
+                    <div class="sub header">
+                        {{.page_small_title}}
                     </div>
-                    <div class="lineList">
-                        <div class="rotation3D__line" v-for="item in itemList" :class="item.type">
-                            <div v-if="item.type=='blue'" class="pos">
-                                <svg width="50" height="400">
-                                    <path id="path1" d="M0 400, 0 0" stroke-dasharray="5,10"/>
-                                </svg>
-								<div class="dot dot1 ri-arrow-left-s-line"><span></span></div>
-                            </div>
-                            <div v-if="item.type=='yellow'" class="pos">
-                                <svg width="10" height="400">
-                                    <path id="path2" d="M0 400, 0 0" stroke-dasharray="5,10"/>
-                                </svg>
-                                <div class="dot dot2"><i class="el-icon-close"></i></div>
-                            </div>
-                            <div v-if="item.type=='green'" class="pos">
-                                <svg width="50" height="400">
-                                    <path id="path1" d="M0 400, 0 0" stroke-dasharray="5,10"/>
-                                </svg>
-                                <div class="dot dot1 ri-arrow-left-s-line"></div>
-                            </div>
-                        </div>
-                    </div>					
-                </div>
-            </div><!--rotation3D end--> 
-            <div class="ui homebanner">
-                <div class="ui grid">
-                    <div class="sixteen wide mobile twelve wide tablet six wide computer column">
-                        <h1 class="ui huge header">
-                            {{.page_title}}
-                            <div class="sub header">
-                                {{.page_small_title}}
-                            </div>
-                        </h1>
-                        <p class="ui am-lh-18">{{.page_description}}</p>
-                        
-                        {{if .IsSigned}}
-                        <a class="circular huge ui secondary button" href="{{AppSubUrl}}/dashboard">{{.page_use}} <i class="right arrow icon"></i></a>
-                        {{else}}
-                        <a class="circular huge ui secondary button" href="{{AppSubUrl}}/user/login">{{.page_use}} <i class="right arrow icon"></i></a>
-                        {{end}}
-                    </div>
-                </div>
+                </h1>
+                <p class="ui am-lh-18">{{.page_description}}</p>
+                
+                {{if .IsSigned}}
+                <a class="circular huge ui secondary button" href="{{AppSubUrl}}/dashboard">{{.page_use}} <i class="right arrow icon"></i></a>
+                {{else}}
+                <a class="circular huge ui secondary button" href="{{AppSubUrl}}/user/login">{{.page_use}} <i class="right arrow icon"></i></a>
+                {{end}}
             </div>
-            <!--div class="bannerpic"><img class="ui fluid image" src="/img/gitopeni-index-01.svg"></div-->
+            <div class="bannerpic"><img class="ui fluid image" src="/img/gitopeni-index-01.svg"></div>
             <div id="homenews">
                 <p>* {{.page_only_dynamic}}</p>
-                <div class="homenews">
-                    <div class="newslist">
-                        <div class="ui mini aligned list swiper-wrapper" id="newmessage">
-                            
+                <div class="ui grid">
+                    <div class="sixteen wide mobile twelve wide tablet ten wide computer column homenews">
+                        <div class="newslist">
+                            <div class="ui mini aligned list swiper-wrapper" id="newmessage">
+                                
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -85,33 +35,32 @@
 
     <!--组织-->
     <div class="ui container homeorg">
-        <div class="ui stackable grid">
+        <div class="ui stackable grid"> 
             <div class="sixteen wide tablet four wide computer column homeorg-tit">
-                <h2>{{.page_recommend_activity}}</h2>
-                <p><span class="ui text grey">{{.page_recommend_activity_desc}}</p>
+                <h2>{{.page_recommend_org}}</h2>
+                <p><span class="ui text grey">{{.page_recommend_org_desc}}&nbsp;</span><a href="{{.RecommendURL}}">{{.page_recommend_org_commit}}</a></p>
+                <a href="{{AppSubUrl}}/explore/organizations" class="circular ui primary basic button">{{.page_recommend_org_more}} <i class="arrow circle right icon"></i></a>
             </div>
             <div class="sixteen wide tablet twelve wide computer column">
-                <div class="event-list">
-                    <div class="swiper-wrapper" id="recommendactivity">
-                    
+                <div class="homeorg-list">
+                    <div class="swiper-wrapper" id="recommendorg">
                         
                     </div>
                     <div class="swiper-pagination"></div>
+                    
                 </div>
             </div>
 
             <div class="sixteen wide tablet four wide computer column homeorg-tit">
-                <h2>{{.page_recommend_org}}</h2>
-                <p><span class="ui text grey">{{.page_recommend_org_desc}}&nbsp;</span><a href="{{.RecommendURL}}">{{.page_recommend_org_commit}}</a></p>
-                <a href="{{AppSubUrl}}/explore/organizations" class="circular ui primary basic button">{{.page_recommend_org_more}} <i class="arrow circle right icon"></i></a>
+                <h2>{{.page_recommend_activity}}</h2>
+                <p><span class="ui text grey">{{.page_recommend_activity_desc}}</p>
             </div>
             <div class="sixteen wide tablet twelve wide computer column">
-                <div class="homeorg-list">
-                    <div class="swiper-wrapper" id="recommendorg">
+                <div class="event-list">
+                    <div class="swiper-wrapper" id="recommendactivity">                    
                         
                     </div>
                     <div class="swiper-pagination"></div>
-                    
                 </div>
             </div>
         </div>
@@ -137,56 +86,112 @@
         
     </div>
 
+    <div class="ui vertical masthead secondary c2net segment">
+        <div class="ui container">
+            <div class="ui center am-pt-30 am-pb-30">
+                <h2>智算网络</h2>
+                <p><span class="ui text grey">人工智能算力网络推进联盟已接入10家智算中心，算力总规模1542P</p>
+            </div>
+
+            <div id="app" v-cloak>
+				<!--数据
+				<div class="aiData">
+					<p>完成AI任务<br><strong id="completed_task">1716</strong></p>
+					<p>运行AI任务<br><strong id="running_task">120</strong></p>
+					<p>等待AI任务<br><strong id="wait_task">80</strong></p>
+				</div>-->
+                <!--底座-->
+                <div class="rotation3D-baseMap"></div>
+                <!--旋转3D-->
+                <div id="rotation3D" class="rotation3D">
+                    <button class="center">中心</button>
+					
+                    <div class="itemList">
+                        <div class="rotation3D__item" :class="item.type" v-for="item in itemList">
+                            <div class="scale">
+                                <div class="baseImg"></div>
+                                <div class="cont">
+                                    <i class="iconfont" :class="item.icon"></i>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="lineList">
+                        <div class="rotation3D__line" v-for="item in itemList" :class="item.type">
+                            <div v-if="item.type=='blue'" class="pos">
+                                <svg width="50" height="400">
+                                    <path id="path1" d="M0 400, 0 0" stroke-dasharray="5,10"/>
+                                </svg>
+								<div class="dot dot1 ri-arrow-left-s-line"><span></span></div>
+                            </div>
+                            <div v-if="item.type=='yellow'" class="pos">
+                                <svg width="10" height="400">
+                                    <path id="path2" d="M0 400, 0 0" stroke-dasharray="5,10"/>
+                                </svg>
+                                <div class="dot dot2"><i class="el-icon-close"></i></div>
+                            </div>
+                            <div v-if="item.type=='green'" class="pos">
+                                <svg width="50" height="400">
+                                    <path id="path1" d="M0 400, 0 0" stroke-dasharray="5,10"/>
+                                </svg>
+                                <div class="dot dot1 ri-arrow-left-s-line"></div>
+                            </div>
+                        </div>
+                    </div>					
+                </div>
+            </div><!--rotation3D end--> 
+        </div>
+    </div>
 
     <a name="fourth"></a>
     <div class="ui container i-env">
         
         <div class="ui center am-pb-30">
-            <div class="leftline03"></div>
             <h2>{{.page_dev_env}}</h2>
             <p><span class="ui text grey">{{.page_dev_env_desc}}</p>
         </div>
         <div class="ui four doubling cards">
             <div class="card">
                 <div class="image">
-                    <img src="/img/i-pic-01.svg">
+                    <img src="/img/i-pic-01.jpg">
                 </div>
                 <div class="content">
                     <h3 class="ui centered small header">{{.page_dev_env_desc_title}}</h3>
-                    <div class="description">
+                    <div class="description ui text grey">
                     {{.page_dev_env_desc_desc}}
                     </div>
                 </div>
             </div>
             <div class="card">
                 <div class="image">
-                    <img src="/img/i-pic-02.svg">
+                    <img src="/img/i-pic-02.jpg">
                 </div>
                 <div class="content">
                     <h3 class="ui centered small header">{{.page_dev_env_desc1_title}}</h3>
-                    <div class="description">
+                    <div class="description ui text grey">
                     {{.page_dev_env_desc1_desc}}
                     </div>
                 </div>
             </div>
                 <div class="card">
                 <div class="image">
-                    <img src="/img/i-pic-03.svg">
+                    <img src="/img/i-pic-03.jpg">
                 </div>
                 <div class="content">
                     <h3 class="ui centered small header">{{.page_dev_env_desc2_title}}</h3>
-                    <div class="description">
+                    <div class="description ui text grey">
                     {{.page_dev_env_desc2_desc}}
                     </div>
                 </div>
             </div>
                 <div class="card">
                 <div class="image">
-                    <img src="/img/i-pic-04.svg">
+                    <img src="/img/i-pic-04.jpg">
                 </div>
                 <div class="content">
                     <h3 class="ui centered small header">{{.page_dev_env_desc3_title}}</h3>
-                    <div class="description">
+                    <div class="description ui text grey">
                     {{.page_dev_env_desc3_desc}}
                     </div>
                 </div>