OpenPlatForm/components/index/footer.vue

<template>
  <div class="index-footer-box">
    <div class="footer-top">
      <div class="data-table">
        <div v-for="(item, index) in tableData" :key="index" class="data-tr">
          <a
            :class="index == '0' ? 'data-th' : 'data-td'"
            v-for="(list, i) in item"
            :key="i"
            href="#"
            >{{ list.title }}</a
          >
        </div>
      </div>
      <div class="footer-code">
        <div style="margin-right:40px">
          <div>联系我们</div>
          <img style="margin-top:10px" src="@/static/img/qiye.png" alt="" />
        </div>
        <div>
          <img src="@/static/img/weixin.png" alt="" />
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <div>© 2008-2020 珠海方诺信息科技有限公司 版权所有 粤ICP备13020798号</div>
      <div style="margin-bottom: 10px;">粤公网安备 44049002000552号</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index-footer",
  data() {
    return {
      tableData: [
        [
          {
            title: "新手指南",
          },
          {
            title: "服务支持",
          },
          {
            title: "常见问题",
          },
          {
            title: "用户中心",
          },
          {
            title: "关于智莺",
          },
        ],
        [
          {
            title: "新手指南",
          },
          {
            title: "客服在线",
          },
          {
            title: "智莺系统免费吗",
          },
          {
            title: "会员管理",
          },
          {
            title: "智莺首页",
          },
        ],
        [
          {
            title: "快速选购",
          },
          {
            title: "购买咨询",
          },
          {
            title: "如何购买插件",
          },
          {
            title: "网站管理",
          },
          {
            title: "联系我们",
          },
        ],
        [
          {
            title: "互动专区",
          },
          {
            title: "联系智莺",
          },
          {
            title: "有几种模式可选",
          },
          {
            title: "插件订单",
          },
          {
            title: "人才招聘",
          },
        ],
        [
          {
            title: "有问必答",
          },
          {
            title: "帮助中心",
          },
          {
            title: "如何选购版本",
          },
          {
            title: "主机域名",
          },
          {
            title: "帮助中心",
          },
        ],
      ],
    };
  },
};
</script>


<style lang="scss" scoped>
a {
  text-decoration: none;
  color: black;
}

.index-footer-box {
  width: 1200px;
  margin: 220px auto 0;
  display: flex;
  flex-flow: column;
  padding-bottom: 30px;
  .footer-top {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    .data-table {
      font-size: 13px;

      display: flex;
      flex-flow: column;

      .data-tr {
        margin-bottom: 20px;
        .data-th {
          color: #333333;
          font-weight: bold;
          margin-right: 40px;
          width: 91px;
          display: inline-block;
        }

        .data-td {
          color: #666666;
          margin-right: 40px;
          width: 91px;
          display: inline-block;
        }
      }

      .data-th:last-child,
      .data-td:last-child,
      .data-tr:last-child {
        margin: 0;
      }
    }
  }

  .footer-bottom {
    text-align: center;
    color: #666666;
    font-size: 14px;
    margin-top: 50px;
  }
  .footer-code {
    display: flex;
    align-items: flex-end
  }



}
</style>