67 lines
2.0 KiB
Vue
67 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<el-config-provider :locale="zhCn">
|
||
|
|
<div class="w-full h-screen overflow-x-hidden overflow-y-auto">
|
||
|
|
<el-scrollbar>
|
||
|
|
<div
|
||
|
|
class="w-full h-16 bg-rose-100/50 shadow-sm sticky left-0 top-0 backdrop-blur-sm z-10"
|
||
|
|
>
|
||
|
|
<div class="mx-auto max-w-6xl px-4 h-full flex items-center">
|
||
|
|
<img src="./assets/picx-logo.png" class="w-8 h-8 block mr-2" />
|
||
|
|
<div class="text-lg">
|
||
|
|
{{ appName }}
|
||
|
|
</div>
|
||
|
|
<div class="flex-1"></div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
:class="{
|
||
|
|
'bg-rose-300': $route.path === '/up'
|
||
|
|
}"
|
||
|
|
class="px-3 py-2 rounded-md mr-2 text-gray-800 text-sm cursor-pointer"
|
||
|
|
@click="router.push('/up')"
|
||
|
|
>
|
||
|
|
<font-awesome-icon :icon="faUpload" :class="[$route.path === '/up' ? 'text-white' : 'text-gray-500']" />
|
||
|
|
<span class="hidden md:inline-block pl-2">上传</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
:class="{
|
||
|
|
'bg-rose-300': $route.path === '/'
|
||
|
|
}"
|
||
|
|
class="px-3 py-2 rounded-md text-gray-800 text-sm cursor-pointer"
|
||
|
|
@click="router.push('/')"
|
||
|
|
>
|
||
|
|
<font-awesome-icon :icon="faCog" :class="[$route.path === '/' ? 'text-white' : 'text-gray-500']" />
|
||
|
|
<span class="hidden md:inline-block pl-2">管理</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="min-h-[calc(100vh-64px-64px)] overflow-auto">
|
||
|
|
<router-view />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w-full h-16 flex items-center justify-center text-gray-500 text-sm">
|
||
|
|
<a :href="repoLink" target="_blank" class="underline">
|
||
|
|
{{ repoName }}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</el-config-provider>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { faCog, faUpload } from '@fortawesome/free-solid-svg-icons'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import { ElScrollbar, ElConfigProvider } from 'element-plus'
|
||
|
|
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
||
|
|
|
||
|
|
const repoLink = 'https://roim.app'
|
||
|
|
const repoName = 'roim-picx'
|
||
|
|
const appName = 'PICX'
|
||
|
|
|
||
|
|
document.title = appName
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
</script>
|