mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-01 06:36:37 +08:00
89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
// 打开AI使用教程（跳转到外部链接）
|
|||
|
|
function openTutorial() {
|
|||
|
|
window.open('https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde', '_blank');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="ai-tutorial-btn-container" data-tour="ai-tutorial-link">
|
|||
|
|
<div
|
|||
|
|
class="ai-tutorial-btn"
|
|||
|
|
title="点击跳转YiXinAI玩法指南专栏"
|
|||
|
|
@click="openTutorial"
|
|||
|
|
>
|
|||
|
|
<!-- PC端显示文字 -->
|
|||
|
|
<span class="pc-text">文档</span>
|
|||
|
|
<!-- 移动端显示图标 -->
|
|||
|
|
<svg
|
|||
|
|
class="mobile-icon w-6 h-6"
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
fill="none"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
stroke="currentColor"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
stroke-linecap="round"
|
|||
|
|
stroke-linejoin="round"
|
|||
|
|
stroke-width="2"
|
|||
|
|
d="M12 14l9-5-9-5-9 5 9 5z"
|
|||
|
|
/>
|
|||
|
|
<path
|
|||
|
|
stroke-linecap="round"
|
|||
|
|
stroke-linejoin="round"
|
|||
|
|
stroke-width="2"
|
|||
|
|
d="M12 14l6.16-3.422A12.083 12.083 0 0118 13.5c0 2.579-3.582 4.5-6 4.5s-6-1.921-6-4.5c0-.432.075-.85.198-1.244L12 14z"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.ai-tutorial-btn-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.ai-tutorial-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #E6A23C;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
color: #F1B44C;
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// PC端显示文字，隐藏图标
|
|||
|
|
.pc-text {
|
|||
|
|
display: inline;
|
|||
|
|
margin: 0 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mobile-icon {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移动端显示图标，隐藏文字
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.ai-tutorial-btn-container {
|
|||
|
|
.ai-tutorial-btn {
|
|||
|
|
.pc-text {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mobile-icon {
|
|||
|
|
display: inline;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
