新闻中心

src/views/index.vue

@@ -529,14 +529,18 @@
           </section>
 
           <section
-            class="side-card side-card--content p-2 rounded-md"
+            class="side-card side-card--content side-card--news-panel p-2 rounded-md"
             :style="{ minHeight: '180px' }"
           >
             <div class="side-card__header w-[90%] ml-[15px]">
               <div class="news notice-badge pb-2">{{ newsPanelTitle }}</div>
-              <button type="button" class="side-card__more" @click="goNews">
+              <button
+                type="button"
+                class="side-card__more side-card__more--news-panel"
+                @click="goNews"
+              >
                 {{ $t("common.more") }}
-                <Icon icon="mingcute:right-line" class="text-[18px]" />
+                <span class="side-card__more-arrows">&gt;&gt;&gt;</span>
               </button>
             </div>
             <div class="space-y-2 p-4 pt-2">
@@ -2149,6 +2153,150 @@ onUnmounted(() => {
   padding-top: 10px;
 }
 
+.side-card--news-panel {
+  min-height: 320px !important;
+  padding: 18px 38px 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--news-panel .side-card__header {
+  width: 100% !important;
+  min-height: 34px;
+  margin-left: 0 !important;
+  padding: 0;
+  border-bottom: 2px solid #b8ccef;
+}
+
+.side-card--news-panel .notice-badge {
+  justify-content: flex-start;
+  height: 34px;
+  min-width: 76px;
+  padding: 0 !important;
+  border-bottom: 0;
+  color: #0c5aee;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.side-card--news-panel .side-card__more--news-panel {
+  gap: 6px;
+  color: #0c5aee;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.side-card--news-panel > .space-y-2 {
+  padding: 24px 0 0 !important;
+}
+
+.side-card--news-panel .news-mini {
+  min-height: 74px;
+  padding: 16px 16px 16px 18px;
+  border: 1px solid #a9c8f8;
+  border-left: 0;
+  border-radius: 14px;
+  background: linear-gradient(90deg, #edf6ff 0%, #ffffff 100%);
+  box-shadow: none;
+}
+
+.side-card--news-panel .news-mini + .news-mini {
+  margin-top: 14px;
+}
+
+.side-card--news-panel .news-mini:hover {
+  background: linear-gradient(90deg, #e5f2ff 0%, #ffffff 100%);
+  border-color: #8db8f7;
+  box-shadow: none;
+  transform: none;
+}
+
+.side-card--news-panel .news-mini .line-clamp-1 {
+  color: #155fc2;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.side-card--news-panel .news-mini .text-\[\#9cadc0\] {
+  color: #4f6f96 !important;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+:global([data-theme="dark"] .side-card--news-panel) {
+  min-height: 180px !important;
+  padding: 8px !important;
+  padding-top: 10px !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--news-panel .side-card__header) {
+  width: 90% !important;
+  min-height: 20px;
+  margin-left: 15px !important;
+  padding-right: 10px;
+  border-bottom: 1px solid var(--portal-line);
+}
+
+:global([data-theme="dark"] .side-card--news-panel .notice-badge) {
+  justify-content: center;
+  height: 25px;
+  min-width: 70px;
+  padding: 0 0 8px !important;
+  color: var(--portal-title);
+  font-size: 14px;
+  font-weight: 400;
+  border-bottom: 2px solid var(--portal-accent);
+}
+
+:global(
+  [data-theme="dark"] .side-card--news-panel .side-card__more--news-panel
+) {
+  color: var(--portal-subtitle);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+:global([data-theme="dark"] .side-card--news-panel > .space-y-2) {
+  padding: 16px !important;
+  padding-top: 8px !important;
+}
+
+:global([data-theme="dark"] .side-card--news-panel .news-mini) {
+  min-height: 0;
+  padding: 5px 12px;
+  border: 1px solid var(--portal-line);
+  border-radius: 12px;
+  background: var(--portal-card-4);
+  box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
+}
+
+:global([data-theme="dark"] .side-card--news-panel .news-mini:hover) {
+  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
+  transform: translateY(-1px);
+}
+
+:global([data-theme="dark"] .side-card--news-panel .news-mini .line-clamp-1) {
+  color: var(--portal-text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+:global(
+  [data-theme="dark"] .side-card--news-panel .news-mini .text-\[\#9cadc0\]
+) {
+  color: #9cadc0 !important;
+  font-size: 12px;
+  font-weight: 400;
+}
+
 .side-card--todo-panel {
   min-height: 320px !important;
   padding: 18px 38px 18px !important;
@@ -2445,6 +2593,26 @@ onUnmounted(() => {
   border-bottom: 2px solid var(--portal-accent);
 }
 
+.side-card--news-panel .news.notice-badge {
+  justify-content: flex-start;
+  height: 34px;
+  min-width: 76px;
+  padding: 0 !important;
+  border-bottom: 0;
+  color: #0c5aee;
+  font-weight: 800;
+}
+
+:global([data-theme="dark"] .side-card--news-panel .news.notice-badge) {
+  justify-content: center;
+  height: 25px;
+  min-width: 70px;
+  padding: 0 0 8px !important;
+  border-bottom: 2px solid var(--portal-accent);
+  color: var(--portal-title);
+  font-weight: 400;
+}
+
 .notice-tabs {
   display: inline-flex;
   align-items: center;