From 544e2afc6fe20d15ef342ca5c3e83a8ccffd0dbf Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期三, 16 四月 2025 10:04:23 +0800
Subject: [PATCH] 修改首页与底部样式
---
src/components/AppFooter.vue | 147 +++++++++++++++++++++++++++++++------------------
src/assets/logo/header_logo.png | 0
src/App.vue | 2
3 files changed, 94 insertions(+), 55 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 6207c3d..c58c8f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
<div class="h-full bg-gray-50 flex flex-col">
<template v-if="!isLoginPage">
<AppHeader class="flex-0" />
- <div id="app-page" class="flex-auto !overflow-y-auto bg-[#f4f4f4]" ref="containerRef">
+ <div id="app-page" class="flex-auto !overflow-y-auto bg-[#ffffff]" ref="containerRef">
<div class="w-[63%] mx-auto">
<router-view></router-view>
</div>
diff --git a/src/assets/logo/header_logo.png b/src/assets/logo/header_logo.png
index b963ec0..74c51f7 100644
--- a/src/assets/logo/header_logo.png
+++ b/src/assets/logo/header_logo.png
Binary files differ
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index ef0729d..603bc83 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,75 +1,114 @@
<template>
- <footer class="bg-[#393939] text-[#ccc] py-8 text-small">
- <div class="w-[63%] mx-auto">
- <div class="flex justify-center">
- <div class="grid grid-cols-5 gap-8">
- <!-- 瀵艰埅閾炬帴 -->
- <div>
- <router-link to="/" class="text-white hover:text-white hover:underline">棣栭〉</router-link>
- </div>
- <div>
- <router-link to="/certified-products" class="text-white hover:text-white hover:underline">鑳芥晥浜у搧</router-link>
- </div>
- <div>
- <router-link to="/eec-label-search" class="text-white hover:text-white hover:underline">璇佷功鏌ヨ</router-link>
- </div>
- <div class="flex flex-col gap-3">
- <router-link to="/news-detail/99" class="text-white hover:text-white">琛ヨ创鏀跨瓥</router-link>
- <!-- <div class="flex flex-col gap-1">
- <router-link to="/standard" class="text-[#ccc] hover:text-[#ccc] hover:underline">鏍囧噯搴�</router-link>
- <router-link to="/library" class="text-[#ccc] hover:text-[#ccc] hover:underline">鍦ㄧ嚎鍥句功棣�</router-link>
- <router-link to="/cases" class="text-[#ccc] hover:text-[#ccc] hover:underline">浼樼妗堜緥</router-link>
- <router-link to="/training" class="text-[#ccc] hover:text-[#ccc] hover:underline">鍜ㄨ鍩硅</router-link>
- <router-link to="/community" class="text-[#ccc] hover:text-[#ccc] hover:underline">鍏堣繘鍒堕�犱笟闆嗙兢</router-link>
- </div> -->
- </div>
- <div class="flex flex-col gap-3">
- <span @click="linkClick(' http://www.xpump.net/web/#/CN/Index')" class="text-white hover:text-white cursor-pointer"
- >鏌ユ车缃�</span
- >
- <!-- <div class="flex flex-col gap-1">
- <router-link to="/software-copyright" class="text-[#ccc] hover:text-[#ccc] hover:underline"
- >杞欢钁椾綔鏉冪敵璇烽�氶亾</router-link
- >
- <router-link to="/key-tech" class="text-[#ccc] hover:text-[#ccc] hover:underline">棣栭噸鐐规妧鏈敾鍏�</router-link>
- <router-link to="/test-service" class="text-[#ccc] hover:text-[#ccc] hover:underline">娴嬭瘯鏈嶅姟</router-link>
- <router-link to="/cert-manage" class="text-[#ccc] hover:text-[#ccc] hover:underline">璇佷功绠＄悊</router-link>
- </div> -->
+ <footer class="bg-[#003A8F] text-white py-8 text-small">
+ <div class="w-[80%] mx-auto">
+ <div class="flex justify-between">
+ <!-- Logo and Contact Info -->
+ <div class="flex flex-col gap-2">
+ <img :src="logo" alt="宸ユ晥姹囪仛骞冲彴" class="h-[54px] mb-4" />
+ <div class="text-sm">
+ <div class="flex items-center gap-2">
+ <span class="inline-flex"><el-icon color="#fff" :size="16"><PhoneFilled /></el-icon></span>
+ <span class="text-[16px]" style="line-height: 32px;">鑱旂郴鏂瑰紡: 021-34306562</span>
+ </div>
+ <div class="flex items-center gap-2">
+ <span class="inline-flex"><el-icon color="#fff" :size="16"><Message /></el-icon></span>
+ <span class="text-[16px]" style="line-height: 32px;">鐢靛瓙閭: eventech@163.com</span>
+ </div>
</div>
</div>
- <div class="ml-8 flex flex-col gap-4 pl-8 text-[#ccc]" style="border-left: 1px solid #5f5f60">
- <div class="text-sm">
- <div>鑱旂郴鏂瑰紡: 021-34306562</div>
- <div>鐢靛瓙閭: eventech@163.com</div>
+
+ <!-- Navigation Links -->
+ <div class="flex">
+ <div class="flex flex-col gap-2">
+ <div class="pl-8 pr-8 border-l border-[#73AF28]">
+ <div class="font-medium mb-2 footer-link">
+ <router-link to="/home" class="text-white hover:text-[#73AF2B] footer-link">棣栭〉</router-link>
+ </div>
+
+ <div class="flex flex-col gap-2 text-sm">
+ <router-link to="/certified-products" class="text-white hover:text-[#73AF2B] footer-link">鑳芥晥浜у搧</router-link>
+ <router-link to="/eec-label-search" class="text-white hover:text-[#73AF2B] footer-link">璇佷功鏌ヨ</router-link>
+ <router-link to="/news-detail/99" class="text-white hover:text-[#73AF2B] footer-link">琛ヨ创鏀跨瓥</router-link>
+ <span @click="linkClick('http://www.xpump.net/web/#/CN/Index')" class="text-white hover:text-[#73AF2B] cursor-pointer footer-link">鏌ユ车缃�</span>
+ </div>
+ </div>
</div>
- <div class="flex gap-10">
- <div class="w-[90px]">
- <img src="@/assets/footer/涓婃捣缁忔祹鍜屼俊鎭寲濮斿憳浼�.jpg" alt="涓婃捣缁忔祹鍜屼俊鎭寲濮斿憳浼�" class="w-24 h-24 mb-2" />
- <div class="text-xs">涓婃捣缁忔祹鍜屼俊鎭寲濮斿憳浼�</div>
+
+ <div class="flex flex-col gap-4 ">
+ <div class="pl-8 pr-8 border-l border-[#73AF28]">
+ <div class="font-medium mb-2 footer-link">甯姪涓績</div>
+ <div class="flex flex-col gap-2 text-sm">
+ <router-link to="/brand-center" class="text-white hover:text-[#73AF2B] footer-link">鍝佺墝涓績</router-link>
+ <router-link to="/payment" class="text-white hover:text-[#73AF2B] footer-link">浠樻鏂瑰紡</router-link>
+ <router-link to="/payment-info" class="text-white hover:text-[#73AF2B] footer-link">浠樻寮�绁ㄤ俊鎭�</router-link>
+ </div>
</div>
- <div class="w-[90px]">
- <img src="@/assets/footer/涓婃捣璐ㄦ闄�.jpg" alt="涓婃捣璐ㄦ闄�" class="w-24 h-24 mb-2" />
- <div class="text-xs">涓婃捣璐ㄦ闄�</div>
+ </div>
+
+ <div class="flex flex-col gap-4 ">
+ <div class="pl-8 pr-8 border-l border-[#73AF28]">
+ <div class="font-medium mb-2 footer-link">鏈嶅姟鏀跨瓥</div>
+ <div class="flex flex-col gap-2 text-sm">
+ <router-link to="/delivery" class="text-white hover:text-[#73AF2B] footer-link">閰嶉�佹湇鍔�</router-link>
+ <router-link to="/after-sales" class="text-white hover:text-[#73AF2B] footer-link">鍞悗鏈嶅姟</router-link>
+ <router-link to="/privacy" class="text-white hover:text-[#73AF2B] footer-link">闅愮鏀跨瓥</router-link>
+ </div>
</div>
- <div class="w-[90px]">
- <img src="@/assets/footer/PumpMgrQr.jpg" alt="娉电瀹�" class="w-24 h-24 mb-2" />
- <div class="text-xs">娉电瀹�</div>
+ </div>
+
+ <div class="flex flex-col gap-4 ">
+ <div class="pl-8 pr-8 border-l border-[#73AF28]">
+ <div class="font-medium mb-2 footer-link">鍏徃浠嬬粛</div>
+ <div class="flex flex-col gap-2 text-sm">
+ <router-link to="/contact" class="text-white hover:text-[#73AF2B] footer-link">鑱旂郴鎴戜滑</router-link>
+ <router-link to="/about" class="text-white hover:text-[#73AF2B] footer-link">鍏充簬鎴戜滑</router-link>
+ </div>
</div>
+ </div>
+ </div>
+
+ <!-- QR Codes -->
+ <div class="flex gap-6">
+ <div class="text-center">
+ <img src="@/assets/footer/涓婃捣缁忔祹鍜屼俊鎭寲濮斿憳浼�.jpg" alt="涓婃捣缁忔祹鍜屼俊鎭寲濮斿憳浼�" class="w-24 h-24 mb-2" />
+ <div class="text-xs footer-link">涓婃捣缁忔祹鍜屼俊鎭寲濮斿憳浼�</div>
+ </div>
+ <div class="text-center">
+ <img src="@/assets/footer/涓婃捣璐ㄦ闄�.jpg" alt="涓婃捣璐ㄦ闄�" class="w-24 h-24 mb-2" />
+ <div class="text-xs footer-link">涓婃捣璐ㄦ闄�</div>
+ </div>
+ <div class="text-center">
+ <img src="@/assets/footer/PumpMgrQr.jpg" alt="娉电瀹�" class="w-24 h-24 mb-2" />
+ <div class="text-xs footer-link">娉电瀹�</div>
</div>
</div>
</div>
- <!-- 鐗堟潈淇℃伅 -->
- <div class="pt-5 mt-2 text-center text-gray-400 text-sm">
- Copyright 漏 2025-2026 All Rights Reserved. 鐗堟潈鎵�鏈�
- <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-400 ml-2"> 娌狪CP澶�14049296鍙�-2 </a>
+ <!-- Copyright -->
+ <div class="pt-5 mt-4 text-center text-sm border-t border-[#ffffff33]">
+ <span class="footer-link">Copyright 漏 2025-2026 All Rights Reserved. 鐗堟潈鎵�鏈�</span>
+ <a href="https://beian.miit.gov.cn/" target="_blank" class="text-white hover:text-[#73AF2B] ml-2 footer-link" style="color: #73AF2B !important;">娌狪CP澶�14049296鍙�-2</a>
</div>
</div>
</footer>
</template>
<script setup lang="ts">
+import logo from "@/assets/logo/header_logo.png"
const linkClick = (url: string) => {
window.open(url, '_blank');
};
</script>
+
+<style scoped>
+.footer-link {
+ font-family: SimSun;
+ font-weight: 400;
+ font-size: 16px;
+ /* color: #FFFFFF; */
+ line-height: 32px;
+}
+.border-l{
+ border-left: 1px solid #73AF28;
+}
+</style>
--
Gitblit v1.9.3