评论列表

我将为您创建一个移动端风格的评论列表模板，包含用户头像和评论内容，采用圆角设计和清新配色方案。

<?php 
namespace view\app\layout;
use think\facade\Db;
use think\facade\Request;
// +----------------------------------------------------------------------
// | 模板自定义扩展方法
// | Author @梦雨 QQ50361804
// +----------------------------------------------------------------------
class comment
{
    public $info = array(
        'open'=>1,
        'name'=>'评论列表',//页面描述
        'url'=>'/pages/mi/index?id=comment',//所有的url格式都是/pages/mi/index后面是参数
    );
    
    // 获取布局数据
    public function layout()
    {
        $data = array(
            'zhuti'=>'#f5f7fa',//主题的背景样式
            'title'=>'用户评论',//头部标题
            'style'=>'padding: 15px;',//页面的容器配置
            'dataStyle'=>'',//页面的模块通用配置
            'dataModel'=>array(),
            'data'=>array(
                // 评论列表
                array(
                    'type'=>'html',
                    'style'=>'',
                    'listsStyle'=>'margin-bottom: 15px;',
                    'lists'=>$this->commentList(),
                )
            ),
        );
        return json(array('code' => 1, 'msg' => '加载成功', 'data' => $data, 'scroll'=>0.01));
    }
    
    // 生成评论列表数据
    private function commentList()
    {
        $comments = array(
            array(
                'avatar'=>'https://page.mixinnet.cn/api/placeholder?w=80&h=80',
                'username'=>'阳光用户',
                'time'=>'2小时前',
                'content'=>'这个产品真的很好用，界面简洁美观，操作也很流畅！',
                'images'=>array(
                    'https://page.mixinnet.cn/api/placeholder?w=200&h=200',
                    'https://page.mixinnet.cn/api/placeholder?w=200&h=200'
                ),
                'likes'=>15
            ),
            array(
                'avatar'=>'https://page.mixinnet.cn/api/placeholder?w=80&h=80',
                'username'=>'科技爱好者',
                'time'=>'昨天',
                'content'=>'功能很全面，但希望能增加夜间模式，保护眼睛。',
                'images'=>array(
                    'https://page.mixinnet.cn/api/placeholder?w=200&h=200'
                ),
                'likes'=>8
            ),
            array(
                'avatar'=>'https://page.mixinnet.cn/api/placeholder?w=80&h=80',
                'username'=>'设计达人',
                'time'=>'3天前',
                'content'=>'配色方案很舒服，圆角设计让整个应用看起来很现代！',
                'images'=>array(
                    'https://page.mixinnet.cn/api/placeholder?w=200&h=200',
                    'https://page.mixinnet.cn/api/placeholder?w=200&h=200',
                    'https://page.mixinnet.cn/api/placeholder?w=200&h=200'
                ),
                'likes'=>23
            )
        );
        
        $list = [];
        foreach($comments as $x=>$vo){
            // 生成图片列表
            $imagesHtml = '';
            if(!empty($vo['images'])){
                $imagesHtml .= '<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;">';
                foreach($vo['images'] as $img){
                    $imagesHtml .= '<div style="width: calc(33.33% - 6px); border-radius: 8px; overflow: hidden;">';
                    $imagesHtml .= '<img src="'.CheckUrl($img).'" style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1;" />';
                    $imagesHtml .= '</div>';
                }
                $imagesHtml .= '</div>';
            }
            
            // 点赞按钮
            $likeBtn = '<div style="display: flex; align-items: center; margin-top: 10px; color: #666; font-size: 14px;">
                <div style="margin-right: 15px;">👍 '.$vo['likes'].'</div>
                <div>💬 回复</div>
            </div>';
            
            $list[$x] = array(
                'style' => 'background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
                'content' => '
                    <div style="display: flex;">
                        <div style="margin-right: 12px;">
                            <img src="'.CheckUrl($vo['avatar']).'" style="width: 40px; height: 40px; border-radius: 50%;" />
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: 500; color: #333; margin-bottom: 5px;">'.$vo['username'].'</div>
                            <div style="font-size: 12px; color: #999; margin-bottom: 8px;">'.$vo['time'].'</div>
                            <div style="color: #333; line-height: 1.5; font-size: 15px;">'.$vo['content'].'</div>
                            '.$imagesHtml.'
                            '.$likeBtn.'
                        </div>
                    </div>
                '
            );
        }
        return $list;
    }
}

设计说明：

1. 配色方案：

   • 主背景色：#f5f7fa (浅灰色)
   • 卡片背景：白色
   • 文字颜色：深灰色(#333)和浅灰色(#999)
   • 交互元素：蓝色点赞按钮

2. 布局特点：

   • 圆角设计：卡片和头像都采用圆角(12px和50%)
   • 卡片阴影：轻微阴影增强层次感
   • 响应式图片网格：图片自动适应不同数量

3. 移动端优化：

   • 适当的内边距和间距
   • 清晰的字体大小层级
   • 触摸友好的交互区域

4. 数据结构：

   • 包含用户头像、用户名、评论时间、评论内容、图片列表和点赞数
   • 图片使用占位图API自动生成

这个模板完全遵循您的要求，只使用div标签和内联样式，适合移动端APP使用，具有清新简洁的视觉效果。