邃芒慧影、口播(PC) https://neuver.metavatar.cc/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

69 lines
1.4 KiB

  1. <script lang="ts" setup>
  2. defineProps({
  3. collapse: {
  4. type: Boolean,
  5. required: true,
  6. },
  7. });
  8. const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
  9. </script>
  10. <template>
  11. <div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
  12. <transition name="sidebarLogoFade">
  13. <router-link
  14. style="position: relative"
  15. v-if="collapse"
  16. key="collapse"
  17. class="h-full w-full flex items-center left-top-box"
  18. to="/"
  19. >
  20. <img
  21. src="../../../assets/img/left-top-logo.png"
  22. class="left-top-logo boxCentreImg"
  23. />
  24. </router-link>
  25. <router-link
  26. v-else
  27. style="position: relative"
  28. key="expand"
  29. class="h-full w-full flex items-center left-top-box"
  30. to="/"
  31. >
  32. <img
  33. src="../../../assets/img/left-top-logo.png"
  34. class="left-top-logo boxCentreImg"
  35. />
  36. </router-link>
  37. </transition>
  38. </div>
  39. </template>
  40. <style lang="scss" scoped>
  41. // https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component
  42. .left-top-box {
  43. height: 80px;
  44. // background-color: #1b213a;
  45. background-color: #000;
  46. }
  47. .left-top-logo {
  48. width: 180px;
  49. height: 40px;
  50. padding: 5px 0 0 10px;
  51. }
  52. .sidebarLogoFade-enter-active {
  53. transition: opacity 2s;
  54. }
  55. .sidebarLogoFade-leave-active,
  56. .sidebarLogoFade-enter-from,
  57. .sidebarLogoFade-leave-to {
  58. opacity: 0;
  59. }
  60. </style>