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

sharing

Browse Source
This commit is contained in:
huanqing.shao
2019-10-31 23:39:59 +08:00
parent 74e4c05d51
commit 2787c89a44
20 changed files with 134 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
.vuepress/components/InstallBanner.vue
View File

@ -16,7 +16,9 @@
</div>
</div>
<div class="row">
<div class="col-md-4" >
<transition-group name="bounceRight" tag="div">
<div class="col-md-4" key="f1" v-show="f1">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
@ -24,16 +26,27 @@
<div class="text-primary-title">广泛验证</div>
</div>
<div class="feature-description">
<li>每天有超过 300 人参考此文档完成 Kubernetes 集群的安装</li>
<li>每天有超过
<span style="font-weight: 500; color: red;">
<div style="display: inline-block; width: 2rem;">
<animated-number
style=""
:value="value"
:formatValue="formatToPrice"
:duration="4000"
/>
</div>
</span>
人参考此文档完成 Kubernetes 集群的安装</li>
<li>不断有网友对安装文档提出改进意见</li>
</div>
</div>
<!-- InfoBox Center </End> -->
</div>
<div class="col-md-4 bg-gray">
<div class="col-md-4 bg-gray" key="f2" v-show="f2">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1600">
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<img src="/landing/images/icn4.svg" alt="" class="img-fluid">
<div class="text-primary-title">持续更新</div>
@ -41,7 +54,18 @@
<div class="feature-description">
<li>始终有最新的 Kubernetes 稳定版安装文档</li>
<li>当前版本 Kubernetes {{version}}</li>
<li>已完成了 <span style="font-weight: 500; color: red;">{{updateCount}} 次更新</span>，每次更新都帮您排除一个或更多可能踩的坑。
<li>已完成了
<span style="font-weight: 500; color: red;">
<div style="display: inline-block; width: 1.5rem;">
<animated-number
style=""
:value="updateCount"
:formatValue="formatToPrice"
:duration="6000"
/>
</div>
次更新
</span>，每次更新都帮您排除一个或更多可能踩的坑。
<a href="https://github.com/eip-work/kuboard-press/commits/master/install/install-k8s.md" target="_blank">
查看更新历史
<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>
@ -51,9 +75,9 @@
</div>
<!-- InfoBox Center </End> -->
</div>
<div class="col-md-4">
<div class="col-md-4" key="f3" v-show="f3">
<!-- InfoBox Left <Start> -->
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1000">
<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>
@ -65,9 +89,9 @@
</div>
<!-- InfoBox Left </End> -->
</div>
<div class="col-md-4 bg-gray">
<div class="col-md-4 bg-gray" key="f4" v-show="f4">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1800">
<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>
@ -83,6 +107,7 @@
</div>
<!-- InfoBox Center </End> -->
</div>
</transition-group>
</div>
</div>
</div>
@ -90,6 +115,9 @@
</template>
<script>
import AnimatedNumber from "animated-number-vue";
require('vue2-animate/dist/vue2-animate.min.css')
export default {
props: {
version: { type: String, required: true },
@ -97,12 +125,37 @@ export default {
},
data () {
return {
show: false
show: false,
value: 300,
f1: false,
f2: false,
f3: false,
f4: false
}
},
components: {
AnimatedNumber
},
mounted () {
this.show = true
}
setTimeout(_ => {
this.f1 = true
}, 0)
setTimeout(_ => {
this.f2 = true
}, 1000)
setTimeout(_ => {
this.f3 = true
}, 2000)
setTimeout(_ => {
this.f4 = true
}, 3000)
},
methods: {
formatToPrice(value) {
return `${value.toFixed(0)}`;
}
}
}
</script>