增加banner后台管控
This commit is contained in:
parent
9df71d0faf
commit
92b79bf0b1
@ -5,9 +5,11 @@ use think\facade\Db;
|
||||
use think\facade\View;
|
||||
use think\facade\Request;
|
||||
|
||||
class Yunzeradmin extends Base{
|
||||
class Yunzeradmin extends Base
|
||||
{
|
||||
// 角色列表
|
||||
public function groupinfo(){
|
||||
public function groupinfo()
|
||||
{
|
||||
$group = Db::table('yz_admin_user_group')->select();
|
||||
View::assign([
|
||||
'group' => $group
|
||||
@ -16,38 +18,39 @@ class Yunzeradmin extends Base{
|
||||
}
|
||||
|
||||
// 角色添加
|
||||
public function groupadd(){
|
||||
if(Request::isPost()){
|
||||
public function groupadd()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$data['group_name'] = trim(input('post.group_name'));
|
||||
if(!$data['group_name']){
|
||||
$this->returnCode(1, '角色名称不能为空');
|
||||
if (!$data['group_name']) {
|
||||
return json(['code' => 1, 'msg' => '角色名称不能为空']);
|
||||
}
|
||||
$data['status'] = (int)trim(input('post.status'));
|
||||
$data['status'] = (int) trim(input('post.status'));
|
||||
$data['create_time'] = time();
|
||||
$menus = input('post.menu/a');
|
||||
if($menus){
|
||||
if ($menus) {
|
||||
$data['rights'] = json_encode(array_keys($menus));
|
||||
}
|
||||
$res = Db::table('yz_admin_user_group')->insert($data);
|
||||
if(!$res){
|
||||
$this->returnCode(1, '添加角色失败');
|
||||
if (!$res) {
|
||||
return json(['code' => 1, 'msg' => '添加角色失败']);
|
||||
}
|
||||
$this->returnCode(0);
|
||||
}else{
|
||||
$menus = Db::table('yz_admin_sys_menu')->order('type,sort desc')->where('status','=',1)->select();
|
||||
return json(['code' => 0, 'msg' => '添加成功']);
|
||||
} else {
|
||||
$menus = Db::table('yz_admin_sys_menu')->order('type,sort desc')->where('status', '=', 1)->select();
|
||||
$menu = [];
|
||||
|
||||
// 先处理所有父菜单
|
||||
foreach($menus as $menus_v){
|
||||
if($menus_v['parent_id'] == 0){
|
||||
foreach ($menus as $menus_v) {
|
||||
if ($menus_v['parent_id'] == 0) {
|
||||
$menu[$menus_v['smid']] = $menus_v;
|
||||
$menu[$menus_v['smid']]['children'] = []; // 初始化 children 数组
|
||||
}
|
||||
}
|
||||
|
||||
// 再处理子菜单
|
||||
foreach($menus as $menus_v){
|
||||
if($menus_v['parent_id'] != 0 && isset($menu[$menus_v['parent_id']])){
|
||||
foreach ($menus as $menus_v) {
|
||||
if ($menus_v['parent_id'] != 0 && isset($menu[$menus_v['parent_id']])) {
|
||||
$menu[$menus_v['parent_id']]['children'][] = $menus_v;
|
||||
}
|
||||
}
|
||||
@ -60,46 +63,47 @@ class Yunzeradmin extends Base{
|
||||
}
|
||||
|
||||
// 角色编辑
|
||||
public function groupedit(){
|
||||
if(Request::isPost()){
|
||||
$group_id = (int)trim(input('post.group_id'));
|
||||
public function groupedit()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$group_id = (int) trim(input('post.group_id'));
|
||||
$data['group_name'] = trim(input('post.group_name'));
|
||||
if(!$data['group_name']){
|
||||
$this->returnCode(1, '角色名称不能为空');
|
||||
if (!$data['group_name']) {
|
||||
return json(['code' => 1, 'msg' => '角色名称不能为空']);
|
||||
}
|
||||
$data['status'] = (int)trim(input('post.status'));
|
||||
$data['status'] = (int) trim(input('post.status'));
|
||||
$menus = input('post.menu/a');
|
||||
if($menus){
|
||||
if ($menus) {
|
||||
$data['rights'] = json_encode(array_keys($menus));
|
||||
}else{
|
||||
} else {
|
||||
$data['rights'] = '';
|
||||
}
|
||||
$res = Db::table('yz_admin_user_group')->where('group_id',$group_id)->update($data);
|
||||
if(!$res){
|
||||
$this->returnCode(1, '更新角色失败');
|
||||
$res = Db::table('yz_admin_user_group')->where('group_id', $group_id)->update($data);
|
||||
if (!$res) {
|
||||
return json(['code' => 1, 'msg' => '更新角色失败']);
|
||||
}
|
||||
$this->returnCode(0);
|
||||
}else{
|
||||
$group_id = (int)input('get.group_id');
|
||||
$group = Db::table('yz_admin_user_group')->where('group_id',$group_id)->find();
|
||||
if($group && $group['rights']){
|
||||
return json(['code' => 0, 'msg' => '更新成功']);
|
||||
} else {
|
||||
$group_id = (int) input('get.group_id');
|
||||
$group = Db::table('yz_admin_user_group')->where('group_id', $group_id)->find();
|
||||
if ($group && $group['rights']) {
|
||||
$group['rights'] = json_decode($group['rights']);
|
||||
}
|
||||
|
||||
$menus = Db::table('yz_admin_sys_menu')->order('type,sort desc')->where('status','=',1)->select();
|
||||
$menus = Db::table('yz_admin_sys_menu')->order('type,sort desc')->where('status', '=', 1)->select();
|
||||
$menu = [];
|
||||
|
||||
// 先处理所有父菜单
|
||||
foreach($menus as $menus_v){
|
||||
if($menus_v['parent_id'] == 0){
|
||||
foreach ($menus as $menus_v) {
|
||||
if ($menus_v['parent_id'] == 0) {
|
||||
$menu[$menus_v['smid']] = $menus_v;
|
||||
$menu[$menus_v['smid']]['children'] = []; // 初始化 children 数组
|
||||
}
|
||||
}
|
||||
|
||||
// 再处理子菜单
|
||||
foreach($menus as $menus_v){
|
||||
if($menus_v['parent_id'] != 0 && isset($menu[$menus_v['parent_id']])){
|
||||
foreach ($menus as $menus_v) {
|
||||
if ($menus_v['parent_id'] != 0 && isset($menu[$menus_v['parent_id']])) {
|
||||
$menu[$menus_v['parent_id']]['children'][] = $menus_v;
|
||||
}
|
||||
}
|
||||
@ -113,17 +117,19 @@ class Yunzeradmin extends Base{
|
||||
}
|
||||
|
||||
// 角色删除
|
||||
public function groupdel(){
|
||||
$group_id = (int)input('post.group_id');
|
||||
$res = Db::table('yz_admin_user_group')->where('group_id',$group_id)->delete();
|
||||
if(empty($res)){
|
||||
$this->returnCode(1, '删除角色失败');
|
||||
public function groupdel()
|
||||
{
|
||||
$group_id = (int) input('post.group_id');
|
||||
$res = Db::table('yz_admin_user_group')->where('group_id', $group_id)->delete();
|
||||
if (empty($res)) {
|
||||
return json(['code' => 1, 'msg' => '删除角色失败']);
|
||||
}
|
||||
$this->returnCode(0);
|
||||
return json(['code' => 0, 'msg' => '删除成功']);
|
||||
}
|
||||
|
||||
// 管理员列表
|
||||
public function userinfo(){
|
||||
public function userinfo()
|
||||
{
|
||||
$lists = Db::table('yz_admin_user')->select();
|
||||
$group = [];
|
||||
$groups = Db::table('yz_admin_user_group')->select();
|
||||
@ -138,49 +144,50 @@ class Yunzeradmin extends Base{
|
||||
}
|
||||
|
||||
// 管理员添加
|
||||
public function useradd(){
|
||||
if(Request::isPost()){
|
||||
public function useradd()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$data['account'] = trim(input('post.account'));
|
||||
if(empty($data['account'])){
|
||||
$this->returnCode(1, '账号不能为空');
|
||||
if (empty($data['account'])) {
|
||||
return json(['code' => 1, 'msg' => '账号不能为空']);
|
||||
}
|
||||
$pattern = "/^([0-9A-Za-z-_.]+)@([0-9a-z]+.[a-z]{2,3}(.[a-z]{2})?)$/i";
|
||||
if(!preg_match($pattern,$data['account'])){
|
||||
$this->returnCode(1, '邮箱格式不正确');
|
||||
if (!preg_match($pattern, $data['account'])) {
|
||||
return json(['code' => 1, 'msg' => '邮箱格式不正确']);
|
||||
}
|
||||
$item = Db::table('yz_admin_user')->where('account',$data['account'])->find();
|
||||
if($item){
|
||||
$this->returnCode(1, '该账号已存在');
|
||||
$item = Db::table('yz_admin_user')->where('account', $data['account'])->find();
|
||||
if ($item) {
|
||||
return json(['code' => 1, 'msg' => '该账号已存在']);
|
||||
}
|
||||
$data['name'] = trim(input('post.name'));
|
||||
$data['phone'] = trim(input('post.phone'));
|
||||
$data['qq'] = (int)trim(input('post.qq'));
|
||||
$data['group_id'] = (int)input('post.group_id');
|
||||
$data['sex'] = (int)(input('post.sex'));
|
||||
$data['status'] = (int)(input('post.status'));
|
||||
$data['qq'] = (int) trim(input('post.qq'));
|
||||
$data['group_id'] = (int) input('post.group_id');
|
||||
$data['sex'] = (int) (input('post.sex'));
|
||||
$data['status'] = (int) (input('post.status'));
|
||||
$password = trim(input('post.password'));
|
||||
if(empty($data['name'])){
|
||||
$this->returnCode(1, '姓名不能为空');
|
||||
if (empty($data['name'])) {
|
||||
return json(['code' => 1, 'msg' => '姓名不能为空']);
|
||||
}
|
||||
if(empty($data['phone'])){
|
||||
$this->returnCode(1, '手机号不能为空');
|
||||
if (empty($data['phone'])) {
|
||||
return json(['code' => 1, 'msg' => '手机号不能为空']);
|
||||
}
|
||||
if(empty($data['group_id'])){
|
||||
$this->returnCode(1, '请选择角色');
|
||||
if (empty($data['group_id'])) {
|
||||
return json(['code' => 1, 'msg' => '请选择角色']);
|
||||
}
|
||||
if(empty($password)){
|
||||
$this->returnCode(1, '密码不能为空');
|
||||
}else{
|
||||
if (empty($password)) {
|
||||
return json(['code' => 1, 'msg' => '密码不能为空']);
|
||||
} else {
|
||||
$data['password'] = md5($password);
|
||||
}
|
||||
$data['create_time'] = time();
|
||||
$data['update_time'] = time();
|
||||
$res = Db::table('yz_admin_user')->insert($data);
|
||||
if(!$res){
|
||||
$this->returnCode(1, '添加管理员失败');
|
||||
if (!$res) {
|
||||
return json(['code' => 1, 'msg' => '添加管理员失败']);
|
||||
}
|
||||
$this->returnCode(0);
|
||||
}else{
|
||||
return json(['code' => 0, 'msg' => '添加成功']);
|
||||
} else {
|
||||
$group = [];
|
||||
$groups = Db::table('yz_admin_user_group')->select();
|
||||
foreach ($groups as $key => $value) {
|
||||
@ -194,34 +201,35 @@ class Yunzeradmin extends Base{
|
||||
}
|
||||
|
||||
// 管理员编辑
|
||||
public function useredit(){
|
||||
if(Request::isPost()){
|
||||
$uid = (int)trim(input('post.uid'));
|
||||
public function useredit()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$uid = (int) trim(input('post.uid'));
|
||||
$data['name'] = trim(input('post.name'));
|
||||
$data['phone'] = trim(input('post.phone'));
|
||||
$data['qq'] = (int)trim(input('post.qq'));
|
||||
$data['group_id'] = (int)input('post.group_id');
|
||||
$data['sex'] = (int)(input('post.sex'));
|
||||
$data['status'] = (int)(input('post.status'));
|
||||
if(empty($data['name'])){
|
||||
$this->returnCode(1, '姓名不能为空');
|
||||
$data['qq'] = (int) trim(input('post.qq'));
|
||||
$data['group_id'] = (int) input('post.group_id');
|
||||
$data['sex'] = (int) (input('post.sex'));
|
||||
$data['status'] = (int) (input('post.status'));
|
||||
if (empty($data['name'])) {
|
||||
return json(['code' => 1, 'msg' => '姓名不能为空']);
|
||||
}
|
||||
if(empty($data['phone'])){
|
||||
$this->returnCode(1, '手机号不能为空');
|
||||
if (empty($data['phone'])) {
|
||||
return json(['code' => 1, 'msg' => '手机号不能为空']);
|
||||
}
|
||||
if(empty($data['group_id'])){
|
||||
$this->returnCode(1, '请选择角色');
|
||||
if (empty($data['group_id'])) {
|
||||
return json(['code' => 1, 'msg' => '请选择角色']);
|
||||
}
|
||||
// 保存用户
|
||||
$res = Db::table('yz_admin_user')->where('uid',$uid)->update($data);
|
||||
if(!$res){
|
||||
$this->returnCode(1, '更新管理员信息失败');
|
||||
$res = Db::table('yz_admin_user')->where('uid', $uid)->update($data);
|
||||
if (!$res) {
|
||||
return json(['code' => 1, 'msg' => '更新管理员信息失败']);
|
||||
}
|
||||
$this->returnCode(0);
|
||||
}else{
|
||||
$uid = (int)input('get.uid');
|
||||
return json(['code' => 0, 'msg' => '更新成功']);
|
||||
} else {
|
||||
$uid = (int) input('get.uid');
|
||||
// 加载管理员
|
||||
$lists = Db::table('yz_admin_user')->where('uid',$uid)->find();
|
||||
$lists = Db::table('yz_admin_user')->where('uid', $uid)->find();
|
||||
// 加载角色
|
||||
$group = [];
|
||||
$groups = Db::table('yz_admin_user_group')->select();
|
||||
@ -235,54 +243,184 @@ class Yunzeradmin extends Base{
|
||||
return View::fetch();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 管理员删除
|
||||
public function userdel(){
|
||||
$uid = (int)input('post.uid');
|
||||
$res = Db::table('yz_admin_user')->where('uid',$uid)->delete();
|
||||
if(empty($res)){
|
||||
$this->returnCode(1, '删除管理员失败');
|
||||
public function userdel()
|
||||
{
|
||||
$uid = (int) input('post.uid');
|
||||
$res = Db::table('yz_admin_user')->where('uid', $uid)->delete();
|
||||
if (empty($res)) {
|
||||
return json(['code' => 1, 'msg' => '删除管理员失败']);
|
||||
}
|
||||
$this->returnCode(0);
|
||||
return json(['code' => 0, 'msg' => '删除成功']);
|
||||
}
|
||||
|
||||
|
||||
// 管理员信息
|
||||
public function admininfo(){
|
||||
if(Request::isPost()){
|
||||
$find = Db::table('yz_admin_user')->where('uid',$this->adminId)->find();
|
||||
if(empty($find)){
|
||||
$this->returnCode(1,'当前账户不存在');
|
||||
public function admininfo()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$find = Db::table('yz_admin_user')->where('uid', $this->adminId)->find();
|
||||
if (empty($find)) {
|
||||
return json(['code' => 1, 'msg' => '当前账户不存在']);
|
||||
}
|
||||
$data['name'] = trim(input('post.name'));
|
||||
$data['phone'] = trim(input('post.phone'));
|
||||
$data['qq'] = (int)trim(input('post.qq'));
|
||||
$data['sex'] = (int)(input('post.sex'));
|
||||
if(empty($data['name'])){
|
||||
$this->returnCode(1, '姓名不能为空');
|
||||
$data['qq'] = (int) trim(input('post.qq'));
|
||||
$data['sex'] = (int) (input('post.sex'));
|
||||
if (empty($data['name'])) {
|
||||
return json(['code' => 1, 'msg' => '姓名不能为空']);
|
||||
}
|
||||
if(empty($data['phone'])){
|
||||
$this->returnCode(1, '手机号不能为空');
|
||||
if (empty($data['phone'])) {
|
||||
return json(['code' => 1, 'msg' => '手机号不能为空']);
|
||||
}
|
||||
|
||||
|
||||
// 处理密码修改
|
||||
$old_pw = trim(input('post.old_pw'));
|
||||
$new_pw = trim(input('post.new_pw'));
|
||||
if(!empty($old_pw) && !empty($new_pw)){
|
||||
if(md5($old_pw) != $find['password']){
|
||||
$this->returnCode(1, '原密码错误');
|
||||
if (!empty($old_pw) && !empty($new_pw)) {
|
||||
if (md5($old_pw) != $find['password']) {
|
||||
return json(['code' => 1, 'msg' => '原密码错误']);
|
||||
}
|
||||
$data['password'] = md5($new_pw);
|
||||
}
|
||||
|
||||
|
||||
// 保存用户
|
||||
$res = Db::table('yz_admin_user')->where('uid',$this->adminId)->update($data);
|
||||
if(!$res){
|
||||
$this->returnCode(1, '更新管理员信息失败');
|
||||
$res = Db::table('yz_admin_user')->where('uid', $this->adminId)->update($data);
|
||||
if (!$res) {
|
||||
return json(['code' => 1, 'msg' => '更新管理员信息失败']);
|
||||
}
|
||||
$this->returnCode(0);
|
||||
}else{
|
||||
return json(['code' => 0, 'msg' => '更新成功']);
|
||||
} else {
|
||||
return View::fetch();
|
||||
}
|
||||
}
|
||||
|
||||
//banner管理
|
||||
public function banner()
|
||||
{
|
||||
return View::fetch();
|
||||
}
|
||||
|
||||
// banner列表
|
||||
public function bannerlist()
|
||||
{
|
||||
if (Request::isGet()) {
|
||||
$page = input('page', 1);
|
||||
$limit = input('limit', 10);
|
||||
|
||||
$query = Db::table('yz_banner')
|
||||
->where('delete_time', null)
|
||||
->field('id, title, image, url, sort, create_time, update_time');
|
||||
|
||||
// 获取总记录数
|
||||
$count = $query->count();
|
||||
|
||||
// 获取分页数据
|
||||
$lists = $query->order(['sort DESC', 'id DESC'])
|
||||
->page($page, $limit)
|
||||
->select()
|
||||
->toArray();
|
||||
|
||||
// 处理数据
|
||||
foreach ($lists as &$item) {
|
||||
$item['create_time'] = $item['create_time'] ? date('Y-m-d H:i:s', $item['create_time']) : '';
|
||||
$item['update_time'] = $item['update_time'] ? date('Y-m-d H:i:s', $item['update_time']) : '';
|
||||
}
|
||||
|
||||
return json([
|
||||
'code' => 0,
|
||||
'msg' => '',
|
||||
'count' => $count,
|
||||
'data' => $lists
|
||||
]);
|
||||
}
|
||||
return json(['code' => 1, 'msg' => '请求方法无效']);
|
||||
}
|
||||
|
||||
// 添加banner
|
||||
public function banneradd()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$data = [
|
||||
'title' => input('post.title'),
|
||||
'image' => input('post.image'),
|
||||
'url' => input('post.url'),
|
||||
'sort' => input('post.sort', 0),
|
||||
'status' => 1,
|
||||
'create_time' => time()
|
||||
];
|
||||
|
||||
$res = Db::table('yz_banner')->insert($data);
|
||||
if (!$res) {
|
||||
return json(['code' => 1, 'msg' => '添加Banner失败']);
|
||||
}
|
||||
return json(['code' => 0, 'msg' => '添加成功']);
|
||||
}
|
||||
return json(['code' => 1, 'msg' => '请求方法无效']);
|
||||
}
|
||||
|
||||
// 编辑banner
|
||||
public function banneredit()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$id = input('post.id');
|
||||
if (empty($id)) {
|
||||
return json(['code' => 1, 'msg' => 'ID不能为空']);
|
||||
}
|
||||
|
||||
$data = [
|
||||
'title' => input('post.title'),
|
||||
'image' => input('post.image'),
|
||||
'url' => input('post.url'),
|
||||
'sort' => input('post.sort', 0),
|
||||
'update_time' => time()
|
||||
];
|
||||
|
||||
$res = Db::table('yz_banner')->where('id', $id)->update($data);
|
||||
if ($res === false) {
|
||||
return json(['code' => 1, 'msg' => '更新Banner失败']);
|
||||
}
|
||||
return json(['code' => 0, 'msg' => '更新成功']);
|
||||
}
|
||||
return json(['code' => 1, 'msg' => '请求方法无效']);
|
||||
}
|
||||
|
||||
// 删除banner
|
||||
public function bannerdel()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$id = input('post.id');
|
||||
if (empty($id)) {
|
||||
return json(['code' => 1, 'msg' => 'ID不能为空']);
|
||||
}
|
||||
|
||||
$res = Db::table('yz_banner')->where('id', $id)->update(['delete_time' => time()]);
|
||||
if (!$res) {
|
||||
return json(['code' => 1, 'msg' => '删除Banner失败']);
|
||||
}
|
||||
return json(['code' => 0, 'msg' => '删除成功']);
|
||||
}
|
||||
return json(['code' => 1, 'msg' => '请求方法无效']);
|
||||
}
|
||||
|
||||
// 修改banner状态
|
||||
public function bannerstatus()
|
||||
{
|
||||
if (Request::isPost()) {
|
||||
$id = input('post.id');
|
||||
$status = input('post.status');
|
||||
|
||||
if (empty($id)) {
|
||||
return json(['code' => 1, 'msg' => 'ID不能为空']);
|
||||
}
|
||||
|
||||
$res = Db::table('yz_banner')->where('id', $id)->update(['status' => $status]);
|
||||
if ($res === false) {
|
||||
return json(['code' => 1, 'msg' => '更新状态失败']);
|
||||
}
|
||||
return json(['code' => 0, 'msg' => '更新成功']);
|
||||
}
|
||||
return json(['code' => 1, 'msg' => '请求方法无效']);
|
||||
}
|
||||
|
||||
}
|
||||
@ -118,7 +118,7 @@
|
||||
/* 页面整体样式 */
|
||||
.config-container {
|
||||
padding: 15px;
|
||||
background: #f2f2f2;
|
||||
/* background: #f2f2f2; */
|
||||
}
|
||||
|
||||
/* 页面头部样式 */
|
||||
@ -156,8 +156,8 @@
|
||||
|
||||
.layui-card {
|
||||
margin-bottom: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.layui-card-header {
|
||||
|
||||
210
app/admin/view/yunzeradmin/banner.php
Normal file
210
app/admin/view/yunzeradmin/banner.php
Normal file
@ -0,0 +1,210 @@
|
||||
{include file="public/header" /}
|
||||
|
||||
<!-- 页面样式 -->
|
||||
<style>
|
||||
.layui-table-cell { height: 40px; line-height: 40px; }
|
||||
.layui-table-cell img { height: 36px; width: auto; max-width: 80px; }
|
||||
.banner-preview-img { max-width: 80px; cursor: pointer; }
|
||||
.banner-form { padding: 20px; }
|
||||
.banner-upload-preview { max-width: 100%; margin-top: 10px; }
|
||||
</style>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<span class="layui-icon layui-icon-picture"></span> Banner管理
|
||||
<button class="layui-btn layui-btn-sm layui-btn-normal" style="float:right;" id="addBanner">
|
||||
<i class="layui-icon"></i> 添加Banner
|
||||
</button>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<table id="bannerTable" lay-filter="bannerTable"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Banner表单 -->
|
||||
<div id="bannerForm" style="display: none;">
|
||||
<form class="layui-form banner-form">
|
||||
<input type="hidden" name="id">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-upload-drag" id="uploadImage">
|
||||
<i class="layui-icon layui-icon-upload"></i>
|
||||
<p>点击上传或拖拽图片至此处</p>
|
||||
<div id="uploadPreview" style="display: none;">
|
||||
<img src="" alt="Banner图片" class="banner-upload-preview">
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="image" id="imageInput">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">链接</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="url" placeholder="请输入链接地址" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="sort" value="0" class="layui-input" placeholder="数字越大越靠前">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">状态</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="status" value="1" title="启用" checked>
|
||||
<input type="radio" name="status" value="0" title="禁用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="saveBanner">保存</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['table', 'form', 'upload', 'layer'], function(){
|
||||
var table = layui.table,
|
||||
form = layui.form,
|
||||
upload = layui.upload,
|
||||
layer = layui.layer;
|
||||
|
||||
// 表格列配置
|
||||
var tableColumns = [[
|
||||
{field: 'id', title: 'ID', width: 80, align: 'center', fixed: 'left'},
|
||||
{field: 'title', title: '标题', align: 'center'},
|
||||
{field: 'image', title: '图片', width: 280, align: 'center', templet: function(d){
|
||||
return '<img src="'+ d.image +'" class="banner-preview-img" onclick="previewImage(\''+ d.image +'\')">';
|
||||
}},
|
||||
{field: 'url', title: '链接', align: 'center', width: 300},
|
||||
{field: 'sort', title: '排序', align: 'center', width: 100, sort: true},
|
||||
{field: 'create_time', title: '创建时间', align: 'center', width: 180, sort: true},
|
||||
{field: 'update_time', title: '更新时间', align: 'center', width: 180, sort: true},
|
||||
{title: '操作', align: 'center', width: 120, fixed: 'right', templet: function(d){
|
||||
return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>' +
|
||||
'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
|
||||
}}
|
||||
]];
|
||||
|
||||
// 初始化表格
|
||||
table.render({
|
||||
elem: '#bannerTable',
|
||||
url: '/admin/yunzeradmin/bannerlist',
|
||||
method: 'get',
|
||||
page: true,
|
||||
cols: tableColumns,
|
||||
limit: 10,
|
||||
limits: [10, 20, 30, 50],
|
||||
text: { none: '暂无相关数据' }
|
||||
});
|
||||
|
||||
// 上传组件配置
|
||||
var uploadConfig = {
|
||||
elem: '#uploadImage',
|
||||
url: '/admin/upload/image',
|
||||
accept: 'images',
|
||||
acceptMime: 'image/*',
|
||||
done: function(res){
|
||||
if(res.code === 0){
|
||||
$('#uploadPreview').show().find('img').attr('src', res.data.url);
|
||||
$('#imageInput').val(res.data.url);
|
||||
layer.msg('上传成功');
|
||||
}else{
|
||||
layer.msg('上传失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化上传组件
|
||||
upload.render(uploadConfig);
|
||||
|
||||
// 监听表格工具条事件
|
||||
table.on('tool(bannerTable)', function(obj){
|
||||
var data = obj.data;
|
||||
if(obj.event === 'edit'){
|
||||
showBannerForm(data);
|
||||
} else if(obj.event === 'del'){
|
||||
layer.confirm('确定删除此Banner？', function(index){
|
||||
deleteBanner(data.id, obj);
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 添加Banner按钮点击事件
|
||||
$('#addBanner').on('click', function(){
|
||||
showBannerForm();
|
||||
});
|
||||
|
||||
// 监听表单提交
|
||||
form.on('submit(saveBanner)', function(data){
|
||||
var url = data.field.id ? '/admin/yunzeradmin/banneredit' : '/admin/yunzeradmin/banneradd';
|
||||
$.post(url, data.field, function(res){
|
||||
if(res.code === 0){
|
||||
layer.closeAll('page');
|
||||
table.reload('bannerTable');
|
||||
layer.msg('保存成功');
|
||||
}else{
|
||||
layer.msg(res.msg);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
// 显示Banner表单
|
||||
function showBannerForm(data) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: data ? '编辑Banner' : '添加Banner',
|
||||
content: $('#bannerForm'),
|
||||
area: ['500px', '600px'],
|
||||
success: function(layero){
|
||||
form.render();
|
||||
if(data){
|
||||
form.val('bannerForm', data);
|
||||
if(data.image){
|
||||
$('#uploadPreview').show().find('img').attr('src', data.image);
|
||||
$('#imageInput').val(data.image);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除Banner
|
||||
function deleteBanner(id, obj) {
|
||||
$.post('/admin/yunzeradmin/bannerdel', {id: id}, function(res){
|
||||
if(res.code === 0){
|
||||
obj.del();
|
||||
layer.msg('删除成功');
|
||||
}else{
|
||||
layer.msg(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 预览图片
|
||||
function previewImage(url) {
|
||||
layer.photos({
|
||||
photos: {
|
||||
"data": [{
|
||||
"src": url
|
||||
}]
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -16,6 +16,14 @@ class Index extends Base
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
// 获取banner列表
|
||||
$bannerList = Db::name('yz_banner')
|
||||
->where('delete_time', null)
|
||||
->order('sort DESC, id DESC')
|
||||
->select()
|
||||
->toArray();
|
||||
|
||||
View::assign('bannerList', $bannerList);
|
||||
return View::fetch();
|
||||
}
|
||||
|
||||
@ -30,17 +38,17 @@ class Index extends Base
|
||||
->where('delete_time', null)
|
||||
->select()
|
||||
->toArray();
|
||||
|
||||
|
||||
$articles = [];
|
||||
$categoryData = [];
|
||||
|
||||
|
||||
// 提取分类名称和ID用于前端tab显示
|
||||
foreach ($categories as $category) {
|
||||
$categoryData[] = [
|
||||
'id' => $category['id'],
|
||||
'name' => $category['name']
|
||||
];
|
||||
|
||||
|
||||
// 获取该分类下的文章，限制4条
|
||||
$articles = Db::name('yz_article')
|
||||
->where('cate', $category['id'])
|
||||
@ -51,12 +59,12 @@ class Index extends Base
|
||||
->limit(4)
|
||||
->select()
|
||||
->toArray();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
return json([
|
||||
'code' => 1,
|
||||
'msg' => '获取成功',
|
||||
'code' => 1,
|
||||
'msg' => '获取成功',
|
||||
'articles' => $articles,
|
||||
'categories' => $categoryData
|
||||
]);
|
||||
@ -115,4 +123,20 @@ class Index extends Base
|
||||
'categories' => $categoryData
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取banner列表
|
||||
*/
|
||||
public function bannerlist()
|
||||
{
|
||||
|
||||
// 获取启用状态的banner列表，按排序倒序
|
||||
$bannerList = Db::name('yz_banner')
|
||||
->where('delete_time', null)
|
||||
->order('sort DESC, id DESC')
|
||||
->select()
|
||||
->toArray();
|
||||
|
||||
return json(['code' => 1, 'msg' => '获取成功', 'banner' => $bannerList]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,43 +68,6 @@
|
||||
<!-- Banner轮播 -->
|
||||
<div class="layui-carousel" id="test10" lay-filter="test10">
|
||||
<div carousel-item="">
|
||||
<div>
|
||||
<div class="banner-content">
|
||||
<span class="banner-title">智能科技 引领未来</span>
|
||||
<span class="banner-desc">打造智能化解决方案，助力企业数字化转型,打造智能化解决方案，助力企业数字化转型,打造智能化解决方案，助力企业数字化转型</span>
|
||||
<a href="#" class="btn btn-primary" style="margin-top: 20px;width:150px">了解更多</a>
|
||||
</div>
|
||||
<a href="#" class="banner-slide">
|
||||
<img src="__IMAGES__/banner/banner1.jpg" alt="Banner 1">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div class="banner-content">
|
||||
<span class="banner-title">创新技术 卓越服务</span>
|
||||
<spanp class="banner-desc">以创新科技为核心，为客户提供优质服务</spanp>
|
||||
</div>
|
||||
<a href="#" class="banner-slide">
|
||||
<img src="__IMAGES__/banner/banner2.jpg" alt="Banner 2">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div class="banner-content">
|
||||
<span class="banner-title">专业团队 值得信赖</span>
|
||||
<spanp class="banner-desc">资深专家团队，为您提供专业的技术支持</spanp>
|
||||
</div>
|
||||
<a href="#" class="banner-slide">
|
||||
<img src="__IMAGES__/banner/banner3.jpg" alt="Banner 3">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div class="banner-content">
|
||||
<span class="banner-title">全球视野 本地服务</span>
|
||||
<span class="banner-desc">立足本地，放眼全球，打造国际化服务</span>
|
||||
</div>
|
||||
<a href="#" class="banner-slide">
|
||||
<img src="__IMAGES__/banner/banner4.jpg" alt="Banner 4">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -239,45 +202,174 @@
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
width: 160px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.user-dropdown.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#userDropdownSticky a {
|
||||
color: #0d6efd !important;
|
||||
}
|
||||
|
||||
/* Banner样式 */
|
||||
.banner-content {
|
||||
position: absolute;
|
||||
/* top: 65%;
|
||||
left: 35%;
|
||||
transform: translate(-50%, -50%); */
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 10%;
|
||||
/* transform: translate(-50%, -50%); */
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.banner-text a{
|
||||
text-decoration: none;
|
||||
/* text-align: center; */
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 4em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.banner-desc {
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.banner-image img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.banner-btn:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
width: 100%;
|
||||
height: 86vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
/* 关键：等比缩放并铺满 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layui-carousel {
|
||||
background: #f8f8f8;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 确保轮播容器和项目的高度正确 */
|
||||
#test10,
|
||||
#test10 [carousel-item],
|
||||
#test10 [carousel-item]>* {
|
||||
height: 86vh !important;
|
||||
}
|
||||
|
||||
#test10 [carousel-item]>* {
|
||||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
layui.use(['carousel', 'form', 'layer'], function () {
|
||||
var carousel = layui.carousel,
|
||||
form = layui.form,
|
||||
layer = layui.layer,
|
||||
$ = layui.$;
|
||||
var carousel = layui.carousel, form = layui.form, layer = layui.layer, $ = layui.$;
|
||||
|
||||
//图片轮播
|
||||
carousel.render({
|
||||
elem: '#test10',
|
||||
width: '100%',
|
||||
height: '86vh',
|
||||
interval: 4000
|
||||
// 加载banner数据
|
||||
$.ajax({
|
||||
url: '/index/index/bannerlist',
|
||||
type: 'GET',
|
||||
success: function (res) {
|
||||
if (res.code === 1) {
|
||||
var bannerHtml = '';
|
||||
res.banner.forEach(function (banner) {
|
||||
bannerHtml += '<div>' +
|
||||
'<div class="banner-content">' +
|
||||
'<div class="banner-image">' +
|
||||
'<img src="' + banner.image + '" alt="' + (banner.title || '') + '">' +
|
||||
'</div>' +
|
||||
'<div class="banner-text">' +
|
||||
'<span class="banner-title">' + (banner.title || '') + '</span>' +
|
||||
'<span class="banner-desc">' + (banner.desc || '') + '</span>' +
|
||||
'<a href="' + (banner.url || 'javascript:;') + '" class="banner-slide">' +
|
||||
'<span class="banner-btn">查看详情</span>' +
|
||||
'</a>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
});
|
||||
$('#test10 div[carousel-item]').html(bannerHtml);
|
||||
|
||||
// 图片轮播
|
||||
carousel.render({
|
||||
elem: '#test10',
|
||||
width: '100%',
|
||||
height: '100vh',
|
||||
interval: 4000,
|
||||
anim: 'fade',
|
||||
autoplay: false,
|
||||
full: false,
|
||||
arrow: 'hover'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
@ -208,55 +208,6 @@ a:hover {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* 轮播图样式 */
|
||||
.banner-content {
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
left: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 4em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.banner-desc {
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
width: 750px;
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
width: 100%;
|
||||
height: 86vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
/* 关键：等比缩放并铺满 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 固定导航 */
|
||||
.sticky-nav {
|
||||
position: fixed;
|
||||
|
||||
304
runtime/admin/temp/0d3b17806247be3f9294dd993f5ff7bf.php
Normal file
304
runtime/admin/temp/0d3b17806247be3f9294dd993f5ff7bf.php
Normal file
@ -0,0 +1,304 @@
|
||||
<?php /*a:2:{s:66:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzeradmin\banner.php";i:1747380371;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title><?php echo htmlentities((string) $config['admin_name']); ?></title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/moban.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/wangeditor.css" media="all"/>
|
||||
<style type="text/css">
|
||||
.header span{background:#009688;margin-left:30px;padding:10px;color:#ffffff;}
|
||||
.header div{border-bottom:solid 2px #009688;margin-top: 8px;}
|
||||
.header button{float:right;margin-top:-5px;}
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin: 20px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.pagination > li {
|
||||
display: inline;
|
||||
}
|
||||
.pagination > li > a,
|
||||
.pagination > li > span {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 6px 12px;
|
||||
margin-left: -1px;
|
||||
line-height: 1.42857143;
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.pagination > li:first-child > a,
|
||||
.pagination > li:first-child > span {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.pagination > li:last-child > a,
|
||||
.pagination > li:last-child > span {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.pagination > li > a:hover,
|
||||
.pagination > li > span:hover,
|
||||
.pagination > li > a:focus,
|
||||
.pagination > li > span:focus {
|
||||
z-index: 2;
|
||||
color: #23527c;
|
||||
background-color: #eee;
|
||||
border-color: #ddd;
|
||||
}
|
||||
.pagination > .active > a,
|
||||
.pagination > .active > span,
|
||||
.pagination > .active > a:hover,
|
||||
.pagination > .active > span:hover,
|
||||
.pagination > .active > a:focus,
|
||||
.pagination > .active > span:focus {
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
background-color: #337ab7;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.pagination > .disabled > span,
|
||||
.pagination > .disabled > span:hover,
|
||||
.pagination > .disabled > span:focus,
|
||||
.pagination > .disabled > a,
|
||||
.pagination > .disabled > a:hover,
|
||||
.pagination > .disabled > a:focus {
|
||||
color: #777;
|
||||
cursor: not-allowed;
|
||||
background-color: #fff;
|
||||
border-color: #ddd;
|
||||
}
|
||||
.close-img { background: url(/static/images/close_img.png); background-size: 20px 20px; width:20px; height: 20px; position: absolute; right: 5px; top: 5px; z-index: 2;}
|
||||
</style>
|
||||
<script type="text/javascript" src="/static/layui/layui.js"></script>
|
||||
<script type="text/javascript">
|
||||
layui.use(['layer','form','table','laydate','element','upload'],function(){
|
||||
layer = layui.layer; // layui 弹框
|
||||
form = layui.form; // layui form表单
|
||||
table = layui.table; // layui 表格
|
||||
laydate = layui.laydate; // layui 时间框
|
||||
element = layui.element; // layui element
|
||||
upload = layui.upload; // layui 上传
|
||||
$ = layui.jquery; // layui jquery
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body style="padding:10px; box-sizing: border-box;">
|
||||
|
||||
<!-- 页面样式 -->
|
||||
<style>
|
||||
.layui-table-cell { height: 40px; line-height: 40px; }
|
||||
.layui-table-cell img { height: 36px; width: auto; max-width: 80px; }
|
||||
.banner-preview-img { max-width: 80px; cursor: pointer; }
|
||||
.banner-form { padding: 20px; }
|
||||
.banner-upload-preview { max-width: 100%; margin-top: 10px; }
|
||||
</style>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<span class="layui-icon layui-icon-picture"></span> Banner管理
|
||||
<button class="layui-btn layui-btn-sm layui-btn-normal" style="float:right;" id="addBanner">
|
||||
<i class="layui-icon"></i> 添加Banner
|
||||
</button>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<table id="bannerTable" lay-filter="bannerTable"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Banner表单 -->
|
||||
<div id="bannerForm" style="display: none;">
|
||||
<form class="layui-form banner-form">
|
||||
<input type="hidden" name="id">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-upload-drag" id="uploadImage">
|
||||
<i class="layui-icon layui-icon-upload"></i>
|
||||
<p>点击上传或拖拽图片至此处</p>
|
||||
<div id="uploadPreview" style="display: none;">
|
||||
<img src="" alt="Banner图片" class="banner-upload-preview">
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="image" id="imageInput">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">链接</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="url" placeholder="请输入链接地址" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="sort" value="0" class="layui-input" placeholder="数字越大越靠前">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">状态</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="status" value="1" title="启用" checked>
|
||||
<input type="radio" name="status" value="0" title="禁用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="saveBanner">保存</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['table', 'form', 'upload', 'layer'], function(){
|
||||
var table = layui.table,
|
||||
form = layui.form,
|
||||
upload = layui.upload,
|
||||
layer = layui.layer;
|
||||
|
||||
// 表格列配置
|
||||
var tableColumns = [[
|
||||
{field: 'id', title: 'ID', width: 80, align: 'center', fixed: 'left'},
|
||||
{field: 'title', title: '标题', align: 'center'},
|
||||
{field: 'image', title: '图片', width: 280, align: 'center', templet: function(d){
|
||||
return '<img src="'+ d.image +'" class="banner-preview-img" onclick="previewImage(\''+ d.image +'\')">';
|
||||
}},
|
||||
{field: 'url', title: '链接', align: 'center', width: 300},
|
||||
{field: 'sort', title: '排序', align: 'center', width: 100, sort: true},
|
||||
{field: 'create_time', title: '创建时间', align: 'center', width: 180, sort: true},
|
||||
{field: 'update_time', title: '更新时间', align: 'center', width: 180, sort: true},
|
||||
{title: '操作', align: 'center', width: 120, fixed: 'right', templet: function(d){
|
||||
return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>' +
|
||||
'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
|
||||
}}
|
||||
]];
|
||||
|
||||
// 初始化表格
|
||||
table.render({
|
||||
elem: '#bannerTable',
|
||||
url: '/admin/yunzeradmin/bannerlist',
|
||||
method: 'get',
|
||||
page: true,
|
||||
cols: tableColumns,
|
||||
limit: 10,
|
||||
limits: [10, 20, 30, 50],
|
||||
text: { none: '暂无相关数据' }
|
||||
});
|
||||
|
||||
// 上传组件配置
|
||||
var uploadConfig = {
|
||||
elem: '#uploadImage',
|
||||
url: '/admin/upload/image',
|
||||
accept: 'images',
|
||||
acceptMime: 'image/*',
|
||||
done: function(res){
|
||||
if(res.code === 0){
|
||||
$('#uploadPreview').show().find('img').attr('src', res.data.url);
|
||||
$('#imageInput').val(res.data.url);
|
||||
layer.msg('上传成功');
|
||||
}else{
|
||||
layer.msg('上传失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化上传组件
|
||||
upload.render(uploadConfig);
|
||||
|
||||
// 监听表格工具条事件
|
||||
table.on('tool(bannerTable)', function(obj){
|
||||
var data = obj.data;
|
||||
if(obj.event === 'edit'){
|
||||
showBannerForm(data);
|
||||
} else if(obj.event === 'del'){
|
||||
layer.confirm('确定删除此Banner？', function(index){
|
||||
deleteBanner(data.id, obj);
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 添加Banner按钮点击事件
|
||||
$('#addBanner').on('click', function(){
|
||||
showBannerForm();
|
||||
});
|
||||
|
||||
// 监听表单提交
|
||||
form.on('submit(saveBanner)', function(data){
|
||||
var url = data.field.id ? '/admin/yunzeradmin/banneredit' : '/admin/yunzeradmin/banneradd';
|
||||
$.post(url, data.field, function(res){
|
||||
if(res.code === 0){
|
||||
layer.closeAll('page');
|
||||
table.reload('bannerTable');
|
||||
layer.msg('保存成功');
|
||||
}else{
|
||||
layer.msg(res.msg);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
// 显示Banner表单
|
||||
function showBannerForm(data) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: data ? '编辑Banner' : '添加Banner',
|
||||
content: $('#bannerForm'),
|
||||
area: ['500px', '600px'],
|
||||
success: function(layero){
|
||||
form.render();
|
||||
if(data){
|
||||
form.val('bannerForm', data);
|
||||
if(data.image){
|
||||
$('#uploadPreview').show().find('img').attr('src', data.image);
|
||||
$('#imageInput').val(data.image);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除Banner
|
||||
function deleteBanner(id, obj) {
|
||||
$.post('/admin/yunzeradmin/bannerdel', {id: id}, function(res){
|
||||
if(res.code === 0){
|
||||
obj.del();
|
||||
layer.msg('删除成功');
|
||||
}else{
|
||||
layer.msg(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 预览图片
|
||||
function previewImage(url) {
|
||||
layer.photos({
|
||||
photos: {
|
||||
"data": [{
|
||||
"src": url
|
||||
}]
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:3:{s:69:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzeradmin\groupedit.php";i:1746709977;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746709977;s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\tail.php";i:1746709977;}*/ ?>
|
||||
<?php /*a:3:{s:69:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzeradmin\groupedit.php";i:1746709977;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\tail.php";i:1746709977;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -6,8 +6,9 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/moban.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/third/layui/css/layui.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/wangeditor.css" media="all"/>
|
||||
<style type="text/css">
|
||||
.header span{background:#009688;margin-left:30px;padding:10px;color:#ffffff;}
|
||||
.header div{border-bottom:solid 2px #009688;margin-top: 8px;}
|
||||
@ -78,7 +79,7 @@
|
||||
}
|
||||
.close-img { background: url(/static/images/close_img.png); background-size: 20px 20px; width:20px; height: 20px; position: absolute; right: 5px; top: 5px; z-index: 2;}
|
||||
</style>
|
||||
<script type="text/javascript" src="/static/third/layui/layui.js"></script>
|
||||
<script type="text/javascript" src="/static/layui/layui.js"></script>
|
||||
<script type="text/javascript">
|
||||
layui.use(['layer','form','table','laydate','element','upload'],function(){
|
||||
layer = layui.layer; // layui 弹框
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:3:{s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzer\buttonadd.php";i:1746709977;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746709977;s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\tail.php";i:1746709977;}*/ ?>
|
||||
<?php /*a:3:{s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzer\buttonadd.php";i:1746709977;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\tail.php";i:1746709977;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -6,8 +6,9 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/moban.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/third/layui/css/layui.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/wangeditor.css" media="all"/>
|
||||
<style type="text/css">
|
||||
.header span{background:#009688;margin-left:30px;padding:10px;color:#ffffff;}
|
||||
.header div{border-bottom:solid 2px #009688;margin-top: 8px;}
|
||||
@ -78,7 +79,7 @@
|
||||
}
|
||||
.close-img { background: url(/static/images/close_img.png); background-size: 20px 20px; width:20px; height: 20px; position: absolute; right: 5px; top: 5px; z-index: 2;}
|
||||
</style>
|
||||
<script type="text/javascript" src="/static/third/layui/layui.js"></script>
|
||||
<script type="text/javascript" src="/static/layui/layui.js"></script>
|
||||
<script type="text/javascript">
|
||||
layui.use(['layer','form','table','laydate','element','upload'],function(){
|
||||
layer = layui.layer; // layui 弹框
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:3:{s:65:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzer\configlist.php";i:1746709977;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\tail.php";i:1746709977;}*/ ?>
|
||||
<?php /*a:3:{s:65:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzer\configlist.php";i:1747370938;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\tail.php";i:1746709977;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:3:{s:68:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzeradmin\useredit.php";i:1745483534;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1745564348;s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\tail.php";i:1745482530;}*/ ?>
|
||||
<?php /*a:3:{s:68:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\yunzeradmin\useredit.php";i:1746709977;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\tail.php";i:1746709977;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -6,8 +6,9 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/moban.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/third/layui/css/layui.css" media="all"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/wangeditor.css" media="all"/>
|
||||
<style type="text/css">
|
||||
.header span{background:#009688;margin-left:30px;padding:10px;color:#ffffff;}
|
||||
.header div{border-bottom:solid 2px #009688;margin-top: 8px;}
|
||||
@ -78,7 +79,7 @@
|
||||
}
|
||||
.close-img { background: url(/static/images/close_img.png); background-size: 20px 20px; width:20px; height: 20px; position: absolute; right: 5px; top: 5px; z-index: 2;}
|
||||
</style>
|
||||
<script type="text/javascript" src="/static/third/layui/layui.js"></script>
|
||||
<script type="text/javascript" src="/static/layui/layui.js"></script>
|
||||
<script type="text/javascript">
|
||||
layui.use(['layer','form','table','laydate','element','upload'],function(){
|
||||
layer = layui.layer; // layui 弹框
|
||||
@ -118,7 +119,7 @@
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">部门</label>
|
||||
<label class="layui-form-label">角色</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="group_id">
|
||||
<option value=0></option>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:2:{s:67:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\article\articlecate.php";i:1747371803;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<?php /*a:2:{s:67:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\article\articlecate.php";i:1747372046;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -212,7 +212,7 @@
|
||||
/* 页面整体样式 */
|
||||
.config-container {
|
||||
padding: 15px;
|
||||
background: #f2f2f2;
|
||||
/* background: #f2f2f2; */
|
||||
}
|
||||
|
||||
/* 页面头部样式 */
|
||||
@ -250,8 +250,8 @@
|
||||
|
||||
.layui-card {
|
||||
margin-bottom: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.layui-card-header {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:4:{s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\index\index.php";i:1746865108;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header.php";i:1747361734;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\main.php";i:1747362104;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1747360756;}*/ ?>
|
||||
<?php /*a:4:{s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\index\index.php";i:1746865108;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header.php";i:1747383384;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\main.php";i:1747362104;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1747360756;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
@ -86,43 +86,6 @@
|
||||
<!-- Banner轮播 -->
|
||||
<div class="layui-carousel" id="test10" lay-filter="test10">
|
||||
<div carousel-item="">
|
||||
<div>
|
||||
<div class="banner-content">
|
||||
<span class="banner-title">智能科技 引领未来</span>
|
||||
<span class="banner-desc">打造智能化解决方案，助力企业数字化转型,打造智能化解决方案，助力企业数字化转型,打造智能化解决方案，助力企业数字化转型</span>
|
||||
<a href="#" class="btn btn-primary" style="margin-top: 20px;width:150px">了解更多</a>
|
||||
</div>
|
||||
<a href="#" class="banner-slide">
|
||||
<img src="/static/images/banner/banner1.jpg" alt="Banner 1">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div class="banner-content">
|
||||
<span class="banner-title">创新技术 卓越服务</span>
|
||||
<spanp class="banner-desc">以创新科技为核心，为客户提供优质服务</spanp>
|
||||
</div>
|
||||
<a href="#" class="banner-slide">
|
||||
<img src="/static/images/banner/banner2.jpg" alt="Banner 2">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div class="banner-content">
|
||||
<span class="banner-title">专业团队 值得信赖</span>
|
||||
<spanp class="banner-desc">资深专家团队，为您提供专业的技术支持</spanp>
|
||||
</div>
|
||||
<a href="#" class="banner-slide">
|
||||
<img src="/static/images/banner/banner3.jpg" alt="Banner 3">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div class="banner-content">
|
||||
<span class="banner-title">全球视野 本地服务</span>
|
||||
<span class="banner-desc">立足本地，放眼全球，打造国际化服务</span>
|
||||
</div>
|
||||
<a href="#" class="banner-slide">
|
||||
<img src="/static/images/banner/banner4.jpg" alt="Banner 4">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -257,45 +220,174 @@
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
width: 160px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.user-dropdown.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#userDropdownSticky a {
|
||||
color: #0d6efd !important;
|
||||
}
|
||||
|
||||
/* Banner样式 */
|
||||
.banner-content {
|
||||
position: absolute;
|
||||
/* top: 65%;
|
||||
left: 35%;
|
||||
transform: translate(-50%, -50%); */
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 10%;
|
||||
/* transform: translate(-50%, -50%); */
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.banner-text a{
|
||||
text-decoration: none;
|
||||
/* text-align: center; */
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 4em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.banner-desc {
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.banner-image img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.banner-btn:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
width: 100%;
|
||||
height: 86vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
/* 关键：等比缩放并铺满 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layui-carousel {
|
||||
background: #f8f8f8;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 确保轮播容器和项目的高度正确 */
|
||||
#test10,
|
||||
#test10 [carousel-item],
|
||||
#test10 [carousel-item]>* {
|
||||
height: 86vh !important;
|
||||
}
|
||||
|
||||
#test10 [carousel-item]>* {
|
||||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
layui.use(['carousel', 'form', 'layer'], function () {
|
||||
var carousel = layui.carousel,
|
||||
form = layui.form,
|
||||
layer = layui.layer,
|
||||
$ = layui.$;
|
||||
var carousel = layui.carousel, form = layui.form, layer = layui.layer, $ = layui.$;
|
||||
|
||||
//图片轮播
|
||||
carousel.render({
|
||||
elem: '#test10',
|
||||
width: '100%',
|
||||
height: '86vh',
|
||||
interval: 4000
|
||||
// 加载banner数据
|
||||
$.ajax({
|
||||
url: '/index/index/bannerlist',
|
||||
type: 'GET',
|
||||
success: function (res) {
|
||||
if (res.code === 1) {
|
||||
var bannerHtml = '';
|
||||
res.banner.forEach(function (banner) {
|
||||
bannerHtml += '<div>' +
|
||||
'<div class="banner-content">' +
|
||||
'<div class="banner-image">' +
|
||||
'<img src="' + banner.image + '" alt="' + (banner.title || '') + '">' +
|
||||
'</div>' +
|
||||
'<div class="banner-text">' +
|
||||
'<span class="banner-title">' + (banner.title || '') + '</span>' +
|
||||
'<span class="banner-desc">' + (banner.desc || '') + '</span>' +
|
||||
'<a href="' + (banner.url || 'javascript:;') + '" class="banner-slide">' +
|
||||
'<span class="banner-btn">查看详情</span>' +
|
||||
'</a>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
});
|
||||
$('#test10 div[carousel-item]').html(bannerHtml);
|
||||
|
||||
// 图片轮播
|
||||
carousel.render({
|
||||
elem: '#test10',
|
||||
width: '100%',
|
||||
height: '100vh',
|
||||
interval: 4000,
|
||||
anim: 'fade',
|
||||
autoplay: false,
|
||||
full: false,
|
||||
arrow: 'hover'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user