src/components/services/Generic.vue

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