Files
kuboard-press/.vuepress/components/InstallDashboardPreview.vue
huanqing.shao a88563cf16 v2.0.0
2020-06-07 23:58:50 +08:00

48 lines
2.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div data-aos="zoom-in-up">
<grid :rwd="{compact: 'stack'}" style="margin-top: 1rem;" v-show="show">
<grid-item size="1/3" :rwd="{tablet: '1/1', compact: '1/1'}" >
<b-card style="height: 100%; color: #2c3e50; line-height: 1.7;" shadow="hover">
<p>
<a target="_blank" :href="`http://demo.kuboard.cn/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
Kuboard 在线体验
<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>
</p>
<p style="color: gray; font-size: 14px;">
为保证环境的稳定性在线 Demo 中只提供只读权限<span style="color: #F56C6C; font-weight: 500;">请在PC浏览器中打开</span>
</p>
<li>GitLab/GitHub 单点登录集成</li>
<li>RBAC 权限管理</li>
<li>工作负载编辑器</li>
<li>名称空间导出/导入</li>
</b-card>
</grid-item>
<grid-item size="2/3" :rwd="{tablet: '1/1', compact: '1/1'}">
<b-card style="height: 100%; border-color: #f2be45; background-color: rgba(242, 190, 69, 0.1)" shadow="hover">
<a target="_blank" :href="`http://demo.kuboard.cn/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
<FancyImage src="/images/preview.png" alt="Kubernetes教程Kuboard 在线Demo" title="Kuboard" description="快速在 Kubernetes 上落地微服务"></FancyImage>
</a>
</b-card>
</grid-item>
</grid>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
mounted () {
this.show = true
}
}
</script>
<style scoped>
</style>