92 lines
1.8 KiB
Vue
92 lines
1.8 KiB
Vue
<script setup lang="ts">
|
||
import { useUserStore } from '@/stores';
|
||
|
||
const userStore = useUserStore();
|
||
|
||
// 打开用户中心对话框（通过调用 Avatar 组件的方法）
|
||
function openConsole() {
|
||
// 触发事件，由父组件处理
|
||
emit('open-console');
|
||
}
|
||
|
||
const emit = defineEmits(['open-console']);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="console-btn-container" data-tour="console-btn">
|
||
<div
|
||
class="console-btn"
|
||
title="打开控制台"
|
||
@click="openConsole"
|
||
>
|
||
<!-- 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="2" y="3" width="20" height="14" rx="2" ry="2" />
|
||
<line x1="8" y1="21" x2="16" y2="21" />
|
||
<line x1="12" y1="17" x2="12" y2="21" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.console-btn-container {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.console-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: #909399;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
// PC端显示文字，隐藏图标
|
||
.pc-text {
|
||
display: inline;
|
||
margin: 0 12px;
|
||
}
|
||
|
||
.mobile-icon {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 移动端显示图标，隐藏文字
|
||
@media (max-width: 768px) {
|
||
.console-btn-container {
|
||
.console-btn {
|
||
.pc-text {
|
||
display: none;
|
||
}
|
||
|
||
.mobile-icon {
|
||
display: inline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|