<template> <div class="hpaizdrt" :style="bg"> <img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/> <span class="name">{{ instance.name }}</span> </div> </template> <script lang="ts" setup> import { } from 'vue'; const props = defineProps<{ instance: any; // TODO }>(); const themeColor = props.instance.themeColor || '#777777'; const bg = { background: `linear-gradient(90deg, ${themeColor}, ${themeColor + '00'})` }; </script> <style lang="scss" scoped> .hpaizdrt { $height: 1.1rem; height: $height; border-radius: 4px 0 0 4px; overflow: hidden; color: #fff; > .icon { height: 100%; } > .name { margin-left: 4px; line-height: $height; font-size: 0.9em; vertical-align: top; font-weight: bold; } } </style>