<template>
    <ui-page-layout title="评论">
        <div class="rem-30rem pt-37rem pb-108rem px-24rem bg-white">
            <div class="text-size-30rem mb-16rem">全部评论</div>

            <div v-for="item in 4" :key="item">
                <div class="flex items-start py-30rem">
                    <img class="w-60rem h-60rem round" src="/imgs/avatar.png" />
                    <div class="mt-8rem ml-14rem">
                        <div class="flex mb-14rem items-center">
                            <div class=" text-size-30rem mr-30rem">用户名</div>
                            <div class="text-size-24rem text-[#B8B8B8]">2022-08-26 06:53</div>
                        </div>
                        <div class="text-[#686868] leading-34rem text-size-24rem">
                            评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
                        </div>
                    </div>
                </div>
                <ui-devider></ui-devider>
            </div>

        </div>
        <div class="absolute bottom-0 h-88rem w-full bg-[#f7f7f7] flex items-center">
            <div class="flex-1 flex pl-24rem items-center justify-between">
                <img class="w-13rem " src="/imgs/comment-arrow-left.png"/>
                <van-field
                    class="flex items-center !p-0 !pl-24rem bg-transparentborder-1rem border-[#707070] border-solid !w-308rem h-60rem rounded-full bg-white">
                </van-field>
            </div>

            <div class="flex items-center flex-1 justify-around">
                <img src="/imgs/h5-message.png" class="w-37rem" />
                <img src="/imgs/comment-collection.png" class="w-37rem" />
                <img src="/imgs/comment-like.png" class="w-36rem" />
                <img src="/imgs/comment-share.png" class="w-41rem" />
            </div>
        </div>
    </ui-page-layout>
</template>

<script>
export default {

}
</script>

