diff --git a/custom/public/img/home-banner-1.jpg b/custom/public/img/home-banner-1.jpg new file mode 100644 index 000000000..77ac7a3a5 Binary files /dev/null and b/custom/public/img/home-banner-1.jpg differ diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 867f26b7e..7bd439888 100755 --- a/options/locale/locale_en-US.ini +++ b/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 diff --git a/options/locale/locale_zh-CN.ini b/options/locale/locale_zh-CN.ini index cf8ca3be6..6f4de25ad 100755 --- a/options/locale/locale_zh-CN.ini +++ b/options/locale/locale_zh-CN.ini @@ -300,6 +300,7 @@ openi_experience_officer_plan=启智社区体验官成长计划 more_benefits=，超多福利大放送 org_see=。查看 more_notice=更多通知 +vedio_detail=详细介绍视频 [explore] repos=项目 diff --git a/public/home/home.js b/public/home/home.js index 4028987e0..8b80811e9 100755 --- a/public/home/home.js +++ b/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(); diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl index 7e1ac7786..a017bf367 100755 --- a/templates/base/footer_content.tmpl +++ b/templates/base/footer_content.tmpl @@ -96,6 +96,11 @@ {{.i18n.Tr "home.powerdby"}}Trustie确实{{.i18n.Tr "、Gitea"}}
- + + + diff --git a/templates/custom/home/home_top.tmpl b/templates/custom/home/home_top.tmpl index adb1472b6..c96c66032 100644 --- a/templates/custom/home/home_top.tmpl +++ b/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; } -
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+

* {{.page_only_dynamic}}

+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
{{.i18n.Tr "home.page_title"}}
+
{{.i18n.Tr "home.page_description"}}
-
-
-
-
-
-
-
-
+
+ +
+ + {{.i18n.Tr "custom.Platform_Tutorial"}} +
+ + +
+ + {{.i18n.Tr "custom.resource_description"}} +
+ +
+
+ +
+ {{.i18n.Tr "home.page_use"}} +
+
-
-
-
-
-
-
-
-
-
-
-
{{.i18n.Tr "home.page_title"}}
-
{{.i18n.Tr "home.page_description"}}
-
-
-
{{.i18n.Tr "home.c2net_title"}}
-
{{.i18n.Tr "home.c2net_desc" }}
-
-
- {{.i18n.Tr "home.page_use"}} + +
+
+
+
{{.i18n.Tr "home.c2net_title"}}
+
{{.i18n.Tr "home.c2net_desc" }} + +
+ {{.i18n.Tr "home.vedio_detail"}} + +
+ +
+
+
+
@@ -1789,4 +1928,3 @@
- diff --git a/templates/notice.tmpl b/templates/notice.tmpl index 58fe0cb93..564c96dd3 100644 --- a/templates/notice.tmpl +++ b/templates/notice.tmpl @@ -64,7 +64,7 @@ ${isZh ? noticeObj.Title : (noticeObj.Title_en || noticeObj.Title)}
-
${noticeObj.Time || ''}
+
${noticeObj.Date || ''}
`); } } catch (e) { diff --git a/web_src/js/index.js b/web_src/js/index.js index 001644d92..9d67c5004 100755 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -5207,4 +5207,22 @@ Fancybox.bind('.gallery img', { // Custom animations showClass: "fancybox-zoomIn", hideClass: "fancybox-zoomOut", -}); \ No newline at end of file +}); + +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();