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>
|
||||
<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 />
|
||||
</span>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue