home page

options/locale/locale_en-US.ini

@@ -297,6 +297,7 @@ openi_experience_officer_plan=OpenI AI experience officer growth plan
 more_benefits=, More benefits
 org_see=See
 more_notice=More notices
+vedio_detail=Video details
 
 [explore]
 repos = Repositories

options/locale/locale_zh-CN.ini

@@ -300,6 +300,7 @@ openi_experience_officer_plan=启智社区体验官成长计划
 more_benefits=，超多福利大放送
 org_see=。查看
 more_notice=更多通知
+vedio_detail=详细介绍视频
 
 [explore]
 repos=项目

public/home/home.js

@@ -755,8 +755,9 @@ function getNotice() {
                         var noticeEl = noticeEls.eq(i);
                         var noticeObj = noticeList[i];
                         if (noticeObj) {
+                            var title = isZh ? noticeObj.Title : (noticeObj.Title_en || noticeObj.Title);
                             noticeEl.attr('href', noticeObj.Link);
-                            noticeEl.find('span').text(isZh ? noticeObj.Title : (noticeObj.Title_en || noticeObj.Title));
+                            noticeEl.find('span').text(title).attr('title', title);
                             noticeEl.show();
                         } else {
                             noticeEl.hide();
@@ -805,5 +806,48 @@ function getRecommendModule() {
     });
 }
 
+function initHomeTopBanner() {
+    var homeSlideTimer = null;
+    var homeSlideDuration = 8000;
+    function homeSlide(direction) {
+        var slidePages = $('._hm-pg-c ._hm-pg');
+        var currentPage = slidePages.filter('._hm-pg-show');
+        var currentIndex = currentPage.index();
+        var next = direction == 'left' ? currentIndex - 1 : currentIndex + 1;
+        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');
+    }
+
+    function startSlide() {
+        homeSlideTimer && clearTimeout(homeSlideTimer);
+        homeSlideTimer = setTimeout(function() {
+            homeSlide('right');
+            startSlide();
+        }, homeSlideDuration);
+    }
+
+    function stopSlide() {
+        homeSlideTimer && clearTimeout(homeSlideTimer);
+    }
+
+    $('._hm-slide-btn').on('click', function () {
+        if ($(this).hasClass('_hm-slide-btn-left')) {
+            homeSlide('left');            
+        } else {
+            homeSlide('right');
+        }
+        startSlide();
+    });
+    $('._hm-pg #homenews').on('mouseenter', function() {
+        stopSlide();
+    }).on('mouseleave', function() {
+        startSlide();
+    });
+    setTimeout(function() { startSlide(); }, 500);
+}
+
+initHomeTopBanner();
 getNotice();
 getRecommendModule();

templates/base/footer_content.tmpl

@@ -96,6 +96,11 @@
 				{{.i18n.Tr "home.powerdby"}}<a href="https://www.trustie.net/" target="_blank">Trustie确实</a>{{.i18n.Tr "、Gitea"}}
 				<br>
 			</div>
-		</div>	
+		</div>
+	</div>
+	<div class="__go-top" style="display:none;z-index:100;width:44px;height:44px;bottom:50px;right:50px;background:rgba(16, 16, 16, 0.1);position:fixed;cursor:pointer;border-radius:5px;">
+		<div style="display:flex;align-items:center;justify-content:center;height:100%;">
+			<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 mHEdk svg-icon-path-icon fill" viewBox="0 0 32 32" width="30" height="30"><defs data-reactroot=""></defs><g><path fill="rgba(16, 16, 16, 0.6)" d="M17.333 10.437v16.229h-2.667v-16.229l-7.152 7.152-1.885-1.885 10.371-10.371 10.371 10.371-1.885 1.885-7.152-7.152z"></path></g></svg>
+		</div>
 	</div>
 </footer>

templates/custom/home/home_top.tmpl

@@ -76,26 +76,21 @@
       transform: translate3d(0, 0, 0);
     }
 
