museums-ui/src/App.vue

<script lang="ts" setup>
import { isDark } from '@/utils/is'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import routerSearch from '@/components/RouterSearch/index.vue'

defineOptions({ name: 'APP' })

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('app')
const appStore = useAppStore()
const currentSize = computed(() => appStore.getCurrentSize)
const greyMode = computed(() => appStore.getGreyMode)
const { wsCache } = useCache()

// 根据浏览器当前主题设置系统主题色
const setDefaultTheme = () => {
  let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)
  if (isDarkTheme === null) {
    isDarkTheme = isDark()
  }
  appStore.setIsDark(isDarkTheme)
}
setDefaultTheme()

</script>
<template>
  <ConfigGlobal :size="currentSize">
    <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
    <routerSearch />
  </ConfigGlobal>
</template>
<style lang="scss">
$prefix-cls: #{$namespace}-app;

.size {
  width: 100%;
  height: 100%;
}

html,
body {
  @extend .size;

  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  --left-menu-bg-active-color:#dcb86b;
  --left-menu-text-active-color:#fff;
  --left-menu-bg-color:#333;
  --left-menu-bg-light-color:#333;
  --left-menu-text-color:#fff;
  // --top-header-bg-color:#f1ead8;
  --logo-title-text-color:#dcb86b;
  --el-tag-border-color:rgba(220,184,107,0.5);
  --el-menu-base-level-padding:6px;
  --el-button-hover-bg-color:#dcb86b !important;
  --el-button-hover-border-color:#dcb86b !important;
  --el-button-active-color:#cfaa5a !important;
  --el-button-hover-bg-color:#faf6ef !important;
  --el-tag-border-color:#dcb86b  !important;
  --el-color-primary-light-8:#faf6ef !important;
  --el-color-primary-light-9:#faf6ef !important;
  --el-button-hover-link-text-color:#cfaa5a !important;
  --el-color-primary-light-5:#dcb86b  !important;
  --el-color-primary-light-7:#dcb86b  !important;
  --el-color-primary-light-3:#f0d293  !important;
  --el-color-primary-dark-2:#f0d293  !important;
  --el-color-primary-light-8:#f0dcb0 !important;
  // --left-menu-bg-active-color:RGBA(195,127,64,0.1);
  // --left-menu-text-active-color:#dcb86b;
  // --left-menu-bg-color:#333;
  // --left-menu-bg-light-color:#464646;
  // --left-menu-text-color:#fff;
  // --top-header-bg-color:#f1ead8;
  // --app-content-bg-color:#fdf5e1;
  #app {
    @extend .size;
  }
}

.#{$prefix-cls}-grey-mode {
  filter: grayscale(100%);
}

.bg-\[var\(--app-content-bg-color\)\]{
  background-color: unset;
  // background-image: ;
}

.w-\[calc\(var\(--logo-height\)-10px\)\]{
  width:calc(var(--logo-height) - -300px);
  // color: #333;
}

:root{
  --logo-height:70px;
}

.v-menu[data-v-c3357e93] .el-menu .el-menu-item.is-active{
  color:#dcb86b !important;
}

.el-dropdown{
  // border: none !important;
  // margin: 0 !important;
}
.el-tag, .el-tag.el-tag--primary{
  // --el-tag-border-color:rgba(220,184,107,1) !important;
  // --el-tag-bg-color:rgba(220,184,107,0.1) !important;
}
// --left-menu-bg-active-color{
  // RGBA(195,127,64,0.1)
// }

.v-menu[data-v-c3357e93]{
  // margin: 10px;
  padding: 15px;
}

@media (min-width: 100px) {
  .v-menu[data-v-c3357e93]{
  padding: 0;
}
  
}


@media (min-width: 768px) {
  .v-menu[data-v-c3357e93]{
    padding: 15px;
}
  
}

.el-menu-item{
  // padding: 15px !important;
  border-radius: 15px !important;
}

#v-tool-header{
  padding: 10px 15px;
  // background-color: #fff;
}

.el-scrollbar__view{}
// .el-scrollbar__wrap--hidden-default{
// background-color: #dcb86b !important;
// }

.mt-\[calc\(var\(--top-tool-height\)\+var\(--tags-view-height\)\)\]{
  margin-top: 70px;
}

.v-tags-view__item[data-v-a7799cdb]{
  border-radius: 4px !important; 
  margin-left: 10px !important;
  top: 0 !important;
  height: calc(100% - 0px) !important;
}

.v-tags-view__tool[data-v-a7799cdb]::before{
  border-left: none !important;
}

.el-button:hover{
  // background-color:#dcb86b;
  // border-color: #dcb86b !important;
}
</style>