LoongPanel-Asp/web/components/shell/FloaterBar.vue

85 lines
1.4 KiB
Vue
Raw Normal View History

2024-06-22 10:54:02 +08:00
<script lang="ts" setup>
import {toggleDark} from "~/utils";
2024-06-22 10:54:02 +08:00
</script>
<template>
<div class="BottomBar-Box">
<div class="Left-Text-Box">
<p @click="toggleDark" style="cursor: pointer">{{$colorMode.value=='dark'?'深色':'浅色'}}</p>
2024-06-22 10:54:02 +08:00
<p>隐私策略</p>
<p>关于我们</p>
</div>
<div class="Right-Text-Box">
<p>Copyright © 2024 by <a href="https://ys-api.mihoyo.com/event/download_porter/link/ys_cn/official/pc_default"
target="_blank">
原神玩的队</a></p>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "base";
.BottomBar-Box {
grid-area: folder;
display: flex;
padding: 16px 24px;
align-items: center;
background: $light-bg-color;
2024-07-22 21:05:18 +08:00
border-top: $border;
.dark-mode &{
border-top: $border-dark;
}
2024-06-22 10:54:02 +08:00
}
.Left-Text-Box {
display: flex;
gap: $gap;
flex: 1;
p {
@include SC_Font;
color: $light-text-color;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
.Right-Text-Box {
@extend .Left-Text-Box;
justify-content: flex-end;
a {
cursor: pointer;
color: $primary-color;
}
}
.dark-mode {
.BottomBar-Box {
background: $dark-bg-color;
}
p {
color: $dark-text-color
}
}
.Fox {
position: fixed;
right: -40px;
bottom: -110px;
z-index: 20;
height: 400px;
width: 300px;
iframe {
height: 100%;
width: 100%;
border: unset;
}
}
</style>