-    50% {
+    5% {
       transform: translate3d(0, 0, 0);
     }
 
-    70% {
-      transform: translate3d(0, -90%, 0);
-    }
-
-    70%,
-    90% {
+    50% {
       transform: translate3d(0, -90%, 0);
     }
 
     to {
-      transform: translate3d(0, 0, 0);
+      transform: translate3d(0, -90%, 0);
     }
   }
 
   ._hm-slide-up {
-    animation-duration: 16s;
+    animation-duration: 10s;
     animation-iteration-count: infinite;
     animation-name: _hm-slide-up;
   }
@@ -233,8 +228,15 @@
     from {
       transform: translateX(-100%);
     }
+    to {
+      transform: translateX(0);
+    }
+  }
 
-    5%,
+  @keyframes _hm-slide-in-right-once {
+    from {
+      transform: translateX(100%);
+    }
     to {
       transform: translateX(0);
     }
@@ -380,7 +382,7 @@
 
   ._hm-ani-bubble-c {
     animation-name: _hm-ani-bubble-c;
-    animation-duration: 16s;
+    animation-duration: 20s;
     animation-iteration-count: infinite;
     animation-delay: 1s;
   }
@@ -392,10 +394,70 @@
   ._hm-bg-container {
     overflow: hidden;
     position: relative;
-    height: 520px;
+    height: 520px;    
+  }
+
+  ._hm-pg-static {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
+  ._hm-pg {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: none;
+  }
+
+  ._hm-pg-show {
+    display: block;
+  }
+
+  ._hm-pg-hide {
+    display: none;
+  }
+
+  ._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%233bb6fe%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");
   }
 
+  ._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 {
+    background: url("/img/home-banner-1.jpg");    
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+  }
+
+  ._hm-slide-btn {
+    position: absolute;
+    z-index: 30;
+    color: white;
+    height: 30px;
+    width: 30px;
+    border: 1px solid rgba(255,255,255,0.6);
+    box-sizing: border-box;
+    top: 50%;
+    transform: translateY(-50%) rotate(-45deg) ;
+    cursor: pointer;
+    padding: 5px;
+  }
+
+  ._hm-slide-btn-left {
+    left: 30px;    
+    border-right: none;
+    border-bottom: none;    
+  }
+
+  ._hm-slide-btn-right {
+    right: 30px;
+    border-top: none;
+    border-left: none;  
+  }
+
   ._hm-circle {
     position: absolute;
     top: 180px;
@@ -415,9 +477,8 @@
 
   ._hm-circle-rect {
     position: absolute;
-    top: 394px;
-    left: 60%;
-    z-index: 2;
+    top: 400px;
+    left: 55%;
     opacity: 0.9;
     transform-origin: 632px 430px;
     animation-delay: 0.5s;
@@ -434,7 +495,7 @@
     height: 1px;
     width: 80%;
     left: 10%;
-    bottom: 0;
+    bottom: -40px;
     transform: translate(-2.5%, 0);
     z-index: 5;
   }
@@ -680,7 +741,7 @@
     height: 1px;
     width: 100%;
     left: 10%;
-    bottom: 0;    
+    bottom: -100px;    
     z-index: 3;
     opacity: 0.8;
   }
@@ -819,6 +880,19 @@
     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(0.002000000000000036%2C%200.579%2C%20-0.6313103100621746%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%2304d1f7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300c9ff%22%20stop-opacity%3D%220.5%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23bc00ff%22%20stop-opacity%3D%220.21%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");
   }
 
+  ._hm-person-ring-3 {  
+    position: absolute;
+    top: 285px;
+    right: -20px;
+    opacity: 0.9;
+    transform: rotate(282deg);
+    transform-origin: 141.5px 66px;
+    width: 283px; 
+    height: 132px; 
+    border-radius: 100%;
+    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(0.048999999999999905%2C%20-1.2400000000000002%2C%200.9760346574435941%2C%200.17728199999999966%2C%200.467%2C%201.034)%22%3E%3Cstop%20stop-color%3D%22%231e04f7%22%20stop-opacity%3D%220.39%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300aeff%22%20stop-opacity%3D%220.52%22%20offset%3D%220.73%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%239ff7f2%22%20stop-opacity%3D%220%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");
+  }
+
   ._hm-person-circle-1 {
     position: absolute;
     top: 35px;
@@ -867,6 +941,22 @@
     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(0.524%2C%200.4450000000000001%2C%20-0.4450000000000001%2C%200.524%2C%200.339%2C%200.364)%22%3E%3Cstop%20stop-color%3D%22%235f00b4%22%20stop-opacity%3D%220.06%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23150bc4%22%20stop-opacity%3D%220.31%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%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");
   }
 
+  ._hm-person-circle-4 {
+    position: absolute;
+    top: -39px;
+    right: -66px;
+    z-index: 2;
+    opacity: 0.9;
+    transform-origin: 121px 121px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 242px; 
+    height: 242px;
+    border-radius: 100%;
+    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(-0.6710000000000002%2C%20-0.8079999999999999%2C%200.8079999999999999%2C%20-0.6710000000000002%2C%200.495%2C%200.568)%22%3E%3Cstop%20stop-color%3D%22%2390edfe%22%20stop-opacity%3D%220.6%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235b52f8%22%20stop-opacity%3D%220%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");
+  }
+
   ._hm-person-star-1 {}
 
   ._hm-person-star-1-1 {
@@ -1340,15 +1430,14 @@
     background: rgb(250, 36, 249);
   }
 
-
   ._hm-txt-content-c {
     position: relative;
-    top: 80px;
+    top: 70px;
     left: 50%;
     transform: translate(-50%, 0);
-    width: 45%;
-    min-width: 380px;
-    max-width: 800px;
+    width: 80%;
+    min-width: 300px;
+    max-width: 900px;
     z-index: 10;
   }
 
@@ -1382,12 +1471,13 @@
     line-height: 36px;
     text-decoration: none;
     text-align: center;
-    margin-bottom: 65px;
+    margin-bottom: 28px;
   }
 
   ._hm-big-btn-c {
     display: flex;
     justify-content: center;
+    margin-bottom: 36px;
   }
 
   ._hm-big-btn-c a {
@@ -1419,16 +1509,16 @@
   ._hm-big-btn-3 {
     cursor: pointer;
     width: 160px;
-    height: 48px;
+    height: 40px;
     border-color: rgb(251, 251, 251);
     border-width: 2px;
     border-style: solid;
     color: rgb(255, 255, 255);
-    border-radius: 40px;
-    font-size: 18px;
+    border-radius: 2px;
+    font-size: 14px;
     padding: 0px;
     text-align: center;
-    margin-right: 20px;
+    margin-right: 28px;
     box-sizing: border-box;
     background: transparent;
     display: flex;
@@ -1450,6 +1540,7 @@
     margin: 20px;
     display: flex;
     position: relative;
+    text-align: center;
     justify-content: center;
     align-items: center;
     min-width: 240px;
@@ -1558,196 +1649,244 @@
     color: white;
   }
 </style>
-<div class="_hm-bg-container _hm-change-bg">
-  <div class="_hm-show-section-2">
-    <div class="_hm-circle _hm-transition-common _hm-swing"></div>
+<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-circle-rect _hm-transition-common _hm-shake"></div>
-  <div class="_hm-universe _hm-show-section-1">
-    <div class="_hm-universe-1 _hm-swing"></div>
-    <div class="_hm-universe-2"></div>
-  </div>
-  <div class="_hm-person-area _hm-show-section-1">
-    <div class="_hm-person"></div>
-    <div class="_hm-person-ring-1"></div>
-    <div class="_hm-person-ring-2"></div>
-    <div class="_hm-person-circle-1 _hm-swing"></div>
-    <div class="_hm-person-circle-2 _hm-swing"></div>
-    <div class="_hm-person-circle-3 _hm-swing"></div>
-    <div class="_hm-person-star-1">
-      <div class="_hm-person-star-1-1"></div>
-      <div class="_hm-person-star-1-2"></div>
-    </div>
-    <div class="_hm-person-star-2">
-      <div class="_hm-person-star-2-1"></div>
-      <div class="_hm-person-star-2-2"></div>
-    </div>
-    <div class="_hm-person-star-3">
-      <div class="_hm-person-star-3-1"></div>
-      <div class="_hm-person-star-3-2"></div>
-    </div>
-    <div class="_hm-person-star-4">
-      <div class="_hm-person-star-4-1"></div>
-      <div class="_hm-person-star-4-2"></div>
-    </div>
-    <div class="_hm-person-star-5">
-      <div class="_hm-person-star-5-1"></div>
-      <div class="_hm-person-star-5-2"></div>
-    </div>
-    <div class="_hm-person-star-6"></div>
-    <div class="_hm-person-star-7"></div>
-    <div class="_hm-person-star-8"></div>
-    <div class="_hm-person-star-9"></div>
-    <div class="_hm-person-star-10"></div>
-    <div class="_hm-person-star-11"></div>
-    <div class="_hm-person-star-12"></div>
-    <div class="_hm-person-star-13"></div>
-    <div class="_hm-person-star-14"></div>
-    <div class="_hm-person-star-15"></div>
-    <div class="_hm-person-star-16"></div>
-    <div class="_hm-person-star-17"></div>
-    <div class="_hm-person-star-18"></div>
-    <div class="_hm-person-star-19"></div>
-    <div class="_hm-person-star-20"></div>
-    <div class="_hm-person-star-21"></div>
-    <div class="_hm-person-star-22"></div>
-    <div class="_hm-person-star-23"></div>
-    <div class="_hm-person-star-24"></div>
-    <div class="_hm-person-star-25"></div>
-    <div class="_hm-person-star-26"></div>
-    <div class="_hm-person-star-27"></div>
-    <div class="_hm-person-star-28"></div>
-  </div>
-  <div class="_hm-up-arr-c _hm-fade-out">
-    <div class="_hm-up-arr _hm-up-arr-1 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-1">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
-        </div>
+  <div class="_hm-pg-c">
+    <div class="_hm-pg _hm-pg-bg-1 _hm-pg-show">
+      <div class="_hm-universe">
+        <div class="_hm-universe-1 _hm-swing"></div>
+        <div class="_hm-universe-2"></div>
       </div>
-      <div class="_hm-arr-rect _hm-arr-rect-1"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-2 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-2">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
+      <div class="_hm-person-area">
+        <div class="_hm-person"></div>
+        <div class="_hm-person-ring-1"></div>
+        <div class="_hm-person-ring-2"></div>
+        <div class="_hm-person-ring-3"></div>
+        <div class="_hm-person-circle-1 _hm-swing"></div>
+        <div class="_hm-person-circle-2 _hm-swing"></div>
+        <div class="_hm-person-circle-3 _hm-swing"></div>
+        <div class="_hm-person-circle-4 _hm-swing"></div>
+        <div class="_hm-person-star-1">
+          <div class="_hm-person-star-1-1"></div>
+          <div class="_hm-person-star-1-2"></div>
         </div>
-      </div>
-      <div class="_hm-arr-rect _hm-arr-rect-2"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-3 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-3">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
+        <div class="_hm-person-star-2">
+          <div class="_hm-person-star-2-1"></div>
+          <div class="_hm-person-star-2-2"></div>
         </div>
-      </div>
-      <div class="_hm-arr-rect _hm-arr-rect-3"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-4 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-4">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
+        <div class="_hm-person-star-3">
+          <div class="_hm-person-star-3-1"></div>
+          <div class="_hm-person-star-3-2"></div>
         </div>
-      </div>
-      <div class="_hm-arr-rect _hm-arr-rect-4"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-5 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-5">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
+        <div class="_hm-person-star-4">
+          <div class="_hm-person-star-4-1"></div>
+          <div class="_hm-person-star-4-2"></div>
         </div>
-      </div>
-      <div class="_hm-arr-rect _hm-arr-rect-5"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-6 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-6">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
+        <div class="_hm-person-star-5">
+          <div class="_hm-person-star-5-1"></div>
+          <div class="_hm-person-star-5-2"></div>
         </div>
+        <div class="_hm-person-star-6"></div>
+        <div class="_hm-person-star-7"></div>
+        <div class="_hm-person-star-8"></div>
+        <div class="_hm-person-star-9"></div>
+        <div class="_hm-person-star-10"></div>
+        <div class="_hm-person-star-11"></div>
+        <div class="_hm-person-star-12"></div>
+        <div class="_hm-person-star-13"></div>
+        <div class="_hm-person-star-14"></div>
+        <div class="_hm-person-star-15"></div>
+        <div class="_hm-person-star-16"></div>
+        <div class="_hm-person-star-17"></div>
+        <div class="_hm-person-star-18"></div>
+        <div class="_hm-person-star-19"></div>
+        <div class="_hm-person-star-20"></div>
+        <div class="_hm-person-star-21"></div>
+        <div class="_hm-person-star-22"></div>
+        <div class="_hm-person-star-23"></div>
+        <div class="_hm-person-star-24"></div>
+        <div class="_hm-person-star-25"></div>
+        <div class="_hm-person-star-26"></div>
+        <div class="_hm-person-star-27"></div>
+        <div class="_hm-person-star-28"></div>
       </div>
-      <div class="_hm-arr-rect _hm-arr-rect-6"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-7 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-7">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
-        </div>
+      <div class="_hm-bubble-c _hm-ani-bubble-c">
+        <div class="bubble _hm-bubble-1 _hm-bounce-in-up"></div>
+        <div class="bubble _hm-bubble-2 _hm-bounce-in-up"></div>
+        <div class="bubble _hm-bubble-3 _hm-bounce-in-up"></div>
       </div>
-      <div class="_hm-arr-rect _hm-arr-rect-7"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-8 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-8">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
+      <div id="homenews">
+        <p style="display:none;">* {{.page_only_dynamic}}</p>
+        <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>
       </div>
-      <div class="_hm-arr-rect _hm-arr-rect-8"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-9 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-9">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></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-descr">{{.i18n.Tr "home.page_description"}}</div>
         </div>
-      </div>
-      <div class="_hm-arr-rect _hm-arr-rect-9"></div>
-    </div>
-    <div class="_hm-up-arr _hm-up-arr-10 _hm-slide-up">
-      <div class="_hm-arr-triangle-c _hm-arr-triangle-10">
-        <div class="_hm-arr-triangle">
-          <div class="_hm-arr-triangle-l"></div>
-          <div class="_hm-arr-triangle-r"></div>
+        <div class="_hm-big-btn-c">
+          <a href="https://git.openi.org.cn/zeizei/OpenI_Learning">
+            <div class="_hm-big-btn-2">
+              <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="M2.667 5.324c0.005-0.729 0.594-1.318 1.322-1.324h24.022c0.731 0 1.323 0.593 1.323 1.324v21.352c-0.005 0.729-0.594 1.318-1.322 1.324h-24.022c-0.731-0.001-1.323-0.593-1.323-1.324v0-21.352zM14.667 6.667h-9.333v18.667h9.333v-18.667zM17.333 6.667v18.667h9.333v-18.667h-9.333zM18.667 9.333h6.667v2.667h-6.667v-2.667zM18.667 13.333h6.667v2.667h-6.667v-2.667z"></path></g></svg>
+              {{.i18n.Tr "custom.Platform_Tutorial"}}
+            </div>
+          </a>
+          <a href="/resource_desc">
+            <div class="_hm-big-btn-2">
+              <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>
+          </a>
+        </div>
+        <div class="_hm-big-btn-c">
+          <a href="{{if .IsSigned}}/dashboard{{else}}/user/login{{end}}">
+            <div class="_hm-big-btn-1">
+              {{.i18n.Tr "home.page_use"}}
+            </div>
+          </a>
         </div>
       </div>
-      <div class="_hm-arr-rect _hm-arr-rect-10"></div>
-    </div>
-  </div>
-  <div class="_hm-bubble-c _hm-ani-bubble-c">
-    <div class="bubble _hm-bubble-1 _hm-bounce-in-up"></div>
-    <div class="bubble _hm-bubble-2 _hm-bounce-in-up"></div>
-    <div class="bubble _hm-bubble-3 _hm-bounce-in-up"></div>
-  </div>
-  <div class="_hm-txt-content-c">
-    <div class="_hm-big-txt-1 _hm-show-section-1">
-      <div class="_hm-big-title" style="animation:_hm-slide-in-left 16s infinite;">{{.i18n.Tr "home.page_title"}}</div>
-      <div class="_hm-big-descr">{{.i18n.Tr "home.page_description"}}</div>
-    </div>
-    <div class="_hm-big-txt-2 _hm-show-section-2" style="position:absolute;top:0;left:0;width:100%;">
-      <div class="_hm-big-title _hm-slide-in-right">{{.i18n.Tr "home.c2net_title"}}</div>
-      <div class="_hm-big-descr">{{.i18n.Tr "home.c2net_desc" }}</div>
     </div>
-    <div class="_hm-big-btn-c">
-      <div class="_hm-big-btn-1">
-        <a href="{{if .IsSigned}}/dashboard{{else}}/user/login{{end}}">{{.i18n.Tr "home.page_use"}}</a>        
+    <!--
+    <div class="_hm-pg _hm-pg-bg-2">
+      <div class="_hm-circle _hm-transition-common _hm-swing"></div>
+      <div class="_hm-up-arr-c">
+        <div class="_hm-up-arr _hm-up-arr-1 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-1">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-1"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-2 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-2">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-2"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-3 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-3">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-3"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-4 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-4">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-4"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-5 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-5">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-5"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-6 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-6">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-6"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-7 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-7">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-7"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-8 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-8">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-8"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-9 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-9">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-9"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-10 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-10">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-10"></div>
+        </div>
       </div>
-      <div>
-        <div class="_hm-big-btn-2 _hm-show-section-1">
-          <a href="https://git.openi.org.cn/zeizei/OpenI_Learning">{{.i18n.Tr "custom.Platform_Tutorial"}}</a>
+      <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-descr">{{.i18n.Tr "home.c2net_desc" }}</div>
         </div>
-        <div class="_hm-big-btn-3 _hm-show-section-2" style="margin-top:-48px">
-          <a href="/resource_desc">{{.i18n.Tr "custom.resource_description"}}</a>
+        <div class="_hm-big-btn-c">
+          <div class="_hm-big-btn-1">
+            <a href="{{if .IsSigned}}/dashboard{{else}}/user/login{{end}}">{{.i18n.Tr "home.page_use"}}</a>        
+          </div>
+          <div>
+            <div class="_hm-big-btn-3">
+              <a href="/resource_desc">{{.i18n.Tr "custom.resource_description"}}</a>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div id="homenews" class="_hm-show-section-1">
-    <p style="display:none;">* {{.page_only_dynamic}}</p>
-    <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 class="_hm-pg _hm-pg-bg-3">
+      <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-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:rgb(59, 131, 254);">
+              <div style="display:inline-block;">
+                <span style="border-bottom:2px solid rgb(59, 131, 254);">{{.i18n.Tr "home.vedio_detail"}}</span>
+                <i style="vertical-align:bottom;" class="ri-play-circle-line"></i>
+              </div>
+            </a>
+          </div>
         </div>
+        <div class="_hm-big-btn-c"></div>
       </div>
     </div>
   </div>
+  <div class="_hm-slide-btn _hm-slide-btn-left"></div>
+  <div class="_hm-slide-btn _hm-slide-btn-right"></div>
 </div>
 <div class="ui container _hm-container">
   <div class="_hm-recommend-info ">
@@ -1789,4 +1928,3 @@
     </div>
   </div>
 </div>
-

templates/notice.tmpl

@@ -64,7 +64,7 @@
                     <span>${isZh ? noticeObj.Title : (noticeObj.Title_en || noticeObj.Title)}</span>
                   </a>
                 </div>
-                <div class="notice-time">${noticeObj.Time || ''}</div>
+                <div class="notice-time">${noticeObj.Date || ''}</div>
               </div>`);              
             }
           } catch (e) {

web_src/js/index.js

@@ -5207,4 +5207,22 @@ Fancybox.bind('.gallery img', {
   // Custom animations
   showClass: "fancybox-zoomIn",
   hideClass: "fancybox-zoomOut",
-});
+});
+
+function initTopToHome() {
+  const topToHomeEl = $('.__go-top');
+  $(window).scroll(function (e) {
+    const scrollTop = $(document).scrollTop();
+    const winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+    if (scrollTop > winHeight * 1.2) {
+      topToHomeEl.fadeIn();
+    } else {
+      topToHomeEl.fadeOut();
+    }
+  });
+  topToHomeEl.on('click', function() {
+    $('html').animate({ scrollTop: 0 }, 'slow', 'swing');
+  });
+}
+
+initTopToHome();