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

src/views/Jyh/Home/index.vue

@@ -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">
+              <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="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>