📦 按要求修改

src/App.vue

@@ -11,9 +11,10 @@
     <NavBar />
     <main>
       <NuxtPage />
-      <LinkInfos />
     </main>
-    <Footer />
+    <Footer>
+      <LinkInfos showType="list" />
+    </Footer>
   </a-config-provider>
 </template>
 

src/assets/scss/main.scss

@@ -525,6 +525,13 @@ nav.main-nav {
     }
   }
 
+  .publishtime {
+    color: #999;
+    font-size: 14px;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
   .no-image,
   img {
     width: 100px;

src/components/Footer.vue

@@ -3,7 +3,13 @@
   <footer>
     <div class="container">
       <div class="row d-flex flex-row justify-content-center">
-        <div class="col col-sm-12 col-md-6 col-lg-4">
+        <div class="col col-12">
+          <slot />
+        </div>
+      </div>
+      <div class="row d-flex flex-row justify-content-center">
+        <div class="col col-sm-12 col-md-6 col-lg-6">
+
           <div class="footer-select">
             <select name="related-links-superior" id="related-links-superior" @change="handleLinkChange">
               <option value="">上级主管部门</option>

src/components/LinkInfos.vue

@@ -1,9 +1,20 @@
 <template>
-  <div class="link-infos">
+  <div :class="['link-infos', showType]">
     <div v-for="item in linkInfos" :key="item.name">
-      <img :src="item.icon" :alt="item.name" :class="{ large: item.large }" />
+      <img 
+        v-if="showType === 'float'"
+        :src="item.icon" 
+        :alt="item.name" 
+        :class="{ large: item.large }" 
+      />
+      <img 
+        v-else-if="showType === 'list'"
+        :src="item.url" 
+        :alt="item.name" 
+        :class="{ large: item.large }" 
+      />
       <span>{{ item.name }}</span>
-      <div class="popup">
+      <div v-if="showType === 'float'" class="popup">
         <img :src="item.url" :alt="item.name" />
       </div>
     </div>
@@ -20,6 +31,15 @@ import VideoUrl from '@/assets/images/link-infos/qrcode/sph.jpg';
 import DouyinUrl from '@/assets/images/link-infos/qrcode/dy.jpg';
 import XhsUrl from '@/assets/images/link-infos/qrcode/xhs.jpg';
 
+defineProps({
+  showType: {
+    type: String,
+    default: 'float',
+    validator: (value: string) => {
+      return ['float', 'list'].includes(value);
+    },
+  },
+});
 const linkInfos = ref([
   {
     name: '公众号',
@@ -60,6 +80,29 @@ const linkInfos = ref([
   gap: 10px;
   padding: 10px 0;
 
+  &.list {
+    position: relative;
+    background-color: transparent;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    padding: 10px 0;
+    width: auto;
+    left: unset;
+    right: unset;
+    bottom: unset;
+
+    > div {
+      > img {
+        width: 100px;
+        height: 100px;
+        object-fit: contain;
+      }
+    }
+  }
+
   > div {
     position: relative;
     display: flex;

src/pages/index.vue

@@ -69,10 +69,10 @@
           </div>
 
           <div class="d-flex flex-column col col-sm-12 col-md-6 col-lg-6 notices-list">
-            <div class="section-title">
+            <!-- <div  class="section-title">
               <div class="d-flex flex-row align-items-center">
                 <h2 id="notices-button" @click="currentTab = 'notices'" :class="{'active': currentTab === 'notices'}" class="button icon">通知公告</h2>
-                <!-- <h2 id="hot-news-button" @click="currentTab = 'hot'" :class="{'active': currentTab === 'hot'}" class="button icon">热点新闻</h2> -->
+                <h2 id="hot-news-button" @click="currentTab = 'hot'" :class="{'active': currentTab === 'hot'}" class="button icon">热点新闻</h2>
               </div>
               <router-link :to="currentTab === 'notices' ? 
                 `/channel/${notices.content.value?.channel_id}` : 
@@ -80,9 +80,8 @@
                 class="section-more">
                 查看更多 <Icon name="material-symbols-light:chevron-right" />
               </router-link>
-            </div>
-
-            <div v-if="currentTab === 'notices'" id="notices-list" class="notices-content flex-one flex-grow-1">
+            </div> -->
+            <!-- <div v-if="currentTab === 'notices'" id="notices-list" class="notices-content flex-one flex-grow-1">
               <SimplePageContentLoader :loader="notices" :showEmpty="!notices.content.value?.items?.length">
                 <div v-for="notice in notices.content.value?.items" :key="notice.id" class="notice-item">
                   <div>
@@ -100,6 +99,22 @@
                   <span class="publishtime">{{ DataDateUtils.formatDate(new Date((item.createtime ||item.publishtime) * 1000), 'yyyy-MM-dd') }}</span>
                 </div>
               </SimplePageContentLoader>
+            </div> -->
+          
+            <div class="section-title">
+              <h2>
+                <Icon name="famicons:logo-designernews" />
+                工作动态
+              </h2>
+              <router-link :to="`/channel/${workUppublishtimes.content.value?.channel_id}`" class="section-more">查看更多 <Icon name="material-symbols-light:chevron-right" /></router-link>
+            </div>
+            <div class="news-content">
+              <SimplePageContentLoader :loader="workUppublishtimes" :showEmpty="!workUppublishtimes.content.value?.items?.length">
+                <div v-for="uppublishtime in workUppublishtimes.content.value?.items" :key="uppublishtime.id" class="news-item">
+                  <router-link :to="'/page/' + uppublishtime.id" class="title">{{ uppublishtime.title }}</router-link>
+                  <span class="publishtime">{{ DataDateUtils.formatDate(new Date(uppublishtime.publishtime * 1000), 'yyyy-MM-dd') }}</span>
+                </div>
+              </SimplePageContentLoader>
             </div>
           </div>
         </div>
@@ -127,14 +142,10 @@
                 <Pagination />
               </template>
             </Carousel>
-
-            <div class="main-box mt-lg-3 mt-md-2 mt-sm-2 flex-fill">
-
-            </div>
           </div>
-          <div class="col col-sm-12 col-md-8 col-lg-9">
+          <div class="col col-sm-12 col-md-8 col-lg-9 d-flex flex-column">
             <!-- 工作动态 -->
-            <div class="main-box">
+            <!-- <div class="main-box">
               <div class="section-title">
                 <h2>
                   <Icon name="material-symbols-light:flag" />
@@ -150,9 +161,9 @@
                   </div>
                 </SimplePageContentLoader>
               </div>
-            </div>
+            </div> -->
             <!-- 党建工作 -->
-            <div class="main-box mt-lg-3 mt-md-2 mt-sm-2">
+            <!-- <div class="main-box mt-lg-3 mt-md-2 mt-sm-2">
               <div class="section-title">
                 <h2>
                   <Icon name="famicons:logo-designernews" />
@@ -168,6 +179,28 @@
                   </div>
                 </SimplePageContentLoader>
               </div>
+            </div> -->
+
+            <!-- 通知公告 -->
+            <div class="main-box flex-fill">
+              <div class="section-title">
+                <h2>
+                  <Icon name="famicons:logo-designernews" />
+                  通知公告
+                </h2>
+                <router-link :to="`/channel/${notices.content.value?.channel_id}`" class="section-more">查看更多 <Icon name="material-symbols-light:chevron-right" /></router-link>
+              </div>
+              <div class="notices-content flex-one flex-grow-1">
+                <SimplePageContentLoader :loader="notices" :showEmpty="!notices.content.value?.items?.length">
+                  <div v-for="notice in notices.content.value?.items" :key="notice.id" class="notice-item">
+                    <div>
+                      <router-link :to="'/page/' + notice.id" class="notice-title">{{ notice.title }}</router-link>
+                      <p>{{ notice.description }}</p>
+                    </div>
+                    <span class="notice-publishtime">{{ DataDateUtils.formatDate(new Date((notice.createtime || notice.publishtime) * 1000), 'yyyy-MM-dd') }}</span>
+                  </div>
+                </SimplePageContentLoader>
+              </div>
             </div>
           </div>
         </div>