增加banner后台管控
This commit is contained in:
@@ -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 () {
|
||||
|
||||
Reference in New Issue
Block a user