]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <div> | |
3 | <div class="card"> | |
e0a72b7d IB |
4 | <a class="card-arrow" v-bind:class="subcardClass" v-on:click="subCardActive = !subCardActive" v-if="item.links && item.links.length > 0"> |
5 | <i style="font-size: 20px" class="fa fa-arrow-circle-down" v-bind:class="arrowClass"></i> | |
6 | </a> | |
7 | <a style="background-color: gray" :href="item.url" :target="item.target" rel="noreferrer"> | |
b9c5fcf0 BW |
8 | <div class="card-content"> |
9 | <div class="media"> | |
10 | <div v-if="item.logo" class="media-left"> | |
11 | <figure class="image is-48x48"> | |
3bf0edcf | 12 | <img :src="item.logo" :alt="`${item.name} logo`" /> |
b9c5fcf0 BW |
13 | </figure> |
14 | </div> | |
15 | <div v-if="item.icon" class="media-left"> | |
16 | <figure class="image is-48x48"> | |
17 | <i style="font-size: 35px;" :class="item.icon"></i> | |
18 | </figure> | |
19 | </div> | |
20 | <div class="media-content"> | |
21 | <p class="title is-4">{{ item.name }}</p> | |
22 | <p class="subtitle is-6">{{ item.subtitle }}</p> | |
23 | </div> | |
24 | </div> | |
25 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | |
26 | <strong class="tag-text">#{{ item.tag }}</strong> | |
27 | </div> | |
28 | </div> | |
29 | </a> | |
e0a72b7d IB |
30 | <ul class="subcard" v-bind:class="subcardClass"> |
31 | <Subcard | |
32 | v-for="link in item.links" | |
33 | v-bind:link="link" | |
34 | :key="link.url" | |
35 | /> | |
36 | </ul> | |
b9c5fcf0 BW |
37 | </div> |
38 | </div> | |
39 | </template> | |
40 | ||
41 | <script> | |
e0a72b7d IB |
42 | import Subcard from "./Subcard.vue"; |
43 | ||
b9c5fcf0 BW |
44 | export default { |
45 | name: "Service", | |
e0a72b7d IB |
46 | components: { |
47 | Subcard, | |
48 | }, | |
b9c5fcf0 BW |
49 | props: { |
50 | item: Object, | |
51 | }, | |
e0a72b7d IB |
52 | data: function() { |
53 | return { | |
54 | subCardActive: false, | |
55 | } | |
56 | }, | |
57 | computed: { | |
58 | arrowClass: function() { | |
59 | return { | |
60 | "fa-arrow-circle-down": !this.subCardActive, | |
61 | "fa-arrow-circle-up": this.subCardActive | |
62 | } | |
63 | }, | |
64 | subcardClass: function() { | |
65 | return { | |
66 | active: this.subCardActive | |
67 | } | |
68 | } | |
69 | } | |
b9c5fcf0 BW |
70 | }; |
71 | </script> | |
72 | ||
73 | <style scoped lang="scss"></style> |