zzh
abfca7a21a
Ship customer portal and marketing pages, user edit drawer with employee archive, IDE employee numbers, channel config refactor, and related nginx/route updates. Co-authored-by: Cursor <cursoragent@cursor.com>
61 lines
1.1 KiB
Vue
61 lines
1.1 KiB
Vue
<template>
|
|
<div class="h5-empty" :class="{ 'h5-empty--inline': inline }">
|
|
<div class="h5-empty__mark" aria-hidden="true">
|
|
<component :is="icon" />
|
|
</div>
|
|
<p v-if="text">{{ text }}</p>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { Component } from 'vue';
|
|
|
|
defineOptions({ name: 'H5EmptyState' });
|
|
|
|
defineProps<{
|
|
icon: Component;
|
|
text?: string;
|
|
inline?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.h5-empty {
|
|
padding: 48px 12px;
|
|
text-align: center;
|
|
|
|
p {
|
|
margin: 0;
|
|
color: #86909c;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
&--inline {
|
|
padding: 24px 0 8px;
|
|
}
|
|
}
|
|
|
|
.h5-empty__mark {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin: 0 auto 14px;
|
|
border-radius: 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26px;
|
|
color: var(--app-primary-color);
|
|
background: color-mix(in srgb, var(--app-primary-color) 12%, #fff);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.h5-empty--inline .h5-empty__mark {
|
|
width: 44px;
|
|
height: 44px;
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|