perf: adjust styles of resize divider
This commit is contained in:
parent
425d9a3eae
commit
2f95b803b9
|
@ -87,7 +87,7 @@ watch(
|
||||||
<div
|
<div
|
||||||
id="app-toolbar-title"
|
id="app-toolbar-title"
|
||||||
:style="{
|
:style="{
|
||||||
width: `${data.navMenuWidth + prefStore.general.asideWidth}px`,
|
width: `${data.navMenuWidth + prefStore.general.asideWidth - 4}px`,
|
||||||
paddingLeft: isMacOS() ? '70px' : '10px',
|
paddingLeft: isMacOS() ? '70px' : '10px',
|
||||||
}">
|
}">
|
||||||
<n-space align="center" :wrap-item="false" :wrap="false" :size="3">
|
<n-space align="center" :wrap-item="false" :wrap="false" :size="3">
|
||||||
|
@ -100,6 +100,15 @@ watch(
|
||||||
</transition>
|
</transition>
|
||||||
</n-space>
|
</n-space>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
'resize-divider-hover': data.hoverResize,
|
||||||
|
'resize-divider-drag': data.resizing,
|
||||||
|
}"
|
||||||
|
class="resize-divider resize-divider-hide"
|
||||||
|
@mousedown="startResize"
|
||||||
|
@mouseout="data.hoverResize = false"
|
||||||
|
@mouseover="data.hoverResize = true" />
|
||||||
<!-- browser tabs -->
|
<!-- browser tabs -->
|
||||||
<div v-show="tabStore.nav === 'browser'" class="app-toolbar-tab flex-item-expand">
|
<div v-show="tabStore.nav === 'browser'" class="app-toolbar-tab flex-item-expand">
|
||||||
<content-value-tab />
|
<content-value-tab />
|
||||||
|
@ -180,6 +189,7 @@ watch(
|
||||||
.app-toolbar-tab {
|
.app-toolbar-tab {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
|
margin-left: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-content {
|
#app-content {
|
||||||
|
@ -190,28 +200,29 @@ watch(
|
||||||
//overflow: hidden;
|
//overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: v-bind('themeVars.tabColor');
|
background-color: v-bind('themeVars.tabColor');
|
||||||
|
|
||||||
.resize-divider {
|
|
||||||
//height: 100%;
|
|
||||||
width: 5px;
|
|
||||||
border-left-width: 5px;
|
|
||||||
background-color: v-bind('themeVars.tabColor');
|
|
||||||
}
|
|
||||||
|
|
||||||
.resize-divider-hover {
|
|
||||||
width: 5px;
|
|
||||||
background-color: v-bind('themeVars.borderColor');
|
|
||||||
}
|
|
||||||
|
|
||||||
.resize-divider-drag {
|
|
||||||
//background-color: rgb(0, 105, 218);
|
|
||||||
width: 5px;
|
|
||||||
//background-color: var(--el-color-primary);
|
|
||||||
background-color: v-bind('themeVars.primaryColor');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.resize-divider {
|
||||||
|
width: 3px;
|
||||||
|
border-right: 1px solid v-bind('themeVars.borderColor');
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-divider-hide {
|
||||||
|
background-color: #0000;
|
||||||
|
border-right-color: #0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-divider-hover {
|
||||||
|
background-color: v-bind('themeVars.borderColor');
|
||||||
|
border-right-color: v-bind('themeVars.borderColor');
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-divider-drag {
|
||||||
|
background-color: v-bind('themeVars.primaryColor');
|
||||||
|
border-right-color: v-bind('themeVars.primaryColor');
|
||||||
|
}
|
||||||
|
|
||||||
.dragging {
|
.dragging {
|
||||||
cursor: col-resize !important;
|
cursor: col-resize !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -70,6 +70,7 @@ defineExpose({
|
||||||
<template>
|
<template>
|
||||||
<n-card
|
<n-card
|
||||||
:title="$t('launch_log')"
|
:title="$t('launch_log')"
|
||||||
|
:bordered="false"
|
||||||
class="content-container flex-box-v"
|
class="content-container flex-box-v"
|
||||||
content-style="display: flex;flex-direction: column; overflow: hidden;">
|
content-style="display: flex;flex-direction: column; overflow: hidden;">
|
||||||
<n-form :disabled="data.loading" class="flex-item" inline>
|
<n-form :disabled="data.loading" class="flex-item" inline>
|
||||||
|
|
Loading…
Reference in New Issue