lingrui-web/components/AppFooter.vue

<template>
  <!-- PC端布局 -->
  <div class="group_30 flex-col pc-footer">
    <div class="text-wrapper_13 flex-row">
      <NuxtLink to="/">
        <span class="text_67">企业首页</span>
      </NuxtLink>
      <NuxtLink to="/proServices/">
        <span class="text_68">产品&amp;服务</span>
      </NuxtLink>
      <NuxtLink to="/aboutUs/">
        <span class="text_69">灵睿&amp;我们</span>
      </NuxtLink>
      <NuxtLink to="/customerReviews/">
        <span class="text_70">客户&amp;评价</span>
      </NuxtLink>
      <NuxtLink to="/societyDuty/">
        <span class="text_71">社会&amp;责任</span>
      </NuxtLink>
      <NuxtLink to="/concatUs/">
        <span class="text_72">加入我们</span>
      </NuxtLink>
      <span class="text_73">联系电话：400-080-0379</span>
    </div>
    <div class="group_31 flex-col"></div>
    <div class="group_32 flex-row">
      <div class="text-wrapper_14 flex-col">
        <span class="text_74">
          洛阳灵睿网络技术有限公司|洛阳网络公司|洛阳网络推广|洛阳易站通总代理|洛阳本地自媒体|洛阳短视频
        </span>
        <span class="text_75">法律顾问：河南森合律师事务机构</span>
        <span class="text_76">
          ©2021&nbsp;洛阳灵睿网络技术有限公司&nbsp;All&nbsp;rights&nbsp;reserved.豫ICP备15023627号-3
        </span>
        <span class="text_77">
          洛阳公司地址：洛阳市&nbsp;洛龙区&nbsp;世贸中心D座1816室
        </span>
      </div>
      <img class="image_29" referrerpolicy="no-referrer" src="public/img/wb.png" />
      <img class="image_30" referrerpolicy="no-referrer" src="public/img/wx.png" />
    </div>
  </div>

  <!-- 移动端布局 -->
  <div class="mobile-footer flex-col">
    <div style="background-color: #eeeeee;width:100%;height: 0.5px;margin-bottom: 20px;"></div>
    <div class="mobile-nav flex-col">
      <NuxtLink to="/" class="mobile-nav-item">
        <span >企业首页</span>
      </NuxtLink>
      <NuxtLink to="/phone_proServices_con/" class="mobile-nav-item">
        <span >产品&amp;服务</span>
      </NuxtLink>
      <NuxtLink to="/phone_aboutUs/" class="mobile-nav-item">
        <span >灵睿&amp;我们</span>
      </NuxtLink>
      <NuxtLink to="/phone_customerReviews/" class="mobile-nav-item">
        <span >客户&amp;评价</span>
      </NuxtLink>
      <NuxtLink to="/phone_societyDutyNew/" class="mobile-nav-item">
        <span >社会&amp;责任</span>
      </NuxtLink>
      <NuxtLink to="/phone_concatUs/" class="mobile-nav-item">
        <span >加入我们</span>
      </NuxtLink>
      <span class="mobile-contact">联系电话：400-080-0379</span>
    </div>
    <div class="mobile-info flex-col">
      <span class="mobile-company">洛阳灵睿网络技术有限公司</span>
      <span class="mobile-legal">法律顾问：河南森合律师事务机构</span>
      <span class="mobile-copyright">©2021 洛阳灵睿网络技术有限公司 All rights reserved.</span>
      <span class="mobile-icp">豫ICP备15023627号-3</span>
      <span class="mobile-address">洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室</span>
    </div>
    <div class="mobile-social flex-row">
      <img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/img/wb.png" />
      <img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/img/wx.png" />
    </div>
  </div>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
@import '@/assets/index.scss';

/* PC端默认样式保持不变 */
.mobile-footer {
  display: none;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .pc-footer {
    display: none;
  }

  .mobile-footer {
    display: flex;
    background-color: #ffffff;
    width: 100%;
  }

  .mobile-nav {
    gap: 15px;
    margin-bottom: 20px;
    text-align: center;
  }

  .mobile-nav-item {
    font-size: 14px;
    color: #333;
  }

  .mobile-contact {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
  }

  .mobile-info {
    gap: 10px;
    text-align: center;
    margin-bottom: 20px;
  }

  .mobile-company {
    font-size: 14px;
    color: #333;
  }

  .mobile-legal,
  .mobile-copyright,
  .mobile-icp,
  .mobile-address {
    font-size: 12px;
    color: #666;
  }

  .mobile-social {
    justify-content: center;
    gap: 20px;
  }

  .mobile-social-icon {
    width: 150px;
    height: 150px;
  }
}
</style>