src/components/services/Generic.vue

   1 <script>
   2 export default {};
   3 </script>
   4
   5 <style></style>
   6 */
   7
   8 <script>
   9 export default {};
  10 </script>
  11
  12 <style></style>
  13
  14 <template>
  15   <div>
  16     <div
  17       class="card"
  18       :style="`background-color:${item.background};`"
  19       :class="item.class"
  20     >
  21       <a :href="item.url" :target="item.target" rel="noreferrer">
  22         <div class="card-content">
  23           <div class="media">
  24             <div v-if="item.logo" class="media-left">
  25               <figure class="image is-48x48">
  26                 <img :src="item.logo" :alt="`${item.name} logo`" />
  27               </figure>
  28             </div>
  29             <div v-if="item.icon" class="media-left">
  30               <figure class="image is-48x48">
  31                 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
  32               </figure>
  33             </div>
  34             <div class="media-content">
  35               <p class="title is-4">{{ item.name }}</p>
  36               <p class="subtitle is-6">{{ item.subtitle }}</p>
  37             </div>
  38           </div>
  39           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  40             <strong class="tag-text">#{{ item.tag }}</strong>
  41           </div>
  42         </div>
  43       </a>
  44     </div>
  45   </div>
  46 </template>
  47
  48 <script>
  49 export default {
  50   name: "Generic",
  51   props: {
  52     item: Object,
  53   },
  54 };
  55 </script>
  56
  57 <style scoped lang="scss">
  58 .media-left img {
  59   max-height: 100%;
  60 }
  61 </style>