我将为您创建一个签到中心的模板，采用明亮的配色方案和圆角设计，保持简洁易读的风格。以下是基于您提供的格式要求的代码：
<?php
namespace view\app\layout;
use think\facade\Db;
use think\facade\Request;
// +----------------------------------------------------------------------
// | 模板自定义扩展方法
// | Author @梦雨 QQ50361804
// +----------------------------------------------------------------------
class sign
{
public $info = array(
'open'=>1,
'name'=>'签到中心',//页面描述
'url'=>'/pages/mi/index?id=sign',//所有的url格式都是/pages/mi/index后面是参数
);
// 获取布局数据
public function layout()
{
$data = array(
'zhuti'=>'#4a8bfc',//主题的背景样式不可以是白色背景或者留空
'title'=>'签到中心',//头部标题
'style'=>'padding: 15px; background-color: #f8f9fa;',//页面的容器配置
'dataStyle'=>'',//页面的模块通用配置
'dataModel'=>array(),
'data'=>array(
// 用户信息卡片
array(
'type'=>'html',
'style'=>'background-color: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
'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: 12px;">
<img src="https://page.mixinnet.cn/api/placeholder?w=100&h=100" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div>
<div style="font-size: 16px; font-weight: 500; color: #333;">欢迎回来，用户123</div>
<div style="font-size: 12px; color: #999; margin-top: 4px;">已连续签到3天</div>
</div>
</div>'
)
)
),
// 签到日历
array(
'type'=>'html',
'style'=>'background-color: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
'listsStyle'=>'',
'lists'=>array(
array(
'content' => '<div style="text-align: center; margin-bottom: 15px;">
<div style="font-size: 16px; font-weight: 500; color: #333;">2023年11月</div>
</div>
<div style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;">
<div style="font-size: 12px; color: #999; text-align: center;">日</div>
<div style="font-size: 12px; color: #999; text-align: center;">一</div>
<div style="font-size: 12px; color: #999; text-align: center;">二</div>
<div style="font-size: 12px; color: #999; text-align: center;">三</div>
<div style="font-size: 12px; color: #999; text-align: center;">四</div>
<div style="font-size: 12px; color: #999; text-align: center;">五</div>
<div style="font-size: 12px; color: #999; text-align: center;">六</div>
<div style="height: 40px;"></div>
<div style="height: 40px;"></div>
<div style="height: 40px; display: flex; justify-content: center; align-items: center;">
<div style="width: 30px; height: 30px; border-radius: 50%; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; font-size: 12px;">1</div>
</div>
<div style="height: 40px; display: flex; justify-content: center; align-items: center;">
<div style="width: 30px; height: 30px; border-radius: 50%; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; font-size: 12px;">2</div>
</div>
<div style="height: 40px; display: flex; justify-content: center; align-items: center;">
<div style="width: 30px; height: 30px; border-radius: 50%; background-color: #4a8bfc; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 12px;">3</div>
</div>
<div style="height: 40px; display: flex; justify-content: center; align-items: center;">
<div style="width: 30px; height: 30px; border-radius: 50%; background-color: #4a8bfc; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 12px;">4</div>
</div>
<div style="height: 40px; display: flex; justify-content: center; align-items: center;">
<div style="width: 30px; height: 30px; border-radius: 50%; background-color: #4a8bfc; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 12px;">5</div>
</div>
<!-- 更多日期... -->
</div>'
)
)
),
// 签到按钮
array(
'type'=>'html',
'style'=>'background-color: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
'listsStyle'=>'',
'lists'=>array(
array(
'content' => '<div style="text-align: center;">
<div style="background-color: #4a8bfc; color: #fff; border-radius: 25px; padding: 12px 0; font-size: 16px; font-weight: 500;">立即签到</div>
</div>'
)
)
),
// 签到规则
array(
'type'=>'html',
'style'=>'background-color: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
'listsStyle'=>'',
'lists'=>array(
array(
'content' => '<div style="font-size: 15px; font-weight: 500; color: #333; margin-bottom: 10px;">签到规则</div>
<div style="font-size: 13px; color: #666; line-height: 1.6;">
<div style="margin-bottom: 5px;">• 每日签到可获得5积分</div>
<div style="margin-bottom: 5px;">• 连续签到7天额外奖励20积分</div>
<div style="margin-bottom: 5px;">• 每月满勤奖励50积分</div>
<div>• 积分可用于兑换礼品</div>
</div>'
)
)
),
// 积分商城入口
array(
'type'=>'html',
'style'=>'background-color: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
'listsStyle'=>'',
'lists'=>array(
array(
'url'=>'/pages/mi/index?id=shop',
'type'=>'navigateTo',
'content' => '<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="font-size: 15px; font-weight: 500; color: #333;">积分商城</div>
<div style="font-size: 13px; color: #999;">当前积分: 120 ></div>
</div>'
)
)
)
),
);
return json(array('code' => 1, 'msg' => '加载成功', 'data' => $data, 'scroll'=>0.01));
}
}这个签到中心模板包含以下功能模块：
- 用户信息卡片 - 显示用户头像、昵称和连续签到天数
- 签到日历 - 展示当月签到情况，已签到的日期会高亮显示
- 签到按钮 - 醒目的签到操作按钮
- 签到规则 - 清晰列出签到规则和积分获取方式
- 积分商城入口 - 快速跳转到积分商城
设计特点：
- 采用明亮的蓝色(#4a8bfc)作为主题色
- 所有卡片使用圆角设计(border-radius: 12px)
- 卡片之间有适当的阴影和间距，提升层次感
- 文字大小和颜色对比度良好，确保可读性
- 整体布局简洁明了，操作区域明显
您可以根据实际需求调整颜色、间距或添加更多功能模块。
需支付 5元 阅读剩余内容
