更新前后端标签代码

This commit is contained in:
2025-05-16 10:21:38 +08:00
parent 754db2cfee
commit 5cf1721094
16 changed files with 1357 additions and 274 deletions
+2 -2
View File
@@ -3,7 +3,7 @@
<div class="row" style="width: 100%;">
<div class="row-main">
<div class="mr-20">
<img src="__IMAGES__/logo-l-w.png" alt="" height="70">
<img src="{$config['logo']}" alt="" height="70">
<p class="text-white-50 my-4 f18" style="width: 400px;">美天智能科技,这里是介绍!</p>
</div>
<div style="display: flex; justify-content: space-between;width: 100%;margin-right: 200px;">
@@ -35,7 +35,7 @@
<div>
<div class="text-center">
<img src="__IMAGES__/code.png" alt="微信二维码" class="img-fluid" style="max-width: 150px;">
<img src="{$config['admin_wechat']}" alt="微信二维码" class="img-fluid" style="max-width: 150px;">
<p class="text-white-50 mt-2">微信公众号</p>
</div>
</div>
+259 -64
View File
@@ -3,17 +3,24 @@
<div class="container">
<div style="width: 70%;">
<ul class="list-unstyled topbar-one__info">
<li class="topbar-one__info__item"><span class="topbar-one__info__icon fas fa-phone-alt"></span><a
href="tel:629-555-0129">(629) 555-0129</a></li>
<li class="topbar-one__info__item"><span class="topbar-one__info__icon fas fa-envelope"></span><a
href="mailto:info@example.com">info@example.com</a></li>
<li class="topbar-one__info__item">
<span class="topbar-one__info__icon fas fa-phone-alt" style="margin-right: 10px;"></span>
<a href="{$config['admin_phone']}">{$config['admin_phone']}</a>
</li>
<li class="topbar-one__info__item">
<span class="topbar-one__info__icon fas fa-envelope" style="margin-right: 10px;"></span>
<a href="mailto:{$config['admin_email']}">{$config['admin_email']}</a>
</li>
</ul>
</div>
<div class="topbar-one__social" style="width: 30%;">
<a href="https://facebook.com"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
<a href="https://instagram.com"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/"><i class="fab fa-linkedin"></i></a>
<a href="/index/user/login" class="mr-10"><i class="layui-icon layui-icon-username"></i> 登录</a>
<a href="/index/user/register" class="mr-10"><i class="layui-icon layui-icon-user"></i> 注册</a>
<a href="javascript:;" class="qrcode-trigger"><i class="layui-icon layui-icon-qrcode"></i> 公众号</a>
<div class="qrcode-popup"
style="display:none;position:absolute;right:54px;top:32px;background:#fff;padding:10px;box-shadow:0 0 10px rgba(0,0,0,0.1); z-index: 1000;">
<img src="{$config['admin_wechat']}" alt="公众号二维码" style="width:180px;height:180px;">
</div>
</div>
</div>
</div>
@@ -21,7 +28,7 @@
<div class="main-menu">
<div class="container">
<div class="main-menu__logo">
<a href="index.html"><img src="__IMAGES__/logo.png" width="186" alt="Logo"></a>
<a href="index.html"><img src="{$config['logo1']}" width="186" alt="Logo"></a>
</div>
<div class="main-menu__nav">
<ul class="main-menu__list">
@@ -32,8 +39,28 @@
</ul>
</div>
<div class="main-menu__right">
<a href="#" class="main-menu__search"><i class="layui-icon layui-icon-search"></i></a>
<a href="login.html" class="main-menu__login"><i class="layui-icon layui-icon-username"></i></a>
<div class="layui-inline">
<div class="layui-inline" style="position: relative;">
<img src="__IMAGES__/avatar.webp" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarMain">
<div class="user-dropdown" id="userDropdownMain">
<ul>
<li>
<a href="/index/user/profile"><i
class="layui-icon layui-icon-user"></i><span>个人中心</span></a>
</li>
<li>
<a href="/index/user/settings"><i
class="layui-icon layui-icon-set"></i><span>账号管理</span></a>
</li>
<li>
<a href="javascript:;" class="logout-btn"><i
class="layui-icon layui-icon-logout"></i><span>退出登录</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -87,7 +114,7 @@
<div class="sticky-nav" style="display: none;">
<div class="container">
<div class="sticky-nav__logo">
<a href="index.html"><img src="__IMAGES__/logo.png" width="150" alt="Logo"></a>
<a href="index.html"><img src="{$config['logo1']}" width="150" alt="Logo"></a>
</div>
<div class="sticky-nav__menu">
<ul>
@@ -98,61 +125,229 @@
</ul>
</div>
<div class="sticky-nav__right">
<a href="#" class="main-menu__search"><i class="layui-icon layui-icon-search"></i></a>
<a href="login.html" class="main-menu__login"><i class="layui-icon layui-icon-username"></i></a>
<div class="main-menu__right">
<div class="layui-inline">
<div class="layui-inline" style="position: relative;">
<img src="__IMAGES__/avatar.webp" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarSticky">
<div class="user-dropdown" id="userDropdownSticky">
<ul>
<li>
<a href="/index/user/profile"><i
class="layui-icon layui-icon-user"></i><span>个人中心</span></a>
</li>
<li>
<a href="/index/user/settings"><i
class="layui-icon layui-icon-set"></i><span>账号管理</span></a>
</li>
<li>
<a href="javascript:;" class="logout-btn"><i
class="layui-icon layui-icon-logout"></i><span>退出登录</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* 用户头像样式 */
#userAvatar {
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.3s ease;
}
#userAvatar:hover {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 下拉菜单容器 */
.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);
}
/* 下拉菜单列表 */
.user-dropdown ul {
margin: 0;
padding: 5px 0;
list-style: none;
}
/* 下拉菜单项 */
.user-dropdown li {
margin: 0;
padding: 0;
}
/* 下拉菜单链接 */
.user-dropdown li a {
display: flex;
align-items: center;
padding: 10px 15px;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
/* 下拉菜单图标 */
.user-dropdown li a i {
margin-right: 10px;
font-size: 16px;
color: #666;
}
/* 下拉菜单文字 */
.user-dropdown li a span {
font-size: 14px;
}
/* 下拉菜单悬停效果 */
.user-dropdown li a:hover {
background: #f5f5f5;
color: #1E9FFF;
}
.user-dropdown li a:hover i {
color: #1E9FFF;
}
/* 分隔线 */
.user-dropdown li:not(:last-child) {
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;
}
</style>
<script>
layui.use(['carousel', 'form'], function(){
var carousel = layui.carousel
,form = layui.form;
//图片轮播
carousel.render({
elem: '#test10'
,width: '100%'
,height: '86vh'
,interval: 4000
});
var $ = layui.$, active = {
set: function(othis){
var THIS = 'layui-bg-normal'
,key = othis.data('key')
,options = {};
othis.css('background-color', '#5FB878').siblings().removeAttr('style');
options[key] = othis.data('value');
ins3.reload(options);
}
};
//监听开关
form.on('switch(autoplay)', function(){
ins3.reload({
autoplay: this.checked
layui.use(['carousel', 'form', 'layer'], function () {
var carousel = layui.carousel,
form = layui.form,
layer = layui.layer,
$ = layui.$;
//图片轮播
carousel.render({
elem: '#test10',
width: '100%',
height: '86vh',
interval: 4000
});
$(document).ready(function () {
// 主导航头像
$("#userAvatarMain").click(function (e) {
e.stopPropagation();
$("#userDropdownMain").toggleClass("show");
$("#userDropdownSticky").removeClass("show"); // 保证只显示一个
});
// 固定导航头像
$("#userAvatarSticky").click(function (e) {
e.stopPropagation();
$("#userDropdownSticky").toggleClass("show");
$("#userDropdownMain").removeClass("show"); // 保证只显示一个
});
// 点击页面其他地方隐藏所有菜单
$(document).click(function (e) {
if (!$(e.target).closest('.user-dropdown, #userAvatarMain, #userAvatarSticky').length) {
$("#userDropdownMain, #userDropdownSticky").removeClass("show");
}
});
// 点击菜单项时隐藏菜单
$("#userDropdownMain li a, #userDropdownSticky li a").click(function () {
$("#userDropdownMain, #userDropdownSticky").removeClass("show");
});
});
// 退出登录
$('.logout-btn').on('click', function () {
layer.confirm('确定要退出登录吗?', {
btn: ['确定', '取消']
}, function () {
window.location.href = '/index/user/logout';
});
});
// 监听滚动事件
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 150) { // 当滚动超过150px时显示固定导航
$('.sticky-nav').fadeIn();
} else {
$('.sticky-nav').fadeOut();
}
});
// 公众号二维码
const trigger = document.querySelector('.qrcode-trigger');
const popup = document.querySelector('.qrcode-popup');
// 鼠标移入显示二维码
trigger.addEventListener('mouseenter', function () {
popup.style.display = 'block';
});
// 鼠标移出隐藏二维码
trigger.addEventListener('mouseleave', function () {
popup.style.display = 'none';
});
// 鼠标移入二维码区域时保持显示
popup.addEventListener('mouseenter', function () {
popup.style.display = 'block';
});
// 鼠标移出二维码区域时隐藏
popup.addEventListener('mouseleave', function () {
popup.style.display = 'none';
});
});
});
$('.demoSet').on('keyup', function(){
var value = this.value
,options = {};
if(!/^\d+$/.test(value)) return;
options[this.name] = value;
ins3.reload(options);
});
// 监听滚动事件
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > 150) { // 当滚动超过150px时显示固定导航
$('.sticky-nav').fadeIn();
} else {
$('.sticky-nav').fadeOut();
}
});
});
</script>
</script>