mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
feat: Meetup card
Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
This commit is contained in:
TheYoungManLi
parent
2bb902bac7
commit
a08297f1bd
|
|
@ -1,5 +1,6 @@
|
|||
@import 'variables';
|
||||
@import 'mixin';
|
||||
|
||||
.btn-a {
|
||||
display: inline-block;
|
||||
padding: 0 53px;
|
||||
|
|
@ -10,10 +11,12 @@
|
|||
color: #ffffff;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
|
||||
background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.section-1 {
|
||||
position: relative;
|
||||
padding-top: 124px;
|
||||
|
|
@ -40,16 +43,19 @@
|
|||
position: relative;
|
||||
width: 840px;
|
||||
height: 400px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
|
|
@ -62,6 +68,7 @@
|
|||
cursor: pointer;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
|
||||
background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -73,12 +80,14 @@
|
|||
width: 320px;
|
||||
height: 400px;
|
||||
padding: 10px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
max-width: 320px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
|
|
@ -116,8 +125,8 @@
|
|||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.04px;
|
||||
color: #919aa3;
|
||||
|
||||
color: #919aa3;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
|
|
@ -127,8 +136,8 @@
|
|||
a {
|
||||
margin: 34px auto 0;
|
||||
height: 40px;
|
||||
padding: 0 28px;
|
||||
line-height: 40px;
|
||||
padding: 0 28px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
|
|
@ -165,12 +174,12 @@
|
|||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
|
||||
& > .video-tab-ul {
|
||||
&>.video-tab-ul {
|
||||
padding: 0 34px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 16px 0 rgba(7,42,68,.1);
|
||||
box-shadow: 0 4px 16px 0 rgba(7, 42, 68, .1);
|
||||
background-color: #fff;
|
||||
|
||||
li {
|
||||
|
|
@ -188,18 +197,19 @@
|
|||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 16px 0 rgba(101,193,148,.2),0 0 50px 0 rgba(101,193,148,.1);
|
||||
box-shadow: 0 8px 16px 0 rgba(101, 193, 148, .2), 0 0 50px 0 rgba(101, 193, 148, .1);
|
||||
background-color: #55bc8a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
box-shadow: 0 8px 16px 0 rgba(101,193,148,.2),0 0 50px 0 rgba(101,193,148,.1);
|
||||
box-shadow: 0 8px 16px 0 rgba(101, 193, 148, .2), 0 0 50px 0 rgba(101, 193, 148, .1);
|
||||
background-color: #55bc8a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
li + li {
|
||||
li+li {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -207,11 +217,12 @@
|
|||
.video-ul {
|
||||
margin-top: 20px;
|
||||
font-size: 0;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > li {
|
||||
&>li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 360px;
|
||||
|
|
@ -225,18 +236,18 @@
|
|||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
& > img {
|
||||
&>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > div {
|
||||
&>div {
|
||||
height: 202px;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -247,14 +258,14 @@
|
|||
transition: all .2s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
& > .btn {
|
||||
&>.btn {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 120px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -269,7 +280,7 @@
|
|||
color: #fff;
|
||||
padding: 8px 0;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 1px solid hsla(0,0%,100%,.1);
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, .1);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -306,7 +317,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -342,7 +353,7 @@
|
|||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: 0;
|
||||
|
||||
|
||||
.video-div {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -363,7 +374,7 @@
|
|||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
|
|
@ -371,99 +382,221 @@
|
|||
}
|
||||
}
|
||||
|
||||
.section-4 {
|
||||
background-image: linear-gradient(113deg, #4a499a 27%, #8552c3 81%);
|
||||
.common-layout {
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
& > div {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
white-space: normal;
|
||||
width: 140px;
|
||||
height: 225px;
|
||||
margin: 80px 40px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #a1b3c4;
|
||||
|
||||
.time-div {
|
||||
.common-layout-special {
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
height: 535px;
|
||||
background-image: linear-gradient(147.87deg, #4A499A 16%, #8552C3 85.01%);;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.meetup-box {
|
||||
max-width: 1320px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.meetup-title {
|
||||
font-size: 32px;
|
||||
line-height: 45px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
.innerBox {
|
||||
padding: 0px 80px;
|
||||
position: relative;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
&>ul {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 0.08) 5%, transparent 5%) no-repeat;
|
||||
|
||||
.right {
|
||||
margin-left: 4px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: #ffffff;
|
||||
.date {
|
||||
margin-bottom: 4px;
|
||||
font-size: 24px;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
line-height: 24px;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-bottom: solid 2px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.yearBox {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 377px;
|
||||
overflow: hidden;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: flex;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.time {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
li {
|
||||
height: 258px;
|
||||
width: 373px;
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 330px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 14px;
|
||||
font-size: 8px;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
|
||||
background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
right: 10px;
|
||||
bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
height: 60px;
|
||||
margin: 21px 0 47px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.43;
|
||||
color: #d5dee7;
|
||||
a {
|
||||
color: #d5dee7;
|
||||
|
||||
&:hover {
|
||||
color: #008a5c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 2;
|
||||
border: none;
|
||||
padding: 5px 28px;
|
||||
border-radius: 17px;
|
||||
.left-arrow {
|
||||
display: block;
|
||||
background: url('/images/live/arrow.svg');
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 151px;
|
||||
left: 0px;
|
||||
transform: rotate(180deg);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background: url('/images/live/arrow-hover.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.over-btn {
|
||||
color: #ffffff;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42);
|
||||
.right-arrow {
|
||||
display: block;
|
||||
background: url('/images/live/arrow.svg');
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 151px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: url('/images/live/arrow-hover.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.notive-btn {
|
||||
color: #3d3e49;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #ffffff, #ffffff);
|
||||
.hidden {
|
||||
display: none;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
.show {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.section-5 {
|
||||
.common-layout {
|
||||
position: relative;
|
||||
padding-top: 100px;
|
||||
padding-left: 60px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.left-div {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
|
|
@ -485,10 +618,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
& > img {
|
||||
&>img {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
right: 0;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -180,3 +180,19 @@
|
|||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin common-layout-special {
|
||||
position: relative;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding-left: 260px;
|
||||
|
||||
@media only screen and (max-width: $width-01) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $width-02) {
|
||||
padding: 10px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: live - KubeSphere | Enterprise container platform, built on Kubernetes
|
||||
description: KubeSphere is an open source container platform based on Kubernetes for enterprise app development and deployment, suppors installing anywhere from on-premise datacenter to any cloud to edge.
|
||||
keywords: KubeSphere,DevOps,Istio,Service Mesh,Jenkins
|
||||
keywords: KubeSphere, DevOps, Istio, Service Mesh, Jenkins
|
||||
css: "scss/live.scss"
|
||||
|
||||
section1:
|
||||
|
|
@ -337,38 +337,93 @@ section3:
|
|||
section4:
|
||||
overImg: /images/live/over.svg
|
||||
noticeImg: /images/live/notice.svg
|
||||
title: Meetup 回顾
|
||||
list:
|
||||
- title: Apache APISIX Ingress Controller 实现与上手实践
|
||||
date: 08/26
|
||||
time: 20:00 - 21:00
|
||||
lastTime: 2021-08-26T21:00:00Z
|
||||
url: ./apisix826-live/
|
||||
- year: 2021
|
||||
meetup:
|
||||
|
||||
- title: 使用 Flomesh 进行 Dubbo 微服务的服务治理
|
||||
date: 08/19
|
||||
time: 20:00 - 21:00
|
||||
lastTime: 2021-08-19T21:00:00Z
|
||||
url: ./pipy819-live/
|
||||
- place: 芜湖站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
|
||||
meetupUrl: https://www.baidu.com
|
||||
|
||||
- title: KubeSphere v3.1 开源社区交流会直播回放
|
||||
date: 04/29
|
||||
time: 20:00 - 21:00
|
||||
lastTime: 2021-04-29T21:00:00Z
|
||||
url: ./3.1-live/
|
||||
- place: 杭州站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- title: 基于 KubeSphere 与 BotKube 搭建 K8s 多集群监控告警体系
|
||||
date: 01/14
|
||||
time: 20:00 - 21:00
|
||||
lastTime: 2021-01-14T21:00:00Z
|
||||
url: ./botkube-live/
|
||||
- place: 成都站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/nebula0902-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- title: 企业级云原生多租户通知系统 Notification Manager
|
||||
date: 01/06
|
||||
time: 20:00 - 21:00
|
||||
lastTime: 2021-01-06T21:00:00Z
|
||||
url: ./nm-live/
|
||||
- place: 上海站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 杭州站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 成都站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 上海站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/nebula0902-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 杭州站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 成都站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 成都站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- year: 2022
|
||||
meetup:
|
||||
|
||||
- place: 上海站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 杭州站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 成都站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/nebula0902-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 成都站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- year: 2023
|
||||
meetup:
|
||||
- place: 上海站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 杭州站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 成都站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/nebula0902-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 成都站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
- place: 终点站
|
||||
img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
|
||||
meetupUrl:
|
||||
|
||||
|
||||
section5:
|
||||
title: 分享您的主题
|
||||
content: 您是否也想在社区分享您的云原生实践经验？即可加入 KubeSphere 社区云原生直播计划，提交分享主题，将有 KubeSphere 周边礼品相送！最重要的是您可以：提升自身软实力，如演讲能力、总结能力；提高自身在云原生领域的知名度；展现企业的技术实力及优秀想法；帮助推广您社区开源的项目。
|
||||
|
|
|
|||
|
|
@ -2,23 +2,23 @@
|
|||
|
||||
{{ with .Params.section1 }}
|
||||
<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
|
||||
<div class="common-layout">
|
||||
<h1 class="title-h1">{{ .title }}</h1>
|
||||
</div>
|
||||
<div class="common-layout">
|
||||
<h1 class="title-h1">{{ .title }}</h1>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.section2 }}
|
||||
<section class='section-2'>
|
||||
<div class="common-layout">
|
||||
<div class="live-2-left">
|
||||
<a href="{{ .url }}">
|
||||
<img src="{{ .image }}" alt="">
|
||||
<button>{{ i18n "Wonderful review" }}</button>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="live-2-right">
|
||||
<div class="common-layout">
|
||||
<div class="live-2-left">
|
||||
<a href="{{ .url }}">
|
||||
<img src="{{ .image }}" alt="">
|
||||
<button>{{ i18n "Wonderful review" }}</button>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="live-2-right">
|
||||
{{ with .notice }}
|
||||
<div class='notice shadow'>
|
||||
<h2 title="{{ .title }}">{{ .title }}</h2>
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
<div class="tag">{{ .tag }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
|
|
@ -63,52 +63,54 @@
|
|||
</section>
|
||||
{{ end }}
|
||||
|
||||
<div id="modal-for-video" class="modal">
|
||||
<div class='video-div'>
|
||||
<video src="" controls autoplay></video>
|
||||
<iframe
|
||||
id='iframe-player'
|
||||
src=""
|
||||
width="750"
|
||||
height="420"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ $overImg := .Params.section4.overImg}}
|
||||
{{ $noticeImg := .Params.section4.noticeImg}}
|
||||
{{ with .Params.section4 }}
|
||||
<section class='section-4'>
|
||||
<div class="common-layout">
|
||||
{{ range .list }}
|
||||
<div>
|
||||
<div class="time-div">
|
||||
{{$over := (time .lastTime).Unix}}
|
||||
{{ if ge now.Unix $over}}
|
||||
<img src="{{ $overImg }}" alt="">
|
||||
{{ else }}
|
||||
<img src="{{ $noticeImg }}" alt="">
|
||||
<section class="common-layout-special">
|
||||
<div class="meetup-box">
|
||||
<div class="meetup-title">{{ .title }}</div>
|
||||
<div class="innerBox">
|
||||
<ul id="meetup-ul">
|
||||
{{ range .list }}
|
||||
{{ with . }}
|
||||
<li> {{ .year }} </li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
<span id="leftArrow" class="left-arrow"></span>
|
||||
<div class="yearBox" id="meetup-list">
|
||||
{{ range .list }}
|
||||
{{ with . }}
|
||||
<ul>
|
||||
{{ range .meetup }}
|
||||
{{ with . }}
|
||||
<li>
|
||||
<p>{{ .place }}</p>
|
||||
<img src="{{ .img }}">
|
||||
<a href="{{ .meetupUrl | safeURL }}" target="_blank" rel="noopener noreferrer"><button>{{ i18n "Wonderful review" }}</button></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div class="right">
|
||||
<p class="date">{{ .date }}</p>
|
||||
<p class="time">{{ .time }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3><a href="{{ .url }}">{{ .title }}</a></h3>
|
||||
{{ if ge now.Unix $over}}
|
||||
<a href="{{ .url }}"><button class="over-btn">{{ i18n "Watch replay" }}</button></a>
|
||||
{{ else }}
|
||||
<a href="{{ .url }}"><button class="notice-btn">{{ i18n "View details" }}</button></a>
|
||||
{{ end }}
|
||||
<span id="rightArrow" class="right-arrow"></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ end }}
|
||||
|
||||
<div id="modal-for-video" class="modal">
|
||||
<div class='video-div'>
|
||||
<video src="" controls autoplay></video>
|
||||
<iframe id='iframe-player' src="" width="750" height="420" frameborder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
{{ with .Params.section5 }}
|
||||
<section class='section-5'>
|
||||
<div class="common-layout">
|
||||
|
|
@ -125,15 +127,15 @@
|
|||
<script src='{{ "js/pagination.min.js" | relURL }}'></script>
|
||||
|
||||
<script>
|
||||
var bindClickVideoTabLi = function() {
|
||||
var bindClickVideoTabLi = function () {
|
||||
var tabLi = $('.video-tab-ul > li')
|
||||
tabLi.click(function() {
|
||||
tabLi.click(function () {
|
||||
tabLi.removeClass('active')
|
||||
var group = $(this).data('group')
|
||||
$(this).addClass('active')
|
||||
var videos = $('.video-ul').data('origin')
|
||||
var videos = $('.video-ul').data('origin')
|
||||
if (group) {
|
||||
videos = videos.filter(function(video) {
|
||||
videos = videos.filter(function (video) {
|
||||
return video.group === group
|
||||
})
|
||||
}
|
||||
|
|
@ -141,8 +143,8 @@
|
|||
})
|
||||
}
|
||||
|
||||
var bindClickVideoLi = function() {
|
||||
$('.video-ul').on('click', 'li', function(ev) {
|
||||
var bindClickVideoLi = function () {
|
||||
$('.video-ul').on('click', 'li', function (ev) {
|
||||
var link = $(this).data('link')
|
||||
window.open(link)
|
||||
// var type = $(this).data('type')
|
||||
|
|
@ -154,8 +156,8 @@
|
|||
})
|
||||
}
|
||||
|
||||
var initModal = function() {
|
||||
$('#modal-for-video').on($.modal.BEFORE_CLOSE, function(event, modal) {
|
||||
var initModal = function () {
|
||||
$('#modal-for-video').on($.modal.BEFORE_CLOSE, function (event, modal) {
|
||||
$('#modal-for-video video')[0].pause()
|
||||
var src = $("#iframe-player").attr('src')
|
||||
// 去掉自动播放
|
||||
|
|
@ -163,19 +165,19 @@
|
|||
});
|
||||
}
|
||||
|
||||
var showIframe = function(link) {
|
||||
var showIframe = function (link) {
|
||||
$('#modal-for-video video').hide()
|
||||
$('#modal-for-video iframe').show().attr({src: link})
|
||||
$('#modal-for-video iframe').show().attr({ src: link })
|
||||
$('#modal-for-video').modal()
|
||||
}
|
||||
|
||||
var showVideo = function(link) {
|
||||
var showVideo = function (link) {
|
||||
$('#modal-for-video iframe').hide()
|
||||
$('#modal-for-video video').show().attr({src: link})
|
||||
$('#modal-for-video video').show().attr({ src: link })
|
||||
$('#modal-for-video').modal()
|
||||
}
|
||||
|
||||
var createVideoList = function(videos) {
|
||||
var createVideoList = function (videos) {
|
||||
var result = ''
|
||||
for (var i = 0; i < videos.length; i++) {
|
||||
var video = videos[i]
|
||||
|
|
@ -185,38 +187,116 @@
|
|||
return result
|
||||
}
|
||||
|
||||
var createVideoLi = function(video) {
|
||||
var createVideoLi = function (video) {
|
||||
var img = '<img src="' + video.snapshot + '" alt="background image">'
|
||||
var button = '<img class="btn" src="/images/videos/play.svg" alt="play button">'
|
||||
var title = '<h3>' + video.title + '</h3>'
|
||||
var group = '<p>' + video.group + '</p>'
|
||||
var time = '<p class="time">' + video.createTime + '</p>'
|
||||
var div = '<div>' + button + '<div>' + title + group + time + '</div></div>'
|
||||
var div = '<div>' + button + '<div>' + title + group + time + '</div></div>'
|
||||
var s = '<li data-link="' + video.link + '" data-type="' + video.type + '">' + img + div + '</li>'
|
||||
return s
|
||||
}
|
||||
|
||||
var initPagination = function(dataSource) {
|
||||
var initPagination = function (dataSource) {
|
||||
$('#pagination').pagination({
|
||||
dataSource: dataSource,
|
||||
pageSize: 12,
|
||||
prevText: '<<',
|
||||
nextText: '>>',
|
||||
callback: function(data, pagination) {
|
||||
callback: function (data, pagination) {
|
||||
var videoList = createVideoList(data)
|
||||
$('.video-ul').empty().append(videoList)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initVideos = function() {
|
||||
var videos = $('.video-ul').data('origin')
|
||||
var initVideos = function () {
|
||||
var videos = $('.video-ul').data('origin')
|
||||
initPagination(videos)
|
||||
}
|
||||
|
||||
var MeetupInit = function () {
|
||||
var ulHead = $('#meetup-ul');
|
||||
var ulList = $('#meetup-list');
|
||||
var tabActiveIndex = 0;
|
||||
ulHead.children('li')[0].className = 'active';
|
||||
ulList.children()[0].className = 'active';
|
||||
|
||||
$('#meetup-ul li').click(function (e) {
|
||||
var clickIndex = $(this).index();
|
||||
if (tabActiveIndex === clickIndex) {
|
||||
return
|
||||
} else {
|
||||
tabActiveIndex = clickIndex
|
||||
}
|
||||
var preActiveINdex = $('#meetup-ul li.active')
|
||||
var preUlBox = ulList.children()[preActiveINdex.index()];
|
||||
var clickUlBox = ulList.children()[clickIndex];
|
||||
preActiveINdex.removeClass('active')
|
||||
ulHead.children('li')[clickIndex].className = 'active'
|
||||
clickUlBox.className = 'active'
|
||||
preUlBox.className = ''
|
||||
ClickButton()
|
||||
})
|
||||
ClickButton()
|
||||
}
|
||||
|
||||
var judgeButton = function (start, total) {
|
||||
var leftArrow = $('#leftArrow');
|
||||
var rightArrow = $('#rightArrow');
|
||||
if (start >= total) {
|
||||
leftArrow.removeClass('hidden').addClass('show')
|
||||
rightArrow.removeClass('show').addClass('hidden')
|
||||
} else if (start <= 1) {
|
||||
leftArrow.removeClass('show').addClass('hidden')
|
||||
rightArrow.removeClass('hidden').addClass('show')
|
||||
} else {
|
||||
leftArrow.removeClass('hidden').addClass('show')
|
||||
rightArrow.removeClass('hidden').addClass('show')
|
||||
}
|
||||
}
|
||||
|
||||
var ClickButton = function () {
|
||||
var leftArrow = $('#leftArrow');
|
||||
var rightArrow = $('#rightArrow');
|
||||
var stepWidth = 1179;
|
||||
leftArrow.removeClass('show').addClass('hidden');
|
||||
rightArrow.removeClass('show').addClass('hidden');
|
||||
leftArrow.unbind('click')
|
||||
rightArrow.unbind('click')
|
||||
|
||||
var ulList = $('#meetup-list');
|
||||
var ulListChild = $('#meetup-list').children();
|
||||
var activeUl = $('#meetup-list ul.active');
|
||||
var starStep = 1;
|
||||
var totalStep = Math.ceil(activeUl.width() / ulList.width());
|
||||
|
||||
ulListChild.each(item => {
|
||||
ulListChild[item].style = ''
|
||||
})
|
||||
if (totalStep >= 2) {
|
||||
rightArrow.removeClass('hidden').addClass('show');
|
||||
}
|
||||
|
||||
rightArrow.click(function (e) {
|
||||
activeUl[0].style = 'transform: translateX(-' + (starStep * stepWidth) + 'px);';
|
||||
starStep += 1;
|
||||
judgeButton(starStep, totalStep);
|
||||
})
|
||||
|
||||
leftArrow.click(function (e) {
|
||||
starStep = starStep - 1;
|
||||
var left = starStep * stepWidth;
|
||||
activeUl[0].style = 'transform: translateX(-' + (left - stepWidth) + 'px);';
|
||||
judgeButton(starStep, totalStep);
|
||||
})
|
||||
}
|
||||
|
||||
bindClickVideoTabLi()
|
||||
bindClickVideoLi()
|
||||
initVideos()
|
||||
initModal()
|
||||
MeetupInit()
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="20" fill="black" fill-opacity="0.1"/>
|
||||
<path d="M16 13.6919L17.6919 12L26 20.3081L17.6919 28.6161L16 26.9242L22.6161 20.3081L16 13.6919Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 282 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="20" fill="white" fill-opacity="0.1"/>
|
||||
<path d="M16 13.6919L17.6919 12L26 20.3081L17.6919 28.6161L16 26.9242L22.6161 20.3081L16 13.6919Z" fill="white" fill-opacity="0.7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 301 B |
Loading…
Reference in New Issue