基于您要求的朋友圈模板代码,使用#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;
}
}这个模板包含以下特点:
- 使用#667eea作为主色调,搭配白色和浅灰色背景
- 圆角设计(12px圆角)
- 顶部用户信息栏
朋友圈动态列表,每条动态包含:
- 用户头像和昵称
- 发布时间
- 动态内容
- 1-4张随机图片
- 点赞和评论数
- 底部加载更多提示
- 清新简洁的卡片式布局
- 所有图片都使用占位图API
- 完全使用div标签和内联样式
您可以根据需要调整样式或内容结构。
需支付 5元 阅读剩余内容