一个生活服务主题的模板，使用紫色(#9f7aea)作为主色调，采用圆角设计和简洁布局。以下是完整的PHP模板代码：
<?php
namespace view\app\layout;
use think\facade\Db;
use think\facade\Request;
class LifeService
{
public $info = array(
'open'=>1,
'name'=>'生活服务',
'url'=>'/pages/mi/index?id=life_service',
);
public function layout()
{
$data = array(
'zhuti'=>'#9f7aea',
'title'=>'生活服务',
'style'=>'padding: 15px; background-color: #f9f5ff;',
'dataStyle'=>'',
'dataModel'=>array(),
'data'=>array(
// 轮播图
array(
'type'=>'swiper',
'style'=>'margin-bottom: 20px;',
'listStyle'=>'height: 160px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(159, 122, 234, 0.2);',
'list'=>$this->swiper(),
),
// 快捷服务入口
array(
'type'=>'html',
'style'=>'margin-bottom: 20px;',
'listsStyle'=>'display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;',
'lists'=>$this->quickServices(),
),
// 热门服务
array(
'type'=>'html',
'style'=>'background-color: white; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
'listsStyle'=>'',
'lists'=>array(
array(
'style'=>'margin-bottom: 15px;',
'content'=>'<div style="font-size: 18px; font-weight: bold; color: #5b21b6;">热门生活服务</div>'
),
array(
'style'=>'',
'listsStyle'=>'display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;',
'lists'=>$this->popularServices(),
)
)
),
// 附近商家
array(
'type'=>'html',
'style'=>'background-color: white; border-radius: 12px; padding: 15px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
'listsStyle'=>'',
'lists'=>array(
array(
'style'=>'margin-bottom: 15px;',
'content'=>'<div style="font-size: 18px; font-weight: bold; color: #5b21b6;">附近优质商家</div>'
),
array(
'style'=>'',
'listsStyle'=>'',
'lists'=>$this->nearbyStores(),
)
)
)
),
);
return json(array('code' => 1, 'msg' => '加载成功', 'data' => $data, 'scroll'=>0.01));
}
private function swiper()
{
$swiperData = array(
array(
'url'=>'/pages/mi/index?id=service_detail&type=cleaning',
'pic'=>'/api/placeholder?w=800&h=400&text=家政服务专场',
'type'=>'navigateTo',
),
array(
'url'=>'/pages/mi/index?id=service_detail&type=repair',
'pic'=>'/api/placeholder?w=800&h=400&text=家电维修优惠',
'type'=>'navigateTo',
),
array(
'url'=>'/pages/mi/index?id=service_detail&type=move',
'pic'=>'/api/placeholder?w=800&h=400&text=搬家服务特惠',
'type'=>'navigateTo',
),
);
$swiper = [];
foreach($swiperData as $x=>$vo){
$swiper[$x] = array(
'style'=>'width:100%; height:100%;',
'url'=>$vo['url'],
'type'=>$vo['type'],
'mode'=>'aspectFill',
'pic'=> CheckUrl($vo['pic']),
);
}
return $swiper;
}
private function quickServices()
{
$services = array(
array('name'=>'家政保洁', 'icon'=>'/api/placeholder?w=100&h=100&text=🧹', 'url'=>'/pages/mi/index?id=service_list&type=cleaning'),
array('name'=>'家电维修', 'icon'=>'/api/placeholder?w=100&h=100&text=🔧', 'url'=>'/pages/mi/index?id=service_list&type=repair'),
array('name'=>'搬家服务', 'icon'=>'/api/placeholder?w=100&h=100&text=🚚', 'url'=>'/pages/mi/index?id=service_list&type=move'),
array('name'=>'管道疏通', 'icon'=>'/api/placeholder?w=100&h=100&text=🚿', 'url'=>'/pages/mi/index?id=service_list&type=pipe'),
array('name'=>'开锁换锁', 'icon'=>'/api/placeholder?w=100&h=100&text=🔑', 'url'=>'/pages/mi/index?id=service_list&type=lock'),
array('name'=>'洗衣服务', 'icon'=>'/api/placeholder?w=100&h=100&text=👕', 'url'=>'/pages/mi/index?id=service_list&type=laundry'),
array('name'=>'宠物服务', 'icon'=>'/api/placeholder?w=100&h=100&text=🐶', 'url'=>'/pages/mi/index?id=service_list&type=pet'),
array('name'=>'更多服务', 'icon'=>'/api/placeholder?w=100&h=100&text=⋯', 'url'=>'/pages/mi/index?id=service_category'),
);
$lists = [];
foreach($services as $x=>$vo){
$lists[$x] = array(
'style'=>'text-align: center;',
'url'=>$vo['url'],
'type'=>'navigateTo',
'content'=>'<div style="background-color: white; border-radius: 10px; padding: 12px 5px; box-shadow: 0 2px 6px rgba(159,122,234,0.1);">
<div style="width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden;">
<img src="'.CheckUrl($vo['icon']).'" style="width:100%; height:100%; object-fit: cover;">
</div>
<div style="font-size: 12px; color: #5b21b6;">'.$vo['name'].'</div>
</div>'
);
}
return $lists;
}
private function popularServices()
{
$services = array(
array(
'title'=>'深度保洁4小时',
'price'=>'¥168',
'original_price'=>'¥228',
'sales'=>'月销200+',
'image'=>'/api/placeholder?w=300&h=200&text=保洁服务',
'url'=>'/pages/mi/index?id=service_detail&code=clean001'
),
array(
'title'=>'空调清洗服务',
'price'=>'¥99',
'original_price'=>'¥159',
'sales'=>'月销150+',
'image'=>'/api/placeholder?w=300&h=200&text=空调清洗',
'url'=>'/pages/mi/index?id=service_detail&code=ac001'
),
array(
'title'=>'马桶疏通',
'price'=>'¥79',
'original_price'=>'¥120',
'sales'=>'月销180+',
'image'=>'/api/placeholder?w=300&h=200&text=管道疏通',
'url'=>'/pages/mi/index?id=service_detail&code=pipe001'
),
array(
'title'=>'日常保洁2小时',
'price'=>'¥88',
'original_price'=>'¥128',
'sales'=>'月销300+',
'image'=>'/api/placeholder?w=300&h=200&text=日常保洁',
'url'=>'/pages/mi/index?id=service_detail&code=clean002'
),
);
$lists = [];
foreach($services as $x=>$vo){
$lists[$x] = array(
'style'=>'',
'url'=>$vo['url'],
'type'=>'navigateTo',
'content'=>'<div style="background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
<div style="height: 100px; overflow: hidden;">
<img src="'.CheckUrl($vo['image']).'" style="width:100%; height:100%; object-fit: cover;">
</div>
<div style="padding: 10px;">
<div style="font-size: 14px; font-weight: bold; margin-bottom: 5px; color: #333;">'.$vo['title'].'</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<span style="font-size: 16px; color: #9f7aea; font-weight: bold;">'.$vo['price'].'</span>
<span style="font-size: 12px; color: #999; text-decoration: line-through; margin-left: 5px;">'.$vo['original_price'].'</span>
</div>
<div style="font-size: 10px; color: #999;">'.$vo['sales'].'</div>
</div>
</div>
</div>'
);
}
return $lists;
}
private function nearbyStores()
{
$stores = array(
array(
'name'=>'阳光家政服务中心',
'rating'=>'4.8',
'distance'=>'1.2km',
'tags'=>['深度保洁','家电清洗','月嫂服务'],
'image'=>'/api/placeholder?w=200&h=150&text=阳光家政',
'url'=>'/pages/mi/index?id=store_detail&code=store001'
),
array(
'name'=>'快修家电维修',
'rating'=>'4.7',
'distance'=>'0.8km',
'tags'=>['空调维修','冰箱维修','洗衣机维修'],
'image'=>'/api/placeholder?w=200&h=150&text=快修家电',
'url'=>'/pages/mi/index?id=store_detail&code=store002'
),
array(
'name'=>'便捷搬家服务',
'rating'=>'4.9',
'distance'=>'2.5km',
'tags'=>['居民搬家','公司搬迁','大件搬运'],
'image'=>'/api/placeholder?w=200&h=150&text=便捷搬家',
'url'=>'/pages/mi/index?id=store_detail&code=store003'
),
);
$lists = [];
foreach($stores as $x=>$vo){
$tags = '';
foreach($vo['tags'] as $tag){
$tags .= '<span style="display: inline-block; font-size: 10px; color: #9f7aea; background-color: #f3e8ff; padding: 2px 6px; border-radius: 10px; margin-right: 5px; margin-bottom: 5px;">'.$tag.'</span>';
}
$lists[$x] = array(
'style'=>'margin-bottom: 15px;',
'url'=>$vo['url'],
'type'=>'navigateTo',
'content'=>'<div style="display: flex; background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
<div style="width: 100px; height: 100px; flex-shrink: 0;">
<img src="'.CheckUrl($vo['image']).'" style="width:100%; height:100%; object-fit: cover;">
</div>
<div style="flex: 1; padding: 10px;">
<div style="font-size: 16px; font-weight: bold; margin-bottom: 5px; color: #333;">'.$vo['name'].'</div>
<div style="display: flex; align-items: center; margin-bottom: 5px;">
<span style="font-size: 12px; color: #f59e0b;">★</span>
<span style="font-size: 12px; color: #666; margin-left: 3px;">'.$vo['rating'].'</span>
<span style="font-size: 12px; color: #666; margin-left: 10px;">距离'.$vo['distance'].'</span>
</div>
<div style="margin-top: 5px;">'.$tags.'</div>
</div>
</div>'
);
}
return $lists;
}
}这个模板包含以下特点：
- 使用紫色(#9f7aea)作为主色调，搭配浅紫色背景，整体配色柔和清新
- 采用圆角设计，所有模块都有12px的圆角
布局结构清晰，包含：
- 顶部轮播图
- 8个快捷服务入口(网格布局)
- 热门服务推荐(两列网格)
- 附近商家列表
- 所有图片都使用占位图API，并添加了描述性文字
- 每个可点击元素都有对应的跳转链接
- 添加了适当的阴影效果增强层次感
- 文字大小和颜色对比度良好，确保可读性
模板模拟了完整的生活服务类应用页面，包含了各类服务入口、推荐服务和附近商家等信息展示。
