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

<script lang="ts" setup>

import {toggleDark} from "~/utils";
</script>

<template>
  <div class="BottomBar-Box">
    <div class="Left-Text-Box">
      <p @click="toggleDark" style="cursor: pointer">{{$colorMode.value=='dark'?'深色':'浅色'}}</p>
      <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;
  border-top: $border;
  .dark-mode &{
    border-top: $border-dark;
  }
}

.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>