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

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

@@ -64,9 +64,11 @@
<!-- 顶部功能按钮 -->
<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="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>
<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 class="text-sm font-medium">{{ item.name }}</div>
</div>
@@ -111,7 +113,8 @@
<d-col style="height: 320px" :span="10">
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
<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>
<d-row :gutter="16" class="ai-capability-row">
<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 class="flex justify-between items-center mb-4">
<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 class="flex flex-col items-center">
<h4 class="font-medium mb-2">顶尖安全团队</h4>
@@ -159,16 +163,27 @@
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
<div class="flex justify-between items-center mb-4">
<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 class="space-y-3">
<div class="flex gap-2" v-for="news in latestNews" :key="news.year">
<span class="bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded">{{ news.year }}</span>
<div class="flex-1">
<div style="overflow: auto; height: calc(100% - 46px);">
<d-timeline direction="vertical" center>
<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="text-xs text-gray-500">{{ news.desc }}</p>
</div>
</div>
</d-timeline-item>
</d-timeline>
</div>
</div>
</d-col>
@@ -238,6 +253,7 @@ import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
import {getHomeNoticeList} from '@/api/jyh';
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
import {useGlobalInfoStore} from '@/stores/Global';
const {updateHeaderSearch} = useGlobalInfoStore();
const {accountInfo} = useAccount();
import {useDiscussGetUserInfo} from '@/api/discussion/hook';
@@ -605,6 +621,7 @@ getNoticeList();
justify-content: center;
align-items: center;
gap: 20px;
h1 {
font-size: xx-large;
font-weight: bold;
@@ -693,12 +710,15 @@ getNoticeList();
img {
width: 20px;
}
display: flex;
justify-content: space-between;
.sub-title {
display: flex;
gap: 8px;
}
margin-bottom: 20px;
margin-left: 10px;
}
@@ -741,6 +761,7 @@ getNoticeList();
width: 100%;
padding: 4px;
cursor: pointer;
&:hover {
background-color: var(--devui-list-item-hover-bg, #f2f5fc);
color: var(--devui-list-item-hover-text, #526ecc);
@@ -799,15 +820,19 @@ getNoticeList();
.text-lg {
font-size: 18px;
}
.text-sm {
font-size: 14px;
}
.text-xs {
font-size: 12px;
}
.font-bold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
@@ -816,18 +841,23 @@ getNoticeList();
.mb-8 {
margin-bottom: 24px;
}
.p-4 {
padding: 16px;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.dashboard-page {
//padding: 20px;
////background: #fff;
@@ -839,6 +869,7 @@ getNoticeList();
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.section-title {
font-size: 18px;
font-weight: 600;
@@ -847,9 +878,11 @@ getNoticeList();
display: flex;
justify-content: space-between;
align-items: center;
a {
font-weight: 400;
}
.more-link {
font-size: 14px;
color: #409eff;
@@ -902,20 +935,23 @@ getNoticeList();
.ai-capability-row {
height: calc(100% - 46px);
.devui-col {
height: 100%;
}
.capability-card {
height: 100%;
background: #fff;
background: #f3f7f8;
border-radius: 8px;
padding: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
border: 1px solid #323a4e;
text-align: center;
.capability-icon {
text-align: center;
margin-bottom: 12px;
img {
display: inline-block;
width: 32px;
@@ -943,4 +979,38 @@ getNoticeList();
justify-content: 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>