红头文件

src/views/index.vue

@@ -299,7 +299,9 @@
         </div>
 
         <aside class="space-y-4">
-          <section class="side-card side-card--notice rounded-md p-2">
+          <section
+            class="side-card side-card--notice side-card--documents rounded-md p-2"
+          >
             <div class="side-card__header w-[95%] ml-[8px]">
               <div class="notice-tabs">
                 <button
@@ -317,11 +319,11 @@
               </div>
               <button
                 type="button"
-                class="side-card__more"
+                class="side-card__more side-card__more--documents"
                 @click="handleNoticeMoreClick"
               >
                 {{ $t("common.more") }}
-                <Icon icon="mingcute:right-line" class="text-[18px]" />
+                <span class="side-card__more-arrows">&gt;&gt;&gt;</span>
               </button>
             </div>
 
@@ -1969,6 +1971,180 @@ onUnmounted(() => {
     inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
+.side-card--documents {
+  min-height: 310px;
+  padding: 16px 36px 18px !important;
+  border: 0;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 14px 32px rgba(72, 126, 190, 0.1);
+}
+
+.side-card--documents .side-card__header {
+  width: 100% !important;
+  min-height: 34px;
+  margin-left: 0 !important;
+  padding: 0;
+  border-bottom: 2px solid #b8ccef;
+}
+
+.side-card--documents .notice-tabs {
+  height: 34px;
+  gap: 24px;
+}
+
+.side-card--documents .notice-tab {
+  min-width: 72px;
+  height: 34px;
+  padding: 0;
+  border-radius: 0;
+  color: #4b6e9b;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.side-card--documents .notice-tab--active {
+  color: #0c5aee;
+}
+
+.side-card--documents .notice-tab--active::before {
+  left: 0;
+  bottom: -2px;
+  width: 72px;
+  height: 3px;
+  transform: none;
+  background: #0c5aee;
+  box-shadow: none;
+}
+
+.side-card--documents .side-card__more--documents {
+  gap: 6px;
+  color: #0c5aee;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.side-card--documents .side-card__more-arrows {
+  font-size: 13px;
+  letter-spacing: 0;
+}
+
+.side-card--documents > .space-y-2 {
+  padding: 4px 0 0 !important;
+}
+
+.side-card--documents .notice-item {
+  padding: 16px 18px 15px;
+  border-bottom: 2px dashed #bfd0e9;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.side-card--documents .notice-item:hover {
+  background: rgba(228, 240, 255, 0.44);
+  box-shadow: none;
+  transform: none;
+}
+
+.side-card--documents .notice-item__desc {
+  color: #3f6291;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.45;
+}
+
+.side-card--documents .date {
+  margin-top: 4px;
+  color: #9aa9bb !important;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+:global([data-theme="dark"] .side-card--documents) {
+  min-height: auto;
+  padding: 8px !important;
+  border: 1px solid var(--portal-line);
+  border-radius: 14px;
+  background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
+  box-shadow:
+    var(--portal-shadow),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+:global([data-theme="dark"] .side-card--documents .side-card__header) {
+  width: 95% !important;
+  min-height: 20px;
+  margin-left: 8px !important;
+  padding-right: 10px;
+  border-bottom: 1px solid var(--portal-line);
+}
+
+:global([data-theme="dark"] .side-card--documents .notice-tabs) {
+  height: auto;
+  gap: 8px;
+}
+
+:global([data-theme="dark"] .side-card--documents .notice-tab) {
+  height: 25px;
+  min-width: 68px;
+  padding: 0 14px;
+  border-radius: 999px;
+  color: var(--portal-subtitle);
+  font-weight: 400;
+}
+
+:global([data-theme="dark"] .side-card--documents .notice-tab--active) {
+  color: var(--portal-title);
+}
+
+:global([data-theme="dark"] .side-card--documents .notice-tab--active::before) {
+  left: 50%;
+  bottom: -2px;
+  width: 90%;
+  height: 2px;
+  transform: translateX(-50%);
+  background: linear-gradient(
+    to right,
+    #5f3abf 0%,
+    #7044c5 30%,
+    #7044c5 40%,
+    rgba(255, 255, 255, 0.7) 50%,
+    #7044c5 60%,
+    #7044c5 70%,
+    #5f3abf 100%
+  );
+  box-shadow: 0 0 12px rgba(112, 120, 255, 0.95);
+}
+
+:global([data-theme="dark"] .side-card--documents .side-card__more--documents) {
+  color: var(--portal-subtitle);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+:global([data-theme="dark"] .side-card--documents > .space-y-2) {
+  padding: 8px !important;
+  padding-top: 12px !important;
+}
+
+:global([data-theme="dark"] .side-card--documents .notice-item) {
+  padding: 8px 14px;
+  border-bottom: 0;
+  border-radius: 12px;
+  box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
+}
+
+:global([data-theme="dark"] .side-card--documents .notice-item:hover) {
+  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
+  transform: translateY(-1px);
+}
+
+:global([data-theme="dark"] .side-card--documents .notice-item__desc) {
+  color: var(--portal-text);
+  font-size: 13px;
+  font-weight: 400;
+}
+
 .side-card--content {
   padding-top: 10px;
 }