root/financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加IonDatetime、IonList、IonSelect和IonSelectOption组件支持；优化新闻展示样式和数据格式化

Browse Source
This commit is contained in:
Seven
2026-01-20 03:32:01 +07:00
parent 9710c80a1b
commit 2b991ad26a
3 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/home/index.vue
View File

@@ -105,6 +105,10 @@ function handleQuickAction(action: Action) {
function handleNewsClick(news: NewsItem) {
console.log("查看新闻:", news.title);
}
onMounted(() => {
fetchNews();
});
</script>
<template>
@@ -199,11 +203,11 @@ function handleNewsClick(news: NewsItem) {
<div
v-for="item in data"
:key="item.id"
class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
class="bg-white rounded-2xl overflow-hidden card cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
@click="handleNewsClick(item)"
>
<div class="relative w-28 h-28 shrink-0 overflow-hidden">
<img v-if="item.thumbnailId" :src="item.thumbnail" :alt="item.title" class="w-full h-full object-cover">
<img v-if="item.thumbnailId" :src="item.thumbnailId" :alt="item.title" class="w-full h-full object-cover">
<div class="news-badge absolute top-2 left-2 bg-linear-to-br from-[#c41e3a] to-[#8b1a2e] text-white px-2 py-0.5 rounded-lg text-xs font-semibold shadow-lg">
热点
</div>
@@ -220,7 +224,7 @@ function handleNewsClick(news: NewsItem) {
<div class="flex items-center gap-4 text-xs text-[#999] mt-2">
<span class="flex items-center gap-1">
<ion-icon :icon="timeOutline" class="text-sm" />
{{ item.createdAt }}
{{ useDateFormat(item.createdAt, 'YYYY-MM-DD') }}
</span>
<span class="flex items-center gap-1">
<ion-icon :icon="eyeOutline" class="text-sm" />
@@ -241,6 +245,9 @@ function handleNewsClick(news: NewsItem) {
</template>
<style lang='css' scoped>
.card {
box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.05);
}
/* 新闻标签渐变 */
.news-badge {
box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);

10
src/views/service/index.vue
View File

@@ -73,22 +73,22 @@ onMounted(() => {
@click="handleNewsClick(item)"
>
<div class="relative w-full h-45 overflow-hidden">
<img v-if="item.thumbnailId" :src="item.thumbnail" :alt="item.title" class="w-full h-full object-cover">
<div class="news-badge absolute top-3 left-3 bg-linear-to-br from-[#78d0ff] to-[#1879aa] text-white px-3 py-1 rounded-xl text-xs font-semibold shadow-lg">
<img v-if="item.thumbnailId" :src="item.thumbnailId" :alt="item.title" class="w-full h-full object-cover">
<div class="news-badge absolute top-3 left-3 bg-linear-to-br from-[#ff7878] to-[#aa1818] text-white px-3 py-1 rounded-xl text-xs font-semibold shadow-lg">
热点
</div>
</div>
<div class="p-4">
<h4 class="text-base font-bold text-[#1a1a1a] mb-2 leading-snug">
<div class="text-xl font-bold text-[#1a1a1a] mb-2 leading-snug">
{{ item.title }}
</h4>
</div>
<p class="text-sm text-[#666] mb-3 leading-relaxed line-clamp-2">
{{ item.summary }}
</p>
<div class="flex items-center gap-4 text-xs text-[#999]">
<span class="flex items-center gap-1">
<ion-icon :icon="timeOutline" class="text-sm" />
{{ item.createdAt }}
{{ useDateFormat(item.createdAt, 'YYYY-MM-DD') }}
</span>
<span class="flex items-center gap-1">
<ion-icon :icon="eyeOutline" class="text-sm" />