53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup>
|
|
const repoUrl = import.meta.env.VITE_REPO_URL;
|
|
const repoName = import.meta.env.VITE_REPO_NAME;
|
|
</script>
|
|
|
|
<template>
|
|
<header class="app-header">
|
|
<router-link to="/" class="logo-link">
|
|
<div class="logo">Email Unlimit</div>
|
|
</router-link>
|
|
<nav class="nav-links">
|
|
<a :href="repoUrl" target="_blank">{{ repoName }}</a>
|
|
<router-link to="/settings" class="settings-link" title="设置">
|
|
<img src="@/assets/setting.svg" alt="Settings" class="settings-icon" />
|
|
</router-link>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AppHeader',
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.logo-link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.settings-link {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.settings-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.settings-link:hover .settings-icon {
|
|
/* Generated by https://codepen.io/sosuke/pen/Pjoqqp */
|
|
/* This filter converts black to the --primary-purple color */
|
|
filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(3750%) hue-rotate(261deg) brightness(95%) contrast(94%);
|
|
}
|
|
</style> |