canvas-tools.vue
1.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<template>
<section>
<div class="left-side">
<div class="left-part">
<FunctionalToolbar />
</div>
</div>
<div class="right-side">
<div class="side-part">
<Views />
<MoldelList />
</div>
</div>
<div class="modal">
<UploadModal />
<SettingModal />
<AlignerParamsModal />
</div>
<div class="inprogress">
<InProgress />
<IsLoading />
</div>
</section>
</template>
<script setup>
import UploadModal from '@/components/upload-modal.vue';
import SettingModal from '@/components/setting-modal/index.vue';
import Views from './components/views-angle/views-angle.vue';
import MoldelList from './components/model-list/model-list.vue';
import FunctionalToolbar from './components/functional-toolbar/functional-toolbar.vue';
import InProgress from './components/in-progress/progress.vue';
import IsLoading from './components/in-progress/loading.vue';
import AlignerParamsModal from './components/modal/alignerParams-modal.vue';
</script>
<style lang="less">
.right-side {
position: absolute;
z-index: 200;
right: 16px;
top: calc(12px * 943 / 1008);
width: 228px;
.side-part {
display: flex;
flex-direction: column;
gap: calc(8px * 943 / 1008);
}
}
.left-side {
pointer-events: none;
position: absolute;
top: calc(12px * 943 / 1008);
margin-left: 16px;
display: flex;
align-items: flex-start;
width: fit-content;
pointer-events: none;
z-index: 200;
.left-part {
width: 100%;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
align-items: flex-start;
visibility: initial;
pointer-events: none;
}
}
</style>