proginn-frontend/components/SeoFooter.vue

<template>
  <div id="proginn-footer" v-if="deviceType.pc">
    <div id="friend-links">
      <div class="links">
        <a href="/">
          <img class="logo" :src="baseUrl+'/Public/image/common/logo_new.png'" />
        </a>
        <div class="items">
          <div class="item-box" v-for="(link, index) in data.link" :key="index">
            <span class="name">{{link.name}}</span>
            <div class="item">
              <div class="list" :class="{expand: explan[index]}">
                <a
                  v-for="(item, ii) of link.data"
                  :key="ii"
                  :href="item.url"
                  target="_blank"
                  :title="item.name"
                >{{item.name}}</a>
              </div>
              <span
                class="more"
                style="display: inline;"
                @click="clickMore(index)"
              >{{explan[index] ? '收起' : '更多'}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" id="footer">
      <div class="footer-container">
        <div class="footer-links">
          <a class="item" :href="baseUrl+'/index/app'" rel="nofollow">APP下载</a>
          <a class="item" href="http://support.proginn.com/" rel="nofollow">帮助</a>
          <a class="item" :href="baseUrl+'/about'" rel="nofollow">关于我们</a>
          <a class="item" :href="baseUrl+'/about/mediareports'" rel="nofollow">媒体报道</a>
          <a class="item" href="https://inn.proginn.com/sites/index.html" rel="nofollow">合作伙伴</a>
          <a class="item" href="https://inn.proginn.com/sites/about.html" rel="nofollow">商务合作</a>
          <a class="item" :href="baseUrl+'/about/suggestion'" rel="nofollow">意见反馈</a>
          <span style="color: rgb(204, 204, 204);" class="ui item">© 程序员客栈</span>
        </div>
        <div class="safe">
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">浙ICP备15029175号-3</a>
          <div>
            <a
              style="display: flex;"
              target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002011566"
              rel="nofollow"
            >
              <img width="20" height="20" :src="baseUrl+'/Public/image/common/badge.png'" />
              <span
                style="height:20px;line-height:20px;margin: 0px 0px 0px 5px;"
              >浙公网安备 33011002011566号</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    data: {
      type: Object,
      default: {
        baseLink: "",
        links: [],
        link: [],
      },
    },
  },
  computed: {
    ...mapState(["deviceType"]),
  },
  data() {
    return {
      baseUrl: "",
      jishuBaseUrl: "",
      explan: [false, false],
    };
  },
  mounted() {},
  methods: {
    clickMore(index) {
      if (index > 1) {
        return;
      }
      this.explan[index] = !this.explan[index];
      this.explan = [...this.explan];
    },
  },
  created() {
    this.baseUrl = this.$store.state.domainConfig.siteUrl;
    this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
  },
};
</script>

<style scoped>
#proginn-footer {
  width: 100vw;
}

#friend-links,
#footer {
  display: flex;
  justify-content: center;
  background: white;
}

#friend-links {
  padding: 50px 0 40px;
}

.links,
.footer-container {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  font-size: 12px;
  color: #4a4a4a;
}

.logo {
  width: 115px;
  height: 38px;
  margin-top: 10px;
}

.items {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 840px;
}

.item {
  display: flex;
}

.name {
  line-height: 30px;
  font-weight: 800;
}

.list {
  --height: 30px;
  flex: 1;
  height: var(--height);
  line-height: var(--height);
  overflow: hidden;
}

.list a {
  display: inline-block;
  margin: 0 15px 0 0;
}

.expand {
  height: auto;
}

.footer-container a,
.list a {
  color: #4a4a4a;
}

.footer-container {
  display: flex;
  align-items: center;
  border-top: 1px solid #ddd;
  padding: 20px 0 10px;
}

.footer-links {
  display: flex;
  align-items: center;
}

.footer-container a {
  margin: 0 30px 0 0;
}

.safe {
  text-align: right;
}

.safe a {
  margin: 0;
}

.more {
  line-height: 30px;
  cursor: pointer;
}

.more:hover {
  color: #1782d9;
}
</style>