mirror of https://gitee.com/godoos/godoos.git
7 changed files with 1029 additions and 875 deletions
File diff suppressed because it is too large
@ -1,399 +1,419 @@ |
|||||
<template> |
<template> |
||||
<div |
<div class="wintmp_outer dragwin" :class="{ |
||||
class="wintmp_outer dragwin" |
topwin: istop, |
||||
:class="{ |
max: windowInfo.state == WindowStateEnum.maximize, |
||||
topwin: istop, |
min: windowInfo.state == WindowStateEnum.minimize, |
||||
max: windowInfo.state == WindowStateEnum.maximize, |
fullscreen: windowInfo.state == WindowStateEnum.fullscreen, |
||||
min: windowInfo.state == WindowStateEnum.minimize, |
noframe: !windowInfo.frame, |
||||
fullscreen: windowInfo.state == WindowStateEnum.fullscreen, |
disable: windowInfo.disable, |
||||
noframe: !windowInfo.frame, |
}" :style="customerStyle" @touchstart.passive="onFocus" @mousedown="onFocus" ref="$win_outer" v-dragable> |
||||
disable: windowInfo.disable, |
|
||||
}" |
|
||||
:style="customerStyle" |
|
||||
@touchstart.passive="onFocus" |
|
||||
@mousedown="onFocus" |
|
||||
ref="$win_outer" |
|
||||
v-dragable |
|
||||
> |
|
||||
<!-- 窗口标题栏 --> |
<!-- 窗口标题栏 --> |
||||
<div |
<div class="wintmp_uper" @contextmenu.prevent v-if="!isMobileDevice()"> |
||||
class="wintmp_uper" |
|
||||
@contextmenu.prevent |
|
||||
> |
|
||||
<MenuBar :browser-window="browserWindow"></MenuBar> |
<MenuBar :browser-window="browserWindow"></MenuBar> |
||||
</div> |
</div> |
||||
|
<van-nav-bar v-else left-text="返回" left-arrow @click-left="onClickLeft" fixed> |
||||
<div |
<template #title> |
||||
class="wintmp_main" |
<div class="title"> |
||||
:class="{ resizeing: resizemode != 'null', 'saveFileMain':browserWindow.windowInfo.footer}" |
<FileIcon :icon="browserWindow.windowInfo.icon" /> |
||||
@mousedown.stop="predown" |
{{ browserWindow.windowInfo.title }} |
||||
@touchstart.stop.passive="predown" |
</div> |
||||
@contextmenu.stop.prevent |
</template> |
||||
> |
</van-nav-bar> |
||||
<div |
|
||||
class="content-mask" |
<div class="wintmp_main" |
||||
v-if="!istop && typeof browserWindow.content === 'string'" |
:class="{ resizeing: resizemode != 'null', 'saveFileMain': browserWindow.windowInfo.footer }" |
||||
></div> |
@mousedown.stop="predown" @touchstart.stop.passive="predown" @contextmenu.stop.prevent> |
||||
|
<div class="content-mask" v-if="!istop && typeof browserWindow.content === 'string'"></div> |
||||
<WindowInner :win="browserWindow"></WindowInner> |
<WindowInner :win="browserWindow"></WindowInner> |
||||
</div> |
</div> |
||||
<!-- 使用 v-for 生成拖拽边界 --> |
<!-- 使用 v-for 生成拖拽边界 --> |
||||
<div |
<div v-for="border in dragBorders" :key="border.type" :class="[ |
||||
v-for="border in dragBorders" |
border.class, |
||||
:key="border.type" |
'win_drag_border', |
||||
:class="[ |
{ isChoseMode: resizemode == border.type }, |
||||
border.class, |
border.cursorClass, |
||||
'win_drag_border', |
]" v-if="resizable" draggable="false" @mousedown.stop.prevent="startScale($event, border.type)" |
||||
{ isChoseMode: resizemode == border.type }, |
@touchstart.stop.passive="startScale($event, border.type)"></div> |
||||
border.cursorClass, |
<div class="wintmp_footer" v-if="browserWindow.windowInfo.footer"> |
||||
]" |
<MenuFooter :browser-window="browserWindow" @translateSavePath="translateSavePath"></MenuFooter> |
||||
v-if="resizable" |
</div> |
||||
draggable="false" |
|
||||
@mousedown.stop.prevent="startScale($event, border.type)" |
|
||||
@touchstart.stop.passive="startScale($event, border.type)" |
|
||||
></div> |
|
||||
<div class="wintmp_footer" v-if="browserWindow.windowInfo.footer"> |
|
||||
<MenuFooter :browser-window="browserWindow" @translateSavePath="translateSavePath"></MenuFooter> |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { useSystem } from "@/system"; |
import { useSystem } from "@/system"; |
||||
import { emitEvent } from "@/system/event";"" |
import { emitEvent } from "@/system/event"; "" |
||||
import { |
import { |
||||
BrowserWindow, |
BrowserWindow, |
||||
WindowStateEnum, |
WindowStateEnum, |
||||
} from "@/system/window/BrowserWindow"; |
} from "@/system/window/BrowserWindow"; |
||||
import { ScaleElement } from "@/system/window/dom/ScaleElement"; |
import { ScaleElement } from "@/system/window/dom/ScaleElement"; |
||||
import { vDragable } from "@/system/window/MakeDragable"; |
import { vDragable } from "@/system/window/MakeDragable"; |
||||
import { |
import { |
||||
computed, |
computed, |
||||
onMounted, |
onMounted, |
||||
onUnmounted, |
onUnmounted, |
||||
provide, |
provide, |
||||
ref, |
ref, |
||||
UnwrapNestedRefs, |
UnwrapNestedRefs, |
||||
} from "vue"; |
} from "vue"; |
||||
import { useChooseStore } from "@/stores/choose"; |
import { useChooseStore } from "@/stores/choose"; |
||||
import eventBus from '@/system/event/eventBus' |
import eventBus from '@/system/event/eventBus' |
||||
|
import { isMobileDevice } from "@/util/device"; |
||||
const sys = useSystem(); |
|
||||
const props = defineProps<{ |
const onClickLeft = () => { |
||||
browserWindow: UnwrapNestedRefs<BrowserWindow>; |
if (choose.isExist(props.browserWindow.windowInfo.componentID)) { |
||||
}>(); |
choose.closeSaveFile(props.browserWindow.windowInfo.componentID) |
||||
|
|
||||
|
|
||||
const browserWindow = props.browserWindow; |
|
||||
const windowInfo = browserWindow.windowInfo; |
|
||||
// const temp = reactive(browserWindow) |
|
||||
provide("browserWindow", browserWindow); |
|
||||
provide("system", sys); |
|
||||
const choose = useChooseStore() |
|
||||
|
|
||||
function translateSavePath (path: string, name?: string) { |
|
||||
if (browserWindow.windowInfo.footer) { |
|
||||
const pos = choose.saveFileContent.findIndex((item: any) => { |
|
||||
return item.componentID == browserWindow.windowInfo.componentID |
|
||||
}) |
|
||||
if (pos == -1) return |
|
||||
if (path && path !== '') { |
|
||||
choose.saveFileContent[pos].filePath = path |
|
||||
} else if (name && name !== '') { |
|
||||
choose.saveFileContent[pos].fileName = name |
|
||||
eventBus.emit('saveFile', choose.saveFileContent[pos] ) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
provide('translateSavePath', translateSavePath) |
|
||||
|
|
||||
function predown() { |
|
||||
browserWindow.moveTop(); |
|
||||
emitEvent("window.content.click", browserWindow); |
|
||||
} |
} |
||||
|
props.browserWindow.destroy(); |
||||
const customerStyle = ref<NonNullable<unknown>>({}); |
} |
||||
|
|
||||
function onFocus(e: MouseEvent | TouchEvent): void { |
const sys = useSystem(); |
||||
browserWindow?.moveTop(); |
const props = defineProps<{ |
||||
if (windowInfo.state === WindowStateEnum.maximize) { |
browserWindow: UnwrapNestedRefs<BrowserWindow>; |
||||
if (e instanceof MouseEvent) { |
}>(); |
||||
e.preventDefault(); |
|
||||
e.stopPropagation(); |
|
||||
} |
const browserWindow = props.browserWindow; |
||||
|
if (isMobileDevice()) browserWindow.maximize() |
||||
|
const windowInfo = browserWindow.windowInfo; |
||||
|
console.log(windowInfo, 'windowInfo') |
||||
|
// const temp = reactive(browserWindow) |
||||
|
provide("browserWindow", browserWindow); |
||||
|
provide("system", sys); |
||||
|
const choose = useChooseStore() |
||||
|
|
||||
|
function translateSavePath(path: string, name?: string) { |
||||
|
if (browserWindow.windowInfo.footer) { |
||||
|
const pos = choose.saveFileContent.findIndex((item: any) => { |
||||
|
return item.componentID == browserWindow.windowInfo.componentID |
||||
|
}) |
||||
|
if (pos == -1) return |
||||
|
if (path && path !== '') { |
||||
|
choose.saveFileContent[pos].filePath = path |
||||
|
} else if (name && name !== '') { |
||||
|
choose.saveFileContent[pos].fileName = name |
||||
|
eventBus.emit('saveFile', choose.saveFileContent[pos]) |
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
const istop = computed(() => windowInfo.istop); |
provide('translateSavePath', translateSavePath) |
||||
|
|
||||
onMounted(() => { |
function predown() { |
||||
customerStyle.value = { |
browserWindow.moveTop(); |
||||
width: computed(() => windowInfo.width + "px"), |
emitEvent("window.content.click", browserWindow); |
||||
height: computed(() => windowInfo.height + "px"), |
} |
||||
left: computed(() => windowInfo.x + "px"), |
|
||||
top: computed(() => windowInfo.y + "px"), |
const customerStyle = ref<NonNullable<unknown>>({}); |
||||
zIndex: computed(() => { |
|
||||
if (windowInfo.alwaysOnTop) { |
function onFocus(e: MouseEvent | TouchEvent): void { |
||||
return 9999; |
browserWindow?.moveTop(); |
||||
} |
if (windowInfo.state === WindowStateEnum.maximize) { |
||||
return windowInfo.zindex; |
if (e instanceof MouseEvent) { |
||||
}), |
e.preventDefault(); |
||||
backgroundColor: computed(() => windowInfo.backgroundColor), |
e.stopPropagation(); |
||||
}; |
|
||||
}); |
|
||||
|
|
||||
const resizable = ref(windowInfo.resizable); |
|
||||
const resizemode = ref("null"); |
|
||||
let scaleAble: ScaleElement; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
scaleAble = new ScaleElement( |
|
||||
resizemode, |
|
||||
windowInfo.width, |
|
||||
windowInfo.height, |
|
||||
windowInfo.x, |
|
||||
windowInfo.y |
|
||||
); |
|
||||
scaleAble.onResize( |
|
||||
(width: number, height: number, x: number, y: number) => { |
|
||||
windowInfo.width = width || windowInfo.width; |
|
||||
windowInfo.height = height || windowInfo.height; |
|
||||
windowInfo.x = x || windowInfo.x; |
|
||||
windowInfo.y = y || windowInfo.y; |
|
||||
browserWindow.emit( |
|
||||
"resize", |
|
||||
windowInfo.width, |
|
||||
windowInfo.height |
|
||||
); |
|
||||
} |
|
||||
); |
|
||||
}); |
|
||||
|
|
||||
function startScale(e: MouseEvent | TouchEvent, dire: string) { |
|
||||
console.log(e); |
|
||||
if (windowInfo.disable) { |
|
||||
return; |
|
||||
} |
} |
||||
scaleAble?.startScale( |
|
||||
e, |
|
||||
dire, |
|
||||
windowInfo.x, |
|
||||
windowInfo.y, |
|
||||
windowInfo.width, |
|
||||
windowInfo.height |
|
||||
); |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
|
const istop = computed(() => windowInfo.istop); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
customerStyle.value = { |
||||
|
width: computed(() => windowInfo.width + "px"), |
||||
|
height: computed(() => windowInfo.height + "px"), |
||||
|
left: computed(() => windowInfo.x + "px"), |
||||
|
top: computed(() => windowInfo.y + "px"), |
||||
|
zIndex: computed(() => { |
||||
|
if (windowInfo.alwaysOnTop) { |
||||
|
return 9999; |
||||
|
} |
||||
|
return windowInfo.zindex; |
||||
|
}), |
||||
|
backgroundColor: computed(() => windowInfo.backgroundColor), |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
const resizable = ref(windowInfo.resizable); |
||||
|
const resizemode = ref("null"); |
||||
|
let scaleAble: ScaleElement; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
scaleAble = new ScaleElement( |
||||
|
resizemode, |
||||
|
windowInfo.width, |
||||
|
windowInfo.height, |
||||
|
windowInfo.x, |
||||
|
windowInfo.y |
||||
|
); |
||||
|
scaleAble.onResize( |
||||
|
(width: number, height: number, x: number, y: number) => { |
||||
|
windowInfo.width = width || windowInfo.width; |
||||
|
windowInfo.height = height || windowInfo.height; |
||||
|
windowInfo.x = x || windowInfo.x; |
||||
|
windowInfo.y = y || windowInfo.y; |
||||
|
browserWindow.emit( |
||||
|
"resize", |
||||
|
windowInfo.width, |
||||
|
windowInfo.height |
||||
|
); |
||||
|
} |
||||
|
); |
||||
|
}); |
||||
|
|
||||
onUnmounted(() => { |
function startScale(e: MouseEvent | TouchEvent, dire: string) { |
||||
scaleAble.unMount(); |
console.log(e); |
||||
}); |
if (windowInfo.disable) { |
||||
|
return; |
||||
const dragBorders = [ |
} |
||||
{ type: "r", class: "right_border", cursorClass: "ew-resize" }, |
scaleAble?.startScale( |
||||
{ type: "b", class: "bottom_border", cursorClass: "ns-resize" }, |
e, |
||||
{ type: "l", class: "left_border", cursorClass: "ew-resize" }, |
dire, |
||||
{ type: "t", class: "top_border", cursorClass: "ns-resize" }, |
windowInfo.x, |
||||
{ |
windowInfo.y, |
||||
type: "rb", |
windowInfo.width, |
||||
class: "right_bottom_border", |
windowInfo.height |
||||
cursorClass: "nwse-resize", |
); |
||||
}, |
} |
||||
{ type: "lb", class: "left_bottom_border", cursorClass: "nesw-resize" }, |
|
||||
{ type: "lt", class: "left_top_border", cursorClass: "nwse-resize" }, |
onUnmounted(() => { |
||||
{ type: "rt", class: "right_top_border", cursorClass: "nesw-resize" }, |
scaleAble.unMount(); |
||||
]; |
}); |
||||
|
|
||||
|
const dragBorders = [ |
||||
|
{ type: "r", class: "right_border", cursorClass: "ew-resize" }, |
||||
|
{ type: "b", class: "bottom_border", cursorClass: "ns-resize" }, |
||||
|
{ type: "l", class: "left_border", cursorClass: "ew-resize" }, |
||||
|
{ type: "t", class: "top_border", cursorClass: "ns-resize" }, |
||||
|
{ |
||||
|
type: "rb", |
||||
|
class: "right_bottom_border", |
||||
|
cursorClass: "nwse-resize", |
||||
|
}, |
||||
|
{ type: "lb", class: "left_bottom_border", cursorClass: "nesw-resize" }, |
||||
|
{ type: "lt", class: "left_top_border", cursorClass: "nwse-resize" }, |
||||
|
{ type: "rt", class: "right_top_border", cursorClass: "nesw-resize" }, |
||||
|
]; |
||||
</script> |
</script> |
||||
<style> |
<style> |
||||
.dragwin { |
.dragwin { |
||||
position: absolute; |
position: absolute; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
} |
} |
||||
</style> |
</style> |
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.wintmp_outer { |
.wintmp_outer { |
||||
position: absolute; |
position: absolute; |
||||
padding: 0; |
padding: 0; |
||||
margin: 0; |
margin: 0; |
||||
// left: 0; |
// left: 0; |
||||
// top: 0; |
// top: 0; |
||||
// min-width: 800px; |
// min-width: 800px; |
||||
width: max-content; |
width: max-content; |
||||
height: max-content; |
height: max-content; |
||||
// min-height: 650px; |
// min-height: 650px; |
||||
border-radius: 10px; |
border-radius: 10px; |
||||
|
overflow: hidden; |
||||
|
background-color: #fff; |
||||
|
border: var(--window-border); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
// box-shadow: var(--window-box-shadow); |
||||
|
// border-radius: var(--window-border-radius); |
||||
|
.wintmp_main { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
// background-color: rgb(255, 255, 255); |
||||
overflow: hidden; |
overflow: hidden; |
||||
background-color: #fff; |
contain: content; |
||||
border: var(--window-border); |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
// box-shadow: var(--window-box-shadow); |
|
||||
// border-radius: var(--window-border-radius); |
|
||||
.wintmp_main { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
// background-color: rgb(255, 255, 255); |
|
||||
overflow: hidden; |
|
||||
contain: content; |
|
||||
} |
|
||||
.wintmp_footer { |
|
||||
position: relative; |
|
||||
} |
|
||||
} |
|
||||
.saveFileMain { |
|
||||
:deep(.main) { |
|
||||
height: calc(100% - 60px); |
|
||||
} |
|
||||
} |
|
||||
.topwin { |
|
||||
// border: 1px solid #0078d7; |
|
||||
// box-shadow: var(--window-top-box-shadow); |
|
||||
} |
} |
||||
|
|
||||
.icon { |
.wintmp_footer { |
||||
width: 12px; |
position: relative; |
||||
height: 12px; |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.max { |
.saveFileMain { |
||||
position: absolute; |
:deep(.main) { |
||||
left: 0 !important; |
height: calc(100% - 60px); |
||||
top: 0 !important; |
|
||||
width: 100% !important; |
|
||||
height: 100% !important; |
|
||||
transition: left 0.1s ease-in-out, top 0.1s ease-in-out, |
|
||||
width 0.1s ease-in-out, height 0.1s ease-in-out; |
|
||||
} |
|
||||
.disable { |
|
||||
.wintmp_footer, |
|
||||
.wintmp_uper, |
|
||||
.wintmp_main { |
|
||||
pointer-events: none; |
|
||||
user-select: none; |
|
||||
box-shadow: none; |
|
||||
} |
|
||||
} |
} |
||||
.min { |
} |
||||
visibility: hidden; |
|
||||
display: none; |
.topwin { |
||||
} |
// border: 1px solid #0078d7; |
||||
|
// box-shadow: var(--window-top-box-shadow); |
||||
.fullscreen { |
} |
||||
// 将声明移动到嵌套规则之上 |
|
||||
position: fixed; |
.icon { |
||||
left: 0 !important; |
width: 12px; |
||||
top: 0 !important; |
height: 12px; |
||||
width: 100% !important; |
} |
||||
height: 100% !important; |
|
||||
z-index: 205 !important; |
.max { |
||||
border: none; |
position: absolute; |
||||
.wintmp_uper { |
left: 0 !important; |
||||
display: none; |
top: 0 !important; |
||||
} |
width: 100% !important; |
||||
} |
height: 100% !important; |
||||
|
transition: left 0.1s ease-in-out, top 0.1s ease-in-out, |
||||
.noframe { |
width 0.1s ease-in-out, height 0.1s ease-in-out; |
||||
border: none; |
} |
||||
|
|
||||
|
.disable { |
||||
|
|
||||
|
.wintmp_footer, |
||||
|
.wintmp_uper, |
||||
|
.wintmp_main { |
||||
|
pointer-events: none; |
||||
|
user-select: none; |
||||
box-shadow: none; |
box-shadow: none; |
||||
.wintmp_uper { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.transparent { |
|
||||
background-color: transparent; |
|
||||
|
|
||||
.wintmp_main { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
|
|
||||
.wintmp_uper { |
|
||||
background-color: rgba(255, 255, 255, 0.774); |
|
||||
} |
|
||||
} |
} |
||||
|
} |
||||
.win_drag_border { |
|
||||
position: absolute; |
.min { |
||||
background-color: rgba(0, 0, 0, 0); |
visibility: hidden; |
||||
} |
display: none; |
||||
|
} |
||||
.right_border { |
|
||||
cursor: ew-resize; |
.fullscreen { |
||||
right: -12px; |
// 将声明移动到嵌套规则之上 |
||||
width: 16px; |
position: fixed; |
||||
height: calc(100% - 4px); |
left: 0 !important; |
||||
} |
top: 0 !important; |
||||
|
width: 100% !important; |
||||
.bottom_border { |
height: 100% !important; |
||||
cursor: ns-resize; |
z-index: 205 !important; |
||||
bottom: -12px; |
border: none; |
||||
width: calc(100% - 4px); |
|
||||
height: 16px; |
.wintmp_uper { |
||||
} |
display: none; |
||||
|
|
||||
.left_border { |
|
||||
cursor: ew-resize; |
|
||||
left: -12px; |
|
||||
width: 16px; |
|
||||
height: calc(100% - 4px); |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.top_border { |
.noframe { |
||||
cursor: ns-resize; |
border: none; |
||||
top: -12px; |
box-shadow: none; |
||||
width: calc(100% - 4px); |
|
||||
height: 16px; |
|
||||
} |
|
||||
|
|
||||
.left_top_border { |
.wintmp_uper { |
||||
cursor: nwse-resize; |
display: none; |
||||
left: -12px; |
|
||||
top: -12px; |
|
||||
width: 16px; |
|
||||
height: 16px; |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.right_top_border { |
.transparent { |
||||
cursor: nesw-resize; |
background-color: transparent; |
||||
right: -12px; |
|
||||
top: -12px; |
|
||||
width: 16px; |
|
||||
height: 16px; |
|
||||
} |
|
||||
|
|
||||
.left_bottom_border { |
.wintmp_main { |
||||
cursor: nesw-resize; |
background-color: transparent; |
||||
left: -12px; |
|
||||
bottom: -12px; |
|
||||
width: 16px; |
|
||||
height: 16px; |
|
||||
} |
} |
||||
|
|
||||
.right_bottom_border { |
.wintmp_uper { |
||||
cursor: nwse-resize; |
background-color: rgba(255, 255, 255, 0.774); |
||||
right: -12px; |
|
||||
bottom: -12px; |
|
||||
width: 16px; |
|
||||
height: 16px; |
|
||||
} |
} |
||||
|
} |
||||
.isChoseMode { |
|
||||
width: 100vw; |
.win_drag_border { |
||||
height: 100vh; |
position: absolute; |
||||
position: fixed; |
background-color: rgba(0, 0, 0, 0); |
||||
left: 0; |
} |
||||
top: 0; |
|
||||
|
.right_border { |
||||
|
cursor: ew-resize; |
||||
|
right: -12px; |
||||
|
width: 16px; |
||||
|
height: calc(100% - 4px); |
||||
|
} |
||||
|
|
||||
|
.bottom_border { |
||||
|
cursor: ns-resize; |
||||
|
bottom: -12px; |
||||
|
width: calc(100% - 4px); |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.left_border { |
||||
|
cursor: ew-resize; |
||||
|
left: -12px; |
||||
|
width: 16px; |
||||
|
height: calc(100% - 4px); |
||||
|
} |
||||
|
|
||||
|
.top_border { |
||||
|
cursor: ns-resize; |
||||
|
top: -12px; |
||||
|
width: calc(100% - 4px); |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.left_top_border { |
||||
|
cursor: nwse-resize; |
||||
|
left: -12px; |
||||
|
top: -12px; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.right_top_border { |
||||
|
cursor: nesw-resize; |
||||
|
right: -12px; |
||||
|
top: -12px; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.left_bottom_border { |
||||
|
cursor: nesw-resize; |
||||
|
left: -12px; |
||||
|
bottom: -12px; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.right_bottom_border { |
||||
|
cursor: nwse-resize; |
||||
|
right: -12px; |
||||
|
bottom: -12px; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.isChoseMode { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
|
||||
|
.resizeing { |
||||
|
user-select: none; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.content-mask { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
z-index: 100; |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 768px) { |
||||
|
.wintmp_outer { |
||||
|
height: vh(100); |
||||
|
padding-top: vh(40); |
||||
} |
} |
||||
|
|
||||
.resizeing { |
.title { |
||||
user-select: none; |
height: vh(46); |
||||
pointer-events: none; |
display: flex; |
||||
} |
align-items: center; |
||||
|
|
||||
.content-mask { |
.icon { |
||||
position: absolute; |
width: 1em; |
||||
width: 100%; |
height: 1em; |
||||
height: 100%; |
} |
||||
background-color: rgba(0, 0, 0, 0); |
|
||||
z-index: 100; |
|
||||
} |
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
@ -1,24 +1,26 @@ |
|||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'; |
import * as ElementPlusIconsVue from "@element-plus/icons-vue" |
||||
//svg插件需要配置代码
|
//svg插件需要配置代码
|
||||
import ElementPlus from 'element-plus'; |
import ElementPlus from "element-plus" |
||||
import 'element-plus/dist/index.css'; |
import "element-plus/dist/index.css" |
||||
import { createApp } from "vue"; |
import { createApp } from "vue" |
||||
import screenShort from "vue-web-screen-shot"; |
import screenShort from "vue-web-screen-shot" |
||||
import App from "./App.vue"; |
import App from "./App.vue" |
||||
import './assets/windows10.scss'; |
import "./assets/windows10.scss" |
||||
import { i18n } from './i18n/index.ts'; |
import { i18n } from "./i18n/index.ts" |
||||
import pinia from './stores/index.ts'; |
import pinia from "./stores/index.ts" |
||||
import router from './system/router'; |
import router from "./system/router" |
||||
|
import { NavBar } from "vant" |
||||
|
import "vant/lib/index.css" |
||||
const app = createApp(App) |
const app = createApp(App) |
||||
|
|
||||
app.use(router) |
app.use(router) |
||||
app.use(ElementPlus) |
app.use(ElementPlus) |
||||
app.use(pinia) |
app.use(pinia) |
||||
app.use(i18n) |
app.use(i18n) |
||||
|
app.use(NavBar) |
||||
app.use(screenShort, { enableWebRtc: true }) |
app.use(screenShort, { enableWebRtc: true }) |
||||
|
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
||||
app.component(key, component) |
app.component(key, component) |
||||
} |
} |
||||
app.mount("#app"); |
app.mount("#app") |
||||
|
Loading…
Reference in new issue