public/home/home.js

@@ -606,8 +606,7 @@ function displayRepo(json){
     if (json != null && json.length > 0){
         var repoMap = {};
         for (var i = 0, iLen = json.length; i < iLen; i++) {
-            var repo = json[i];
-            var labelSearch = repo.Label;
+            var repo = json[i];            
             var label = isZh ? repo.Label : repo.Label_en;
             if (repoMap[label]) {
                 repoMap[label].push(repo);
@@ -618,6 +617,7 @@ function displayRepo(json){
 
         for (var label in repoMap) {
             var repos = repoMap[label];
+            var labelSearch = repos[0].Label;
             html += `<div class="swiper-slide"><div><a style="color:rgb(50, 145, 248);font-size:16px;font-weight:550;" href="/explore/repos?q=&topic=${labelSearch}&sort=hot"># ${label}</a></div>`;
             for (var i = 0, iLen = repos.length; i < iLen; i++) {
                 if (i >= 4) break;
@@ -810,15 +810,23 @@ function getRecommendModule() {
 function initHomeTopBanner() {
     var homeSlideTimer = null;
     var homeSlideDuration = 8000;
-    function homeSlide(direction) {
+    function homeSlide(direction, index) {
         var slidePages = $('._hm-pg-c ._hm-pg');
         var currentPage = slidePages.filter('._hm-pg-show');
+        var slidePagination = $('._hm-slide-pagination-c ._hm-slide-pagination-item');
         var currentIndex = currentPage.index();
-        var next = direction == 'left' ? currentIndex - 1 : currentIndex + 1;
+        var next = 0;
+        if (direction) {
+            next = direction == 'left' ? currentIndex - 1 : currentIndex + 1;
+        } else {
+            next = index || 0;
+        }
         if (next < 0) next = slidePages.length - 1;
         if (next == slidePages.length) next = 0;
         slidePages.removeClass('_hm-pg-show');
         slidePages.eq(next).addClass('_hm-pg-show');
+        slidePagination.removeClass('_hm-slide-pagination-item-active');
+        slidePagination.eq(next).addClass('_hm-slide-pagination-item-active');
     }
 
     function startSlide() {
@@ -846,6 +854,12 @@ function initHomeTopBanner() {
     }).on('mouseleave', function() {
         startSlide();
     });
+    $('._hm-slide-pagination-c ._hm-slide-pagination-item').on('click', function() {
+        var self = $(this);
+        if (self.hasClass('_hm-slide-pagination-item-active')) return;
+        homeSlide('', self.index());        
+        startSlide();
+    });
     setTimeout(function() { startSlide(); }, 500);
 }
 

templates/custom/home/home_top.tmpl

@@ -425,6 +425,23 @@
   ._hm-pg-bg-2 {
     background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");    
   }
+  ._hm-pg-bg-3-placeholder-1 {
+    position: absolute;
+    width: 100%;
+    height: 51%;
+    top: 0;
+    left: 0;
+    background-color: #2e035f;
+    display: none;
+  }
+  ._hm-pg-bg-3-placeholder-2 {
+    position: absolute;
+    height: 50%;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    display: none;
+  }
   ._hm-pg-bg-3 {
     background: url("/img/home-banner-01.jpg");    
     background-repeat: no-repeat;
@@ -464,6 +481,31 @@
     border-left: none;  
   }
 
+  ._hm-slide-pagination-c {
+    position: absolute;
+    display: none;
+    z-index: 30;
+    text-align: center;
+    height: 30px;
+    width: 100%;
+    bottom: 0;
+  }
+
+  ._hm-slide-pagination-item {
+    display: inline-block;
+    width: 8px;
+    height: 8px;    
+    background: rgb(185, 227, 244);
+    border-radius: 100%;
+    margin: 0 2px;
+    cursor: pointer;
+  }
+  ._hm-slide-pagination-item-active {
+    width: 40px;
+    border-radius: 4px;    
+    cursor: default;
+  }
+
   ._hm-circle {
     position: absolute;
     top: 180px;
@@ -1658,13 +1700,102 @@
   .homenews .swiper-slide .content {
     color: white;
   }
+
+  @media only screen and (max-width: 767px) {
+    ._hm-pg-bg-1 {      
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233b83fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");    
+      background-size: 1500px 700px;
+      background-position: center center;
+    }
+    ._hm-person-area {
+      display: none;
+    }
+    ._hm-bubble-c {
+      display: none;
+    }
+    #homenews {
+      display: none;
+    }
+    ._hm-universe {    
+      top: -70px;
+      left: 10%;
+    }
+    ._hm-big-descr {
+      font-size: 20px;
+    }
+    ._hm-big-btn-1 {
+      height: 56px;
+    }
+    ._hm-big-btn-2 {
+      width: 125px;
+      margin-right: 10px;
+    }
+    ._hm-circle-rect {
+      left: 0;
+    }
+    ._hm-pg-bg-3-placeholder-1 {
+      display: block;      
+    }
+    ._hm-pg-bg-3-placeholder-2 {
+      display: block;      
+      background: url(/img/home-banner-01.jpg);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    ._hm-pg-bg-3-placeholder-2-en {
+      background: url(/img/home-banner-01-en.jpg);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    ._hm-pg-bg-3 {
+      background: none;
+    }
+    ._hm-bg-descr-vedio-link {
+      display: block;      
+      margin-left: 0px !important;
+      margin-top: 10px;
+    }
+    ._hm-slide-btn {
+      display: none;
+    }
+    ._hm-slide-pagination-c {
+      display: block;
+    }
+    ._hm-big-title-en {
+      font-size: 32px;
+      margin-bottom: 20px;      
+      margin-top: -32px;
+    }
+    ._hm-big-title-mobile-margin-top {
+      margin-top: -40px;
+      margin-bottom: 26px;
+    }
+    ._hm-big-title-mobile-margin-top-en {
+      margin-top: -50px;
+      margin-bottom: 8px;
+    }
+    ._hm-computing-net-container {
+      display: none !important;
+    }
+    ._hm-computing-net-mobile-container {
+      display: block !important;
+      background-image: url("/rotation3D/img/baseimg.png");
+      background-position: center center;     
+      background-repeat: no-repeat;
+      background-size: cover;
+      padding: 45% 0;
+    }
+  }  
 </style>
 <div class="_hm-bg-container">
   <div class="_hm-pg _hm-pg-static">
-    <div class="_hm-circle-rect _hm-transition-common _hm-shake"></div>
+    
   </div>
   <div class="_hm-pg-c">
     <div class="_hm-pg _hm-pg-bg-1 _hm-pg-show">
+      <div class="_hm-circle-rect _hm-transition-common _hm-shake"></div>
       <div class="_hm-universe">
         <div class="_hm-universe-1 _hm-swing"></div>
         <div class="_hm-universe-2"></div>
@@ -1741,7 +1872,7 @@
       </div>
       <div class="_hm-txt-content-c">
         <div class="_hm-big-txt-1">
-          <div class="_hm-big-title" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.page_title"}}</div>
+          <div class="_hm-big-title {{if ne $.Lang "zh-CN"}}_hm-big-title-en{{end}}" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.page_title"}}</div>
           <div class="_hm-big-descr">{{.i18n.Tr "home.page_description"}}</div>
         </div>
         <div class="_hm-big-btn-c">
@@ -1752,7 +1883,7 @@
             </div>
           </a>
           <a href="/resource_desc">
-            <div class="_hm-big-btn-2">
+            <div class="_hm-big-btn-2" style="margin-right:0;">
               <svg xmlns="http://www.w3.org/2000/svg" style="margin-right:8px;margin-top:-2px;" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 fPsHiw svg-icon-path-icon fill" viewBox="0 0 32 32" width="16" height="16"><defs data-reactroot=""></defs><g><path fill="rgb(255, 255, 255)" d="M16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333 13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333zM12.947 26.223c-1.254-2.597-2.063-5.628-2.241-8.827l-0.003-0.062h-5.287c0.551 4.238 3.518 7.661 7.455 8.869l0.076 0.020zM13.373 17.333c0.201 3.252 1.131 6.307 2.627 9.003 1.469-2.597 2.418-5.669 2.624-8.941l0.003-0.061h-5.253zM26.584 17.333h-5.287c-0.181 3.261-0.99 6.292-2.306 9.033l0.062-0.143c4.012-1.229 6.98-4.651 7.525-8.836l0.006-0.054zM5.416 14.667h5.287c0.181-3.261 0.99-6.292 2.306-9.033l-0.062 0.143c-4.012 1.229-6.98 4.652-7.525 8.836l-0.006 0.054zM13.375 14.667h5.251c-0.209-3.334-1.157-6.405-2.68-9.109l0.055 0.106c-1.469 2.597-2.418 5.669-2.624 8.941l-0.003 0.061zM19.053 5.777c1.254 2.597 2.063 5.628 2.241 8.827l0.003 0.062h5.287c-0.551-4.238-3.518-7.661-7.455-8.869l-0.076-0.020z"></path></g></svg>
               {{.i18n.Tr "custom.resource_description"}}
             </div>
@@ -1864,7 +1995,7 @@
       </div>
       <div class="_hm-txt-content-c">
         <div class="_hm-big-txt-2">
-          <div class="_hm-big-title" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.c2net_title"}}</div>
+          <div class="_hm-big-title {{if ne $.Lang "zh-CN"}}_hm-big-title-en{{end}}" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.c2net_title"}}</div>
           <div class="_hm-big-descr">{{.i18n.Tr "home.c2net_desc" }}</div>
         </div>
         <div class="_hm-big-btn-c">
@@ -1881,11 +2012,13 @@
     </div>
     -->
     <div class="_hm-pg _hm-pg-bg-3 {{if ne $.Lang "zh-CN"}}_hm-pg-bg-3-en{{end}}">
+      <div class="_hm-pg-bg-3-placeholder-1"></div>
+      <div class="_hm-pg-bg-3-placeholder-2 {{if ne $.Lang "zh-CN"}}_hm-pg-bg-3-placeholder-2-en{{end}}"></div>
       <div class="_hm-txt-content-c">
         <div class="_hm-big-txt-2">
-          <div class="_hm-big-title" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.c2net_title"}}</div>
+          <div class="_hm-big-title {{if ne $.Lang "zh-CN"}}_hm-big-title-en{{end}} _hm-big-title-mobile-margin-top {{if ne $.Lang "zh-CN"}}_hm-big-title-mobile-margin-top-en{{end}}" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.c2net_title"}}</div>
           <div class="_hm-big-descr">{{.i18n.Tr "home.c2net_desc" }}
-            <a target="_blank;" href="https://openi.org.cn/html/2022/openi-o_0623/646.html" style="margin-left:4px;font-size:18px;color:white;">
+            <a class="_hm-bg-descr-vedio-link" target="_blank;" href="https://openi.org.cn/html/2022/openi-o_0623/646.html" style="margin-left:4px;font-size:18px;color:white;">
               <div style="display:inline-block;">
                 <span style="border-bottom:2px solid white;">{{.i18n.Tr "home.vedio_detail"}}</span>
                 <i style="vertical-align:bottom;" class="ri-play-circle-line"></i>
@@ -1899,6 +2032,10 @@
   </div>
   <div class="_hm-slide-btn _hm-slide-btn-left"></div>
   <div class="_hm-slide-btn _hm-slide-btn-right"></div>
+  <div class="_hm-slide-pagination-c">
+    <div class="_hm-slide-pagination-item _hm-slide-pagination-item-active"></div>
+    <div class="_hm-slide-pagination-item"></div>
+  </div>
 </div>
 <div class="ui container _hm-container">
   <div class="_hm-recommend-info ">

templates/home.tmpl

@@ -26,8 +26,7 @@
                 <h2>{{.i18n.Tr "home.c2net_title"}}</h2>
                 <p><span class="ui text grey">{{.i18n.Tr "home.c2net_desc"}}</p>
             </div>
-
-            <div id="app" v-cloak>
+            <div id="app" class="_hm-computing-net-container" v-cloak>
                 <!--底座-->
                 <div class="rotation3D-baseMap"></div>
                 <!--旋转3D-->
@@ -69,6 +68,7 @@
                     </div>					
                 </div>
             </div><!--rotation3D end--> 
+            <div class="_hm-computing-net-mobile-container" style="display:none;"></div>
         </div>
     </div>