89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const router = useRouter();
|
||
|
||
function goToModelLibrary() {
|
||
router.push('/model-library');
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="model-library-btn-container" data-tour="model-library-btn">
|
||
<div
|
||
class="model-library-btn"
|
||
title="查看模型库"
|
||
@click="goToModelLibrary"
|
||
>
|
||
<!-- PC端显示文字 -->
|
||
<span class="pc-text">模型库</span>
|
||
<!-- 移动端显示图标 -->
|
||
<svg
|
||
class="mobile-icon"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="3" y="3" width="7" height="7" />
|
||
<rect x="14" y="3" width="7" height="7" />
|
||
<rect x="14" y="14" width="7" height="7" />
|
||
<rect x="3" y="14" width="7" height="7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.model-library-btn-container {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.model-library-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
font-weight: bold;
|
||
color: #606266;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
color: #606266;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
// PC端显示文字，隐藏图标
|
||
.pc-text {
|
||
display: inline;
|
||
margin: 0 12px;
|
||
}
|
||
|
||
.mobile-icon {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 移动端显示图标，隐藏文字
|
||
@media (max-width: 768px) {
|
||
.model-library-btn-container {
|
||
.model-library-btn {
|
||
.pc-text {
|
||
display: none;
|
||
}
|
||
|
||
.mobile-icon {
|
||
display: inline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|