42f364809a
update all single-line text truncation usages across components from the custom ellipsis-1 class to Tailwind's native truncate utility for consistent styling
40 lines
942 B
Vue
40 lines
942 B
Vue
<template>
|
|
<CardShell variant="detail">
|
|
<div class="visual-detail__header flex flex-items-center px-16 border-bottom-F1F5F9">
|
|
<div class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center"
|
|
@click="$emit('back')">
|
|
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
|
|
</div>
|
|
<div class="visual-detail__title flex-full color-1E293B text-[14px] font-900 truncate">{{ title }}</div>
|
|
<BadgePill v-if="tag" :label="tag" :tone="tone" />
|
|
</div>
|
|
<slot />
|
|
</CardShell>
|
|
</template>
|
|
|
|
<script setup>
|
|
import CardShell from "./CardShell.vue";
|
|
import BadgePill from "./BadgePill.vue";
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
tag: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
tone: {
|
|
type: String,
|
|
default: "green",
|
|
},
|
|
});
|
|
|
|
defineEmits(["back"]);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|