fix list item style
This commit is contained in:
@@ -6,6 +6,7 @@
|
|||||||
block
|
block
|
||||||
:options="filterOptions"
|
:options="filterOptions"
|
||||||
@change="switchFilter"
|
@change="switchFilter"
|
||||||
|
v-entrance-transition
|
||||||
/>
|
/>
|
||||||
<t-pull-down-refresh
|
<t-pull-down-refresh
|
||||||
v-model="isRefreshing"
|
v-model="isRefreshing"
|
||||||
@@ -13,19 +14,14 @@
|
|||||||
@refresh="refresh"
|
@refresh="refresh"
|
||||||
@scrolltolower="loadMore"
|
@scrolltolower="loadMore"
|
||||||
>
|
>
|
||||||
<t-cell-group v-if="pageResult.list.length" class="items" theme="card">
|
<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line" theme="card">
|
||||||
<t-swipe-cell
|
<t-swipe-cell
|
||||||
v-for="item in pageResult.list"
|
v-for="(item, index) in pageResult.list"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="item"
|
class="item"
|
||||||
|
v-entrance-transition="70 + index * 30"
|
||||||
>
|
>
|
||||||
<t-cell
|
<t-cell arrow hover @click="toDetail(item)">
|
||||||
:description="getPreview(item)"
|
|
||||||
:note="getTime(item)"
|
|
||||||
arrow
|
|
||||||
hover
|
|
||||||
@click="toDetail(item)"
|
|
||||||
>
|
|
||||||
<template #leftIcon>
|
<template #leftIcon>
|
||||||
<div class="icon" :class="{ unread: isUnread(item) }">
|
<div class="icon" :class="{ unread: isUnread(item) }">
|
||||||
<t-icon name="notification" size="1.25rem" />
|
<t-icon name="notification" size="1.25rem" />
|
||||||
@@ -34,14 +30,19 @@
|
|||||||
<template #title>
|
<template #title>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span v-text="getSubject(item)" />
|
<span v-text="getSubject(item)" />
|
||||||
<t-tag
|
|
||||||
v-if="isUnread(item)"
|
|
||||||
class="unread-label"
|
|
||||||
theme="danger"
|
|
||||||
size="small"
|
|
||||||
>未读</t-tag>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<template #description>
|
||||||
|
<pass-time-label :timestamp="item.createdAt || item.sendAt" underline />
|
||||||
|
</template>
|
||||||
|
<template #note>
|
||||||
|
<t-tag
|
||||||
|
v-if="filterMode === 'all' && isUnread(item)"
|
||||||
|
class="unread-label"
|
||||||
|
theme="danger"
|
||||||
|
size="small"
|
||||||
|
>未读</t-tag>
|
||||||
|
</template>
|
||||||
</t-cell>
|
</t-cell>
|
||||||
<template #right>
|
<template #right>
|
||||||
<t-button
|
<t-button
|
||||||
@@ -65,7 +66,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Time } from "timi-web";
|
import { PassTimeLabel } from "timi-web";
|
||||||
import { NotifyAPI, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web-api";
|
import { NotifyAPI, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web-api";
|
||||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||||
import { Message } from "@/utils/message";
|
import { Message } from "@/utils/message";
|
||||||
@@ -291,15 +292,6 @@ function getSubject(item: NotifyDetail): string {
|
|||||||
return item.subject?.trim() || "站内通知";
|
return item.subject?.trim() || "站内通知";
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPreview(item: NotifyDetail): string {
|
|
||||||
const text = item.content?.replace(/\s+/g, " ").trim() || "无通知内容";
|
|
||||||
return 80 < text.length ? `${text.slice(0, 80)}...` : text;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTime(item: NotifyDetail): string {
|
|
||||||
return Time.toPassedDateTime(item.createdAt || item.sendAt) || "-";
|
|
||||||
}
|
|
||||||
|
|
||||||
async function toDetail(item: NotifyDetail): Promise<void> {
|
async function toDetail(item: NotifyDetail): Promise<void> {
|
||||||
if (!item.id) {
|
if (!item.id) {
|
||||||
return;
|
return;
|
||||||
@@ -356,27 +348,6 @@ onUnmounted(() => {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
:deep(.t-cell:after) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.t-cell__title) {
|
|
||||||
flex: 1 1 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.t-cell__description) {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.t-cell__note) {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user