mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
add learn page
Signed-off-by: liuboaibc <kukudehero@gmail.com>
This commit is contained in:
liuboaibc
parent
0777f401a6
commit
1de91cceda
|
|
@ -0,0 +1,274 @@
|
|||
@import "variables";
|
||||
|
||||
.navigation {
|
||||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9));
|
||||
}
|
||||
|
||||
.section-1 {
|
||||
padding-top: 98px;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-top: 128px;
|
||||
}
|
||||
span {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04px;
|
||||
color: #3d3e49;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
a {
|
||||
color: #3d3e49;
|
||||
|
||||
&:hover {
|
||||
color: #00aa72;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
margin-top: 4px;
|
||||
|
||||
.common-layout {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.left {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 781px;
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
& > video {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
color: #919aa3;
|
||||
|
||||
.time {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-image: url("/images/learn/time.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-div {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
iframe {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
box-sizing: border-box;
|
||||
width: 368px;
|
||||
padding: 24px;
|
||||
max-height: 600px;
|
||||
margin-left: 15px;
|
||||
overflow: auto;
|
||||
background-color: #ffffff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lesson-div {
|
||||
margin-top: 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > p {
|
||||
position: relative;
|
||||
padding-left: 9px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #36435c;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #36435c;
|
||||
&:hover {
|
||||
color: #55bc8a;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-image: url("/images/learn/video.svg");
|
||||
}
|
||||
|
||||
.play-span {
|
||||
display: none;
|
||||
height: 12px;
|
||||
font-size: 0;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin-right: 2px;
|
||||
background-color: #55bc8a;
|
||||
}
|
||||
}
|
||||
|
||||
.playing {
|
||||
display: inline-block;
|
||||
span {
|
||||
animation-name: playing;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease;
|
||||
animation-delay: 0s;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
&:first-child {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:last-child {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > p.active {
|
||||
a {
|
||||
color: #55bc8a;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #55bc8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lesson-link-div {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
a {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
height: 72px;
|
||||
padding: 11px 20px 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #8f94a1;
|
||||
border-radius: 4px;
|
||||
background-color: #f5f9fa;
|
||||
border: solid 1px transparent;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: solid 1px #4ca986;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #00a971;
|
||||
border: solid 1px #55bc8a;
|
||||
background-color: #cdf6d5;
|
||||
}
|
||||
|
||||
.lesson {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-image.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.lesson.active {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-image-active.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.courseware {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-ppt.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.courseware.active {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-ppt-active.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.examination {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-download.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.examination.active {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-download-active.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes playing {
|
||||
0% {
|
||||
height: 100%;
|
||||
}
|
||||
50% {
|
||||
height: 50%;
|
||||
}
|
||||
100% {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
@import 'variables';
|
||||
@import 'mixin';
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: #3d3e49;
|
||||
}
|
||||
|
||||
.section-1 {
|
||||
position: relative;
|
||||
padding-top: 138px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
.title-div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 12px;
|
||||
letter-spacing: -0.04px;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-shadow {
|
||||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 48px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
li {
|
||||
margin: 0 25px;
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
color: #00aa72;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #00a971;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #36435c;
|
||||
|
||||
&:hover {
|
||||
color: #00aa72;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-3 {
|
||||
padding-top: 40px;
|
||||
|
||||
.video-div {
|
||||
position: relative;
|
||||
margin-top: 80px;
|
||||
padding: 30px 80px 30px 600px;
|
||||
background-image: url('/images/learn/section3.png');
|
||||
|
||||
video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50px;
|
||||
transform: translateY(-50%);
|
||||
width: 500px;
|
||||
height: 285px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.71;
|
||||
color: #36435c;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
background-image: none;
|
||||
padding: 0;
|
||||
margin-top: 0px;
|
||||
video {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-4 {
|
||||
padding-top: 67px;
|
||||
padding-bottom: 60px;
|
||||
|
||||
.common-layout {
|
||||
& > p {
|
||||
margin: 40px auto;
|
||||
width: 760px;
|
||||
font-size: 14px;
|
||||
line-height: 1.71;
|
||||
color: #36435c;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: 0;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
white-space: normal;
|
||||
width: 323px;
|
||||
height: 237px;
|
||||
padding: 30px 20px 30px 62px;
|
||||
margin-left: 70px;
|
||||
font-size: 14px;
|
||||
line-height: 1.71;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: -50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #36435c;
|
||||
}
|
||||
|
||||
.profession {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 12px;
|
||||
color: #a1a6ab;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #36435c;
|
||||
@include block-ellipsis(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-5 {
|
||||
background-color: #ffffff;
|
||||
padding-top: 62px;
|
||||
padding-bottom: 60px;
|
||||
|
||||
ul {
|
||||
margin-top: 42px;
|
||||
font-size: 0;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
text-align: center;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 274px;
|
||||
height: 153px;
|
||||
padding: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
color: #36435c;
|
||||
margin-left: 21px;
|
||||
background-color: #f5f8f9;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include block-ellipsis(3);
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-6 {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 96px;
|
||||
background-image: linear-gradient(151deg, #4a499a 15%, #8552c3 85%);
|
||||
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.level {
|
||||
margin-top: 68px;
|
||||
& > li {
|
||||
position: relative;
|
||||
padding: 50px 39px 20px 40px;
|
||||
margin-bottom: 58px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: -29px;
|
||||
left: 58px;
|
||||
padding: 17px 41px 17px 42px;
|
||||
border-radius: 35px;
|
||||
background-image: linear-gradient(87deg, #ecaf24 17%, #fff8cb 175%);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding: 10px 20px;
|
||||
top: -20px;
|
||||
left: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
border-collapse: collapse;
|
||||
th, td {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: #f0f5f2;
|
||||
th {
|
||||
font-weight: 600;
|
||||
color: #3d3e49;
|
||||
margin: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 38px;
|
||||
width: 300px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-left: 0;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
color: #36435c;
|
||||
border-bottom: 1px solid #f0f5f2;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 38px;
|
||||
width: 300px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-left: 0;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
width: 124px;
|
||||
line-height: 34px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
border-radius: 17px;
|
||||
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;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-link {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
|
||||
}
|
||||
|
||||
.content-link {
|
||||
box-shadow: none;
|
||||
color: #36435c;
|
||||
border: solid 1px #ccd3db;
|
||||
|
||||
&:hover {
|
||||
background-color: #ccd3db;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-7 {
|
||||
padding-top: 55px;
|
||||
padding-bottom: 60px;
|
||||
|
||||
ul {
|
||||
margin-top: 33px;
|
||||
font-size: 0;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
white-space: normal;
|
||||
margin-left: 21px;
|
||||
width: 274px;
|
||||
height: 152px;
|
||||
padding: 30px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
color: #36435c;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:hover {
|
||||
.apply {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
height: 16px;
|
||||
background-color: #4ca986;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
line-height: 2;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
&:first-child {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.profession {
|
||||
background-image: url("/images/learn/profession.svg");
|
||||
}
|
||||
.base {
|
||||
background-image: url("/images/learn/base.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.apply {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba($color: #171c34, $alpha: 0.6);
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-block;
|
||||
width: 148px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
border-radius: 17px;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #65c194, #65c194);
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-top: 34px;
|
||||
text-align: center;
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 148px;
|
||||
height: 34px;
|
||||
border-radius: 17px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42);
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,57 @@
|
|||
@import 'variables';
|
||||
|
||||
@mixin clearfix {
|
||||
zoom: 1;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
display: block;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin block-ellipsis($line: 2) {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: $line;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@mixin nowrap {
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
@mixin break-all {
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@mixin break-word {
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@mixin vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@mixin middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
title: KubeSphere 云原生技术课堂
|
||||
css: "scss/learn.scss"
|
||||
|
||||
section1:
|
||||
title: KubeSphere 云原生技术课堂
|
||||
content: KubeSphere x CNCF <br> 最完善的知识体系，从零到一带您入门以 Kubernete 为核心的云原生技术生态
|
||||
topImage: "/images/learn/banner.png"
|
||||
|
||||
section2:
|
||||
list:
|
||||
- name: 课程简介
|
||||
id: section3
|
||||
- name: 讲师阵容
|
||||
id: section4
|
||||
- name: 受益人群
|
||||
id: section5
|
||||
- name: 课程详情
|
||||
id: section6
|
||||
- name: 职位推荐
|
||||
id: section7
|
||||
|
||||
section3:
|
||||
title: 课程简介
|
||||
snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png
|
||||
videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.mp4
|
||||
description: Kubernetes 已经成为了容器编排的实施标准，而以 Kubernetes 为核心的云原生技术以及生态正在快速和蓬勃地发展。然而，仅 Kubernetes 本身就有复杂的架构和很高的学习成本，包括集群的安装运维、存储、网络、可观察性DevOps、应用管理、多租户等等。而为了解决这一系列难题，KubeSphere 应运而生。我们将使用 KubeSphere 作为教学工具，通过手把手的云原生技术课程，将理论结合实践帮助您快速入门 Kubernetes 以及其生态相关工具，从零到一构建开源的企业级容器 PaaS 平台。
|
||||
|
||||
section4:
|
||||
title: 讲师阵容
|
||||
description: 本课程由 KubeSphere 开源社区联合 CNCF 倾力制作，课程和资料一切开源免费，特邀 KubeSphere 团队核心研发成员与 DevOps 教练参与录制。
|
||||
list:
|
||||
- name: 王老师
|
||||
profession: KubeSphere DevOps 研发
|
||||
description: 本课程由 KubeSphere 开源社区联合 CNCF 倾力制作，特邀 KubeSphere 团队核心研发成员与 DevOps 教练参与录制。
|
||||
image:
|
||||
- name: 王老师
|
||||
profession: KubeSphere DevOps 研发
|
||||
description: 本课程由 KubeSphere 开源社区联合 CNCF 倾力制作，特邀 KubeSphere 团队核心研发成员与 DevOps 教练参与录制。
|
||||
image:
|
||||
- name: 王老师
|
||||
profession: KubeSphere DevOps 研发
|
||||
description: 本课程由 KubeSphere 开源社区联合 CNCF 倾力制作，特邀 KubeSphere 团队核心研发成员与 DevOps 教练参与录制。
|
||||
image:
|
||||
section5:
|
||||
title: 受益人群
|
||||
list:
|
||||
- content: 希望使用 Kubernetes 为核心的云原生技术的应用程序开发者
|
||||
icon: /images/learn/orbit.svg
|
||||
- content: IT相关专业的在校学生，以及对云原生技术研究的爱好者
|
||||
icon: /images/learn/molecule.svg
|
||||
- content: 运维工程师，架构师，技术经理，DevOps工程师等
|
||||
icon: /images/learn/pendulum.svg
|
||||
- content: KubeSphere用户，合作伙伴，ISV，系统管理员等
|
||||
icon: /images/learn/three-dimensional.svg
|
||||
|
||||
section6:
|
||||
title: 课程详情
|
||||
|
||||
section7:
|
||||
title: 优选内推
|
||||
link:
|
||||
list:
|
||||
- company: 青云QingCloud
|
||||
profession: 容器网络开发工程师
|
||||
base: 成都/武汉
|
||||
workYears: 3〜5年
|
||||
link:
|
||||
- company: 青云QingCloud
|
||||
profession: 容器网络开发工程师
|
||||
base: 成都/武汉
|
||||
workYears: 3〜5年
|
||||
link:
|
||||
- company: 青云QingCloud
|
||||
profession: 容器网络开发工程师
|
||||
base: 成都/武汉
|
||||
workYears: 3〜5年
|
||||
link:
|
||||
- company: 青云QingCloud
|
||||
profession: 容器网络开发工程师
|
||||
base: 成都/武汉
|
||||
workYears: 3〜5年
|
||||
link:
|
||||
---
|
||||
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
linkTitle: Level 1：容器与 Kubernetes 技术基础
|
||||
|
||||
_build:
|
||||
render: false
|
||||
---
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
linkTitle: 第一堂“云原生”课
|
||||
weight: 1
|
||||
|
||||
_build:
|
||||
render: false
|
||||
|
||||
profit: 了解容器技术的概念、本质、发展趋势等
|
||||
time: 2020-10-13 20:00-20:40
|
||||
---
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Kubesphere | 第一堂“云原生”课
|
||||
keywords: Kubesphere, Kubesphere learn
|
||||
description: Kubesphere
|
||||
|
||||
pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/Lab_Docker%20%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8_20201019.pdf
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Kubesphere | 第一堂“云原生”课
|
||||
keywords: Kubesphere, Kubesphere learn
|
||||
description: Kubesphere
|
||||
|
||||
pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B_20201016.pdf
|
||||
---
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Kubesphere | 第一堂“云原生”课
|
||||
keywords: Kubesphere, Kubesphere learn
|
||||
description: Kubesphere
|
||||
|
||||
pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E8%80%83%E9%A2%98-%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.pdf
|
||||
---
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Kubesphere | 第一堂“云原生”课
|
||||
keywords: Kubesphere, Kubesphere learn
|
||||
description: Kubesphere
|
||||
|
||||
video:
|
||||
snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png
|
||||
videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.mp4
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
linkTitle: 容器环境准备-Docker
|
||||
weight: 2
|
||||
|
||||
_build:
|
||||
render: false
|
||||
|
||||
profit: 了解容器技术的概念、本质、发展趋势等
|
||||
time: 2020-10-13 20:00-20:40
|
||||
---
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Kubesphere | 第二堂“云原生”课
|
||||
|
||||
pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/Lab_Docker%20%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8_20201019.pdf
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Kubesphere | 第二堂“云原生”课
|
||||
|
||||
pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B_20201016.pdf
|
||||
---
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Kubesphere | 第二堂“云原生”课
|
||||
|
||||
video:
|
||||
snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png
|
||||
videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/meetup/meetup-final-1226.mp4
|
||||
---
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
linkTitle: Level 2：动手实践之扩大建造与运维
|
||||
|
||||
_build:
|
||||
render: false
|
||||
---
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
linkTitle: 容器技术发展简介
|
||||
weight: 3
|
||||
|
||||
_build:
|
||||
render: false
|
||||
|
||||
profit: 了解容器技术的概念、本质、发展趋势等 本质、发展趋势等 发展趋势等 本质、发展趋势等
|
||||
time: 2020-10-13 20:00-20:40
|
||||
---
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Kubesphere | 第三堂“云原生”课
|
||||
|
||||
pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/Lab_Docker%20%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8_20201019.pdf
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Kubesphere | 第三堂“云原生”课
|
||||
|
||||
pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E8%80%83%E9%A2%98-%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.pdf
|
||||
---
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Kubesphere | 第三堂“云原生”课
|
||||
|
||||
video:
|
||||
snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png
|
||||
videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/meetup/meetup-final-1226.mp4
|
||||
---
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
linkTitle: 第四堂“云原生”课
|
||||
weight: 4
|
||||
|
||||
_build:
|
||||
render: false
|
||||
|
||||
profit: 了解容器技术的概念、本质、发展趋势等 本质、发展趋势等 发展趋势等 本质、发展趋势等
|
||||
time: 2020-10-13 20:00-20:40
|
||||
---
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Kubesphere | 第四堂“云原生”课
|
||||
|
||||
pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B_20201016.pdf
|
||||
---
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Kubesphere | 第四堂“云原生”课
|
||||
|
||||
video:
|
||||
snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png
|
||||
videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.mp4
|
||||
|
||||
---
|
||||
26
i18n/en.yaml
26
i18n/en.yaml
|
|
@ -80,5 +80,27 @@
|
|||
translation: Warning
|
||||
- id: Search Documentation
|
||||
translation: Search Documentation
|
||||
|
||||
|
||||
- id: Course theme
|
||||
translation: Course theme
|
||||
- id: Course benefits
|
||||
translation: Course benefits
|
||||
- id: Video tutorial
|
||||
translation: Video tutorial
|
||||
- id: Graphic Course
|
||||
translation: Graphic Course
|
||||
- id: Start learning
|
||||
translation: Start learning
|
||||
- id: View graphic
|
||||
translation: View graphic
|
||||
- id: Apply for the job
|
||||
translation: Apply for the job
|
||||
- id: View more jobs
|
||||
translation: View more jobs
|
||||
- id: Cloud Native Technology Class
|
||||
translation: Cloud Native Technology Class
|
||||
- id: warnGraphic explanation
|
||||
translation: Graphic explanation
|
||||
- id: PPT courseware
|
||||
translation: PPT courseware
|
||||
- id: Self-test
|
||||
translation: Self-test
|
||||
|
|
|
|||
26
i18n/zh.yaml
26
i18n/zh.yaml
|
|
@ -79,4 +79,28 @@
|
|||
- id: warning
|
||||
translation: 警告
|
||||
- id: Search Documentation
|
||||
translation: 搜索文档
|
||||
translation: 搜索文档
|
||||
- id: Course theme
|
||||
translation: 课程主题
|
||||
- id: Course benefits
|
||||
translation: 课程收益
|
||||
- id: Video tutorial
|
||||
translation: 视频教程
|
||||
- id: Graphic Course
|
||||
translation: 图文课程
|
||||
- id: Start learning
|
||||
translation: 开始学习
|
||||
- id: View graphic
|
||||
translation: 查看图文
|
||||
- id: Apply for the job
|
||||
translation: 申请职位
|
||||
- id: View more jobs
|
||||
translation: 查看更多职位
|
||||
- id: Cloud Native Technology Class
|
||||
translation: 云原生技术课堂
|
||||
- id: warnGraphic explanation
|
||||
translation: 图文讲解
|
||||
- id: PPT courseware
|
||||
translation: PPT 课件
|
||||
- id: Self-test
|
||||
translation: 考题自测
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ with .Params.section1 }}
|
||||
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
|
||||
<div class="common-layout">
|
||||
<h1 class="title-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content | safeHTML }}</p>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.section2 }}
|
||||
<section class="section-2">
|
||||
<div>
|
||||
<div class="common-layout">
|
||||
<ul>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
<a href="#{{.id}}">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<section class="section-3" id="section3">
|
||||
{{ with .Params.section3 }}
|
||||
<div class="common-layout">
|
||||
<h2>{{ .title }}</h2>
|
||||
<div class="video-div">
|
||||
<video src="{{ .videoUrl }}" poster="{{ .snapshot }}" controls></video>
|
||||
<p>{{ .description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="section-4" id="section4">
|
||||
{{ with .Params.section4 }}
|
||||
<div class="common-layout">
|
||||
<h2>{{ .title }}</h2>
|
||||
<p>{{ .description }}</p>
|
||||
<ul>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
<img src="{{ .image }}" alt="icon">
|
||||
<div class="name">{{ .name }}</div>
|
||||
<div class="profession">{{ .profession }}</div>
|
||||
<p>{{ .description }}</p>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="section-5" id="section5">
|
||||
{{ with .Params.section5 }}
|
||||
<div class="common-layout">
|
||||
<h2>{{ .title }}</h2>
|
||||
<ul>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
<p>{{ .content }}</p>
|
||||
<img src="{{ .icon }}" alt="icon">
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="section-6" id="section6">
|
||||
<div class="common-layout">
|
||||
<h2>{{ .Params.section6.title }}</h2>
|
||||
<ul class="level">
|
||||
{{ range .Page.Sections }}
|
||||
<li>
|
||||
<p class="title">{{ .LinkTitle }}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ i18n "Course theme"}}</th>
|
||||
<th>{{ i18n "Course benefits"}}</th>
|
||||
<th class="center">{{ i18n "Video tutorial"}}</th>
|
||||
<th class="center">{{ i18n "Graphic Course"}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Page.Sections }}
|
||||
<tr>
|
||||
<td>{{ .LinkTitle }}</td>
|
||||
<td>{{ .Params.profit }}</td>
|
||||
<td class="center">
|
||||
{{ with .GetPage "video" }}
|
||||
<a class="video-link" href="{{ .RelPermalink}}">{{ i18n "Start learning" }}</a>
|
||||
{{ end }}
|
||||
</td>
|
||||
<td class="center">
|
||||
{{ with .GetPage "content" }}
|
||||
<a class="content-link" href="{{ .RelPermalink }}">{{ i18n "View graphic" }}</a>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-7" id="section7">
|
||||
{{ with .Params.section7 }}
|
||||
<div class="common-layout">
|
||||
<h2>{{ .title }}</h2>
|
||||
<ul>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
<div class="tip"></div>
|
||||
<div class="name">{{ .company }}</div>
|
||||
<p><span class="profession"></span><span>{{ .profession }}</span></p>
|
||||
<p><span class="base"></span></span><span>{{ .base }} | {{ .workYears }}</span></p>
|
||||
<div class="apply">
|
||||
<a href="{{ .link }}">{{ i18n "Apply for the job" }}</a>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="more">
|
||||
<a href="{{ .link }}">{{ i18n "View more jobs" }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var getElementTopToScreenTop = function(element) {
|
||||
var elementOffsetTop = element.offset().top
|
||||
var windowScrollTop = $(window).scrollTop()
|
||||
return elementOffsetTop - windowScrollTop
|
||||
}
|
||||
|
||||
var initScrollByHash = function() {
|
||||
var hash = decodeURI(window.location.hash)
|
||||
var element = $(hash)
|
||||
if (element.length > 0) {
|
||||
setTimeout(function() {
|
||||
scrollToElement(hash)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
var bindClickTopLink = function() {
|
||||
var top = $('.section-2')
|
||||
top.find('a').click(function(event) {
|
||||
var id = $(this).attr('href')
|
||||
setTimeout(function() {
|
||||
scrollToElement(id)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
var scrollToElement = function(id) {
|
||||
var element = $(id)
|
||||
var headerHeight = $('header').outerHeight()
|
||||
var topHeight = $('.section-2').outerHeight()
|
||||
var toTop = element.offset().top
|
||||
window.scrollTo(0, toTop - headerHeight - topHeight)
|
||||
}
|
||||
|
||||
var topPosition = function() {
|
||||
var top = $('.section-2')
|
||||
var topContent = $('.section-2 > div')
|
||||
var headerHeight = $('header').outerHeight()
|
||||
var contentToTop = getElementTopToScreenTop(top)
|
||||
if (contentToTop < headerHeight) {
|
||||
topContent.css("position", 'fixed')
|
||||
topContent.css("top", headerHeight)
|
||||
topContent.addClass('top-shadow')
|
||||
} else {
|
||||
topContent.css("position", 'relative')
|
||||
topContent.css("top", 0)
|
||||
topContent.removeClass('top-shadow')
|
||||
}
|
||||
}
|
||||
|
||||
var topActive = function() {
|
||||
var top = $('.section-2')
|
||||
var headerHeight = $('header').outerHeight()
|
||||
var topHeight = $('.section-2').outerHeight()
|
||||
top.find('a').each(function() {
|
||||
var id = $(this).attr('href')
|
||||
console.log(id)
|
||||
var h = $(id)
|
||||
var elementToTop = getElementTopToScreenTop(h)
|
||||
if (elementToTop < headerHeight + topHeight + 10) {
|
||||
top.find('.active').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var bindScrollEvent = function() {
|
||||
$( window ).scroll(function() {
|
||||
topPosition()
|
||||
topActive()
|
||||
})
|
||||
}
|
||||
bindScrollEvent()
|
||||
initScrollByHash()
|
||||
bindClickTopLink()
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<section class="section-1">
|
||||
<div class="common-layout">
|
||||
<span><a href='{{( .GetPage "/learn").RelPermalink}}'>← {{ i18n "Cloud Native Technology Class"}}</a></span> / <span>{{ .CurrentSection.LinkTitle }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-2">
|
||||
<div class="common-layout">
|
||||
<div class="left">
|
||||
{{ with .Params.video }}
|
||||
<video id="lesson-video" src="{{ .videoUrl }}" poster="{{ .snapshot }}" controls onplaying="handlePlayVideo()" onpause="handlePauseVideo()"></video>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.time }}
|
||||
<p class="date"><span class="time"></span>{{ . }}</p>
|
||||
{{ else }}
|
||||
<p class="date"><span class="time"></span>{{ .CurrentSection.Params.time }}</p>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.pdfUrl }}
|
||||
<div class="pdf-div">
|
||||
<iframe src="{{ . }}" frameborder="0"></iframe>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="right">
|
||||
{{ $relPermalink := .RelPermalink }}
|
||||
|
||||
{{ with .Site.GetPage "/learn" }}
|
||||
{{ range .Sections }}
|
||||
{{ range .Sections}}
|
||||
<div class="lesson-div">
|
||||
<p class='{{ if eq (.GetPage "video").RelPermalink $relPermalink }}active{{ end }}'>
|
||||
<a href='{{ (.GetPage "video").RelPermalink }}'>
|
||||
{{ .LinkTitle }}
|
||||
{{ if eq (.GetPage "video").RelPermalink $relPermalink }}
|
||||
<span id="play-icon" class="play-span">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
{{ else }}
|
||||
<span class="icon"></span>
|
||||
{{ end }}
|
||||
</a>
|
||||
</p>
|
||||
<div class="lesson-link-div">
|
||||
{{ with .GetPage "content" }}
|
||||
<a class="lesson {{ if eq .RelPermalink $relPermalink }} active {{ end }}" href="{{ .RelPermalink }}">
|
||||
<span></span>
|
||||
<p>{{ i18n "warnGraphic explanation" }}</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ with .GetPage "courseware" }}
|
||||
<a class="courseware {{ if eq .RelPermalink $relPermalink }} active {{ end }}" href="{{ .RelPermalink }}">
|
||||
<span></span>
|
||||
<p>{{ i18n "PPT courseware" }}</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ with .GetPage "examination" }}
|
||||
<a class="examination {{ if eq .RelPermalink $relPermalink }} active {{ end }}" href="{{ .RelPermalink }}">
|
||||
<span></span>
|
||||
<p>{{ i18n "Self-test" }}</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<script>
|
||||
var icon = $("#play-icon")
|
||||
|
||||
var handlePlayVideo = function() {
|
||||
icon.addClass('playing')
|
||||
}
|
||||
|
||||
var handlePauseVideo = function() {
|
||||
icon.removeClass('playing')
|
||||
}
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -31,4 +31,11 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .IsDescendant (.GetPage "/learn") }}
|
||||
{{ if not (eq . (.GetPage "/learn"))}}
|
||||
{{ $style := resources.Get "scss/learn-page.scss" | toCSS | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
|
||||
<title>icon / time</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="开源社区/学堂" transform="translate(-172.000000, -3549.000000)">
|
||||
<g id="编组备份-4" transform="translate(140.000000, 3444.000000)">
|
||||
<g id="编组-17">
|
||||
<g id="编组-23">
|
||||
<g id="icon-/-time" transform="translate(30.000000, 103.000000)">
|
||||
<g id="编组-25">
|
||||
<g>
|
||||
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
|
||||
<g id="时间" transform="translate(2.000000, 2.000000)" fill="#CCD3DB" fill-rule="nonzero">
|
||||
<path d="M5.97922585,0.0119850852 C2.68332741,0.0119850852 0.0119850852,2.68332741 0.0119850852,5.97922585 C0.0119850852,9.27512429 2.68465909,11.9477983 5.98055753,11.9477983 C9.27645597,11.9477983 11.9477983,9.27645597 11.9477983,5.97922585 C11.9477983,2.68332741 9.27645597,0.0119850852 5.97922585,0.0119850852 Z M8.36958452,8.24440696 C8.26571378,8.37091619 8.11523438,8.4375 7.96209162,8.4375 C7.84490412,8.4375 7.72771662,8.39888139 7.62917259,8.31898082 L5.56507457,6.63041548 C5.44291699,6.53094639 5.37198153,6.38178704 5.37198153,6.22425426 L5.37198153,3.75799006 C5.37198153,3.46768466 5.60768821,3.23197798 5.89799361,3.23197798 C6.18829901,3.23197798 6.42400568,3.46768466 6.42400568,3.75799006 L6.42400568,5.97389915 L8.29634233,7.5053267 C8.52006392,7.68909801 8.55335582,8.02068537 8.36958452,8.24440696 L8.36958452,8.24440696 Z" id="形状"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M0 0H24V24H0z" transform="translate(-1213 -322) translate(931 127) translate(24 150) translate(220 34) translate(38 11)"/>
|
||||
<g fill="#00A971" fill-rule="nonzero">
|
||||
<path d="M14.287 6.122h-4.08V.004H4.09v6.118H.01l7.138 7.139 7.139-7.139zM.01 15.3v2.04h14.277V15.3H.01z" transform="translate(-1213 -322) translate(931 127) translate(24 150) translate(220 34) translate(38 11) translate(5 3)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 947 B |
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M0 0H24V24H0z" transform="translate(-1213 -196) translate(931 127) translate(24 24) translate(220 34) translate(38 11)"/>
|
||||
<g fill="#8F94A1" fill-rule="nonzero">
|
||||
<path d="M14.287 6.122h-4.08V.004H4.09v6.118H.01l7.138 7.139 7.139-7.139zM.01 15.3v2.04h14.277V15.3H.01z" transform="translate(-1213 -196) translate(931 127) translate(24 24) translate(220 34) translate(38 11) translate(5 3)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 864 B |
|
|
@ -0,0 +1,21 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M0 0H24V24H0z" transform="translate(-993 -195) translate(931 127) translate(24 24) translate(0 34) translate(38 10)"/>
|
||||
<g fill-rule="nonzero">
|
||||
<path fill="#00A971" d="M20.006 17.227H1.716c-.917 0-1.66-.743-1.66-1.66V1.68C.056.764.8.021 1.716.021h18.293c.916 0 1.659.743 1.659 1.66v13.886c0 .917-.745 1.66-1.662 1.66z" transform="translate(-993 -195) translate(931 127) translate(24 24) translate(0 34) translate(38 10) translate(1 3)"/>
|
||||
<path fill="#FFF" d="M15.96 4.022c0 .708.575 1.282 1.283 1.282s1.282-.574 1.282-1.282c0-.708-.574-1.282-1.282-1.282-.708 0-1.282.574-1.282 1.282zM18.237 12.312l-3.345-5.044c-.06-.244-.215-.466-.452-.602-.46-.265-1.045-.108-1.31.351l-1.873 3.244-3.066-5.306c-.08-.185-.215-.347-.403-.455-.46-.265-1.045-.108-1.31.352l-2.24 3.883h.004L.138 15.841c-.265.46-.108 1.046.352 1.31.46.265 1.045.108 1.31-.351l5.025-8.702c.016-.026.03-.054.042-.082l.438-.76 3.087 5.346c.15.258.401.422.673.467.4.093.834-.08 1.05-.455l1.823-3.16 2.635 3.816c.264.46.853.617 1.31.352.462-.265.619-.85.354-1.31z" transform="translate(-993 -195) translate(931 127) translate(24 24) translate(0 34) translate(38 10) translate(1 3)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M0 0H24V24H0z" transform="translate(-993 -321) translate(931 127) translate(24 150) translate(0 34) translate(38 10)"/>
|
||||
<g fill-rule="nonzero">
|
||||
<path fill="#8F94A1" d="M20.006 17.227H1.716c-.917 0-1.66-.743-1.66-1.66V1.68C.056.764.8.021 1.716.021h18.293c.916 0 1.659.743 1.659 1.66v13.886c0 .917-.745 1.66-1.662 1.66z" transform="translate(-993 -321) translate(931 127) translate(24 150) translate(0 34) translate(38 10) translate(1 3)"/>
|
||||
<path fill="#FFF" d="M15.96 4.022c0 .708.575 1.282 1.283 1.282s1.282-.574 1.282-1.282c0-.708-.574-1.282-1.282-1.282-.708 0-1.282.574-1.282 1.282zM18.237 12.312l-3.345-5.044c-.06-.244-.215-.466-.452-.602-.46-.265-1.045-.108-1.31.351l-1.873 3.244-3.066-5.306c-.08-.185-.215-.347-.403-.455-.46-.265-1.045-.108-1.31.352l-2.24 3.883h.004L.138 15.841c-.265.46-.108 1.046.352 1.31.46.265 1.045.108 1.31-.351l5.025-8.702c.016-.026.03-.054.042-.082l.438-.76 3.087 5.346c.15.258.401.422.673.467.4.093.834-.08 1.05-.455l1.823-3.16 2.635 3.816c.264.46.853.617 1.31.352.462-.265.619-.85.354-1.31z" transform="translate(-993 -321) translate(931 127) translate(24 150) translate(0 34) translate(38 10) translate(1 3)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M0 0H24V24H0z" transform="translate(-1103 -196) translate(931 127) translate(24 24) translate(110 34) translate(38 11)"/>
|
||||
<g fill="#00A971" fill-rule="nonzero">
|
||||
<path d="M19.137 5.598h-5.324L13.666.01H2.755v9.588h16.382v-4zM14.255.01v4.97h4.882L14.255.01zM4.97 14.318H4.43v1.492h.796c.51 0 .765-.266.765-.8 0-.461-.34-.692-1.02-.692zm-4.95-3.22v9.412h21.882v-9.412H.019zm5.364 6.278H4.43v2.076H2.517v-6.7H5.32c1.635.024 2.474.777 2.517 2.257-.022 1.554-.84 2.343-2.454 2.367zm5.863 0h-.956v2.076H8.38v-6.7h2.804c1.635.024 2.474.777 2.517 2.257-.022 1.554-.84 2.343-2.454 2.367zm8.157-2.876h-1.72v4.952H15.74V14.5h-1.72v-1.748h5.384V14.5zm-8.57-.182h-.543v1.492h.797c.51 0 .765-.266.765-.8 0-.461-.34-.692-1.02-.692z" transform="translate(-1103 -196) translate(931 127) translate(24 24) translate(110 34) translate(38 11) translate(1 1)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M0 0H24V24H0z" transform="translate(-1103 -196) translate(931 127) translate(24 24) translate(110 34) translate(38 11)"/>
|
||||
<g fill="#8F94A1" fill-rule="nonzero">
|
||||
<path d="M19.137 5.598h-5.324L13.666.01H2.755v9.588h16.382v-4zM14.255.01v4.97h4.882L14.255.01zM4.97 14.318H4.43v1.492h.796c.51 0 .765-.266.765-.8 0-.461-.34-.692-1.02-.692zm-4.95-3.22v9.412h21.882v-9.412H.019zm5.364 6.278H4.43v2.076H2.517v-6.7H5.32c1.635.024 2.474.777 2.517 2.257-.022 1.554-.84 2.343-2.454 2.367zm5.863 0h-.956v2.076H8.38v-6.7h2.804c1.635.024 2.474.777 2.517 2.257-.022 1.554-.84 2.343-2.454 2.367zm8.157-2.876h-1.72v4.952H15.74V14.5h-1.72v-1.748h5.384V14.5zm-8.57-.182h-.543v1.492h.797c.51 0 .765-.266.765-.8 0-.461-.34-.692-1.02-.692z" transform="translate(-1103 -196) translate(931 127) translate(24 24) translate(110 34) translate(38 11) translate(1 1)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="92" height="63" viewBox="0 0 92 63">
|
||||
<g fill="none" fill-rule="evenodd" opacity=".6">
|
||||
<g fill-rule="nonzero">
|
||||
<g>
|
||||
<g fill="#CDF6D5">
|
||||
<path d="M24.748 26.799L30.748 26.799 30.748 48.001 24.748 48.001z" transform="translate(-613 -1535) translate(613 1535) translate(52.2 13.8)"/>
|
||||
<path d="M7.774 -2.599L13.773 -2.599 13.773 18.602 7.774 18.602z" transform="translate(-613 -1535) translate(613 1535) translate(52.2 13.8) rotate(-59.999 10.774 8.002)"/>
|
||||
</g>
|
||||
<path fill="#CDF6D5" d="M9.052 40.599L15.052 40.599 15.052 61.801 9.052 61.801z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#CDF6D5" d="M18.424 18.8L39.626 18.8 39.626 24.8 18.424 24.8z" transform="translate(-613 -1535) translate(613 1535) rotate(-30.001 29.025 21.8)"/>
|
||||
<path fill="#4CA986" d="M46 0l-7.263 12L46 24c6.617 0 12-5.383 12-12S52.617 0 46 0z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#86DBA2" d="M34 12c0 6.617 5.383 12 12 12V0c-6.617 0-12 5.383-12 12z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#4CA986" d="M12.048 19.596l-7.263 12 7.263 12c6.617 0 12-5.383 12-12s-5.383-12-12-12z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#86DBA2" d="M.048 31.596c0 6.617 5.383 12 12 12v-24c-6.617 0-12 5.383-12 12z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#4CA986" d="M12.048 58.804l-7.263 12 7.263 12c6.617 0 12-5.383 12-12s-5.383-12-12-12z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#86DBA2" d="M.048 70.804c0 6.617 5.383 12 12 12v-24c-6.617 0-12 5.383-12 12z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#4CA986" d="M79.952 58.804l-7.263 12 7.263 12c6.617 0 12-5.383 12-12s-5.383-12-12-12z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#86DBA2" d="M67.952 70.804c0 6.617 5.383 12 12 12v-24c-6.617 0-12 5.383-12 12z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#4CA986" d="M79.952 19.595l-7.263 12 7.263 12c6.617 0 12-5.383 12-12s-5.383-12-12-12z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#86DBA2" d="M67.952 31.595c0 6.617 5.383 12 12 12v-24c-6.617 0-12 5.383-12 12zM46 30.036L37 51.2 46 72.364 64.329 61.782 64.329 40.618z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
<path fill="#CDF6D5" d="M27.671 40.618L27.671 61.782 46 72.364 46 30.036z" transform="translate(-613 -1535) translate(613 1535)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="63" viewBox="0 0 100 63">
|
||||
<g fill="none" fill-rule="evenodd" opacity=".6">
|
||||
<g fill-rule="nonzero">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#55BC8A" d="M50 0L19.737 50 50 100c27.57 0 50-22.43 50-50S77.57 0 50 0z" transform="translate(-310 -1535) translate(139 1445) translate(171 90)"/>
|
||||
<path fill="#CDF6D5" d="M0 50c0 27.57 22.43 50 50 50V0C22.43 0 0 22.43 0 50z" transform="translate(-310 -1535) translate(139 1445) translate(171 90)"/>
|
||||
<path fill="#CDF6D5" d="M50 20.557L32.18 50 50 79.443c16.235 0 29.443-13.208 29.443-29.443S66.235 20.557 50 20.557z" transform="translate(-310 -1535) translate(139 1445) translate(171 90)"/>
|
||||
<path fill="#FFF" d="M20.557 50c0 16.235 13.208 29.443 29.443 29.443V20.557c-16.235 0-29.443 13.208-29.443 29.443z" transform="translate(-310 -1535) translate(139 1445) translate(171 90)"/>
|
||||
<path fill="#65C194" d="M50 11.768l-5.32 8.789L50 29.346c4.846 0 8.79-3.943 8.79-8.79 0-4.846-3.944-8.788-8.79-8.788z" transform="translate(-310 -1535) translate(139 1445) translate(171 90)"/>
|
||||
<path fill="#86DBA2" d="M41.21 20.557c0 4.846 3.944 8.789 8.79 8.789V11.768c-4.846 0-8.79 3.942-8.79 8.789zM50 35.156L41.016 50 50 64.844c8.185 0 14.844-6.659 14.844-14.844 0-8.185-6.659-14.844-14.844-14.844z" transform="translate(-310 -1535) translate(139 1445) translate(171 90)"/>
|
||||
<path fill="#CDF6D5" d="M35.156 50c0 8.185 6.659 14.844 14.844 14.844V35.156c-8.185 0-14.844 6.659-14.844 14.844z" transform="translate(-310 -1535) translate(139 1445) translate(171 90)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="93" height="64" viewBox="0 0 93 64">
|
||||
<g fill="none" fill-rule="evenodd" opacity=".6">
|
||||
<g fill-rule="nonzero">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#86DBA2" d="M48.419 12.151L44.73 12.151 44.73 67.77 48.78 67.77 48.78 23.585 70.855 61.856 75.532 59.158z" transform="translate(-908 -1534) translate(729 1445) translate(179 89)"/>
|
||||
<path fill="#CDF6D5" d="M43.741 12.151L16.628 59.158 21.305 61.856 43.38 23.585 43.38 67.77 46.08 67.77 46.08 12.151z" transform="translate(-908 -1534) translate(729 1445) translate(179 89)"/>
|
||||
<path fill="#4CA986" d="M78.61 83.44c-7.468 0-13.544-6.076-13.544-13.545 0-7.468 6.076-13.545 13.544-13.545 7.47 0 13.546 6.077 13.546 13.545 0 7.47-6.077 13.545-13.546 13.545z" transform="translate(-908 -1534) translate(729 1445) translate(179 89)"/>
|
||||
<path fill="#86DBA2" d="M13.55 83.44C6.08 83.44.004 77.364.004 69.895c0-7.468 6.077-13.545 13.546-13.545 7.468 0 13.544 6.077 13.544 13.545 0 7.47-6.076 13.545-13.545 13.545z" transform="translate(-908 -1534) translate(729 1445) translate(179 89)"/>
|
||||
<path fill="#4CA986" d="M92.16 16.2L46.08 16.2 35.28 8.1 46.08 0 92.16 0z" transform="translate(-908 -1534) translate(729 1445) translate(179 89)"/>
|
||||
<path fill="#86DBA2" d="M0 0L46.08 0 46.08 16.2 0 16.2z" transform="translate(-908 -1534) translate(729 1445) translate(179 89)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
|
||||
<title>icon/position</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="开源社区/学堂" transform="translate(-173.000000, -3521.000000)">
|
||||
<g id="编组备份-4" transform="translate(140.000000, 3444.000000)">
|
||||
<g id="编组-17">
|
||||
<g id="编组-23">
|
||||
<g id="icon/position" transform="translate(30.000000, 75.000000)">
|
||||
<g id="编组-25">
|
||||
<g>
|
||||
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M7.83072917,2 C9.69325521,2 11.1770833,3.50986979 11.1770833,5.37239583 C11.1770833,6.31709635 10.7490234,7.17259115 9.89291667,7.93885417 C9.8071875,8.01558594 9.79989583,8.14729167 9.87664062,8.23302083 C9.90044324,8.25961979 9.93068071,8.27965704 9.96445312,8.29121094 L11.6045573,8.85209635 C12.2367187,9.06828125 12.6614583,9.66244792 12.6614583,10.3305339 L12.6614583,12 C12.6614583,12.9204688 11.9152604,13.6666667 10.9947917,13.6666667 L4.66666667,13.6666667 C3.74619792,13.6666667 3,12.9204688 3,12 L3,10.3305339 C3,9.66244792 3.4247526,9.06828125 4.05690104,8.85209635 L5.69700521,8.29121094 C5.8058724,8.25397135 5.86394531,8.13553385 5.82671875,8.02666667 C5.81516855,7.99289565 5.79513587,7.96265831 5.76854167,7.93885417 C4.91242187,7.17257813 4.484375,6.31710938 4.484375,5.37239583 C4.484375,3.50986979 5.96820312,2 7.83072917,2 Z M7.83072917,9.8515625 C7.57184896,9.8515625 7.36197917,10.0614323 7.36197917,10.3203125 L7.36197917,11.4661458 C7.36197917,11.725026 7.57184896,11.9348958 7.83072917,11.9348958 C8.08960937,11.9348958 8.29947917,11.725026 8.29947917,11.4661458 L8.29947917,10.3203125 C8.29947917,10.0614323 8.08960937,9.8515625 7.83072917,9.8515625 Z" id="形状" fill="#CCD3DB" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="87" height="76" viewBox="0 0 87 76">
|
||||
<g fill="none" fill-rule="evenodd" opacity=".6">
|
||||
<g fill-rule="nonzero">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#CDF6D5" d="M44.4 0L15.441 76.8 88.74 76.8 88.74 25.6z" transform="translate(-1212 -1522) translate(1024 1445) translate(188 77)"/>
|
||||
<path fill="#ECFFF0" d="M44.4 0L44.4 76.8 0.06 76.8 0.06 25.6z" transform="translate(-1212 -1522) translate(1024 1445) translate(188 77)"/>
|
||||
<path fill="#86DBA2" d="M88.74 76.8L44.4 102.4 20.229 65.156 68.571 65.156z" transform="translate(-1212 -1522) translate(1024 1445) translate(188 77)"/>
|
||||
<path fill="#CDF6D5" d="M44.4 65.156L44.4 102.4 0.06 76.8 20.229 65.156z" transform="translate(-1212 -1522) translate(1024 1445) translate(188 77)"/>
|
||||
<path fill="#4CA986" d="M70.8 35.957L70.8 66.443 44.4 81.684 26.828 35.957z" transform="translate(-1212 -1522) translate(1024 1445) translate(188 77)"/>
|
||||
<path fill="#86DBA2" d="M44.4 35.957L44.4 81.684 18 66.443 18 35.957z" transform="translate(-1212 -1522) translate(1024 1445) translate(188 77)"/>
|
||||
<path fill="#86DBA2" d="M70.8 35.957L44.4 51.2 32.058 35.957 44.4 20.716z" transform="translate(-1212 -1522) translate(1024 1445) translate(188 77)"/>
|
||||
<path fill="#CDF6D5" d="M44.4 20.716L44.4 51.2 18 35.957z" transform="translate(-1212 -1522) translate(1024 1445) translate(188 77)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
|
||||
<title>时间</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="开源社区/学堂/图文讲解" transform="translate(-166.000000, -149.000000)" fill-rule="nonzero">
|
||||
<g id="编组-19" transform="translate(135.000000, 126.000000)">
|
||||
<g id="编组-15" transform="translate(30.000000, 20.000000)">
|
||||
<g id="时间" transform="translate(0.000000, 2.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M8,1.33328125 C4.318125,1.33328125 1.33328125,4.318125 1.33328125,8 C1.33328125,11.681875 4.318125,14.6667188 8,14.6667188 C11.681875,14.6667188 14.6667188,11.681875 14.6667188,8 C14.6667188,4.318125 11.681875,1.33328125 8,1.33328125 Z M8,13.3332813 C5.05921875,13.3332813 2.66671875,10.9407812 2.66671875,8 C2.66671875,5.05921875 5.05921875,2.66671875 8,2.66671875 C10.9407812,2.66671875 13.3332813,5.05921875 13.3332813,8 C13.3332813,10.9407812 10.9407812,13.3332813 8,13.3332813 Z M8,4 L6.66671875,4 L6.66671875,9.33328125 L11.3332813,9.33328125 L11.3332813,8 L8,8 L8,4 Z" id="形状" fill="#919AA3"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
|
||||
<title>视频</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="开源社区/学堂/图文讲解" transform="translate(-1164.000000, -157.000000)" fill="#666666" fill-rule="nonzero">
|
||||
<g id="编组-21" transform="translate(931.000000, 127.000000)">
|
||||
<g id="编组-36" transform="translate(24.000000, 24.000000)">
|
||||
<g id="编组-19">
|
||||
<g id="视频" transform="translate(209.000000, 6.000000)">
|
||||
<path d="M6,0 C2.67272727,0 0,2.67272727 0,6 C0,9.32727273 2.67272727,12 6,12 C9.32727273,12 12,9.32727273 12,6 C12,2.67272727 9.32727273,0 6,0 Z M8.59090909,6.24545455 L4.77272727,8.42727273 C4.63636363,8.50909091 4.47272727,8.45454546 4.39090909,8.31818182 C4.36363636,8.29090909 4.36363636,8.23636364 4.36363636,8.18181818 L4.36363636,3.81818182 C4.36363636,3.76363637 4.36363636,3.73636364 4.39090909,3.70909091 C4.41818182,3.65454546 4.47272727,3.6 4.52727273,3.6 C4.60909091,3.57272727 4.69090909,3.57272727 4.77272727,3.6 L8.56363636,5.78181818 C8.61818181,5.80909091 8.64545454,5.83636363 8.67272727,5.89090909 C8.78181818,6 8.72727272,6.16363636 8.59090909,6.24545455 L8.59090909,6.24545455 Z" id="形状"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue