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
| <template>
| <div class="avue-logo">
| <transition name="fade">
| <span v-if="getScreen(isCollapse)" class="avue-logo_subtitle" key="0">
| <img class="logo-img" src="/img/logo.png" />
| </span>
| </transition>
| <transition-group name="fade">
| <template v-if="getScreen(!isCollapse)">
| <span class="logo-title" key="1">{{ website.indexTitle }} </span>
| </template>
| </transition-group>
| </div>
| </template>
|
| <script>
| import { mapGetters } from 'vuex';
|
| export default {
| name: 'logo',
| data() {
| return {};
| },
| created() {},
| computed: {
| ...mapGetters(['isCollapse']),
| },
| methods: {},
| };
| </script>
| <style scoped>
| .logo-title {
| font-size: 20px;
| background-image: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #2c77f1);
| -webkit-background-clip: text;
| -webkit-text-fill-color: transparent;
| font-weight: 700;
| padding-left: 30px;
| }
| .logo-img {
| width: 40px;
| margin-top: 5px;
| }
| </style>
|
|
