hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

pref: mobile hamburger close

Browse source
This commit is contained in:
KUN1007 2023-11-03 14:35:02 +08:00
parent 43ec531a40
commit 7440a8b353
5 changed files with 69 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/alert/Alert.vue
View file

@ -48,7 +48,7 @@ const handleConfirm = () => {
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: var(--kungalgame-mask-color-0);
display: flex;
transition: opacity 0.3s ease;
color: var(--kungalgame-font-color-3);

2
src/components/capture/Capture.vue
View file

@ -194,7 +194,7 @@ const handleCloseCapture = () => {
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: var(--kungalgame-mask-color-0);
display: flex;
transition: opacity 0.3s ease;
color: var(--kungalgame-font-color-3);

89
src/components/top-bar/Hamburger.vue
View file

@ -1,65 +1,68 @@
<!-- This file is for adapting the top navigation bar for mobile devices -->
<script setup lang="ts">
import { Icon } from '@iconify/vue'
// Import mode switch component
import Mode from '../setting-panel/components/Mode.vue'
// Import language switch component
import SwitchLanguage from '../setting-panel/components/SwitchLanguage.vue'
// Import top navigation bar items
import { topBarItem } from './topBarItem'
// Send a close command to the parent element
defineEmits(['showKUNGalgameHamburger'])
</script>
<template>
<!-- Main container -->
<div class="container">
<div class="kungalgame">
<img src="@/assets/images/favicon.webp" alt="KUNGalgame" />
<span>{{ $tm('header.name') }}</span>
</div>
<!-- Interactive items -->
<div class="item" style="font-size: 17px">
<span v-for="kun in topBarItem" :key="kun.index">
<RouterLink :to="kun.router">{{
$tm(`header['${kun.name}']`)
}}</RouterLink>
</span>
</div>
<div class="root" @click="$emit('showKUNGalgameHamburger', false)">
<Transition
enter-active-class="animate__animated animate__fadeInLeft animate__faster"
appear
>
<div class="container">
<div class="kungalgame">
<img src="@/assets/images/favicon.webp" alt="KUNGalgame" />
<span>{{ $tm('header.name') }}</span>
</div>
<!-- Interactive items -->
<div class="item" style="font-size: 17px">
<span v-for="kun in topBarItem" :key="kun.index">
<RouterLink :to="kun.router">{{
$tm(`header['${kun.name}']`)
}}</RouterLink>
</span>
</div>
<!-- Day and night mode switch component -->
<Mode style="font-size: 20px" />
<!-- Day and night mode switch component -->
<Mode style="font-size: 20px" />
<!-- Language switch component -->
<SwitchLanguage style="font-size: 20px; margin-bottom: 40px" />
<!-- Close button -->
<div class="close">
<Icon
icon="line-md:menu-fold-left"
@click="$emit('showKUNGalgameHamburger', false)"
/>
</div>
<!-- Language switch component -->
<SwitchLanguage style="font-size: 20px; margin-bottom: 40px" />
</div>
</Transition>
</div>
</template>
<style lang="scss" scoped>
.container {
height: 400px;
width: 277px;
.root {
height: 100vh;
width: 100vw;
position: fixed;
padding: 10px;
top: 0;
left: 0;
background-color: var(--kungalgame-trans-white-2);
border: 1px solid var(--kungalgame-blue-1);
box-shadow: var(--shadow);
border-left: none;
border-top: none;
border-radius: 0 5px 5px 5px;
display: flex;
flex-direction: column;
color: var(--kungalgame-font-color-3);
font-size: 25px;
background-color: var(--kungalgame-mask-color-0);
transition: opacity 0.3s ease;
z-index: 1;
}
.container {
width: 277px;
height: 400px;
padding: 10px;
box-shadow: var(--shadow);
border-left: none;
border-top: none;
border-radius: 0 5px 5px 5px;
background-color: var(--kungalgame-trans-white-2);
border: 1px solid var(--kungalgame-blue-1);
}
.item {
@ -85,10 +88,4 @@ defineEmits(['showKUNGalgameHamburger'])
font-size: 20px;
}
}
.close {
width: 100%;
display: flex;
justify-content: center;
}
</style>

31
src/components/top-bar/KUNGalgameTopBar.vue
View file

@ -47,17 +47,12 @@ onBeforeRouteLeave(() => {
v-if="!showKUNGalgameHamburger"
@click="showKUNGalgameHamburger = !showKUNGalgameHamburger"
/>
<transition
enter-active-class="animate__animated animate__fadeInLeft animate__faster"
leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
>
<KeepAlive>
<Hamburger
v-if="showKUNGalgameHamburger"
@showKUNGalgameHamburger="showKUNGalgameHamburger = false"
/>
</KeepAlive>
</transition>
<Transition name="hamburger">
<Hamburger
v-if="showKUNGalgameHamburger"
@showKUNGalgameHamburger="showKUNGalgameHamburger = false"
/>
</Transition>
</div>
<!-- Website name and logo -->
@ -289,6 +284,20 @@ $navNumber: v-bind(navItemNum);
z-index: 999;
}
.hamburger-enter-from {
opacity: 0;
}
.hamburger-leave-to {
opacity: 0;
}
.hamburger-enter-from .container,
.hamburger-leave-to .container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
@media (max-width: 1000px) {
.kungalgame {
span {

5
src/styles/theme/color.scss
View file

@ -41,7 +41,7 @@ html {
--kungalgame-trans-white-2: #ffffffd9;
--kungalgame-trans-white-5: #ffffff8e;
/* 这个白色是占位符，不然会导致塌陷 */
/* This placeholder is necessary; otherwise, it could lead to a collapse */
--kungalgame-trans-white-9: #ffffff00;
--kungalgame-trans-blue-0: #ddf4ff77;
@ -60,6 +60,9 @@ html {
--kungalgame-trans-pink-1: #ffd3eb77;
--kungalgame-trans-pink-2: #ffadda77;
/* Special */
--kungalgame-mask-color-0: #00000077;
--shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05),
0 2px 8px hsla(0, 0%, 0%, 0.05);
--kungalgame-shadow-0: 0px 0px 17px 5px var(--kungalgame-blue-1);