andre/kuboard-press
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

替换 element-ui

Browse Source
This commit is contained in:
huanqing.shao
2019-11-02 10:13:24 +08:00
parent 111543d89f
commit 99951e87d9
40 changed files with 625 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
.vuepress/components/InstallBanner.vue
View File

@ -1,30 +1,21 @@
<template>
<div>
<link rel="stylesheet" href="/landing/css/googlefont.css">
<link rel="stylesheet" href="/landing/css/font-awesome.min.css">
<link rel="stylesheet" href="/landing/css/style.css">
<link rel="stylesheet" href="/landing/css/components.css">
<div class="py-80" id="features" style="padding-top: 1rem; padding-bottom: 1rem;">
<div class="container" style="margin-top: 0;">
<div class="row">
<div class="col-sm-12">
<div class="text-center" style="margin-bottom: 1rem;">
<div class="text-primary-title">网上那么多 Kubernetes 安装文档，为什么这篇文档更有参考价值？</div>
<div class="text-primary-install-banner">网上那么多 Kubernetes 安装文档，为什么这篇文档更有参考价值？</div>
</div>
</div>
</div>
<div class="row">
<transition-group name="lightSpeed" tag="div">
<div class="col-md-4" key="f1" v-show="f1">
<!-- <transition-group name="lightSpeed" tag="div"> -->
<div class="col-md-6" key="f1">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<img src="/landing/images/icn3.svg" alt="" class="img-fluid">
<div class="text-primary-title">广泛验证</div>
</div>
<div class="feature-description">
<div class="text-primary-install-banner">广泛验证</div>
<li>每天有超过
<span style="font-weight: 500; color: red;">
<!-- {{value}} -->
@ -39,19 +30,16 @@
</span>
人参考此文档完成 Kubernetes 集群的安装</li>
<li>不断有网友对安装文档提出改进意见</li>
</div>
</div>
<!-- InfoBox Center </End> -->
</div>
<div class="col-md-4" key="f2" v-show="f2">
<div class="col-md-6" key="f2">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="2000">
<img src="/landing/images/icn4.svg" alt="" class="img-fluid">
<div class="text-primary-title">持续更新</div>
</div>
<div class="feature-description">
<div class="text-primary-install-banner">持续更新</div>
<li>始终有最新的 Kubernetes 稳定版安装文档</li>
<li>当前版本 Kubernetes {{version}}</li>
<li>已完成了
@ -72,43 +60,36 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a>
</li>
</div>
</div>
<!-- InfoBox Center </End> -->
</div>
<div class="col-md-4" key="f3" v-show="f3">
<div class="col-md-6" key="f3">
<!-- InfoBox Left <Start> -->
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<img src="/landing/images/icn5.svg" alt="" class="img-fluid">
<div class="text-primary-title">适应面广</div>
</div>
<div class="feature-description">
<div class="text-primary-install-banner">适应面广</div>
<li>大部分的 K8S 安装文档都是个人爱好者的一份笔记而已，他当时的特定条件并不一定适用于你</li>
<li>此文档经众多网友验证，在公有云、私有云、自建虚拟机等多种条件下均适用</li>
</div>
</div>
<!-- InfoBox Left </End> -->
</div>
<div class="col-md-4" key="f4" v-show="f4">
<div class="col-md-6" key="f4">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up">
<div class="feature-title">
<img src="/landing/images/icn1.svg" alt="" class="img-fluid">
<div class="text-primary-title">在线答疑</div>
</div>
<div class="feature-description">
<Qq></Qq> 808894550
<p>
<img src="/images/kuboard_qq.png" alt="Kubernetes安装：QQ群在线答疑" style="width: 120px;"/>
<br/>如需远程协助，请扫描本文页尾的微信二维码
</p>
</div>
<div class="text-primary-install-banner">在线答疑</div>
<div>
<div style="text-align: center;">
<p><Qq></Qq></p>
<img src="/images/kuboard_qq.png" alt="Kubernetes安装：QQ群在线答疑" style="width: 120px;"/>
</div>
如需远程协助，请扫描本文页尾的微信二维码
</div>
</div>
<!-- InfoBox Center </End> -->
</div>
</transition-group>
<!-- </transition-group> -->
</div>
</div>
</div>
@ -159,16 +140,17 @@ export default {
</script>
<style scoped>
.text-primary-title {
.text-primary-install-banner {
font-size: 1rem;
font-weight: 500;
margin-top: 0.7rem;
margin-left: 0.7rem;
display: inline-block;
}
.feature {
text-align: left;
padding: 1rem;
margin-bottom: 1rem;
min-height: 272px;
z-index: 10;
border: 1px solid #f2be45;
border-radius: 5px;
@ -180,16 +162,5 @@ export default {
/* background-color: rgba(255,227,200); */
background-color: rgba(242, 190, 69, 0.1);
}
.feature-title {
display: inline-block;
text-align: center;
}
.feature-description {
display: inline-block;
max-width: calc(100% - 64px - 2rem);
padding: 0 0 0 1rem;
vertical-align: top;
text-align: left;
}
</style>