<template>
  <div class="footer">
    <div class="foot_menu">
      <el-row :gutter="20" class="box">
        <el-col :span="4" class="col1">
          <div class="logo_text">
            <img src="@/assets/image/logo.jpg" alt="Android版本下载" />
          </div>
        </el-col>
        <el-col :span="10">
          <div class="about">
            <h3>关于</h3>
            <ul>
              <li v-for="a in aboutList" :key="a.id">
                <router-link :to="{ name: a.name }">{{ a.title }}</router-link>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="contact">
            <h3>联系我们</h3>
            <ul>
              <li v-for="c in contactList" :key="c.id">
                <span>{{ c.title }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="copyright">
      copyright@ 桂平发发网络有限公司
          <a href="https://beian.miit.gov.cn" target="_blank"
            >桂ICP备2024040484号-1</a
          >
          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=45088105000134" target="_blank"
            >桂公网安备45088105000134号</a
          >
          
          <a href="https://beian.miit.gov.cn" target="_blank"
            >经营许可证编号:桂B2-20240661</a
          >
          <a target="_blank" href="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/default/20250407/dcd90acd12634546b46a701698af30a1.png">营业执照</a>
    </div>
  </div>
</template>

<script setup lang="ts">
let aboutList = [
  { id: 1, title: "关于我们", name: "about" },
  { id: 2, title: "加入我们", name: "about" },
  { id: 3, title: "商户入驻隐私协议", name: "AusinessAgreementPrivacy" },
];

let contactList = [
  { id: 1, title: "电话-17777525395" },
  { id: 2, title: "邮箱-17777525395@163.com" },
  { id: 3, title: "地址:广西贵港市桂平市西山镇桂南路盐业大厦对面4楼" },
];

</script>

<style lang="scss" scoped>
.footer {
  background: #000b22;
  padding: 20px;
  color: #999;
  font-size: 14px;

  a {
    display: inline-block;
    margin:0 5px;
    color: #999;
    &:hover {
      color: #fff;
    }
  }
}

.foot_menu {
  width: 1200px;
  margin: auto;
}

.col1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo_text {
  img {
    width: 48px;
    border-radius: 10px;
  }
}

.copyright {
  padding-top: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .foot_menu {
  display: none;
}

.copyright{
  width: 100%;
}

}
</style>
