117 lines
2.6 KiB
Vue
117 lines
2.6 KiB
Vue
<template>
|
|
<div :class="classObj" class="app-wrapper">
|
|
<div
|
|
v-if="device === 'mobile' && sidebar.opened"
|
|
class="drawer-bg"
|
|
@click="handleClickOutside"
|
|
></div>
|
|
<Sidebar class="sidebar-container" />
|
|
<div :class="{ hasTagsView: needTagsView }" class="main-container">
|
|
<div :class="{ 'fixed-header': fixedHeader }">
|
|
<navbar />
|
|
<tags-view v-if="needTagsView" />
|
|
</div>
|
|
|
|
<!--主页面-->
|
|
<app-main />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Watermark from 'watermark-plus'
|
|
import { handleData } from 'lz-utils-lib'
|
|
import { computed, watchEffect } from 'vue'
|
|
import { useWindowSize } from '@vueuse/core'
|
|
import AppMain from './components/AppMain.vue'
|
|
import Navbar from './components/Navbar.vue'
|
|
import TagsView from './components/TagsView/index.vue'
|
|
import Sidebar from './components/Sidebar/index.vue'
|
|
|
|
import useStore from '@/stores'
|
|
const { app, setting } = useStore()
|
|
const sidebar = computed(() => app.sidebar)
|
|
const device = computed(() => app.device)
|
|
const needTagsView = computed(() => setting.tagsView)
|
|
const fixedHeader = computed(() => setting.fixedHeader)
|
|
|
|
const { width } = useWindowSize()
|
|
const WIDTH = 992
|
|
|
|
const classObj = computed(() => ({
|
|
hideSidebar: !sidebar.value.opened,
|
|
openSidebar: sidebar.value.opened,
|
|
withoutAnimation: sidebar.value.withoutAnimation,
|
|
mobile: device.value === 'mobile'
|
|
}))
|
|
|
|
/** 水印画布 */
|
|
const { user } = useStore()
|
|
const phone = user.userPhone.slice(-4)
|
|
const watermark = new Watermark({
|
|
content: `DC信贷系统 ${user.userNickName}_${phone}`,
|
|
tip: `${handleData.formatTime(new Date(), 'YYYY-MM-DD hh:mm:ss')}`,
|
|
alpha: '0.2',
|
|
rotate: 340,
|
|
fontSize: 12
|
|
})
|
|
watermark.create()
|
|
|
|
watchEffect(() => {
|
|
if (width.value < WIDTH) {
|
|
app.toggleDevice('mobile')
|
|
app.closeSideBar(true)
|
|
} else {
|
|
app.toggleDevice('desktop')
|
|
}
|
|
})
|
|
|
|
const handleClickOutside = () => {
|
|
app.closeSideBar(false)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/assets/styles/mixin.scss';
|
|
@import '@/assets/styles/variables.module.scss';
|
|
|
|
.app-wrapper {
|
|
@include clearfix;
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
&.mobile.openSidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.drawer-bg {
|
|
background: #000;
|
|
opacity: 0.3;
|
|
width: 100%;
|
|
top: 0;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 999;
|
|
}
|
|
|
|
.fixed-header {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 9;
|
|
width: calc(100% - #{$sideBarWidth});
|
|
transition: width 0.28s;
|
|
}
|
|
|
|
.hideSidebar .fixed-header {
|
|
width: calc(100% - 54px);
|
|
}
|
|
|
|
.mobile .fixed-header {
|
|
width: 100%;
|
|
}
|
|
</style>
|