fixed-header样式修改

zhangwencui

13 小时以前 7bbd95fd7c35e722cf14c33701621eef71bc5723

fixed-header样式修改

 src/layout/index.vue

@@ -1,8 +1,14 @@
<template>

  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">

    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>

    <sidebar v-if="!sidebar.hide" class="sidebar-container" />

    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">

  <div :class="classObj"

       class="app-wrapper"

       :style="{ '--current-color': theme }">

    <div v-if="device === 'mobile' && sidebar.opened"

         class="drawer-bg"

         @click="handleClickOutside" />

    <sidebar v-if="!sidebar.hide"

             class="sidebar-container" />

    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"

         class="main-container">

      <div :class="{ 'fixed-header': fixedHeader }">

        <navbar @setLayout="setLayout" />

        <tags-view v-if="needTagsView" />

@@ -14,54 +20,57 @@
</template>



<script setup>

import { useWindowSize } from '@vueuse/core'

import Sidebar from './components/Sidebar/index.vue'

import { AppMain, Navbar, Settings, TagsView } from './components'

import defaultSettings from '@/settings'

  import { useWindowSize } from "@vueuse/core";

  import Sidebar from "./components/Sidebar/index.vue";

  import { AppMain, Navbar, Settings, TagsView } from "./components";

  import defaultSettings from "@/settings";



import useAppStore from '@/store/modules/app'

import useSettingsStore from '@/store/modules/settings'

  import useAppStore from "@/store/modules/app";

  import useSettingsStore from "@/store/modules/settings";



const settingsStore = useSettingsStore()

const theme = computed(() => settingsStore.theme)

const sideTheme = computed(() => settingsStore.sideTheme)

const sidebar = computed(() => useAppStore().sidebar)

const device = computed(() => useAppStore().device)

const needTagsView = computed(() => settingsStore.tagsView)

const fixedHeader = computed(() => settingsStore.fixedHeader)

  const settingsStore = useSettingsStore();

  const theme = computed(() => settingsStore.theme);

  const sideTheme = computed(() => settingsStore.sideTheme);

  const sidebar = computed(() => useAppStore().sidebar);

  const device = computed(() => useAppStore().device);

  const needTagsView = computed(() => settingsStore.tagsView);

  const fixedHeader = computed(() => settingsStore.fixedHeader);



const classObj = computed(() => ({

  hideSidebar: !sidebar.value.opened,

  openSidebar: sidebar.value.opened,

  withoutAnimation: sidebar.value.withoutAnimation,

  mobile: device.value === 'mobile'

}))

    mobile: device.value === "mobile",

  }));



const { width, height } = useWindowSize()

const WIDTH = 992 // refer to Bootstrap's responsive design

  const { width, height } = useWindowSize();

  const WIDTH = 992; // refer to Bootstrap's responsive design



watch(() => device.value, () => {

  if (device.value === 'mobile' && sidebar.value.opened) {

    useAppStore().closeSideBar({ withoutAnimation: false })

  watch(

    () => device.value,

    () => {

      if (device.value === "mobile" && sidebar.value.opened) {

        useAppStore().closeSideBar({ withoutAnimation: false });

  }

})

    }

  );



watchEffect(() => {

  if (width.value - 1 < WIDTH) {

    useAppStore().toggleDevice('mobile')

    useAppStore().closeSideBar({ withoutAnimation: true })

      useAppStore().toggleDevice("mobile");

      useAppStore().closeSideBar({ withoutAnimation: true });

  } else {

    useAppStore().toggleDevice('desktop')

      useAppStore().toggleDevice("desktop");

  }

})

  });



function handleClickOutside() {

  useAppStore().closeSideBar({ withoutAnimation: false })

    useAppStore().closeSideBar({ withoutAnimation: false });

}



const settingRef = ref(null)

  const settingRef = ref(null);

function setLayout() {

  settingRef.value.openSetting()

    settingRef.value.openSetting();

}

</script>



@@ -74,8 +83,11 @@
  position: relative;

  height: 100%;

  width: 100%;

  background:

    radial-gradient(circle at top, rgba(223, 232, 226, 0.95), transparent 32%),

    background: radial-gradient(

        circle at top,

        rgba(223, 232, 226, 0.95),

        transparent 32%

      ),

    linear-gradient(180deg, #f7faf8 0%, var(--app-bg) 100%);



  &.mobile.openSidebar {

@@ -96,14 +108,15 @@


.fixed-header {

  position: fixed;

  top: 12px;

    top: 0px;

    padding-top: 12px;

  right: 16px;

  z-index: 9;

  width: calc(100% - #{$base-sidebar-width} - 32px);

  transition: width 0.28s, right 0.28s;

  padding-bottom: 8px;

    background-color: #f3f6f4;

}



.hideSidebar .fixed-header {
  width: calc(100% - 100px);
}