86 lines
4.0 KiB
Vue
86 lines
4.0 KiB
Vue
<template>
|
||
<div class="w-full">
|
||
<el-carousel height="500px" arrow="never">
|
||
<el-carousel-item>
|
||
<div class="h-full index-carousel"></div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<div class="word main-container pb-[200px] pt-[60px]">
|
||
<div class="word-title">
|
||
<p class="text-[40px] text-[#666] font-bold text-center mb-[20px]">Niucloud文档管理</p>
|
||
<p class="text-[16px] text-[#666] text-center">无论是快速上手，还是深入了解NIUCLOUD，这里都是最好的地点</p>
|
||
</div>
|
||
<div class="flex justify-between mt-[100px]">
|
||
<div class="w-[280px]">
|
||
<div class="flex items-center">
|
||
<div class="w-[30px] h-[30px] mr-[10px]"><img src="@/assets/images/word/course.jpg" /></div>
|
||
<p class="text-[20px] text-[#666] font-bold">官方教程</p>
|
||
</div>
|
||
<p class="text-[14px] w-[280px] h-[100px] text-[#666666] leading-[22px] mt-[30px] mb-[20px]">
|
||
详尽细致的逐步官方教程，帮助您系统全面的接触NIUCLOUD，建议在使用前阅读。</p>
|
||
<NuxtLink to="https://www.kancloud.cn/cui18734824089/niucloud-admin-develop/3148343" target="_blank">
|
||
<div class="flex justify-between items-center w-[280px] h-[40px] leading-[40px] rounded-[5px] border-[1px] border-[solid] border-[#508BFE]">
|
||
<span class="block ml-[20px] text-[14px] text-[#333]">前往教程</span>
|
||
<span class="block mr-[20px] text-[24px] text-[#333]">→</span>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
<div class="w-[280px]">
|
||
<div class="flex items-center">
|
||
<div class="w-[30px] h-[30px] mr-[10px]"><img src="@/assets/images/word/api.jpg" /></div>
|
||
<p class="text-[20px] text-[#666] font-bold">API文档</p>
|
||
</div>
|
||
<p class="text-[14px] w-[280px] h-[100px] text-[#666666] leading-[22px] mt-[30px] mb-[20px]">
|
||
您可以通过API文档了解niucloud的正确使用方法，也可以更加深入地理解niucloud的运行逻辑。</p>
|
||
<NuxtLink to="https://www.niucloud.com/apidoc.html" target="_blank">
|
||
<div class="flex justify-between items-center w-[280px] h-[40px] leading-[40px] rounded-[5px] border-[1px] border-[solid] border-[#508BFE]">
|
||
<span class="block ml-[20px] text-[14px] text-[#333]">前往API文档</span>
|
||
<span class="block mr-[20px] text-[24px] text-[#333]">→</span>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
<div class="w-[280px]">
|
||
<div class="flex items-center">
|
||
<div class="w-[30px] h-[30px] mr-[10px]"><img src="@/assets/images/word/community.jpg" /></div>
|
||
<p class="text-[20px] text-[#666] font-bold">问答社区</p>
|
||
</div>
|
||
<p class="text-[14px] w-[280px] h-[100px] text-[#666666] leading-[22px] mt-[30px] mb-[20px]">
|
||
便捷地浏览其它用户关于niucloud的问题，并从解答中获取niucloud的使用方法，当然您可以进行提问。</p>
|
||
<NuxtLink>
|
||
<div class="flex justify-between items-center w-[280px] h-[40px] leading-[40px] rounded-[5px] border-[1px] border-[solid] border-[#508BFE]">
|
||
<span class="block ml-[20px] text-[14px] text-[#333]">前往问答社区</span>
|
||
<span class="block mr-[20px] text-[24px] text-[#333]">→</span>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
<div class="w-[280px]">
|
||
<div class="flex items-center">
|
||
<div class="w-[30px] h-[30px] mr-[10px]"><img src="@/assets/images/word/wx.jpg"></div>
|
||
<p class="text-[20px] text-[#666] font-bold">关注公众号</p>
|
||
</div>
|
||
<p class="text-[14px] w-[280px] h-[100px] text-[#666666] leading-[22px] mt-[30px] mb-[20px]">
|
||
您可以扫描页面底部的二维码来关注我们的官方公众号，获得一手咨询及使用技巧。</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index-carousel {
|
||
background-image: url('@/assets/images/index_carousel.png');
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.word {
|
||
background-image: url(@/assets/images/word/word-back.jpg);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
</style> |