File: /var/www/dk/wp-content/themes/food/food-app/components/yq-footer_bak.vue
<template>
<footer style="background: #000c17" class="h-[5rem]">
<div class=" w-100 md:w-[768px] md:mx-auto xl:w-[1280px]">
<div class="pt-[0.5rem] h-[0.77rem] w-[2.4rem] my-[0.51rem]"><img :src="local_url+'img/icon/logo.png'"
class="h-[0.77rem] w-[2.4rem]"></div>
</div>
<div
class="container md:w-[768px] md:mx-auto xl:w-[1280px] px-1 py-1 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col text-white">
<div
class="w-1/3 flex-grow flex-row-reverse flex flex-wrap flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
<div class="flex flex-col mr-[0.51rem] md:mr-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;
opacity: 1;
border-radius: 4px;">
<div class="text-center mt-0.5">關注摸摸台</div>
</div>
<div class=" flex flex-col md:ml-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;
opacity: 1;
border-radius: 4px;">
<div class="text-center mt-0.5">下載摸摸台APP</div>
</div>
</div>
<div class="w-2/3 flex-grow flex flex-wrap -mb-10 text-left sm:text-center order-first text-[0.18rem]">
<div class="lg:w-1/4 md:w-1/2 w-full px-1 text-white text-left">
<h2 class="text-[0.2rem] mb-[0.26rem] text-white ">關於Mall Mall Channel</h2>
<nav class="list-none mb-10">
<li>
<a class="hover:text-gray-800">Mall Mall Channel的發展歷史</a>
</li>
<li>
<a class="hover:text-gray-800">Mall Mall Channel的來源</a>
</li>
<li>
<a class="hover:text-gray-800">聯絡Mall Mall Channel</a>
</li>
<li>
<a class="hover:text-gray-800">聯絡我們</a>
</li>
<li>
<a class="hover:text-gray-800">尋求合作</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-1 text-white text-left">
<h2 class="text-[0.2rem] mb-[0.26rem] text-white ">購物指南</h2>
<nav class="list-none mb-10">
<li>
<a class="hover:text-gray-800">熱門商品</a>
</li>
<li>
<a class="hover:text-gray-800">今期特惠</a>
</li>
<li>
<a class="hover:text-gray-800">商品分類</a>
</li>
<li>
<a class="hover:text-gray-800">購物特集</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-1 text-white text-left">
<h2 class="text-[0.2rem] mb-[0.26rem] text-white ">會員服務與支援</h2>
<nav class="list-none mb-10">
<li>
<a class="hover:text-gray-800">會員登入</a>
</li>
<li>
<a class="hover:text-gray-800">會員登記</a>
</li>
<li>
<a class="hover:text-gray-800">會員優惠</a>
</li>
<li>
<a class="hover:text-gray-800">積分商城</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-1 text-white text-left">
<h2 class="text-[0.2rem] mb-[0.26rem] text-white ">資料查詢</h2>
<nav class="list-none mb-10">
<li>
<a class="hover:text-gray-800" href="/category/infos/">常見問題</a>
</li>
<li>
<a class="hover:text-gray-800" href="/category/infos/">關於送貨</a>
</li>
<li>
<a class="hover:text-gray-800" href="/category/infos/">關於退貨</a>
</li>
<li>
<a class="hover:text-gray-800" href="/category/infos/">商戶政策</a>
</li>
</nav>
</div>
</div>
</div>
<div class=" md:w-[768px] md:mx-auto xl:w-[1280px] m-2 text-white" style="background: #000c17">
<div class="container mx-auto px-1 flex flex-wrap flex-col sm:flex-row">
<p class="text-[0.2rem] text-center sm:text-left">Copy © 2022-2023 Mall Mall
Channel All Rights Reserved
</p>
<p class=" w-15 text-[0.18rem] text-right">《法律聲明》《使用條款和隱私條例》</p>
</div>
</div>
</footer>
<!-- <footer class="" style="background: #000c17">
<div class=" p-[0.3rem] main-footer rounded-[0.2rem] w-100 md:w-[768px] md:mx-auto xl:w-[1280px]">
<div class=" flex items-center">
<div class="h-[0.77rem] w-[2.4rem] my-[0.51rem]"><img :src="local_url+'img/icon/logo.png'" class="h-[0.77rem] w-[2.4rem]"></div>
</div>
<div class="flex items-center text-white">
<div class="w-[3.20rem]">
<div class=" text-[0.2rem]">關於Mall Mall Channel</div>
<div class=" text-[0.18rem] mt-[0.2rem]">Mall Mall Channel的發展歷史</div>
<div class=" text-[0.18rem] mt-[0.1rem]">Mall Mall Channel的來源</div>
<div class=" text-[0.18rem] mt-[0.1rem]">聯絡Mall Mall Channel</div>
<div class=" text-[0.18rem] mt-[0.1rem]">聯絡我們</div>
<div class=" text-[0.18rem] mt-[0.1rem]">尋求合作</div>
</div>
<div class="w-[1.13rem]"> -->
<!-- <div class="w-auto mx-1">
<div class=" text-[0.2rem]">購物指南</div>
<div class=" text-[0.18rem] mt-[0.2rem]">熱門商品</div>
<div class=" text-[0.18rem] mt-[0.1rem]">今期特惠</div>
<div class=" text-[0.18rem] mt-[0.1rem]">商品分類</div>
<div class=" text-[0.18rem] mt-[0.1rem]">購物特集</div>
</div>
<div class="w-auto mx-1">
<div class=" text-[0.2rem]">會員服務與支援</div>
<div class=" text-[0.18rem] mt-[0.26rem]">會員登入</div>
<div class=" text-[0.18rem] mt-[0.13rem]">會員登記</div>
<div class=" text-[0.18rem] mt-[0.13rem]">會員優惠</div>
<div class=" text-[0.18rem] mt-[0.13rem]">積分商城</div>
</div>
<div class="w-auto mx-1">
<div class=" text-[0.2rem]">資料查詢</div>
<div class=" text-[0.18rem] mt-[0.26rem]">常見問題</div>
<div class=" text-[0.18rem] mt-[0.13rem]">關於送貨</div>
<div class=" text-[0.18rem] mt-[0.13rem]">關於退貨</div>
<div class=" text-[0.18rem] mt-[0.13rem]">商戶政策</div>
</div>
<div class=" flex flex-col ml-auto">
<img :src="local_url+'img/qrcode_demo.png'" class=" w-full h-auto rounded-[0.1rem] md:w-[2rem] md:h-[2rem]"
style="
background: rgba(255,255,255,0.39);
border: 2px solid #009B96;
opacity: 1;
border-radius: 4px;">
<div class="text-center mt-0.5">關注摸摸台</div>
</div>
<div class=" flex flex-col ml-[0.51rem]">
<img :src="local_url+'img/qrcode_demo.png'" class=" w-full h-auto rounded-[0.1rem] md:w-[2rem] md:h-[2rem]"
style="
background: rgba(255,255,255,0.39);
border: 2px solid #009B96;
opacity: 1;
border-radius: 4px;">
<div class="text-center mt-0.5">下載摸摸台APP</div>
</div>
</div>
<div class="flex flex-col h-30 w-full mt-[0.51rem]">
<div class=" mt-[0.2rem] md:mt-0 text-[0.18rem] leading-[0.2] text-white">Copy © 2022-2023 Mall Mall
Channel All Rights Reserved
</div>
<div class="ml-auto">
<div class=" w-10 mt-[0.2rem] md:mt-0 text-[0.18rem] leading-[0.2] text-white">《法律聲明》</div>
<div class=" w-15 ml-7 mt-[0.2rem] md:mt-0 text-[0.18rem] leading-[0.2] text-white">《使用條款和隱私條例》</div>
</div>
</div>
</div> -->
<!-- </footer> -->
</template>
<script>
module.exports = {
props: {},
methods: {}
}
</script>