朋友圈

发布于 2025-04-26 浏览 34 人次

基于您要求的朋友圈模板代码,使用#667eea作为主色调,采用圆角设计和清新风格:

<?php 
namespace view\app\layout;
use think\facade\Db;
use think\facade\Request;

class pengyouquan
{
    public $info = array(
        'open'=>1,
        'name'=>'朋友圈',
        'url'=>'/pages/mi/index?id=pengyouquan',
    );
    
    public function layout()
    {
        $data = array(
            'zhuti'=>'#667eea',
            'title'=>'朋友圈',
            'style'=>'padding: 15px; background-color: #f8fafc;',
            'dataStyle'=>'',
            'dataModel'=>array(),
            'data'=>array(
                // 用户信息栏
                array(
                    'type'=>'html',
                    'style'=>'background-color: #667eea; color: white; padding: 15px; border-radius: 12px; margin-bottom: 20px;',
                    'listsStyle'=>'',
                    'lists'=>array(
                        array(
                            'content' => '<div style="display: flex; align-items: center;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 15px;">
                                    <img src="/api/placeholder?w=100&h=100" style="width: 100%; height: 100%; object-fit: cover;">
                                </div>
                                <div>
                                    <div style="font-size: 18px; font-weight: bold;">我的昵称</div>
                                    <div style="font-size: 14px; opacity: 0.8;">今天心情很好~</div>
                                </div>
                            </div>'
                        )
                    )
                ),
                
                // 朋友圈动态列表
                array(
                    'type'=>'html',
                    'style'=>'',
                    'listsStyle'=>'margin-bottom: 20px;',
                    'lists'=>$this->getMoments()
                ),
                
                // 加载更多
                array(
                    'type'=>'html',
                    'style'=>'text-align: center; padding: 15px 0; color: #667eea;',
                    'listsStyle'=>'',
                    'lists'=>array(
                        array(
                            'content' => '<div>加载更多...</div>'
                        )
                    )
                )
            ),
        );
        return json(array('code' => 1, 'msg' => '加载成功', 'data' => $data, 'scroll'=>0.01));
    }
    
    private function getMoments()
    {
        $moments = [];
        $avatars = [
            '/api/placeholder?w=100&h=100&color=ff7675',
            '/api/placeholder?w=100&h=100&color=74b9ff',
            '/api/placeholder?w=100&h=100&color=55efc4',
            '/api/placeholder?w=100&h=100&color=a29bfe'
        ];
        
        $contents = [
            '今天天气真好,出去走走~',
            '分享一首好听的歌给大家',
            '新买的咖啡机到了,开心!',
            '周末约了朋友一起爬山',
            '记录一下今天的晚餐'
        ];
        
        for($i = 0; $i < 5; $i++) {
            $imageCount = rand(1, 4);
            $images = [];
            for($j = 0; $j < $imageCount; $j++) {
                $images[] = '/api/placeholder?w=300&h=300&color='.substr(md5(rand()), 0, 6);
            }
            
            $moment = [
                'style' => 'background-color: white; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);',
                'content' => '<div style="margin-bottom: 15px;">
                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <div style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 10px;">
                            <img src="'.$avatars[array_rand($avatars)].'" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div>
                            <div style="font-weight: bold; color: #333;">用户'.($i+1).'</div>
                            <div style="font-size: 12px; color: #999;">'.date('Y-m-d H:i', time() - rand(0, 86400)).'</div>
                        </div>
                    </div>
                    <div style="margin-bottom: 10px; color: #333; line-height: 1.5;">'.$contents[array_rand($contents)].'</div>
                    <div style="display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px;">'
            ];
            
            foreach($images as $img) {
                $moment['content'] .= '<div style="width: calc(33.33% - 5px); aspect-ratio: 1/1; border-radius: 6px; overflow: hidden;">
                    <img src="'.$img.'" style="width: 100%; height: 100%; object-fit: cover;">
                </div>';
            }
            
            $moment['content'] .= '</div>
                <div style="display: flex; justify-content: space-between; color: #999; font-size: 14px;">
                    <div>👍 12</div>
                    <div>💬 3</div>
                </div>
            </div>';
            
            $moments[] = $moment;
        }
        
        return $moments;
    }
}

这个模板包含以下特点:

  1. 使用#667eea作为主色调,搭配白色和浅灰色背景
  2. 圆角设计(12px圆角)
  3. 顶部用户信息栏
  4. 朋友圈动态列表,每条动态包含:

    • 用户头像和昵称
    • 发布时间
    • 动态内容
    • 1-4张随机图片
    • 点赞和评论数
  5. 底部加载更多提示
  6. 清新简洁的卡片式布局
  7. 所有图片都使用占位图API
  8. 完全使用div标签和内联样式

您可以根据需要调整样式或内容结构。