Переход на quasar

This commit is contained in:
Book Pauk
2020-02-02 23:15:59 +07:00
parent 6b077e67db
commit 4b270bce8b
9 changed files with 21 additions and 35 deletions

View File

@@ -1,12 +1,13 @@
<template>
<div ref="main" class="main" @click="close" @mouseup="onMouseUp" @mousemove="onMouseMove">
<div ref="windowBox" class="windowBox" @click.stop>
<div class="window">
<div ref="header" class="header" @mousedown.prevent.stop="onMouseDown"
<div ref="main" class="main xyfit absolute" @click="close" @mouseup="onMouseUp" @mousemove="onMouseMove">
<div ref="windowBox" class="xyfit absolute flex no-wrap" @click.stop>
<div class="window flexfit column no-wrap">
<div ref="header" class="header row justify-end" @mousedown.prevent.stop="onMouseDown"
@touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove">
<span class="header-text"><slot name="header"></slot></span>
<span class="close-button" @mousedown.stop @click="close"><i class="el-icon-close"></i></span>
<span class="header-text col"><slot name="header"></slot></span>
<span class="close-button row justify-center items-center" @mousedown.stop @click="close"><q-icon name="o_close" size="18px"/></span>
</div>
<slot></slot>
</div>
</div>
@@ -116,23 +117,10 @@ class Window extends Vue {
<style scoped>
.main {
position: absolute;
width: 100%;
height: 100%;
z-index: 50;
}
.windowBox {
position: absolute;
display: flex;
height: 100%;
width: 100%;
}
.window {
flex: 1;
display: flex;
flex-direction: column;
margin: 10px;
background-color: #ffffff;
border: 3px double black;
@@ -141,15 +129,12 @@ class Window extends Vue {
}
.header {
display: flex;
justify-content: flex-end;
background: linear-gradient(to bottom right, green, #59B04F);
align-items: center;
height: 30px;
}
.header-text {
flex: 1;
margin-left: 10px;
margin-right: 10px;
color: #E8E8E8;
@@ -157,9 +142,6 @@ class Window extends Vue {
}
.close-button {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
cursor: pointer;
@@ -168,4 +150,5 @@ class Window extends Vue {
.close-button:hover {
background-color: #69C05F;
}
</style>