File: /var/www/dk/wp-content/themes/food/food-app/components/yq-comment.vue
<template>
<!-- comment -->
<section class="text-gray-600 body-font">
<!-- border-b-2 border-gray-200 border-opacity-50-->
<!-- @click="toDetail(item.title)"-->
<div class="container flex flex-wrap" v-for="item in list" :key="item.comment_ID">
<div class="py-[0.2rem] ml-[0.4rem] md:w-full">
<div class="flex p-[0.2rem] sm:flex-row flex-col">
<!-- <div class="[0.61rem] h-[0.61rem] mr-[0.26rem] inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">-->
<div
class="w-[0.8rem] h-[0.8rem] sm:mr-[0.26rem] sm:mb-0 mb-2 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-[0.45rem] h-[0.45rem] " viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-[0.23rem] title-font font-medium ">{{ item.comment_author }}</h2>
<p class="leading-relaxed text-[0.23rem]">{{ item.comment_content }}</p>
<div class="flex items-center flex-wrap mb-[0.13rem] mt-auto w-full">
<span
class="text-ccc inline-flex items-center mr-[0.2rem] leading-none text-[0.2rem] py-[0.13rem] pr-1">
<svg class="w-[0.2rem] h-[0.2rem] mr-[0.1rem]" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>0
</span>
<span class="text-ccc inline-flex items-center leading-none text-[0.2rem]">
<svg class="w-[0.2rem] h-[0.2rem] mr-[0.1rem]" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
viewBox="0 0 24 24">
<path
d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>0
</span>
</div>
</div>
</div>
</div>
<!-- sub comment -->
<div class="container flex flex-wrap ml-[0.2rem] md:ml-[1rem]" v-if="item.sub_comment.length > 0">
<div class="py-[0.1rem] ml-[0.4rem] md:w-full" v-for="subItem in item.sub_comment">
<div class="flex p-[0.2rem] sm:flex-row flex-col">
<!-- <div class="[0.61rem] h-[0.61rem] mr-[0.26rem] inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">-->
<div
class="w-[0.8rem] h-[0.8rem] sm:mr-[0.26rem] sm:mb-0 mb-2 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-[0.45rem] h-[0.45rem] " viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-[0.23rem] title-font font-medium ">{{ subItem.comment_author }}</h2>
<p class="leading-relaxed text-[0.23rem]">{{ subItem.comment_content }}</p>
<div class="flex items-center flex-wrap mb-[0.13rem] mt-auto w-full">
<span
class="text-ccc inline-flex items-center mr-[0.2rem] leading-none text-[0.2rem] py-[0.13rem] pr-1">
<svg class="w-[0.2rem] h-[0.2rem] mr-[0.1rem]" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>0
</span>
<span class="text-ccc inline-flex items-center leading-none text-[0.2rem]">
<svg class="w-[0.2rem] h-[0.2rem] mr-[0.1rem]" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
viewBox="0 0 24 24">
<path
d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>0
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- comment end -->
</template>
<!-- <div class="container mx-auto w-full flex flex-wrap ">-->
<!-- <div class="p-1 w-1/4 border-2 hover:border-0 border-gray-200 border-opacity-60 cursor-pointer hover:shadow-lg hover:shadow-main-color"-->
<!-- v-for="item in list" @click="toDetail(item.title)" :key="item.id">-->
<!-- <div class="w-full cursor-pointer">-->
<!-- <img class="h-[1.79rem] w-[1.79rem] object-cover object-center"-->
<!-- :src="item.img_url"-->
<!-- onerror="onerror=null;src='http://120.79.165.149:8002/wp-content/themes/food/food-app/img/img-fail.png'"-->
<!-- alt="{{ item.title }}">-->
<!-- <div class="text-center">-->
<!-- <h2 class="tracking-widest text-[0.20rem] text-333 mb-[0.13rem]"><{{ item.title }}></h2>-->
<!-- <div class=""-->
<!-- style="background: rgba(234,105,8,0.39);border-radius: 12px;">-->
<!-- <span class="title-font text-[0.13rem] font-medium text-white ">VIEW >></span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<script>
// 文章评论页面
module.exports = {
props: {
list: {
type: Array,
default: []
}
},
methods: {
// toDetail(cat) {
// console.log('toDetail -> '+ cat)
// if(cat == '影視專區'){
// window.open('/category/%e5%bd%b1%e8%a6%96%e5%b0%88%e5%8d%80/', '_blank');
// // http://dk.smart1space.site/category/%e5%bd%b1%e8%a6%96%e5%b0%88%e5%8d%80/
// }else {
// window.open('/food-search?cat=' + cat, '_blank');
// }
//
// }
}
}
</script>