header-layout.vue
1.82 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
69
<template>
<section class="header-tools">
<div
v-for="(item, index) in items"
:class="item.enabled ? 'button' : 'button disabled'"
:key="index"
@click="onClick(item.key)"
>
<div class="img-wrapper" :id="item.key">
<img :src="item.icon" alt="" />
</div>
<span> {{ $t(`${item.key}`) }}</span>
</div>
</section>
</template>
<script setup>
// import { storeToRefs } from 'pinia';
import { useCanvasHeaderLayoutStore } from '@/views/stores/header/useCanvasHeaderLayoutStore';
const store = useCanvasHeaderLayoutStore();
const { items } = store;
</script>
<style lang="less">
.header-tools {
display: flex;
margin-left: 1px;
gap: 4px;
.button {
all: unset;
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 8px 8px 6px;
border-radius: 4px;
pointer-events: initial;
cursor: pointer;
&:hover {
background-color: rgba(0, 0, 0, 0.08);
}
span {
font-size: 14px;
font-weight: 550;
letter-spacing: -0.05px;
color: rgb(51, 51, 51);
text-align: center;
margin-top: 1px;
margin-left: 4px;
}
.img-wrapper {
display: inline-block;
overflow: hidden;
width: 18px;
height: 18px !important;
}
&.disabled {
overflow: hidden;
pointer-events: none;
span {
color: #b3bac1;
}
img {
transform: translateX(-100%);
filter: drop-shadow(18px 0 @color-button-disabled) !important;
}
cursor: default;
}
}
}
</style>