<template>

  <footer class="text-white body-font w-full pt-[0.5rem]" style="background: #000c17">
        <div class="container px-1 py-1 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">

          <div class="flex-grow flex flex-wrap text-center md:text-left text-white">
        <div class="w-full md:w-1/2 lg:w-1/5 px-1">
          <h2 class="title-font font-medium tracking-widest text-[0.22rem] mb-[0.2rem] text-white">關於 Mall Mall
            Channel</h2>
          <nav class="list-none mb-1">
            <li class="" v-for="item in menu_Column_1_list" :key="item.id">
              <a :href="item.path" class="hover:text-main-color">{{ item.title }}</a>
            </li>
            <!--            <li>-->
            <!--              <a class="hover:text-main-color">First Link</a>-->
            <!--            </li>-->
          </nav>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/5 px-1">
          <h2 class="title-font font-medium tracking-widest text-[0.22rem] mb-[0.2rem] text-white">購物指南</h2>
          <nav class="list-none mb-1">
            <li class="" v-for="item in menu_Column_2_list" :key="item.id">
              <a :href="item.path" class="hover:text-main-color">{{ item.title }}</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/5 md:w-1/2 w-full px-1">
          <h2 class="title-font font-medium text-white tracking-widest  text-[0.22rem] mb-[0.2rem]">
            會員服務與支援</h2>
          <nav class="list-none mb-1">
            <li class="" v-for="item in menu_Column_3_list" :key="item.id">
              <a :href="item.path" class="hover:text-main-color">{{ item.title }}</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/5 md:w-1/2 w-full px-1">
          <h2 class="title-font font-medium text-white tracking-widest  text-[0.22rem] mb-[0.2rem]">資料查詢</h2>
          <nav class="list-none mb-1">
            <li class="" v-for="item in menu_Column_4_list" :key="item.id">
              <a :href="item.path" class="hover:text-main-color">{{ item.title }}</a>
            </li>
          </nav>
        </div>

<!--            md:space-y-0 space-y-1-->
        <div class="lg:w-1/5 w-full px-1">
          <div class="flex flex-wrap items-center justify-center">

            <div class="p-1 md:w-1/2 flex flex-col text-center items-center">
              <div
                  class=" inline-flex items-center justify-center rounded-full bg-indigo-100 mb-1 flex-shrink-0">
                <img :src="local_url+'img/qrcode_demo.png'" class=" w-[1.41rem] h-auto rounded-[0.1rem] "
                     style="
            background: rgba(255,255,255,0.39);
            border: 2px solid #009B96;
            border-radius: 4px;">
              </div>
<!--              flex-grow-->
              <div class="">
                <h2 class="text-white text-[0.2rem] title-font font-medium">關注摸摸台</h2>
              </div>
            </div>
            <div class="p-1 md:w-1/2 flex flex-col text-center items-center">
<!--              w-4 h-4-->
              <div
                  class=" inline-flex items-center justify-center rounded-full bg-indigo-100 mb-1 flex-shrink-0">
                <img :src="local_url+'img/qrcode_demo.png'" class=" w-[1.41rem] h-auto rounded-[0.1rem] "
                     style="
            background: rgba(255,255,255,0.39);
            border: 2px solid #009B96;
            border-radius: 4px;">
              </div>
<!--              flex-grow-->
              <div class="">
                <h2 class="text-white text-[0.2rem] title-font font-medium">關注摸摸台</h2>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div style="background: #000c17">
      <div class="container mx-auto py-1 px-1 flex flex-wrap flex-col sm:flex-row text-[0.2rem] text-gray-500">
        <p class=" text-center sm:text-left">Copy © 2022-2023 Mall Mall Channel All Rights
          Reserved</p>
        <span class="inline-flex sm:ml-auto sm:mt-0 mt-1 justify-center sm:justify-start">
        <span class="text-center sm:text-left">《法律聲明》《使用條款和隱私條例》</span>
      </span>
      </div>
    </div>

  </footer>

</template>

<script>
module.exports = {
  props: {},
  methods: {},
  data() {
    return {
      menu_Column_1_list: [
        {
          id: 10,
          title: "Mall Mall Channel的發展歷史",
          path: "",
        }, {
          id: 11,
          title: "Mall Mall Channel的來源",
          path: "",
        }, {
          id: 12,
          title: "聯絡 Mall Mall Channel",
          path: "",
        }, {
          id: 13,
          title: "聯絡我們",
          path: "",
        }, {
          id: 14,
          title: "尋求合作",
          path: "",
        },
      ],
      menu_Column_2_list: [
        {
          id: 20,
          title: "熱門商品",
          path: "",
        }, {
          id: 21,
          title: "今期特惠",
          path: "",
        }, {
          id: 22,
          title: "商品分類",
          path: "",
        }, {
          id: 23,
          title: "購物特集",
          path: "",
        }
      ],
      menu_Column_3_list: [
        {
          id: 30,
          title: "會員登入",
          path: "",
        }, {
          id: 31,
          title: "會員登記",
          path: "",
        }, {
          id: 32,
          title: "會員優惠",
          path: "",
        }, {
          id: 33,
          title: "積分商城",
          path: "",
        }
      ],
      menu_Column_4_list: [
        {
          id: 40,
          title: "常見問題",
          path: "",
        }, {
          id: 41,
          title: "關於送貨",
          path: "",
        }, {
          id: 42,
          title: "關於退貨",
          path: "",
        }, {
          id: 43,
          title: "商戶政策",
          path: "",
        }
      ],
    }
  }
}
</script>