php用户中心ui,Layui用户中心模板

此插件仅是一个用户中心的模板,必须配合这个用户中心(百搭)才能使用。

插件介绍

1.插件采用的是Layui前段框架

2.手机端自适应

3.后台采用的是多标签页,可同时打开10个标签。

4.后台首页可以显示当前用户的文章数量、待审核的文章数量、收藏文章、评论等。

5.用户可以自主上传图片更换头像

详细的请直接登录可风网网站,进去后台即可体验。(可风网用户中心天天更新,天天都在完善)

更新日志

1.3

1. 可以设置普通会员投稿(默认情况下,需要充值VIP会员才能投稿。)(注意:普通用户投稿后不能编辑)

2. 不设置QQ互联APPID和KEY的情况下,不显示任何与QQ有关的按钮

3. 新后台首页,更加直观的了解网站情况

201712171513505090205494.jpg

201712171513505090602501.jpg

1.2

1. 新增签到功能

201712131513170653189297.png

201712131513170653136778.png

怎么使用?

此插件使用方法:安装并启用用户中心(百搭)插件,然后启动此插件。重建模板缓存即可

201712051512472785243721.png

登陆后界面

201712081512735454890087.png

可以在后台设置用户登录后自动弹出公告。未设置自动弹出的话也可以在右上角“系统公告”手动查看

201712081512735480364299.png

发布投稿

201712081512735547977266.png

文章列表

201712081512735591960305.png

收藏列表

201712081512735647106066.png

评论列表

201712081512735702382316.png

实名认证

201712051512467251123789.jpg

充值界面

201712051512467252165925.jpg

充值界面点击获取卡密,介绍购买流程等

201712081512735738157965.png

点击“获取卡密”即可弹出此小窗,可以在后台设置这些文字。“联系购买”的链接也可以设置,可以设置QQ交谈链接

订单列表

201712061512559074168997.png

个人设置

201712081512735769745486.png

用户可以自己上传头像

上传的图片可以用滚轮缩放图片,裁剪后就可以上传

201712081512735823758323.png

手机端截图

201712051512473915429722.png 201712051512473915201322.png

管理员设置界面

201712131513170753102103.png

后台大标题:就是左上角搜索框左边的文字。不填写的话自动是“网站名+用户中心”

显示天气:打开后,用户登录能看到登陆地当天的天气

登录公告:打开后,用户登录自动弹出公告。

公告内容:直接填写文字,可以加入html A标签代码。换行不需要加
标签。请直接换行,提交后会自动转换

首页信息:就是登录后,后台首先,在文章列表和用户基本信息上方的文字

卡密购买说明:VIP充值和积分充值界面有“获取卡密”按钮,点开后即展示此内容。

卡密购买:同上,弹出的窗口有“联系购买”按钮,点击后会打开此链接。

底部bar:可自定义添加你的版权。不填写就不会显示bar

友好时间:开启后文章列表,留言等页面,有时间的地方会显示X天前这样。不开启就是2017-12-12 10:55:12这样。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C知道:你好!关于 layui 用户中心模版,Layui 是一款经典的前端模块化框架,它提供了丰富的UI组件和交互效果,非常适合快速构建后台管理系统。 在 Layui 中,并没有专门的用户中心模板,但你可以根据需求自行组合和定制 Layui 的各种组件来实现用户中心的功能。以下是一个简单的示例代码,供你参考: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户中心</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md8"> <!-- 用户信息展示区域 --> <fieldset class="layui-elem-field layui-field-title"> <legend>用户信息</legend> </fieldset> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">用户名:</label> <div class="layui-input-inline"> <input type="text" name="username" lay-verify="required" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱:</label> <div class="layui-input-inline"> <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input"> </div> </div> <!-- 更多用户信息字段 --> <!-- ... --> </div> </div> <div class="layui-col-md4"> <!-- 用户头像上传区域 --> <fieldset class="layui-elem-field layui-field-title"> <legend>用户头像</legend> </fieldset> <div class="layui-upload"> <button type="button" class="layui-btn" id="upload">上传头像</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="avatar"> <p id="avatarText"></p> </div> </div> </div> </div> </div> <script src="layui/layui.js"></script> <script> layui.use(['form', 'upload'], function(){ var form = layui.form; var upload = layui.upload; //监听提交 form.on('submit', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); //上传头像 upload.render({ elem: '#upload', url: '/upload/', done: function(res){ $('#avatar').attr('src', res.url); $('#avatarText').html('上传成功'); } }); }); </script> </body> </html> ``` 这是一个简单的用户中心页面示例,其中包含了用户信息展示和头像上传功能。你可以根据实际需要自行添加其他功能,比如修改密码、查看订单等等。希望对你有所帮助!如果还有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值