web/docs/.vitepress/layout/component/Footer.vue

<script setup>
import { useData } from 'vitepress'
const { page } = useData()

const footerGroups = [
  {
    mainLink: { text: '品牌', url: 'https://www.jianyu360.cn/brand/index', target: '_blank' },
    links: [
      { text: '公司介绍', url: 'https://www.jianyu360.cn/brand/index', target: '_blank' },
      { text: '发展历程', url: 'https://www.jianyu360.cn/brand/index#history', target: '_blank' },
      { text: '公司动态', url: 'https://www.jianyu360.cn/brand/index#Company_Dynamic', target: '_blank' },
      { text: '加入我们', url: 'https://www.jianyu360.cn/brand/index#join_us', target: '_blank' },
      { text: '联系我们', url: 'https://www.jianyu360.cn/brand/index#contact_us', target: '_blank' }
    ]
  },
  {
    mainLink: { text: '业界团队', url: 'javascript:;' },
    links: [
      { text: '拓普前端技术文档', url: 'http://192.168.3.42/doc/home/', target: '_blank' },
      { text: '凹凸实验室', url: 'https://o2team.github.io/', target: '_blank' },
      { text: '淘系前端团队', url: 'https://fed.taobao.org/', target: '_blank' },
      { text: '百度 FEX', url: 'https://fex-team.github.io/', target: '_blank' },
      { text: 'AlloyTeam', url: 'https://www.alloyteam.com/', target: '_blank' }
    ]
  },
  {
    mainLink: { text: '内网相关', url: 'javascript:;' },
    links: [
      { text: 'OA 办公', url: 'http://1.192.217.143:8985/seeyon/main.do', target: '_blank' },
      { text: 'KB 看板', url: 'https://jykb.jydev.jianyu360.com/dashboard', target: '_blank' },
      { text: 'Verdaccio', url: 'http://192.168.3.71:4873/', target: '_blank' },
      { text: 'Sentry 监控', url: 'https://jysentry.jydev.jianyu360.cn/', target: '_blank' },
      { text: 'YAPI 文档', url: 'http://192.168.3.71:4000/', target: '_blank' }
    ]
  },
  {
    mainLink: { text: '快捷链接', url: 'javascript:;' },
    links: [
      { text: 'MDN', url: 'https://developer.mozilla.org/zh-CN/', target: '_blank' },
      { text: 'BrowsersList', url: 'https://browserslist.dev/', target: '_blank' },
      { text: 'Can I use', url: 'https://caniuse.com/', target: '_blank' },
      { text: '可视化正则工具', url: 'https://jex.im/regulex/', target: '_blank' },
      { text: '可视化 AST', url: 'https://astexplorer.net/', target: '_blank' }
    ]
  }
]
</script>

<template>
  <section class='common-footer-container'>
    <div class='footer-links'>
      <div class='footer-links-content w'>
        <div class='footer-service-links'>
          <div class='service-links-left'>
            <dl v-for='(group, index) in footerGroups' :key='index' class='service-links-item'>
              <dt class='service-links-name'>
                <a :href='group.mainLink.url' :target='group.mainLink.target'
                   class='service-link cms-link'>{{ group.mainLink.text }}</a>
              </dt>
              <dd v-for='(link, linkIndex) in group.links' :key='linkIndex' class='service-links-children'>
                <a :href='link.url' :target='link.target' class='service-link cms-link'>{{ link.text }}</a>
              </dd>
            </dl>
          </div>
          <div class='service-links-right'>
            <div class='service-links-right-content'>
              <!-- 右侧内容 -->
              <div class='service-links-right-module logo'>
                <div class='logo-large'>
                  <img alt='logo-large' src='https://cdn-ali2.jianyu360.com/images/pc/logo.png?v=24487'>
                </div>
              </div>
              <div class='service-links-right-module customer-phone'></div>
              <div class='service-links-right-module qr-list'>
                <div class='qr-box'>
                  <div class='qr-img'>
                    <img alt='download-app'
                         src='https://www.jianyu360.cn/front/downloadJyApp/qr?page=pc_bottom&amp;source=pc_scan'>
                  </div>
                  <p class='qr-text'>扫码下载</p>
                </div>
                <div class='qr-box'>
                  <div class='qr-img'>
                    <img alt='follow-me' src='https://www.jianyu360.cn/front/share/NQMKDCRFBAgGA0xXSF5XQAQEBABEDgIn'>
                  </div>
                  <p class='qr-text'>扫码关注</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='footer-copyright'>
      <p class='copyright w'><span>©2015至今 jianyu360.cn 版权所有 </span></p>
    </div>
  </section>
</template>

<style scoped>
.common-footer-container {
  position: relative;
  z-index: 11;
}
.footer-links {
  padding: 16px 48px;
  background-color: #2B2D30;
  color: rgba(255, 255, 255, .8);
  text-align: center;
  font-weight: normal;
}

.footer-service-links {
  display: flex;
  justify-content: space-between;
  text-align: left;
}

.service-links-left {
  position: relative;
  display: flex;
  flex: 1;
}

.service-links-right {
  position: relative;
}

a.service-link:active,
a.service-link:hover {
  text-decoration: none;
}

.service-links-item {
  margin-right: 40px;
  flex: 1;
}

.service-links-name {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.service-links-name a {
  white-space: nowrap;
  font-size: inherit;
  color: rgba(255, 255, 255, .8);
}

.service-links-children {
  margin-left: 2px;
}

.service-links-children a {
  display: inline-block;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  line-height: 20px;
  white-space: nowrap;
}

.service-links-right {
  padding-right: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  text-align: right;
}

.service-links-right-content {
  display: inline-block;
  padding-left: 64px;
}

.service-links-right-content img {
  display: block;
  width: 100%;
}

.service-links-right-content .logo-large {
  width: 132px;
  height: 38px;
}

.service-links-right-module {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
}

.service-links-right-content .phone-text {
  margin-left: 6px;
}

.customer-phone {
  margin-top: 12px;
  margin-bottom: 16px;
}

.qr-list {
  justify-content: space-between;
}

.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.qr-box .qr-img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
}

.qr-box .qr-text {
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.footer-copyright {
  padding-left: 32px;
  background-color: #121314;
}

.copyright {
  padding: 10px 0 12px;
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.6);
}

.copyright a:hover {
  text-decoration: underline;
}

@media (max-width: 960px) {
  .service-links-left,
  .footer-service-links {
    flex-wrap: wrap;
  }
  .service-links-right {
    border-left-color: transparent;
  }
}

</style>