mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
homepage - video
This commit is contained in:
Lruler
parent
f8eec14c1b
commit
e3723b1799
|
|
@ -74,14 +74,24 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.play{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 380px;
|
||||
left:900px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.img1 {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 268px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 460px;
|
||||
object-fit: contain;
|
||||
border: 6px solid #ffffff;
|
||||
border-radius: 3px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 10px 20px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 30px 0 rgba(34, 43, 62, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -1064,7 +1074,7 @@
|
|||
.join-us {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
z-index: 15;
|
||||
right: 20px;
|
||||
bottom: 16px;
|
||||
width: 336px;
|
||||
|
|
@ -1167,4 +1177,56 @@ footer {
|
|||
@media only screen and (max-width: $mobile-max-width) {
|
||||
background-color: #f5f8f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modal-for-video{
|
||||
display: block;
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
height: 608px;
|
||||
width: 1080px;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-top: -304px;
|
||||
margin-left: -540px;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: 0;
|
||||
|
||||
.video-div{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
video{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
iframe{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.close-video{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
right: -15px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.shadow{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 18;
|
||||
height: 6500px;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{{ define "main" }}
|
||||
{{ $data := index .Site.Data .Site.Language.Lang }}
|
||||
<div class="shadow">test</div>
|
||||
<section class='section-1'>
|
||||
{{ with .Params.section1 }}
|
||||
<div class="common-layout">
|
||||
|
|
@ -9,13 +10,14 @@
|
|||
<p class='p2'>{{ .content | safeHTML }}</p>
|
||||
{{ partial "downloadButton" . }}
|
||||
</div>
|
||||
<img class='img1' src="/images/home/53.png" alt="{{ i18n "kubesphere console screenshot"}}">
|
||||
<img class='img2' src="/images/home/left.svg" alt="{{ i18n "background image"}}">
|
||||
<img class='img4' src="/images/home/46.svg" alt="{{ i18n "background image"}}">
|
||||
<img class='img1' src="/images/home/53.png" id='video' alt="{{ i18n " kubesphere console screenshot"}}">
|
||||
<img class='play' src="/images/videos/play-b.svg" alt="play">
|
||||
<img class='img2' src="/images/home/left.svg" alt="{{ i18n " background image"}}">
|
||||
<img class='img4' src="/images/home/46.svg" alt="{{ i18n " background image"}}">
|
||||
</div>
|
||||
<img class='img1' src="/images/home/bg.png" alt="{{ i18n "background image"}}">
|
||||
<img class='img2' src="/images/home/12-3.png" alt="{{ i18n "background image"}}">
|
||||
<img class='img3' src="/images/home/2.svg" alt="{{ i18n "background image"}}">
|
||||
<img class='img1' src="/images/home/bg.png" alt="{{ i18n " background image"}}">
|
||||
<img class='img2' src="/images/home/12-3.png" alt="{{ i18n " background image"}}">
|
||||
<img class='img3' src="/images/home/2.svg" alt="{{ i18n " background image"}}">
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
|
|
@ -70,8 +72,8 @@
|
|||
|
||||
<section class='section-4'>
|
||||
{{ with .Params.section4 }}
|
||||
<img class='bg-1' src="/images/home/section4-left.png" alt="{{ i18n "background image"}}">
|
||||
<img class='bg-2' src="/images/home/section4-right.svg" alt="{{ i18n "background image"}}">
|
||||
<img class='bg-1' src="/images/home/section4-left.png" alt="{{ i18n " background image"}}">
|
||||
<img class='bg-2' src="/images/home/section4-right.svg" alt="{{ i18n " background image"}}">
|
||||
<div class="common-layout">
|
||||
<div>
|
||||
<h2>{{ .title }}</h2>
|
||||
|
|
@ -104,7 +106,8 @@
|
|||
{{ if .check }}
|
||||
<span class="common-green-a">{{ i18n "Coming Soon" }} →</span>
|
||||
{{ else }}
|
||||
<a class="common-green-a" href="{{ .link | relLangURL }}" target="_blank" rel="noopener noreferrer">{{ i18n "Read More" }} →</a>
|
||||
<a class="common-green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ i18n "Read More" }}
|
||||
→</a>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
|
|
@ -176,12 +179,12 @@
|
|||
<a class='join-div' href="{{ .joinLink }}">
|
||||
<p class='p1'>{{ .joinTitle }}</p>
|
||||
<p class='p2'>{{ .joinContent }}</p>
|
||||
<img src="/images/home/join-right.svg" alt="{{ i18n "background image"}}">
|
||||
<img src="/images/home/join-right.svg" alt="{{ i18n " background image"}}">
|
||||
</a>
|
||||
<img class='bottom-img' src="{{ .image }}" alt="cncf">
|
||||
</div>
|
||||
<img class='bg-1' src="/images/home/section6-left.svg" alt="{{ i18n "icon" }}">
|
||||
<img class='bg-2' src="/images/home/section6-right.svg" alt="{{ i18n "icon" }}">
|
||||
<img class='bg-1' src="/images/home/section6-left.svg" alt="{{ i18n " icon" }}">
|
||||
<img class='bg-2' src="/images/home/section6-right.svg" alt="{{ i18n " icon" }}">
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
|
|
@ -217,9 +220,80 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-for-video">
|
||||
<img class="close-video" src="/images/videos/close.png">
|
||||
<div class="video-div" data-language='{{ .Site.Language.Lang }}'>
|
||||
<video class="start1" src="" poster="/images/home/poster.png" controls autoplay></video></video>
|
||||
<iframe class="start2" src=""></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
var bindMouseLeftLi = function() {
|
||||
$('.section-3 .left-li').mouseenter(function() {
|
||||
|
||||
var controlVideo = function () {
|
||||
var openVideo = $('div.open-video');
|
||||
var img = $('#video');
|
||||
var shadow = $('div.shadow')
|
||||
var video = $('div.modal-for-video')
|
||||
var start1 = $('video.start1')
|
||||
var start2 = $('iframe.start2')
|
||||
var closeVideo = $('img.close-video')
|
||||
var language = $('div.video-div').data('language')
|
||||
var height = document.body.scrollHeight + 'px'
|
||||
console.log(height);
|
||||
|
||||
|
||||
shadow.hide();
|
||||
closeVideo.hide();
|
||||
video.hide();
|
||||
openVideo.hide();
|
||||
|
||||
img.click(function () {
|
||||
if (language == 'zh') {
|
||||
start2.css('display', 'none')
|
||||
start1.attr('src', "https://kubesphere-community.pek3b.qingstor.com/videos/kubesphere-demo-cn.mp4")
|
||||
}
|
||||
else if (language == 'en') {
|
||||
start1.css('display', 'none')
|
||||
start2.attr('src', "https://www.youtube.com/embed/YxZ1YUv0CYs")
|
||||
}
|
||||
shadow.show()
|
||||
shadow.css('height', 'height')
|
||||
|
||||
video.show();
|
||||
closeVideo.show();
|
||||
openVideo.show()
|
||||
|
||||
})
|
||||
|
||||
closeVideo.click(function () {
|
||||
closeVideo.hide()
|
||||
start1.attr('src', '')
|
||||
start2.attr('src', '')
|
||||
shadow.hide()
|
||||
video.hide()
|
||||
openVideo.hide()
|
||||
})
|
||||
|
||||
shadow.click(function () {
|
||||
closeVideo.hide()
|
||||
start1.attr('src', '')
|
||||
start2.attr('src', '')
|
||||
shadow.hide()
|
||||
video.hide()
|
||||
openVideo.hide()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
var bindMouseLeftLi = function () {
|
||||
$('.section-3 .left-li').mouseenter(function () {
|
||||
var index = Number($(this).data('index'))
|
||||
$('.left-li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
|
@ -227,12 +301,12 @@
|
|||
})
|
||||
}
|
||||
|
||||
var bindResize = function() {
|
||||
var bindResize = function () {
|
||||
var screenWidth = $(window).width()
|
||||
if (screenWidth <= 768) {
|
||||
$('.image').find('img').attr('src', "/images/home/applications2.png")
|
||||
}
|
||||
$(window).resize(function() {
|
||||
}
|
||||
$(window).resize(function () {
|
||||
var screenWidth = $(window).width()
|
||||
if (screenWidth <= 768) {
|
||||
$('.image').find('img').attr('src', "/images/home/applications2.png")
|
||||
|
|
@ -242,24 +316,26 @@
|
|||
})
|
||||
}
|
||||
|
||||
var bindCount = function() {
|
||||
setTimeout(function() {
|
||||
var bindCount = function () {
|
||||
setTimeout(function () {
|
||||
$('.join-us').fadeIn()
|
||||
}, 10000)
|
||||
}
|
||||
|
||||
var bindClose = function() {
|
||||
$('.join-us .close').click(function(e) {
|
||||
var bindClose = function () {
|
||||
$('.join-us .close').click(function (e) {
|
||||
e.stopPropagation()
|
||||
$('.join-us').fadeOut()
|
||||
})
|
||||
}
|
||||
|
||||
var bindMeet = function() {
|
||||
$('.meet-div').click(function() {
|
||||
var bindMeet = function () {
|
||||
$('.meet-div').click(function () {
|
||||
window.open('https://kubesphere.com.cn/forum/d/2712-meetup-topic')
|
||||
})
|
||||
}
|
||||
|
||||
controlVideo()
|
||||
bindMouseLeftLi()
|
||||
bindResize()
|
||||
bindCount()
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="34" height="35" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.0016 34.1668C26.2064 34.1668 33.6683 26.7049 33.6683 17.5002C33.6683 8.29541 26.2064 0.833496 17.0016 0.833496C7.79688 0.833496 0.334961 8.29541 0.334961 17.5002C0.334961 26.7049 7.79688 34.1668 17.0016 34.1668Z" fill="#242E42"/>
|
||||
<path d="M13.665 17.4998V11.7263L18.665 14.6131L23.665 17.4998L18.665 20.3866L13.665 23.2733V17.4998Z" fill="white" stroke="white" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 503 B |
Loading…
Reference in New Issue