index.vue
1.3 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
<!-- -->
<template>
<div class="title">
<!-- 软件logo预留位置 -->
<div style="-webkit-app-region: drag;"></div>
<!-- 菜单栏位置 -->
<div ></div>
<!-- 中间标题位置 -->
<div style="-webkit-app-region: drag;"></div>
<div class="controls-container">
<div class="windows-icon-bg">
<svg-icon icon-class="mini"></svg-icon>
</div>
<div class="windows-icon-bg">
<svg-icon v-if="mix" icon-class="mix"></svg-icon>
<svg-icon v-else icon-class="mini"></svg-icon>
</div>
<div class="windows-icon-bg">
<svg-icon icon-class="close"></svg-icon>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
mix: false
}),
components: {},
mounted() {},
methods: {}
};
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.title {
width: 100%;
height: 40px;
background-color: #ffffff;
color: rgba(60, 60, 60, 0.6);
.controls-container {
display: flex;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
position: relative;
z-index: 3000;
-webkit-app-region: no-drag;
height: 100%;
width: 138px;
margin-left: auto;
.windows-icon-bg {
display: inline-block;
-webkit-app-region: no-drag;
height: 100%;
width: 33.34%;
}
}
}
</style>