166 lines
3.4 KiB
Vue
166 lines
3.4 KiB
Vue
<template>
|
|
<div id="container" class="view-container">
|
|
<layout-aside id="left" />
|
|
<div id="right">
|
|
<layout-toolbar id="toolbar" />
|
|
<layout-view id="view" />
|
|
<layout-play-bar id="player" />
|
|
</div>
|
|
<layout-icons />
|
|
<layout-version-modal />
|
|
<layout-pact-modal />
|
|
<layout-sync-mode-modal />
|
|
<layout-play-detail />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from '@common/utils/vueTools'
|
|
// import BubbleCursor from '@common/utils/cursor-effects/bubbleCursor'
|
|
import useApp from '@renderer/core/useApp'
|
|
|
|
useApp()
|
|
|
|
onMounted(() => {
|
|
document.getElementById('root').style.display = 'block'
|
|
|
|
// const styles = getComputedStyle(document.documentElement)
|
|
// window.lxData.bubbleCursor = new BubbleCursor({
|
|
// fillStyle: styles.getPropertyValue('--color-primary-alpha-900'),
|
|
// strokeStyle: styles.getPropertyValue('--color-primary-alpha-700'),
|
|
// })
|
|
})
|
|
|
|
// onBeforeUnmount(() => {
|
|
// window.lxData.bubbleCursor?.destroy()
|
|
// })
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
@import './assets/styles/index.less';
|
|
@import './assets/styles/layout.less';
|
|
|
|
html {
|
|
height: 100vh;
|
|
}
|
|
html, body {
|
|
// overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
user-select: none;
|
|
height: 100%;
|
|
}
|
|
#root {
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: var(--color-font);
|
|
background: var(--background-image) var(--background-image-position) no-repeat;
|
|
background-size: var(--background-image-size);
|
|
transition: background-color @transition-normal;
|
|
background-color: var(--color-content-background);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.disableAnimation * {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
|
|
.transparent {
|
|
background: transparent;
|
|
padding: @shadow-app;
|
|
// #waiting-mask {
|
|
// border-radius: @radius-border;
|
|
// left: @shadow-app;
|
|
// right: @shadow-app;
|
|
// top: @shadow-app;
|
|
// bottom: @shadow-app;
|
|
// }
|
|
#body {
|
|
border-radius: @radius-border;
|
|
}
|
|
#root {
|
|
box-shadow: 0 0 @shadow-app rgba(0, 0, 0, 0.5);
|
|
border-radius: @radius-border;
|
|
}
|
|
// #container {
|
|
// border-radius: @radius-border;
|
|
// background-color: transparent;
|
|
// }
|
|
}
|
|
.disableTransparent {
|
|
background-color: var(--color-content-background);
|
|
|
|
#body {
|
|
border: 1Px solid var(--color-primary-light-500);
|
|
}
|
|
|
|
#right {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
// #view { // 偏移5px距离解决非透明模式下右侧滚动条无法拖动的问题
|
|
// margin-right: 5Px;
|
|
// }
|
|
}
|
|
.fullscreen {
|
|
background-color: var(--color-content-background);
|
|
|
|
#right {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
|
|
#container {
|
|
position: relative;
|
|
display: flex;
|
|
height: 100%;
|
|
background-color: var(--color-app-background);
|
|
}
|
|
|
|
#left {
|
|
flex: none;
|
|
width: @width-app-left;
|
|
}
|
|
#right {
|
|
flex: auto;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
transition: background-color @transition-normal;
|
|
background-color: var(--color-main-background);
|
|
|
|
border-top-left-radius: @radius-border;
|
|
border-bottom-left-radius: @radius-border;
|
|
overflow: hidden;
|
|
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
#toolbar, #player {
|
|
flex: none;
|
|
}
|
|
#view {
|
|
position: relative;
|
|
flex: auto;
|
|
// display: flex;
|
|
min-height: 0;
|
|
}
|
|
|
|
.view-container {
|
|
transition: opacity @transition-normal;
|
|
}
|
|
#root.show-modal > .view-container {
|
|
opacity: .9;
|
|
}
|
|
#view.show-modal > .view-container {
|
|
opacity: .2;
|
|
}
|
|
|
|
</style>
|
|
|