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://172.20.100.235:14873/',
        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: 26;
}
.footer-links {
  padding: 16px 48px;
  background-color: #2b2d30;
  color: rgba(255, 255, 255, 0.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, 0.8);
}

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

.service-links-children a {
  display: inline-block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.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>