FancyImage / 你的程序健康吗 / kubetrain.cn
This commit is contained in:
huanqing.shao
@@ -1,129 +1,27 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" :alt="alt">
|
||||
<div class="box-content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="type" :src="src" :alt="alt" :title="title" :description="description"></component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Diamond from './fancy-images/Diamond'
|
||||
import Cross from './fancy-images/Cross'
|
||||
import Rectangle from './fancy-images/Rectangle'
|
||||
import Rolling from './fancy-images/Rolling'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true }
|
||||
description: { type: String, required: true },
|
||||
type: { type: String, required: false, default: 'Diamond' }
|
||||
},
|
||||
components: {
|
||||
Diamond, Cross, Rectangle, Rolling
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.box{
|
||||
background: linear-gradient(#8E2DE2,#4A00E0);
|
||||
font-family: 'Merriweather Sans', sans-serif;
|
||||
border-radius: 7px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box:before{
|
||||
content: "";
|
||||
background: -webkit-repeating-linear-gradient(45deg,rgba(0, 0, 0, 0.1) 10px,
|
||||
transparent 10px,transparent 20px,rgba(0,0,0,0.1) 20px,rgba(0,0,0,0.1) 30px,
|
||||
transparent 30px,transparent 40px,rgba(0,0,0,0.1) 40px,rgba(0,0,0,0.1) 50px,
|
||||
transparent 50px,transparent 60px,rgba(0,0,0,0.1) 60px,rgba(0,0,0,0.1) 70px,
|
||||
transparent 70px,transparent 80px,rgba(0, 0,0, 0.1) 80px,
|
||||
rgba(0, 0,0, 0.1) 90px,transparent 90px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover:before{ opacity:1; }
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: all 0.5s ease;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
|
||||
}
|
||||
.box:hover img{
|
||||
opacity: 0.5;
|
||||
-webkit-clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
|
||||
clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
|
||||
}
|
||||
.box .box-content{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-55deg);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover .box-content{
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(0deg);
|
||||
}
|
||||
.box .title{
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 5px #000;
|
||||
margin: 0 0 3px 0;
|
||||
}
|
||||
.box .post{
|
||||
font-size: 16px;
|
||||
text-shadow: 0 0 5px #000;
|
||||
text-transform: capitalize;
|
||||
display: block;
|
||||
}
|
||||
.box .icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
transform: rotateX(180deg);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box:hover .icon{
|
||||
opacity: 1;
|
||||
transform: rotate(0);
|
||||
}
|
||||
.box .icon li a{
|
||||
color: #4A00E0;
|
||||
background-color: #fff;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0 0 7px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all .5s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
color: #8E2DE2;
|
||||
box-shadow: 0 0 15px #fff;
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box { margin: 0 0 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,6 +38,14 @@ module.exports = [
|
||||
action: '去抢',
|
||||
url: 'https://www.aliyun.com/1111/2019/home?userCode=obezo3pg',
|
||||
weight: 30
|
||||
},
|
||||
{
|
||||
name: 'Kubetrain',
|
||||
description: 'K8S在线直播培训，首次开班优惠',
|
||||
strong: '不满意可无条件退款',
|
||||
action: '再不去没名额啦',
|
||||
url: 'https://kubetrain.cn/?from=kuboard-ads',
|
||||
weight: 30
|
||||
}
|
||||
|
||||
// {
|
||||
|
||||
166
.vuepress/components/fancy-images/Cross.vue
Normal file
166
.vuepress/components/fancy-images/Cross.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" :alt="alt">
|
||||
<div class="box-content">
|
||||
<div class="content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
<!-- <ul class="icon">
|
||||
<li><a href="#"><i class="fa fa-search"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-link"></i></a></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
font-family: 'Merriweather Sans', sans-serif;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.box:before,
|
||||
.box:after,
|
||||
.box .box-content:before,
|
||||
.box .box-content:after{
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: #E65100;
|
||||
opacity: 0.8;
|
||||
transform: translateX(-50%) translateY(0%);
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
|
||||
clip-path: polygon(0 0, 50% 100%, 100% 0);
|
||||
transition: all .3s;
|
||||
}
|
||||
.box:after{
|
||||
transform: translateX(-50%) translateY(0%);
|
||||
top: auto;
|
||||
bottom: -50%;
|
||||
z-index: 0;
|
||||
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
.box .box-content:before{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
transform: translateX(0%) translateY(-50%);
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: -50%;
|
||||
-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
|
||||
clip-path: polygon(100% 0, 0 50%, 100% 100%);
|
||||
}
|
||||
.box .box-content:after{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
transform: translateX(0%) translateY(-50%);
|
||||
top: 50%;
|
||||
right: auto;
|
||||
left: -50%;
|
||||
z-index: 0;
|
||||
-webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
|
||||
clip-path: polygon(0 100%, 100% 50%, 0 0);
|
||||
}
|
||||
.box:hover:before{ top:0; }
|
||||
.box:hover:after{ bottom:0; }
|
||||
.box:hover .box-content:before{ right:0; }
|
||||
.box:hover .box-content:after{ left:0; }
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: scale(1);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover img{ transform: scale(1.5); }
|
||||
.box .box-content{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.box .content{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
.box .title{
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 5px;
|
||||
transform: rotateY(360deg) scale(0);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover .title{ transform: rotateY(0) scale(1); }
|
||||
.box .post{
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: capitalize;
|
||||
margin: 0 0 15px;
|
||||
display: block;
|
||||
transform: rotateY(360deg) scale(0);
|
||||
transition: all 0.5s ease 0.25s;
|
||||
}
|
||||
.box:hover .post{ transform: rotateY(0) scale(1); }
|
||||
.box .icon{
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
transform: rotateY(360deg) scale(0);
|
||||
transition: all 0.5s ease 0.45s;
|
||||
}
|
||||
.box:hover .icon{ transform: rotateY(0) scale(1); }
|
||||
.box .icon li{
|
||||
display: inline-block;
|
||||
margin: 0 3px;
|
||||
}
|
||||
.box .icon li a{
|
||||
color: #E65100;
|
||||
background-color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
color: #fff;
|
||||
background-color: #E65100;
|
||||
box-shadow: 0 0 10px #000;
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box{ margin-bottom: 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 22px; }
|
||||
}
|
||||
</style>
|
||||
129
.vuepress/components/fancy-images/Diamond.vue
Normal file
129
.vuepress/components/fancy-images/Diamond.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" :alt="alt">
|
||||
<div class="box-content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.box{
|
||||
background: linear-gradient(#8E2DE2,#4A00E0);
|
||||
font-family: 'Merriweather Sans', sans-serif;
|
||||
border-radius: 7px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box:before{
|
||||
content: "";
|
||||
background: -webkit-repeating-linear-gradient(45deg,rgba(0, 0, 0, 0.1) 10px,
|
||||
transparent 10px,transparent 20px,rgba(0,0,0,0.1) 20px,rgba(0,0,0,0.1) 30px,
|
||||
transparent 30px,transparent 40px,rgba(0,0,0,0.1) 40px,rgba(0,0,0,0.1) 50px,
|
||||
transparent 50px,transparent 60px,rgba(0,0,0,0.1) 60px,rgba(0,0,0,0.1) 70px,
|
||||
transparent 70px,transparent 80px,rgba(0, 0,0, 0.1) 80px,
|
||||
rgba(0, 0,0, 0.1) 90px,transparent 90px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover:before{ opacity:1; }
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: all 0.5s ease;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
|
||||
}
|
||||
.box:hover img{
|
||||
opacity: 0.5;
|
||||
-webkit-clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
|
||||
clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
|
||||
}
|
||||
.box .box-content{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-55deg);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover .box-content{
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(0deg);
|
||||
}
|
||||
.box .title{
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 5px #000;
|
||||
margin: 0 0 3px 0;
|
||||
}
|
||||
.box .post{
|
||||
font-size: 16px;
|
||||
text-shadow: 0 0 5px #000;
|
||||
text-transform: capitalize;
|
||||
display: block;
|
||||
}
|
||||
.box .icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
transform: rotateX(180deg);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box:hover .icon{
|
||||
opacity: 1;
|
||||
transform: rotate(0);
|
||||
}
|
||||
.box .icon li a{
|
||||
color: #4A00E0;
|
||||
background-color: #fff;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0 0 7px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all .5s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
color: #8E2DE2;
|
||||
box-shadow: 0 0 15px #fff;
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box { margin: 0 0 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
134
.vuepress/components/fancy-images/Rectangle.vue
Normal file
134
.vuepress/components/fancy-images/Rectangle.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" :alt="alt">
|
||||
<div class="box-content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.box:before,
|
||||
.box:after{
|
||||
content: '';
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box:after{ top: 100%; }
|
||||
.box:hover:before{
|
||||
transform: translateX(-50%) translateY(0);
|
||||
top: 0;
|
||||
}
|
||||
.box:hover:after{
|
||||
transform: translateX(-50%) translateY(0);
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.box:hover:before,
|
||||
.box:hover:after{
|
||||
height: 50%;
|
||||
opacity: 1;
|
||||
animation: animate 0.5s linear;
|
||||
}
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.box .box-content{
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transition: all 0.4s ease 0.1s;
|
||||
}
|
||||
.box:hover .box-content{
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
top: 50%;
|
||||
}
|
||||
.box .title{
|
||||
color: #4834d4;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
.box .post{
|
||||
color: #444;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.box .icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease 0.3s;
|
||||
}
|
||||
.box:hover .icon{ opacity: 1; }
|
||||
.box .icon li{ display: inline-block; }
|
||||
.box .icon li a{
|
||||
color: #fff;
|
||||
background-color: #4834d4;
|
||||
line-height: 25px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 3px -3px 5px #555;
|
||||
display: block;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
color: #4834d4;
|
||||
background-color: #fff;
|
||||
border-color: #4834d4;
|
||||
}
|
||||
@keyframes animate{
|
||||
80%{ width: 90%; }
|
||||
85%{ width: 95%; }
|
||||
93%{ width: 85%; }
|
||||
100%{ width: 100%; }
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box{ margin-bottom: 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
125
.vuepress/components/fancy-images/Rolling.vue
Normal file
125
.vuepress/components/fancy-images/Rolling.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" alt="alt">
|
||||
<div class="box-content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
</div>
|
||||
<!-- <ul class="icon">
|
||||
<li><a href="#"><i class="fa fa-search"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-link"></i></a></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box:before{
|
||||
content: '';
|
||||
background: linear-gradient(45deg,rgba(103,178,111,0.9), rgba(76,162,205,0.6));
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
transform: scale(1) rotate(180deg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
.box:hover:before{
|
||||
box-shadow: 0 0 10px 2px #555;
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: scale(0.92, 0.9) rotate(0);
|
||||
}
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.box:hover img{ transform: scale(1.9) rotate(45deg); }
|
||||
.box .box-content{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-50%) scale(3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.box:hover .box-content{
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-50%) scale(1);
|
||||
}
|
||||
.box .title{
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
.box .post{
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.box .icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
filter: blur(10px);
|
||||
transform: scale(0);
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
z-index: 2;
|
||||
transition: all 0.5s ease 0.2s;
|
||||
}
|
||||
.box:hover .icon{
|
||||
transform: scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
.box .icon li{ display: inline-block; }
|
||||
.box .icon li a{
|
||||
color: #fff;
|
||||
background: rgba(255,255,255,0.2);
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 0 3px;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
text-shadow: 0 0 6px #555;
|
||||
box-shadow: 0 0 5px #555;
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box{ margin-bottom: 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
@@ -38,16 +38,6 @@ module.exports = {
|
||||
'install-kubernetes',
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '升级 Kubernetes',
|
||||
collapsable: false,
|
||||
children: [
|
||||
// ['install-k8s-upgrade', '升级Kubernetes集群'],
|
||||
'upgrade-k8s/1.15.x-1.15.4',
|
||||
['upgrade-k8s/1.15.x-1.16.x', 'K8S从1.15.x(1.16.x)升级到 1.16.x'],
|
||||
'upgrade-k8s/calico-3.8-3.9',
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '管理 Kubernetes',
|
||||
collapsable: false,
|
||||
@@ -59,13 +49,16 @@ module.exports = {
|
||||
'install-k8s-dashboard',
|
||||
]
|
||||
},
|
||||
// {
|
||||
// title: '常见问题',
|
||||
// collapsable: false,
|
||||
// children: [
|
||||
// 'faq/timeout'
|
||||
// ]
|
||||
// }
|
||||
{
|
||||
title: '升级 Kubernetes',
|
||||
collapsable: false,
|
||||
children: [
|
||||
// ['install-k8s-upgrade', '升级Kubernetes集群'],
|
||||
'upgrade-k8s/1.15.x-1.15.4',
|
||||
['upgrade-k8s/1.15.x-1.16.x', 'K8S从1.15.x(1.16.x)升级到 1.16.x'],
|
||||
'upgrade-k8s/calico-3.8-3.9',
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
'/learning/': [
|
||||
@@ -159,6 +152,8 @@ module.exports = {
|
||||
'k8s-intermediate/workload/init-config',
|
||||
'k8s-intermediate/workload/init-debug',
|
||||
'k8s-intermediate/workload/disruption',
|
||||
'k8s-intermediate/workload/pod-health.html',
|
||||
|
||||
'k8s-intermediate/workload/workload',
|
||||
{
|
||||
title: '控制器 - Deployment',
|
||||
|
||||
@@ -157,6 +157,7 @@ module.exports = {
|
||||
{ text: '安装', link: '/install/install-dashboard' },
|
||||
{ text: '教程', link: '/learning/' },
|
||||
{ text: '使用', link: '/guide/' },
|
||||
{ text: '培训', link: 'https://kubetrain.cn/?from=kuboard', target: '_blank' },
|
||||
{ text: '支持', link: '/support/' },
|
||||
// { text: '博客', link: 'https://blog.kuboard.cn/compaign' }
|
||||
// { text: 'DevOps', link: '/devops/' }
|
||||
|
||||
BIN
.vuepress/public/images/courses/advanced.png
Normal file
BIN
.vuepress/public/images/courses/advanced.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
.vuepress/public/images/courses/free.png
Normal file
BIN
.vuepress/public/images/courses/free.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
.vuepress/public/images/courses/intermediate.png
Normal file
BIN
.vuepress/public/images/courses/intermediate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
@@ -167,6 +167,7 @@
|
||||
<li class="nav-item"> <a class="nav-link" href="/install/install-k8s.html">安装</a> </li>
|
||||
<li class="nav-item"> <a class="nav-link" href="/learning/">教程</a> </li>
|
||||
<li class="nav-item"> <a class="nav-link" href="/guide/">使用</a> </li>
|
||||
<li class="nav-item"> <a class="nav-link" href="https://kubetrain.cn/?from=kuboard-homepage" target="_blank">使用</a> </li>
|
||||
<li class="nav-item"> <a class="nav-link" href="/support/">支持</a> </li>
|
||||
<!-- <li class="nav-item dropdown">
|
||||
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
<div class="side-nav-item" :style="activeLinkStyle('/guide/')">
|
||||
<a :href="`/guide/${urlSurfix}`" class="nav-link">使用</a>
|
||||
</div>
|
||||
<div class="side-nav-item" :style="activeLinkStyle('/guide/')">
|
||||
<a :href="`https://kubetrain.cn/?from=kuboard`" class="nav-link" target="_blank">培训</a>
|
||||
</div>
|
||||
<div class="side-nav-item" :style="activeLinkStyle('/support/')">
|
||||
<a :href="`/support/${urlSurfix}`" class="nav-link">支持</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user