此主题耗费两年半时间打造，采用Sui Mobile框架开发，全站spa无刷新加载，采用优秀的缓存技术，大大提升网页加载速度，图片懒加载，列表分页无限滚动加载，网站采用模块化设计，你可以开发自己的小组件，在后台可对页面进行diy，目前支持首页，社区，个人中心，自定义页面，有此功能保证你的网站风格独一无二，从此告别单一庸俗的页面，消息中心更改为页面，去除ajax实时消息，并且ajax发帖，回复，登录注册。
主题自带勋章插件，用户认证插件，用户背景，红包插件，大转盘抽奖，提升用户活跃度，后续会增加更多有趣的插件，演示地址https://uer.cc 请用手机访问，目前定价99元，可以联系qq57200091购买，以下是部分功能及页面演示图：
以下是后台功能演示：
小组件：
页面自定义小组件：
帖子数据调用：
用户列表数据调用：
自定义页面：
用户认证：
认证管理：
主题配色：
红包封面：
荣誉勋章：
以下是小组件简单开发示例
以用户列表为例首先现在后台新建组件
建立成功后打开主题目录找到App目录即可看到swiper_user目录打开可以看到以下文件
打开app_view.php文件填写你的代码即可，帖子组件和用户列表组件，数据均存储在变量$datas里面，直接foreach调用即可，每个组件都有各自的id，比如一个组件在一个页面上多次调用为了避免css样式名冲突我们可以在自定义css的时候加上$id变量如图所示：
言归正传，先自定义css：
<style>
.zero_block_{$id} {
padding: .425rem;
overflow: hidden;
visibility: visible;
}
.zero_block_{$id} li {
position: relative;
height: auto !important;
min-height: auto !important;
border-radius: 0.25rem;
background: #fbfbfb;
overflow: hidden;
}
.zero_block_{$id} .yhzsm-tbg {
width: 100%;
height: 2.55rem;
}
.zero_block_{$id} li .yhzsm-zbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2.55rem;
background: rgba(255, 255, 255, .3);
-webkit-backdrop-filter: saturate(100%) blur(3px);
backdrop-filter: saturate(100%) blur(3px);
border-radius: 0.25rem 0.25rem 0 0;
}
.zero_block_{$id} .yhzsm-sjc {
position: relative;
top: -1rem;
overflow: hidden;
}
.zero_block_{$id} .yhzsm-sjc .sjc-tx {
display: block;
text-align: center;
position: relative;
width: 2.45rem;
margin: 0 auto;
}
.zero_block_{$id} .yhzsm-sjc .sjc-tx .verify-bg{
width: .85rem;
height: .85rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #fff;
background: var(--verify-bg);
position: absolute;
font-size: .6rem;
border: 1px solid #fff;
}
.zero_block_{$id} .yhzsm-sjc .sjc-tx .verify-bg{
right: 0rem;
bottom: 0rem;
}
.zero_block_{$id} .yhzsm-sjc .sjc-tx img {
width: 2.45rem;
height: 2.45rem;
vertical-align: top;
border-radius: 50%;
border: 2px solid #fbfbfb;
}
.zero_block_{$id} .yhzsm-sjc .sjc-mc {
margin: 0.15rem 0;
overflow: hidden;
display: block;
}
.zero_block_{$id} .yhzsm-sjc .sjc-mc h2 {
height: 1.25rem;
line-height: 1.25rem;
font-size: .72rem;
color: #000000;
padding: 0 0.25rem;
text-align: center;
font-weight: 400;
overflow: hidden;
}
.zero_block_{$id} .yhzsm-sjc .sjc-mc p {
height: 1rem;
line-height: 1rem;
font-size: .55rem;
color: #929292;
padding: 0 0.25rem;
text-align: center;
overflow: hidden;
}
.zero_block_{$id} .yhzsm-sjc .sjc-an {
height: 1.55rem;
line-height: 1.55rem;
margin: 0 25%;
margin-top: 0.35rem;
font-size: .64rem;
text-align: center;
background: var(--theme-color);
color: #fff;
border-radius: 1.65rem;
display: block;
}
</style>每个样式属性上都加上id标识
html内容:
<div class="swiper-container zero_block_{$id} bg_f b-ra m-gin mb-gin swiper-initialized swiper-horizontal swiper-backface-hidden">
<ul class="swiper-wrapper">
{foreach $datas as $v}
<?php
$Auth_list = S("User_auth_list"); //认证方式列表
$Auth = S("User_auth"); //认证列表
$Auth_user = $Auth->find('*',['uid'=>$v['uid']]);
$Auth_data = $Auth_list->find('*',['id'=>$Auth_user['auth_id']]);
?>
<li class="swiper-slide">
<div class="yhzsm-tbg"
style="background: url({#WWW}{$v['avatar']['a']});background-repeat: no-repeat;background-position: center;background-size: cover;">
</div>
<div class="yhzsm-zbg"></div>
<div class="yhzsm-sjc">
<a onclick="ajax_user_card('{$v.uid}');" class="sjc-tx">
<img src="{#WWW}{$v['avatar']['a']}">
{if $Auth->has(["AND"=>['uid'=>$v['uid']]])}
<span class="verify-bg" style="--verify-bg:{$Auth_data.color};" title="{$Auth_data.name}"><iconpark-icon
name="{$Auth_data.icon}"></iconpark-icon></span>
{/if}
</a>
<a onclick="ajax_user_card('{$v.uid}');" class="sjc-mc">
<h2>{$v.user}</h2>
<p>主题{$v.threads} 积分{$v.credits}</p>
</a>
<a href="{php HYBBS_URL('my',$v['user'],'messinfo');}?uid={$v['uid']}" class="sjc-an">打招呼</a>
</div>
</li>
{/foreach}
</ul>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
<script>
var swiper_{$id} = new Swiper('.zero_block_{$id}',{slidesPerView:2.9,spaceBetween:5,freeMode:true,});
</script>
可见组件数据通过$datas变量调用即可，这样一个简单的滑动用户组件就开发完成了
