📦 按要求修改

src/App.vue

@@ -11,6 +11,7 @@
     <NavBar />
     <main>
       <NuxtPage />
+      <LinkInfos />
     </main>
     <Footer />
   </a-config-provider>

src/components/LinkInfos.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="link-infos">
+    <div v-for="item in linkInfos" :key="item.name">
+      <img :src="item.icon" :alt="item.name" :class="{ large: item.large }" />
+      <span>{{ item.name }}</span>
+      <div class="popup">
+        <img :src="item.url" :alt="item.name" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WechatIcon from '@/assets/images/link-infos/icons/gzhh.svg';
+import VideoIcon from '@/assets/images/link-infos/icons/sph.svg';
+import DouyinIcon from '@/assets/images/link-infos/icons/dy.svg';
+import XhsIcon from '@/assets/images/link-infos/icons/xhs.svg';
+import WechatUrl from '@/assets/images/link-infos/qrcode/gzhh.jpg';
+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';
+
+const linkInfos = ref([
+  {
+    name: '公众号',
+    icon: WechatIcon,
+    url: WechatUrl,
+  },
+  {
+    name: '视频号',
+    icon: VideoIcon,
+    url: VideoUrl,
+  },
+  {
+    name: '抖音',
+    icon: DouyinIcon,
+    url: DouyinUrl,
+  },
+  {
+    name: '小红书',
+    icon: XhsIcon,
+    url: XhsUrl,
+    large: true,
+  },
+]);
+</script>
+
+<style lang="scss">
+.link-infos {
+  position: fixed;
+  background-color: #484848;
+  right: 40px;
+  bottom: 30px;
+  width: 60px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px 0;
+
+  > div {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    padding: 5px 0;
+    gap: 5px;
+    color: #d3d3d3;
+
+    > img {
+      width: 20px;
+      height: 20px;
+      object-fit: contain;
+
+      &.large {
+        width: 100%;
+      }
+    }
+
+    &:hover {
+      background-color: #616161;
+      
+      .popup {
+        display: block;
+      }
+    }
+
+    .popup {
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      display: none;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      width: 160px;
+      height: 160px;
+      padding: 10px;
+      background-color: #fff;
+      border: 1px solid #616161;
+      z-index: 1000;
+    }
+  }
+}
+</style>

src/pages/about.vue

@@ -14,6 +14,16 @@
     <!-- 主要内容 -->
     <div class="main-content">
       <div class="container">
+        <div class="section-title center large mt-5">
+          <h2 class="icon">单位概况</h2>
+        </div>
+        <div class="row">
+          <div class="col col-12">
+            <h3 class="text-center">{{ aboutData.content.value?.title }}</h3>
+            <div v-html="aboutData.content.value?.content"></div>
+          </div>
+        </div>
+        
         <div class="section-title center large mt-4">
           <h2 class="icon">联系方式</h2>
         </div>
@@ -65,12 +75,22 @@
 </template>
 
 <script setup lang="ts">
+import { useSSrSimpleDataLoader } from '~/composeable/SimpleDataLoader';
 
 onMounted(() => {
   if (import.meta.client)
     initMap();
 });
 
+const aboutData = await useSSrSimpleDataLoader('articles111', async () => {
+  const res = await $fetch(`/api/ecms/article/${111}`, {
+    method: 'GET',
+  });
+  if (!res.status)
+    throw new Error(res.message);
+  return res.data;
+});
+
 // 初始化地图
 function initMap() {
   setTimeout(() => {