修改联系我们

tanghaolin

8 天以前 9bee4f48db0c5b99b5683545fac737856d94d082

 src/components/AppFooter.vue

@@ -1,65 +1,120 @@
<template>
   <footer class="bg-[#393939] text-[#ccc] py-8 text-small">
      <div class="w-[63%] mx-auto ">
         <div class="flex ">
            <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="/industrial-software" class="text-white hover:text-white hover:underline">工业软件|工业APP</router-link>
               </div>
               <div>
                  <router-link to="/supply-demand" class="text-white hover:text-white hover:underline">供需对接</router-link>
               </div>
               <div class="flex flex-col gap-3">
                  <router-link to="/application" class="text-white hover:text-white cursor-default">应用推广</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>
   <footer id="app-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" style="object-fit: cover" />
               <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>
               <div class="flex flex-col gap-3">
                  <router-link to="/public-service" class="text-white hover:text-white cursor-default">公共服务</router-link>
                  <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 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>联系方式: 010-64102808</div>
                  <div>电子邮箱: fengkuan@cesi.cn</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/1-qrcode.png" 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">
                        <router-link to="" class="text-white hover:text-[#73AF2B] footer-link">帮助中心</router-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/2-qrcode.png" alt="全国信标委工业软件/APP标准工作组" class="w-24 h-24 mb-2" />
                     <div class="text-xs">全国信标委工业软件/APP标准工作组</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">
                        <router-link to="" class="text-white hover:text-[#73AF2B] footer-link">服务政策</router-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>

               <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">
                        <router-link to="" class="text-white hover:text-[#73AF2B] footer-link">公司介绍</router-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 © 2019-2019 js. All Rights Reserved. 版权所有
            <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-400 ml-2"> 京ICP备19033988号 </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;">沪ICP备14049296号-2</a>
         </div>
      </div>
   </footer>
</template>

<script setup lang="ts"></script>
<script setup lang="ts">
import logo from "@/assets/logo/footer_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>