gaoyixia-pc/src/components/layout/Footer.vue

<template>
  <div class="footer">
    <div class="agreement-box">
      <div
        class="agreement-item"
        v-for="item in agreement_list"
        @click="item.click(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="company-info">
      <a href="https://beian.miit.gov.cn"
        >crypto @ 辽宁搞一下汽车电子科技有限公司 辽ICP备2023000001号-1</a
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
  computed: {
    agreement_list() {
      return [
        {
          label: "用户协议",
          key: "agreement",
          click: this.toAgreement,
        },
        {
          label: "隐私政策",
          key: "privacy",
          click: this.toAgreement,
        },
        {
          label: "关于我们",
          key: "about_us",
          click: this.toAgreement,
        },
        {
          label: "客服中心",
          key: "customer_service",
          click: () => this.$store.commit("OPEN_CONTACT"),
        },
        {
          label: "会员说明",
          key: "user_equity",
          click: this.toAgreement,
        },
        {
          label: "原创公约",
          key: "original_pact",
          click: this.toAgreement,
        },
      ];
    },
  },
  methods: {
    toAgreement(item) {
      this.$router.push({
        path: "/agreement",
        query: {
          configKey: item.key,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 60px;
  width: 100%;
  .agreement-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .agreement-item {
      padding: 0 10px;
      height: 10px;
      line-height: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      cursor: pointer;
    }
    :not(:last-child) {
      border-right: 1px solid #666666;
    }
  }
  .company-info {
    width: 100%;
    text-align: center;
    margin: 40px 0;
    a {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      text-decoration: none;
      margin: 0 auto;
    }
  }
}
</style>