cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可信代码库V2版-首页展示页面原型开发

Browse Source
This commit is contained in:
fmk1023
2025-11-19 17:39:35 +08:00
parent f1f05c11f6
commit 0d266e8a03
1 changed files with 179 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
src/views/Jyh/Home/index.vue
View File

@@ -2,7 +2,7 @@
<div class="home-container"> <div class="home-container">
<div class="home-content"> <div class="home-content">
<div class="home-title"> <div class="home-title">
<img src="@/assets/imgs/logo.png" alt="logo" /> <img src="@/assets/imgs/logo.png" alt="logo"/>
<h1>可信开源代码库</h1> <h1>可信开源代码库</h1>
</div> </div>
<div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }"> <div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
@@ -44,7 +44,7 @@
<template #append> <template #append>
<div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch"> <div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch">
<span class="close-isopen">高级筛选</span> <span class="close-isopen">高级筛选</span>
<!-- <d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>--> <!-- <d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>-->
<d-icon class="close-isopen" :rotate="rotate" name="icon-chevron-down-2"></d-icon> <d-icon class="close-isopen" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
</div> </div>
</template> </template>
@@ -64,9 +64,11 @@
<!-- 顶部功能按钮 --> <!-- 顶部功能按钮 -->
<d-row :gutter="16" class="mb-8 top-btn"> <d-row :gutter="16" class="mb-8 top-btn">
<div style="cursor: pointer" v-for="item in topButtons" :key="item.name" @click="handleButtonClick(item)"> <div style="cursor: pointer" v-for="item in topButtons" :key="item.name" @click="handleButtonClick(item)">
<div style="width: 84px;height: 84px;flex-direction: column;padding: 12px;margin: 0 12px" class="bg-white rounded-lg shadow-md flex items-center justify-center mb-2"> <div style="width: 84px;height: 84px;flex-direction: column;padding: 12px;margin: 0 12px"
class="bg-white rounded-lg shadow-md flex items-center justify-center mb-2">
<div> <div>
<img style="width: 32px;height: 32px;margin-bottom: 4px" :src="item.icon" class="text-blue-600 text-xl"></img> <img style="width: 32px;height: 32px;margin-bottom: 4px" :src="item.icon"
class="text-blue-600 text-xl"></img>
</div> </div>
<div class="text-sm font-medium">{{ item.name }}</div> <div class="text-sm font-medium">{{ item.name }}</div>
</div> </div>
@@ -111,7 +113,8 @@
<d-col style="height: 320px" :span="10"> <d-col style="height: 320px" :span="10">
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4"> <div style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
<div class="section-title">AI+安全核心能力 <div class="section-title">AI+安全核心能力
<router-link :to="{ name: 'aihome' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link> <router-link :to="{ name: 'aihome' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 >
</router-link>
</div> </div>
<d-row :gutter="16" class="ai-capability-row"> <d-row :gutter="16" class="ai-capability-row">
<d-col :span="8" v-for="(item, index) in aiCapabilities" :key="index"> <d-col :span="8" v-for="(item, index) in aiCapabilities" :key="index">
@@ -136,7 +139,8 @@
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4 mb-4"> <div style="height: 100%" class="bg-white rounded-xl shadow-md p-4 mb-4">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">团队与成果</h3> <h3 class="text-lg font-bold">团队与成果</h3>
<router-link :to="{ name: 'OurTeam' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link> <router-link :to="{ name: 'OurTeam' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 >
</router-link>
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<h4 class="font-medium mb-2">顶尖安全团队</h4> <h4 class="font-medium mb-2">顶尖安全团队</h4>
@@ -159,69 +163,80 @@
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4"> <div style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">最新动态</h3> <h3 class="text-lg font-bold">最新动态</h3>
<router-link :to="{ name: 'Insights' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link> <router-link :to="{ name: 'Insights' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 >
</router-link>
</div> </div>
<div class="space-y-3">
<div class="flex gap-2" v-for="news in latestNews" :key="news.year"> <div style="overflow: auto; height: calc(100% - 46px);">
<span class="bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded">{{ news.year }}</span> <d-timeline direction="vertical" center>
<div class="flex-1"> <d-timeline-item
v-for="(news, index) in latestNews"
:key="index"
:time="news.year"
dot-color="#ff6384"
line-color="#e5e7eb"
class="timeline-item"
>
<!-- 时间线内容区域，保留原有样式结构 -->
<div class="timeline-content">
<p class="font-medium">{{ news.title }}</p> <p class="font-medium">{{ news.title }}</p>
<p class="text-xs text-gray-500">{{ news.desc }}</p> <p class="text-xs text-gray-500">{{ news.desc }}</p>
</div> </div>
</div> </d-timeline-item>
</d-timeline>
</div> </div>
</div> </div>
</d-col> </d-col>
</d-row> </d-row>
</div> </div>
<!-- <d-button v-if="isLogin" @click="check" ref="origin" icon="share" class="batch-btn">批量检索</d-button>--> <!-- <d-button v-if="isLogin" @click="check" ref="origin" icon="share" class="batch-btn">批量检索</d-button>-->
<!-- <div class="home-information" v-if="infoList.length > 0">--> <!-- <div class="home-information" v-if="infoList.length > 0">-->
<!-- <div class="info-title">--> <!-- <div class="info-title">-->
<!-- <div class="sub-title">--> <!-- <div class="sub-title">-->
<!-- <img src="@/assets/imgs/home/informIcon@2x.png" />--> <!-- <img src="@/assets/imgs/home/informIcon@2x.png" />-->
<!-- <span>预警公告</span>--> <!-- <span>预警公告</span>-->
<!-- </div>--> <!-- </div>-->
<!-- &lt;!&ndash; <a v-if="accountInfo.op_access_token" class="devui-link" @click="checkMore"--> <!-- &lt;!&ndash; <a v-if="accountInfo.op_access_token" class="devui-link" @click="checkMore"-->
<!-- >更多 <i class="icon icon-chevron-right-2"></i>--> <!-- >更多 <i class="icon icon-chevron-right-2"></i>-->
<!-- </a>--> <!-- </a>-->
<!-- <span v-else class="text-blue-500">查看更多，请先登录</span> &ndash;&gt;--> <!-- <span v-else class="text-blue-500">查看更多，请先登录</span> &ndash;&gt;-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="info-content">--> <!-- <div class="info-content">-->
<!-- <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">--> <!-- <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">-->
<!-- <d-timeline-item--> <!-- <d-timeline-item-->
<!-- v-for="(item, index) in infoList"--> <!-- v-for="(item, index) in infoList"-->
<!-- :key="index"--> <!-- :key="index"-->
<!-- :dot-color="item.dotColor"--> <!-- :dot-color="item.dotColor"-->
<!-- :line-color="'var(&#45;&#45;devui-form-control-line-hover)'"--> <!-- :line-color="'var(&#45;&#45;devui-form-control-line-hover)'"-->
<!-- >--> <!-- >-->
<!-- <template #default>--> <!-- <template #default>-->
<!-- <div class="flex items-center justify-between w-full">--> <!-- <div class="flex items-center justify-between w-full">-->
<!-- <div--> <!-- <div-->
<!-- class="cursor-pointer notice-content flex gap-2 items-center"--> <!-- class="cursor-pointer notice-content flex gap-2 items-center"-->
<!-- @click="openWarningDetail(item, index)"--> <!-- @click="openWarningDetail(item, index)"-->
<!-- >--> <!-- >-->
<!-- <span>{{ item.subject }}</span>--> <!-- <span>{{ item.subject }}</span>-->
<!-- <d-tag--> <!-- <d-tag-->
<!-- v-if="item.importance && tagMap[item.importance]"--> <!-- v-if="item.importance && tagMap[item.importance]"-->
<!-- :color="tagMap[item.importance].color"--> <!-- :color="tagMap[item.importance].color"-->
<!-- size="sm"--> <!-- size="sm"-->
<!-- >{{ tagMap[item.importance].text }}</d-tag--> <!-- >{{ tagMap[item.importance].text }}</d-tag-->
<!-- >--> <!-- >-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="time-container">--> <!-- <div class="time-container">-->
<!-- <d-icon name="icon-time"></d-icon>--> <!-- <d-icon name="icon-time"></d-icon>-->
<!-- {{ item.publishTime }}--> <!-- {{ item.publishTime }}-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </template>--> <!-- </template>-->
<!-- <template #time>--> <!-- <template #time>-->
<!-- <span></span>--> <!-- <span></span>-->
<!-- </template>--> <!-- </template>-->
<!-- </d-timeline-item>--> <!-- </d-timeline-item>-->
<!-- </d-timeline>--> <!-- </d-timeline>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
@@ -231,21 +246,22 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'; import {ref, onMounted, onBeforeUnmount, computed} from 'vue';
import { useRoute, useRouter } from 'vue-router'; import {useRoute, useRouter} from 'vue-router';
import { useAccount } from '@/utils/hooks/useAccount'; import {useAccount} from '@/utils/hooks/useAccount';
import AdvanceSearch from '@/components/AdvanceSearch/index.vue'; import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
import { getHomeNoticeList } from '@/api/jyh'; import {getHomeNoticeList} from '@/api/jyh';
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue'; import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
import { useGlobalInfoStore } from '@/stores/Global'; import {useGlobalInfoStore} from '@/stores/Global';
const { updateHeaderSearch } = useGlobalInfoStore();
const { accountInfo } = useAccount(); const {updateHeaderSearch} = useGlobalInfoStore();
import { useDiscussGetUserInfo } from '@/api/discussion/hook'; const {accountInfo} = useAccount();
import { DChart } from 'vue-devui/echarts'; import {useDiscussGetUserInfo} from '@/api/discussion/hook';
import { reactive } from 'vue'; import {DChart} from 'vue-devui/echarts';
import {reactive} from 'vue';
const lineOption = reactive({ const lineOption = reactive({
tooltip: { show: true, trigger: 'axis' }, tooltip: {show: true, trigger: 'axis'},
grid: { grid: {
left: '0%', left: '0%',
right: '3%', right: '3%',
@@ -255,23 +271,23 @@ const lineOption = reactive({
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['0', '30', '60', '90', '120', '150', '180', '210', '240'], data: ['0', '30', '60', '90', '120', '150', '180', '210', '240'],
axisLine: { lineStyle: { color: '#909399' } }, axisLine: {lineStyle: {color: '#909399'}},
axisTick: { show: false }, axisTick: {show: false},
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
max: 550, max: 550,
axisLine: { show: false }, axisLine: {show: false},
axisTick: { show: false }, axisTick: {show: false},
splitLine: { lineStyle: { color: '#eee' } }, splitLine: {lineStyle: {color: '#eee'}},
}, },
series: [ series: [
{ {
name: '实时威胁A', name: '实时威胁A',
data: [0, 150, 250, 200, 350, 400, 450, 500, 550], data: [0, 150, 250, 200, 350, 400, 450, 500, 550],
type: 'line', type: 'line',
itemStyle: { color: '#ff9f40' }, itemStyle: {color: '#ff9f40'},
lineStyle: { color: '#ff9f40' }, lineStyle: {color: '#ff9f40'},
symbol: 'circle', symbol: 'circle',
symbolSize: 6, symbolSize: 6,
}, },
@@ -279,8 +295,8 @@ const lineOption = reactive({
name: '实时威胁B', name: '实时威胁B',
data: [0, 100, 200, 150, 300, 350, 400, 450, 500], data: [0, 100, 200, 150, 300, 350, 400, 450, 500],
type: 'line', type: 'line',
itemStyle: { color: '#36a2eb' }, itemStyle: {color: '#36a2eb'},
lineStyle: { color: '#36a2eb' }, lineStyle: {color: '#36a2eb'},
symbol: 'circle', symbol: 'circle',
symbolSize: 6, symbolSize: 6,
}, },
@@ -288,23 +304,23 @@ const lineOption = reactive({
}); });
const pieOption = reactive({ const pieOption = reactive({
tooltip: { show: true, trigger: 'item' }, tooltip: {show: true, trigger: 'item'},
series: [ series: [
{ {
title: '态势感知', title: '态势感知',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
data: [ data: [
{ name: '态势感知', value: 34, itemStyle: { color: '#ff6384' } }, {name: '态势感知', value: 34, itemStyle: {color: '#ff6384'}},
{ name: '实时威胁', value: 33, itemStyle: { color: '#36a2eb' } }, {name: '实时威胁', value: 33, itemStyle: {color: '#36a2eb'}},
{ name: '其他', value: 33, itemStyle: { color: '#ffce56' } }, {name: '其他', value: 33, itemStyle: {color: '#ffce56'}},
], ],
label: { label: {
show: true, show: true,
formatter: '{b}: {d}%', formatter: '{b}: {d}%',
position: 'center', position: 'center',
}, },
labelLine: { show: true }, labelLine: {show: true},
}, },
], ],
}); });
@@ -317,7 +333,7 @@ const position = ref(['right-start', 'right-end']);
const industryOptions = ref(['通信', '军工', '金融', '能源']); const industryOptions = ref(['通信', '军工', '金融', '能源']);
const searchType = ref('软件'); const searchType = ref('软件');
const searchOptions = ref(['软件']); const searchOptions = ref(['软件']);
const offset = ref({ mainAxis: 7, crossAxis: -10 }); const offset = ref({mainAxis: 7, crossAxis: -10});
const isKeepOpen = ref(true); const isKeepOpen = ref(true);
const isOpen = ref(false); const isOpen = ref(false);
const cateRotate = ref(0); const cateRotate = ref(0);
@@ -325,7 +341,7 @@ const infoList = ref([]);
const warningModalVisable = ref(false); const warningModalVisable = ref(false);
const currentWarning = ref(); const currentWarning = ref();
const { isLogin } = useDiscussGetUserInfo(); const {isLogin} = useDiscussGetUserInfo();
const homeSearch = ref(null); const homeSearch = ref(null);
const dropdownWidth = ref(0); const dropdownWidth = ref(0);
@@ -336,11 +352,11 @@ import aqzk from '@/assets/imgs/jyh/menu/可信治理.png'
import kxrj from '@/assets/imgs/jyh/menu/可信软件.png' import kxrj from '@/assets/imgs/jyh/menu/可信软件.png'
// 顶部功能按钮数据 // 顶部功能按钮数据
const topButtons = ref([ const topButtons = ref([
{ name: '安全智库', icon: aqzk }, {name: '安全智库', icon: aqzk},
{ name: '安全检测', icon: aqjc }, {name: '安全检测', icon: aqjc},
{ name: '安全情报', icon: aqqb}, {name: '安全情报', icon: aqqb},
{ name: '安全态势', icon: aqts }, {name: '安全态势', icon: aqts},
{ name: '智能引擎', icon: kxrj }, {name: '智能引擎', icon: kxrj},
]); ]);
// 按钮点击事件处理 // 按钮点击事件处理
@@ -363,7 +379,7 @@ const handleButtonClick = (item) => {
window.open(target, '_blank'); window.open(target, '_blank');
} else { } else {
// 其他按钮：路由跳转 // 其他按钮：路由跳转
router.push({ name: target }); router.push({name: target});
} }
}; };
@@ -394,16 +410,16 @@ const aiCapabilities = ref([
// 团队成员数据 // 团队成员数据
const teamMembers = ref([ const teamMembers = ref([
{ name: '主理', title: '安全专家/负责人' }, {name: '主理', title: '安全专家/负责人'},
{ name: '顾问', title: '企业安全专家' }, {name: '顾问', title: '企业安全专家'},
{ name: '架构', title: '技术架构专家' }, {name: '架构', title: '技术架构专家'},
]); ]);
// 最新动态数据 // 最新动态数据
const latestNews = ref([ const latestNews = ref([
{ year: '2024', title: '中国头安全实验室等合作的智能决策模型授奖', desc: '智能决策模型在多领域安全决策中表现卓越，获行业权威奖项。', more: true }, {year: '2024', title: '中国头安全实验室等合作的智能决策模型授奖', desc: '智能决策模型在多领域安全决策中表现卓越，获行业权威奖项。', more: true},
{ year: '2023', title: '智能检测引擎从一定论到再超越的与证明', desc: '2024年深度优化检测，在极端场景中达99.9%准确率，性能、智能、召回率再升级。', more: false }, {year: '2023', title: '智能检测引擎从一定论到再超越的与证明', desc: '2024年深度优化检测，在极端场景中达99.9%准确率，性能、智能、召回率再升级。', more: false},
{ year: '2023', title: '新闻网常务委员：邻区区委交换稿与证明', desc: '网络空间安全会议上，邻区、外防负责人、专家会首席等共论，包含新成果实证。', more: false }, {year: '2023', title: '新闻网常务委员：邻区区委交换稿与证明', desc: '网络空间安全会议上，邻区、外防负责人、专家会首席等共论，包含新成果实证。', more: false},
]); ]);
const tagMap = { const tagMap = {
@@ -454,7 +470,7 @@ const openAdvancedSearch = () => {
const check = () => { const check = () => {
router.push({ router.push({
name: 'Search', name: 'Search',
query: { tab: 'BatchVerify' } // 通过查询参数指定 Tab query: {tab: 'BatchVerify'} // 通过查询参数指定 Tab
}); });
}; };
@@ -515,7 +531,7 @@ const search = () => {
const onCategoryChange = (event) => { const onCategoryChange = (event) => {
searchType.value = event?.name || '软件'; searchType.value = event?.name || '软件';
globalInfo.updateHeaderSearch({ softwareName: softwareName.value, searchType: event.value }); globalInfo.updateHeaderSearch({softwareName: softwareName.value, searchType: event.value});
}; };
const onCateToggle = (event) => { const onCateToggle = (event) => {
@@ -523,7 +539,7 @@ const onCateToggle = (event) => {
}; };
const checkMore = () => { const checkMore = () => {
router.push({ name: 'PersonalCenter' }); router.push({name: 'PersonalCenter'});
}; };
const openWarningDetail = (event, index) => { const openWarningDetail = (event, index) => {
@@ -605,6 +621,7 @@ getNoticeList();
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
h1 { h1 {
font-size: xx-large; font-size: xx-large;
font-weight: bold; font-weight: bold;
@@ -693,12 +710,15 @@ getNoticeList();
img { img {
width: 20px; width: 20px;
} }
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.sub-title { .sub-title {
display: flex; display: flex;
gap: 8px; gap: 8px;
} }
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 10px; margin-left: 10px;
} }
@@ -741,6 +761,7 @@ getNoticeList();
width: 100%; width: 100%;
padding: 4px; padding: 4px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--devui-list-item-hover-bg, #f2f5fc); background-color: var(--devui-list-item-hover-bg, #f2f5fc);
color: var(--devui-list-item-hover-text, #526ecc); color: var(--devui-list-item-hover-text, #526ecc);
@@ -799,15 +820,19 @@ getNoticeList();
.text-lg { .text-lg {
font-size: 18px; font-size: 18px;
} }
.text-sm { .text-sm {
font-size: 14px; font-size: 14px;
} }
.text-xs { .text-xs {
font-size: 12px; font-size: 12px;
} }
.font-bold { .font-bold {
font-weight: 600; font-weight: 600;
} }
.font-medium { .font-medium {
font-weight: 500; font-weight: 500;
} }
@@ -816,18 +841,23 @@ getNoticeList();
.mb-8 { .mb-8 {
margin-bottom: 24px; margin-bottom: 24px;
} }
.p-4 { .p-4 {
padding: 16px; padding: 16px;
} }
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
.items-center { .items-center {
align-items: center; align-items: center;
} }
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
.dashboard-page { .dashboard-page {
//padding: 20px; //padding: 20px;
////background: #fff; ////background: #fff;
@@ -839,6 +869,7 @@ getNoticeList();
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
} }
.section-title { .section-title {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
@@ -847,9 +878,11 @@ getNoticeList();
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
a { a {
font-weight: 400; font-weight: 400;
} }
.more-link { .more-link {
font-size: 14px; font-size: 14px;
color: #409eff; color: #409eff;
@@ -902,20 +935,23 @@ getNoticeList();
.ai-capability-row { .ai-capability-row {
height: calc(100% - 46px); height: calc(100% - 46px);
.devui-col { .devui-col {
height: 100%; height: 100%;
} }
.capability-card { .capability-card {
height: 100%; height: 100%;
background: #fff; background: #f3f7f8;
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); border: 1px solid #323a4e;
text-align: center; text-align: center;
.capability-icon { .capability-icon {
text-align: center; text-align: center;
margin-bottom: 12px; margin-bottom: 12px;
img { img {
display: inline-block; display: inline-block;
width: 32px; width: 32px;
@@ -943,4 +979,38 @@ getNoticeList();
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
/* 时间线样式调整，保持与原有布局一致 */
:deep(.devui-timeline) {
--devui-timeline-item-padding: 0 0 24px 0; /* 调整项间距 */
}
:deep(.devui-timeline-item-time) {
/* 年份标签样式，与原有红色标签保持一致 */
background-color: #fee2e2; /* 浅红背景 */
color: #dc2626; /* 红色文字 */
font-size: 12px;
padding: 2px 6px;
border-radius: 4px;
min-width: 40px;
text-align: center;
}
:deep(.devui-timeline-item-data-left) {
flex: none;
}
.timeline-content {
margin-top: 4px; /* 与时间标签保持距离 */
}
.font-medium {
font-weight: 500;
margin-bottom: 4px; /* 标题与描述间距 */
}
.text-xs {
font-size: 12px;
line-height: 1.5; /* 描述文字行高 */
}
</style> </style>