From 2886d8ee7872f6709b53a4bd84f95ffe0a26eafb Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 18 八月 2025 15:45:57 +0800
Subject: [PATCH] 头部&脚部公共区域

---
 src/layout/components/footerPage.vue |  197 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 187 insertions(+), 10 deletions(-)

diff --git a/src/layout/components/footerPage.vue b/src/layout/components/footerPage.vue
index 15aaa44..184da08 100644
--- a/src/layout/components/footerPage.vue
+++ b/src/layout/components/footerPage.vue
@@ -1,16 +1,193 @@
 <template>
-  <div class="footerBox">FOOT</div>
+  <div class="pageFooter">
+    <div class="footerContent contentBox flex">
+      <div class="infoBox flex1">
+        <ul class="linkBox">
+          <li class="link" @click="toAboutus(index)" v-for="(item, index) in linkList" :key="index">
+            {{ item.name }}
+          </li>
+        </ul>
+        <ul class="linkBox">
+          <li class="link" @click="toAboutus(index)" v-for="(item, index) in newList" :key="index">
+            {{ item.name }}
+          </li>
+        </ul>
+        <ul class="linkBox">
+          <li
+            class="link"
+            @click="toAboutus(index)"
+            v-for="(item, index) in serviceList"
+            :key="index"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+        <ul class="linkBox">
+          <li class="link" @click="toAboutus(index)">澶╃尗鏃楄埌搴�</li>
+          <li class="link" style="opacity: 1; font-size: 20px" @click="toAboutus(index)">
+            浜笢鏃楄埌搴�
+          </li>
+        </ul>
+      </div>
+      <div class="QRCodeBox">
+        <div class="codeItem">
+          <img src="@/assets/images/pageFooter/wechatCode.png" />
+        </div>
+        <div class="codeItem">
+          <img src="@/assets/images/pageFooter/weiboCode.png" />
+        </div>
+      </div>
+    </div>
+    <div class="copyrightBox">
+      <span
+        >涓浗鍗忓拰鍖荤澶у鍑虹増绀炬湁闄愬叕鍙� 涓� 澶囨搴忓彿锛�<span class="beian" @click="toLink"
+          >浜琁CP澶� 05029104鍙�-4浜掕仈缃戝嚭鐗堣鍙瘉 鏂板嚭缃戣瘉 锛堜含 锛�</span
+        >
+        涓� 澧炲�肩數淇′笟鍔＄粡钀ヨ鍙瘉锛氫含B2-20224426</span
+      >
+      <span style="display: block">Copyright漏2013 涓浗鍗忓拰鍖荤澶у鍑虹増绀炬湁闄愬叕鍙� 鐗堟潈鎵�鏈�!</span>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive } from 'vue'
 
-<style scoped>
-.footerBox {
-  width: 100%;
-  height: 240px;
-  min-width: 1200px;
-  color: #fff;
-  background-color: #f0f0f0;
-  text-align: center;
+const toAboutus = () => {}
+
+const linkList = reactive([
+  {
+    name: '鍏充簬鎴戜滑',
+    url: '',
+  },
+  {
+    name: '鍏充簬鎴戜滑',
+    url: '',
+  },
+  {
+    name: '鑱旂郴鎴戜滑',
+    url: '',
+  },
+  {
+    name: '鎰忚鍙嶉',
+    url: '',
+  },
+])
+const newList = reactive([
+  {
+    name: '鏂版墜涓婅矾',
+    url: '',
+  },
+  {
+    name: '鎿嶄綔鎸囧崡',
+    url: '',
+  },
+  {
+    name: '鏁欏笀璁よ瘉',
+    url: '',
+  },
+])
+const serviceList = reactive([
+  {
+    name: '鍙嬫儏閾炬帴',
+    url: '',
+  },
+  {
+    name: '鍥藉绉戝鎶�鏈儴',
+    url: '',
+  },
+  {
+    name: '鍥藉鍗敓鍋ュ悍濮�',
+    url: '',
+  },
+  {
+    name: '鍥藉鏁欒偛閮�',
+    url: '',
+  },
+  {
+    name: '鍖椾含甯傚崼鍋ュ',
+    url: '',
+  },
+])
+</script>
+
+<style lang="less" scoped>
+.pageFooter {
+  background: #444444;
+  background-image: url('@/assets/images/xiehe/home/footer-bg.png');
+  .footerContent {
+    padding: 30px 0;
+    .infoBox {
+      display: flex;
+      .linkBox {
+        font-size: 16px;
+        margin-left: 50px;
+        .link {
+          padding-right: 15px;
+          cursor: pointer;
+          color: #fff;
+          margin-top: 20px;
+          opacity: 0.7;
+          &::after {
+            margin-left: 15px;
+          }
+          &:last-child::after {
+            display: none;
+          }
+          &:first-child {
+            color: #fff;
+            opacity: 1;
+            font-size: 20px;
+            margin-bottom: 10px;
+          }
+        }
+      }
+      .address {
+        margin-top: 30px;
+        font-size: 14px;
+        color: #ccc;
+        span {
+          margin-right: 30px;
+        }
+      }
+      .logo {
+        height: 50px;
+        margin-top: 30px;
+        img {
+          height: 100%;
+        }
+      }
+    }
+    .QRCodeBox {
+      .codeItem {
+        display: inline-block;
+        text-align: center;
+        margin-left: 40px;
+        p {
+          font-size: 16px;
+        }
+        img {
+          width: 100px;
+          height: 100px;
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+  .copyrightBox {
+    text-align: center;
+    color: #fff;
+
+    height: 80px;
+    line-height: 40px;
+    font-size: 12px;
+    border-top: 1px solid #e6e6e6;
+    .beian {
+      cursor: pointer;
+    }
+    .beian:hover {
+      color: blue;
+    }
+  }
 }
 </style>

--
Gitblit v1.9.1