feat: 调整页面样式
This commit is contained in:
parent
43e8635e7f
commit
8bfbe6f7df
|
@ -1,52 +0,0 @@
|
||||||
<script setup lang='ts'>
|
|
||||||
import { SvgIcon } from '@/components/common'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
text: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Emit {
|
|
||||||
(e: 'click',): void
|
|
||||||
(e: 'edit',): void
|
|
||||||
(e: 'delete',): void
|
|
||||||
}
|
|
||||||
|
|
||||||
defineProps<Props>()
|
|
||||||
|
|
||||||
const emit = defineEmits<Emit>()
|
|
||||||
|
|
||||||
function handleClick(event: Event) {
|
|
||||||
emit('click')
|
|
||||||
event.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleEdit() {
|
|
||||||
emit('edit')
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDelete() {
|
|
||||||
emit('delete')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<a
|
|
||||||
class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
|
|
||||||
@click="handleClick"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<SvgIcon icon="ri:message-3-line" />
|
|
||||||
</span>
|
|
||||||
<div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
|
|
||||||
<span>{{ text }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-10 flex visible right-1">
|
|
||||||
<button class="p-1" @click="handleEdit">
|
|
||||||
<SvgIcon icon="ri:edit-line" />
|
|
||||||
</button>
|
|
||||||
<button class="p-1" @click="handleDelete">
|
|
||||||
<SvgIcon icon="ri:delete-bin-line" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
|
@ -9,7 +9,7 @@ defineProps<Props>()
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
|
<div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
|
||||||
<span class="leading-relaxed whitespace-pre-wrap" :class="[{ 'text-red-400': error }]">
|
<span class="leading-relaxed whitespace-pre-wrap" :class="[{ 'text-red-500': error }]">
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue