yunzer/runtime/index/temp/f8995f34639557c9f17f79801bc58d25.php

2080 lines
68 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php /*a:5:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\program\detail.php";i:1749891766;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\head.php";i:1747617129;s:71:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header-simple.php";i:1749258723;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1749170849;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\foot.php";i:1747616844;}*/ ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlentities((string) $config['admin_name']); ?></title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/fontawesome.css">
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/bootstrap.bundle.js"></script>
<script charset="UTF-8" id="LA_COLLECT" src="//www.yunzer.cn/plugins/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "KoyzaWWEcLvPzkQn", ck: "KoyzaWWEcLvPzkQn", autoTrack: true, prefix: 'event' })</script>
</head>
<body>
<link href="/static/css/lightbox.min.css" rel="stylesheet">
<link href="/static/css/swiper-bundle.min.css" rel="stylesheet">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/lightbox.min.js"></script>
<script src="/static/js/swiper-bundle.min.js"></script>
<?php
/**
* 商业使用授权协议
*
* Copyright (c) 2025 [云泽网]. 保留所有权利.
*
* 本软件仅供评估使用。任何商业用途必须获得书面授权许可。
* 未经授权商业使用本软件属于侵权行为,将承担法律责任。
*
* 授权购买请联系: 357099073@qq.com
* 官方网站: https://www.yunzer.cn
*
* 评估用户须知:
* 1. 禁止移除版权声明
* 2. 禁止用于生产环境
* 3. 禁止转售或分发
*/
// 获取当前登录状态
$isLoggedIn = false;
$userInfo = [
'is_login' => false,
'name' => '',
'avatar' => '/static/images/avatar.png' // 默认头像
];
// 检查cookie
$userAccount = cookie('user_account');
if ($userAccount) {
$isLoggedIn = true;
$userInfo = [
'is_login' => true,
'name' => cookie('user_name'),
'avatar' => cookie('user_avatar') ? cookie('user_avatar') : '/static/images/avatar.png'
];
}
// 添加一个隐藏的div来存储登录状态
$loginStatus = [
'isLoggedIn' => $isLoggedIn,
'userAccount' => $userAccount ?? ''
];
?>
<!-- 添加一个隐藏的div来存储登录状态 -->
<div id="loginStatus" style="display: none;" data-is-logged-in="<?php echo htmlentities((string) $isLoggedIn); ?>" data-user-account="<?php echo isset($userAccount) ? htmlentities((string) $userAccount) : ''; ?>">
</div>
<div style="display: flex;flex-direction: column;">
<!-- 导航栏 -->
<div class="main-menu">
<div class="container">
<div class="main-menu__logo">
<a href="/index.html"><img src="/static/images/logo1.png" width="186" alt="Logo"></a>
</div>
<div class="main-menu__nav">
<ul class="main-menu__list">
<li><a href="/">首页</a></li>
<li><a href="/index/articles/index?cateid=1">站点资讯</a></li>
<li><a href="/index/articles/index?cateid=3">技术文章</a></li>
<li><a href="/index/program/index?cateid=2">办公资源</a></li>
<li><a href="/index/program/index?cateid=1">程序下载</a></li>
<li><a href="/index/game/index?cateid=8">游戏下载</a></li>
</ul>
</div>
<div class="main-menu__search">
<i class="layui-icon layui-icon-search search-icon" id="mainSearchIcon"></i>
</div>
<div class="main-menu__right">
<div class="username">
<?php if ($userInfo['is_login']): ?>
<span class="username-text"><?php echo htmlentities((string) $userInfo['name']); ?></span>
<?php endif; ?>
</div>
<div class="layui-inline">
<!-- 根据登录状态显示不同的内容 -->
<?php if ($isLoggedIn): ?>
<div class="layui-inline" style="position: relative;margin-left:20px;">
<img src="<?php echo htmlentities((string) $userInfo['avatar']); ?>" 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>
<?php else: ?>
<div class="layui-inline">
<a href="/index/user/login" class="layui-btn layui-btn-normal">登录</a>
<a href="/index/user/register" class="layui-btn layui-btn-primary">注册</a>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<!-- 固定导航 -->
<div class="sticky-nav" style="display: none;">
<div class="container">
<div class="sticky-nav__logo">
<a href="/index.html"><img src="/static/images/logo1.png" width="150" alt="Logo"></a>
</div>
<div class="sticky-nav__menu">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/index/articles/index?cateid=1">站点资讯</a></li>
<li><a href="/index/articles/index?cateid=3">技术文章</a></li>
<li><a href="/index/program/index?cateid=2">办公资源</a></li>
<li><a href="/index/program/index?cateid=1">程序下载</a></li>
<li><a href="/index/game/index?cateid=8">游戏下载</a></li>
</ul>
</div>
<div class="sticky-nav__search">
<i class="layui-icon layui-icon-search search-icon" id="stickySearchIcon"></i>
</div>
<div class="sticky-nav__right">
<div class="main-menu__right">
<div class="username">
<?php if ($userInfo['is_login']): ?>
<span class="username-text"><?php echo htmlentities((string) $userInfo['name']); ?></span>
<?php endif; ?>
</div>
<div class="layui-inline">
<!-- 根据登录状态显示不同的内容 -->
<?php if ($isLoggedIn): ?>
<div class="layui-inline" style="position: relative;margin-left:20px;">
<img src="<?php echo htmlentities((string) $userInfo['avatar']); ?>" 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>
<?php else: ?>
<div class="layui-inline">
<a href="/index/user/login" class="layui-btn layui-btn-normal">登录</a>
<a href="/index/user/register" class="layui-btn layui-btn-primary">注册</a>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<!-- 搜索遮罩 -->
<div class="search-mask" id="searchMask">
<div class="search-container">
<div class="search-box">
<select id="searchType" class="search-type">
<option value="articles">文章</option>
<option value="resources">资源</option>
</select>
<input type="text" id="searchInput" placeholder="请输入搜索关键词">
<button id="searchBtn">搜索</button>
</div>
</div>
</div>
<script>
// 在页面加载时立即执行
(function () {
// 检查是否已经刷新过
if (sessionStorage.getItem('has_refreshed') === 'true') {
return;
}
// 检查localStorage中是否有用户账号
var userAccount = localStorage.getItem('user_account');
if (userAccount) {
// 同步到cookie
document.cookie = "user_account=" + userAccount + "; path=/";
// 如果有其他必要的数据也同步到cookie
var userId = localStorage.getItem('user_id');
var userName = localStorage.getItem('user_name');
var userAvatar = localStorage.getItem('user_avatar');
if (userId) document.cookie = "user_id=" + userId + "; path=/";
if (userName) document.cookie = "user_name=" + userName + "; path=/";
if (userAvatar) document.cookie = "user_avatar=" + userAvatar + "; path=/";
// 刷新页面以应用新的cookie并标记已刷新
if (!document.cookie.includes('user_id')) {
sessionStorage.setItem('has_refreshed', 'true');
window.location.reload();
}
}
})();
layui.use(['carousel', 'form', 'layer'], function () {
var carousel = layui.carousel, form = layui.form, layer = layui.layer, $ = layui.$;
// 检查本地存储并自动登录
function checkAutoLogin() {
// 如果已经登录,不再执行自动登录
if ($('#userAvatarMain').length > 0) {
return;
}
// 如果已经尝试过自动登录,不再执行
if (sessionStorage.getItem('auto_login_attempted') === 'true') {
return;
}
// 从localStorage获取用户账号
var userAccount = localStorage.getItem('user_account');
if (userAccount) {
// 标记已尝试自动登录
sessionStorage.setItem('auto_login_attempted', 'true');
// 发送自动登录请求
$.ajax({
url: '/index/user/login',
type: 'POST',
data: {
account: userAccount,
password: atob(localStorage.getItem('user_password'))
},
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 设置cookie
document.cookie = "user_id=" + res.data.id + "; path=/";
document.cookie = "user_name=" + res.data.name + "; path=/";
document.cookie = "user_avatar=" + res.data.avatar + "; path=/";
document.cookie = "user_account=" + userAccount + "; path=/";
// 同时更新localStorage
localStorage.setItem('user_id', res.data.id);
localStorage.setItem('user_name', res.data.name);
localStorage.setItem('user_avatar', res.data.avatar);
// 登录成功,强制刷新页面
window.location.href = window.location.href + '?t=' + new Date().getTime();
} else {
// 登录失败,清除所有相关存储
localStorage.removeItem('user_account');
localStorage.removeItem('user_password');
sessionStorage.removeItem('auto_login_attempted');
}
}
});
}
}
// 页面加载时检查自动登录
checkAutoLogin();
$(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 () {
// 先发送退出请求
$.ajax({
url: '/index/user/logout',
type: 'POST',
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 清除localStorage
localStorage.removeItem('user_account');
localStorage.removeItem('user_password');
localStorage.removeItem('user_id');
localStorage.removeItem('user_name');
localStorage.removeItem('user_avatar');
// 清除sessionStorage
sessionStorage.removeItem('auto_login_attempted');
sessionStorage.removeItem('has_refreshed');
// 清除cookie
document.cookie = "user_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "user_name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "user_avatar=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "user_account=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "user_password=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
// 强制刷新页面,不使用缓存
window.location.href = window.location.href + '?t=' + new Date().getTime();
}
}
});
});
});
// 监听滚动事件
$(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';
});
form.on('submit(accountLogin)', function (data) {
$.ajax({
url: '<?php echo url("index/user/login"); ?>',
type: 'POST',
data: data.field,
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 存储登录数据设置7天过期
var expireTime = new Date().getTime() + 7 * 24 * 60 * 60 * 1000;
// 设置localStorage
localStorage.setItem('user_account', data.field.account);
localStorage.setItem('user_password', btoa(data.field.password));
localStorage.setItem('expire_time', expireTime);
localStorage.setItem('is_auto_login', 'true');
// 设置cookie
document.cookie = "user_id=" + res.data.id + "; path=/";
document.cookie = "user_name=" + res.data.name + "; path=/";
document.cookie = "user_avatar=" + res.data.avatar + "; path=/";
document.cookie = "expire_time=" + expireTime + "; path=/";
document.cookie = "is_auto_login=true; path=/";
document.cookie = "user_account=" + data.field.account + "; path=/";
document.cookie = "user_password=" + btoa(data.field.password) + "; path=/";
// 设置sessionStorage
sessionStorage.setItem('auto_login_attempted', 'true');
layer.msg('登录成功', {
icon: 1,
time: 2000,
shade: 0.3
}, function () {
// 获取当前页面URL
var currentUrl = window.location.href;
// 如果当前页面是登录页面,则跳转到首页
if (currentUrl.includes('/index/user/login')) {
window.location.href = '/index.html';
} else {
// 否则刷新当前页面
window.location.href = currentUrl + '?t=' + new Date().getTime();
}
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
});
// 搜索功能相关代码
layui.use(['layer'], function () {
var layer = layui.layer;
var $ = layui.jquery;
// 执行搜索
function executeSearch() {
var searchInput = document.getElementById('searchInput');
if (!searchInput) {
layer.msg('搜索组件初始化失败');
return;
}
var keyword = searchInput.value.trim();
var type = document.getElementById('searchType').value;
if (!keyword) {
layer.msg('请输入搜索关键词');
return;
}
// 跳转到统一的搜索结果页面
window.location.href = '/index/search/index?keyword=' + encodeURIComponent(keyword) + '&type=' + type;
}
// 绑定事件
$(function() {
var searchMask = $('#searchMask');
var searchInput = $('#searchInput');
var searchBtn = $('#searchBtn');
var mainSearchIcon = $('#mainSearchIcon');
var stickySearchIcon = $('#stickySearchIcon');
// 显示搜索框
function showSearch() {
searchMask.addClass('show');
setTimeout(function() {
searchInput.focus();
}, 300);
}
// 隐藏搜索框
function hideSearch() {
searchMask.removeClass('show');
searchInput.val('');
}
// 绑定搜索图标点击事件
mainSearchIcon.on('click', showSearch);
stickySearchIcon.on('click', showSearch);
// 绑定搜索按钮点击事件
searchBtn.on('click', function(e) {
e.preventDefault();
executeSearch();
});
// 绑定回车键搜索
searchInput.on('keypress', function(e) {
if (e.which === 13) {
e.preventDefault();
executeSearch();
}
});
// 点击遮罩层关闭搜索框
searchMask.on('click', function(e) {
if ($(e.target).hasClass('search-mask')) {
hideSearch();
}
});
// 绑定ESC键关闭搜索框
$(document).on('keydown', function(e) {
if (e.keyCode === 27 && searchMask.hasClass('show')) {
hideSearch();
}
});
// 输入框获得焦点时选中所有文本
searchInput.on('focus', function() {
this.select();
});
});
});
</script>
<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;
}
#userDropdownSticky a {
color: #0d6efd !important;
}
/* Banner样式 */
.banner-content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.banner-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.banner-text {
position: absolute;
top: 40%;
left: 10%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
}
.banner-text a {
text-decoration: none;
margin-top: 30px;
}
.banner-title {
font-size: 4em;
font-weight: 600;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.banner-desc {
font-size: 2em;
font-weight: 400;
max-width: 800px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.banner-btn {
background: #fff;
color: #000;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.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;
}
/* 确保轮播容器和项目的高度正确 */
#test10,
#test10 [carousel-item],
#test10 [carousel-item]>* {
height: 86vh !important;
}
#test10 [carousel-item]>* {
background: none !important;
}
.main-menu__right {
display: flex;
align-items: center;
}
.username {
display: flex;
align-items: center;
}
/* 搜索相关样式 */
.search-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
justify-content: center;
align-items: center;
}
.search-mask.show {
display: flex;
opacity: 1;
}
.search-container {
position: relative;
width: 80%;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transform: translateY(-20px);
transition: transform 0.3s ease;
}
.search-mask.show .search-container {
transform: translateY(0);
}
.search-box {
display: flex;
align-items: center;
height: 60px;
background: #fff;
border-radius: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.search-box input {
flex: 1;
height: 100%;
padding: 0 20px;
border: none;
outline: none;
font-size: 16px;
}
.search-box button {
height: 100%;
padding: 0 30px;
border: none;
background: #1E9FFF;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.search-box button:hover {
background: #1a8fe6;
}
.search-icon {
font-size: 20px;
cursor: pointer;
color: #333;
transition: color 0.3s ease;
}
.search-icon:hover {
color: #1e9fff;
}
.search-type {
height: 100%;
padding: 0 15px;
border: none;
border-right: 1px solid #eee;
background: #f8f8f8;
color: #666;
font-size: 14px;
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 30px;
}
.search-type:hover {
background-color: #f0f0f0;
}
.search-type:focus {
background-color: #fff;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.search-results {
padding: 15px;
max-height: 370px;
overflow-y: auto;
}
.search-section {
margin-bottom: 20px;
}
.search-section h3 {
font-size: 16px;
color: #333;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
}
.search-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.search-section li {
padding: 8px 0;
border-bottom: 1px dashed #eee;
display: flex;
align-items: center;
justify-content: space-between;
}
.search-section li:last-child {
border-bottom: none;
}
.search-section a {
color: #333;
text-decoration: none;
flex: 1;
}
.search-section a:hover {
color: #1E9FFF;
}
.search-section .downloads {
color: #1E9FFF;
font-size: 12px;
margin-left: 10px;
}
/* 自定义滚动条样式 */
.search-results::-webkit-scrollbar {
width: 6px;
}
.search-results::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.search-results::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.search-results::-webkit-scrollbar-thumb:hover {
background: #999;
}
</style>
<div class="main">
<div class="location">
<div class="container">
<div class="location-item">
<a href="/">首页</a>
<span>></span>
<a href="/index/program/index"><?php echo htmlentities((string) $cateName); ?></a>
</div>
</div>
</div>
<div class="body-container">
<div class="program-detail-container">
<div class="program-header">
<h1 class="program-title"><?php echo htmlentities((string) $program['title']); ?></h1>
<div class="program-meta">
<span class="program-author"><i class="fa fa-user"></i> <span><?php echo htmlentities((string) $program['author']); ?></span></span>
<span class="program-date"><i class="fa fa-calendar"></i>
<span><?php echo htmlentities((string) date("Y-m-d",!is_numeric($program['create_time'])? strtotime($program['create_time']) : $program['create_time'])); ?></span></span>
<span class="program-views"><i class="fa-solid fa-eye"></i> <span><?php echo htmlentities((string) $program['views']); ?></span> 阅读</span>
<span class="program-downloads"><i class="fa-solid fa-download"></i>
<span><?php echo htmlentities((string) $program['downloads']); ?></span> 下载</span>
</div>
</div>
<!-- <div style="font-size:24px;font-weight:bolder;margin-bottom:30px;">资源展示</div> -->
<div class="program-show">
<div class="swiper program-swiper">
<div class="swiper-wrapper">
<?php
// 强制统一处理:无论 images 是数组还是字符串,都转为数组
$images = isset($program['images']) ? $program['images'] : [];
if (is_string($images)) {
$images = explode(',', $images); // 按逗号分隔字符串
}
$images = array_filter($images); // 移除空值
if(is_array($images) || $images instanceof \think\Collection || $images instanceof \think\Paginator): $i = 0; $__LIST__ = $images;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$image): $mod = ($i % 2 );++$i;?>
<div class="swiper-slide">
<a href="<?php echo htmlentities((string) $image); ?>" data-lightbox="program-images" data-title="<?php echo htmlentities((string) $program['title']); ?>">
<img src="<?php echo htmlentities((string) $image); ?>" alt="<?php echo htmlentities((string) $program['title']); ?>">
</a>
</div>
<?php endforeach; endif; else: echo "" ;endif; ?>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<div style="font-size:24px;font-weight:bolder;margin-bottom:30px;">资源简介</div>
<div class="program-content">
<?php echo $program['content']; ?>
</div>
<!-- <div class="program-info">
<div class="info-item">
<span class="info-label">软件大小:</span>
<span><?php echo htmlentities((string) (isset($program['size']) && ($program['size'] !== '')?$program['size']:'未知')); ?></span>
</div>
<div class="info-item">
<span class="info-label">运行环境:</span>
<span><?php echo htmlentities((string) (isset($program['environment']) && ($program['environment'] !== '')?$program['environment']:'通用')); ?></span>
</div>
<div class="info-item">
<span class="info-label">更新时间:</span>
<span><?php echo htmlentities((string) date("Y-m-d",!is_numeric($program['update_time'])? strtotime($program['update_time']) : $program['update_time'])); ?></span>
</div>
<div class="info-item">
<span class="info-label">软件版本:</span>
<span><?php echo htmlentities((string) (isset($program['version']) && ($program['version'] !== '')?$program['version']:'1.0.0')); ?></span>
</div>
</div>
<div class="program-actions">
<div class="action-item download-btn" data-id="<?php echo htmlentities((string) $program['id']); ?>">
<i class="fa fa-download"></i>
<span class="action-text">下载</span>
<span class="action-count"><?php echo htmlentities((string) $program['downloads']); ?></span>
</div>
<div class="action-item share-btn">
<i class="fa fa-share-alt"></i>
<span class="action-text">分享</span>
</div>
</div> -->
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
</div>
</div>
</div>
<div class="program-navigation">
<div class="prev-program">
<?php if($prevProgram): ?>
<a href="/index/program/detail?id=<?php echo htmlentities((string) $prevProgram['id']); ?>">
<i class="fa fa-arrow-left"></i> 上一篇:<?php echo htmlentities((string) $prevProgram['title']); ?>
</a>
<?php else: ?>
<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>
<?php endif; ?>
</div>
<div class="next-program">
<?php if($nextProgram): ?>
<a href="/index/program/detail?id=<?php echo htmlentities((string) $nextProgram['id']); ?>">
下一篇:<?php echo htmlentities((string) $nextProgram['title']); ?> <i class="fa fa-arrow-right"></i>
</a>
<?php else: ?>
<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>
<?php endif; ?>
</div>
</div>
<div class="related-programs">
<h3 class="related-title">相关推荐</h3>
<div class="related-list">
<?php if(is_array($relatedPrograms) || $relatedPrograms instanceof \think\Collection || $relatedPrograms instanceof \think\Paginator): $i = 0; $__LIST__ = $relatedPrograms;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$related): $mod = ($i % 2 );++$i;?>
<div class="related-item">
<a href="/index/program/detail?id=<?php echo htmlentities((string) $related['id']); ?>">
<div class="related-image">
<img src="<?php echo htmlentities((string) $related['icon']); ?>" alt="<?php echo htmlentities((string) $related['title']); ?>">
</div>
<div class="related-info">
<div class="related-item-title"><?php echo htmlentities((string) $related['title']); ?></div>
</div>
</a>
</div>
<?php endforeach; endif; else: echo "" ;endif; ?>
</div>
</div>
</div>
<div class="program-detail-right">
<div class="aboutauthor">
<!-- <div class="aboutauthor-title">关于作者</div> -->
<div class="aboutauthor-main">
<div class="aboutauthor-main-top">
<div class="aboutauthor-avatar">
<img src="<?php echo htmlentities((string) $uploaderInfo['avatar']); ?>" alt="作者头像">
</div>
<div class="aboutauthor-info">
<div class="author-name"><?php echo htmlentities((string) $uploaderInfo['name']); ?></div>
</div>
</div>
<div class="aboutauthor-main-middle">
<div class="author-stats">
<div class="author-stats-item">
<h6>资源</h6>
<span class="count"><?php echo htmlentities((string) $uploaderInfo['resource_count']); ?></span>
</div>
<div class="author-stats-item">
<h6>文章</h6>
<span class="count"><?php echo htmlentities((string) $uploaderInfo['article_count']); ?></span>
</div>
<div class="author-stats-item">
<h6>粉丝</h6>
<span class="count">0</span>
</div>
</div>
</div>
</div>
<div class="aboutauthor-btn">
<button class="follow-btn">
<i class="fa fa-user-plus"></i> 关注他
</button>
<button class="message-btn">
<i class="fa fa-envelope"></i> 发私信
</button>
</div>
</div>
<div class="infos">
<!-- <div class="infos-title">下载</div> -->
<div class="infos-main">
<div class="infos-main-top">
<div class="infos-info">
<div class="info-item">
<span class="info-label">软件编码:</span>
<span><?php echo htmlentities((string) $program['number']); ?></span>
</div>
<div class="info-item">
<span class="info-label">软件大小:</span>
<span><?php echo htmlentities((string) (isset($program['size']) && ($program['size'] !== '')?$program['size']:'未知')); ?></span>
</div>
<div class="info-item">
<span class="info-label">更新时间:</span>
<span><?php echo htmlentities((string) date("Y-m-d",!is_numeric($program['create_time'])? strtotime($program['create_time']) : $program['create_time'])); ?></span>
</div>
<!-- <div class="info-item">
<span class="info-label">软件版本:</span>
<span><?php echo htmlentities((string) (isset($program['version']) && ($program['version'] !== '')?$program['version']:'1.0.0')); ?></span>
</div> -->
</div>
</div>
<div class="infos-main-middle">
<div class="infos-stats">
<div class="infos-stats-item">
<h6>下载</h6>
<a href="<?php echo htmlentities((string) $program['url']); ?>" target="_blank">点击下载</a>
</div>
<div class="infos-stats-item">
<h6>分享码</h6>
<?php if($program['code']): ?>
<?php echo htmlentities((string) $program['code']); else: ?>
<span>-</span>
<?php endif; ?>
</div>
<div class="infos-stats-item">
<h6>解压密码</h6>
<?php if($program['zipcode']): ?>
<a href=""><?php echo htmlentities((string) $program['zipcode']); ?></a>
<?php else: ?>
<span>-</span>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 返回顶部按钮 -->
<div class="go-to-top">
<i class="layui-icon-up"></i>
</div>
<footer class="footer" style="background-image: url(/static/images/footer-bg-1.png)">
<div class="container">
<div class="row" style="width: 100%;">
<div class="row-main">
<div class="mr-20">
<img src="<?php echo htmlentities((string) $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;">
<div>
<h4 class="text-white f-20 font-weight-normal mb-3">关于我们</h4>
<ul class="list-unstyled footer-sub-menu">
<li><a href="#" class="footer-link">概况</a></li>
<li><a href="#" class="footer-link">资讯</a></li>
<li><a href="#" class="footer-link">加入我们</a></li>
<li><a href="#" class="footer-link">联系我们</a></li>
</ul>
</div>
<div>
<h4 class="text-white f-20 font-weight-normal mb-3">商务合作</h4>
<ul class="list-unstyled footer-sub-menu">
<li><a href="#" class="footer-link">商务合作</a></li>
</ul>
</div>
<div>
<h4 class="text-white f-20 font-weight-normal mb-3">服务支持</h4>
<ul class="list-unstyled footer-sub-menu">
<li><a href="#" class="footer-link">常见问答</a></li>
<li><a href="#" class="footer-link">软件下载</a></li>
<li><a href="#" class="footer-link">服务政策</a></li>
<li><a href="#" class="footer-link">投诉建议</a></li>
</ul>
</div>
</div>
<div>
<div class="text-center">
<img src="<?php echo htmlentities((string) $config['admin_wechat']); ?>" alt="微信二维码" class="img-fluid" style="max-width: 150px;">
<p class="text-white-50 mt-2">微信公众号</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<section class="copyright text-center">
<div class="container wow fadeInUp animated" data-wow-delay="400ms"
style="visibility: visible; animation-delay: 400ms; animation-name: fadeInUp;">
<p class="copyright__text">Copyright <span class="dynamic-year">2025</span> | All Rights By <a
href="http://www.yunzer.cn">Yunzer</a></p>
</div>
<div class="container wow fadeInUp animated" data-wow-delay="400ms"
style="visibility: visible; animation-delay: 400ms; animation-name: fadeInUp;">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow"><?php echo htmlentities((string) $config['admin_icp']); ?></a>
</div>
<div class="tongji">
<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8"
src="https://v6-widget.51.la/v6/KoyzaWWEcLvPzkQn/quote.js?theme=#1690FF,#FFFFFF,#999999,#FFFFFF,#FFFFFF,#1690FF,12&f=12"></script>
</div>
</section>
<script>
// 更新访问次数
async function updateProgramViews(programId) {
try {
await fetch('/index/program/updateViews', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: programId })
});
} catch (error) {
console.error('更新访问次数失败:', error);
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
const programId = '<?php echo htmlentities((string) $program['id']); ?>';
// 更新访问次数
updateProgramViews(programId);
// 下载功能
document.querySelector('.download-btn').addEventListener('click', async function () {
try {
const response = await fetch('/index/program/download?id=' + programId, {
method: 'POST',
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const result = await response.json();
if (result.code === 1 && result.data && result.data.fileurl) {
const downloadUrl = window.location.origin + result.data.fileurl;
window.location.href = downloadUrl;
} else {
layer.msg('下载地址不存在', { icon: 2 });
}
} catch (error) {
layer.msg('下载失败,请稍后重试', { icon: 2 });
}
});
// 分享功能
document.querySelector('.share-btn').addEventListener('click', function () {
const url = window.location.href;
navigator.clipboard.writeText(url).then(() => {
layer.msg('链接已复制到剪贴板', { icon: 1 });
}).catch(() => {
layer.msg('复制失败,请手动复制', { icon: 2 });
});
});
// 返回顶部
const goToTop = document.querySelector('.go-to-top');
window.addEventListener('scroll', function () {
if (window.scrollY > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
goToTop.addEventListener('click', function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const authorSection = document.querySelector('.aboutauthor');
const downloadSection = document.querySelector('.infos');
const originalOffset = authorSection.offsetTop;
const parentContainer = authorSection.parentElement;
const parentRect = parentContainer.getBoundingClientRect();
// 创建一个占位元素,防止内容跳动
const placeholder = document.createElement('div');
placeholder.style.height = (authorSection.offsetHeight + downloadSection.offsetHeight + 30) + 'px'; // 30px是间距
placeholder.style.display = 'none';
parentContainer.insertBefore(placeholder, authorSection);
function handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const parentTop = parentRect.top + scrollTop;
const parentBottom = parentTop + parentRect.height;
const totalHeight = authorSection.offsetHeight + downloadSection.offsetHeight + 30; // 30px是间距
// 当作者信息区域到达父容器顶部时
if (scrollTop > originalOffset) {
// 检查是否到达父容器底部
if (scrollTop + totalHeight + 20 > parentBottom) {
authorSection.style.position = 'absolute';
downloadSection.style.position = 'absolute';
authorSection.style.top = (parentRect.height - totalHeight) + 'px';
downloadSection.style.top = (parentRect.height - downloadSection.offsetHeight) + 'px';
authorSection.classList.remove('sticky');
downloadSection.classList.remove('sticky');
} else {
authorSection.style.position = 'fixed';
downloadSection.style.position = 'fixed';
authorSection.style.top = '100px';
downloadSection.style.top = (100 + authorSection.offsetHeight + 30) + 'px'; // 30px是间距
authorSection.style.width = '350px';
downloadSection.style.width = '350px';
authorSection.classList.add('sticky');
downloadSection.classList.add('sticky');
placeholder.style.display = 'block';
}
} else {
authorSection.style.position = 'static';
downloadSection.style.position = 'static';
authorSection.classList.remove('sticky');
downloadSection.classList.remove('sticky');
placeholder.style.display = 'none';
}
}
// 监听滚动事件
window.addEventListener('scroll', handleScroll);
// 监听窗口大小改变事件
window.addEventListener('resize', function () {
parentRect = parentContainer.getBoundingClientRect();
handleScroll();
});
});
</script>
<style>
.location {
max-width: 1200px;
margin: 30px auto;
}
.main .body-container {
display: flex;
max-width: 1200px;
margin: 30px auto;
gap: 30px;
}
.main .body-container .program-detail-right {
width: 30%;
}
.program-detail-container {
padding: 50px;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 70%;
}
.main .body-container .program-detail-right .aboutauthor {
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.main .body-container .program-detail-right .aboutauthor-title {
height: 60px;
display: flex;
align-items: center;
padding-left: 20px;
border-bottom: 1px solid #eee;
font-weight: 700;
}
.main .body-container .program-detail-right .aboutauthor-main {
display: flex;
flex-direction: column;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-top {
display: flex;
align-items: center;
padding-left: 20px !important;
/* padding: 20px 0; */
/* border-bottom: 1px solid #efefef; */
margin-bottom: 20px;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-avatar {
margin-right: 12px;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-info .author-name {
font-size: 20px;
font-weight: 700;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-avatar img {
width: 60px;
height: 60px;
border-radius: 4px;
box-sizing: border-box;
margin: 0px;
min-width: 0px;
max-width: 100%;
background-color: #fff;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-middle {
/* margin-left: 20px; */
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats {
display: flex;
justify-content: space-evenly;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats .author-stats-item {
display: flex;
flex-direction: column;
align-items: center;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats .author-stats-item .count {
/* font-size: 30px; */
font-weight: 700;
}
.main .body-container .program-detail-right .aboutauthor-btn {
display: flex;
justify-content: space-evenly;
/* padding: 20px 0; */
}
.main .body-container .program-detail-right .aboutauthor-btn .follow-btn {
background-color: #0081ff;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
border: none;
}
.main .body-container .program-detail-right .aboutauthor-btn .message-btn {
color: #0081ff;
padding: 10px 20px;
border-radius: 8px;
border: 1px solid #eee;
}
.program-header {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.program-title {
font-size: 28px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
line-height: 1.4;
}
.program-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
color: #666;
font-size: 14px;
}
.program-meta span {
display: flex;
align-items: center;
}
.program-meta i {
margin-right: 5px;
}
.program-content {
line-height: 1.8;
color: #333;
font-size: 16px;
margin: 30px 0;
padding-top: 30px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.program-info {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.info-item {
margin-bottom: 10px;
display: flex;
align-items: center;
font-size: 14px;
}
.info-item span {
color: #666;
}
.info-label {
font-weight: bold;
width: 100px;
color: #666;
}
.program-actions {
display: flex;
justify-content: center;
gap: 40px;
margin: 30px 0;
padding: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.action-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.action-item i {
font-size: 24px;
color: #666;
margin-bottom: 5px;
}
.action-text {
font-size: 14px;
color: #666;
}
.action-count {
font-size: 12px;
color: #999;
margin-top: 3px;
}
.program-navigation {
display: flex;
justify-content: space-between;
margin: 30px 0;
}
.prev-program,
.next-program {
max-width: 45%;
}
.prev-program a,
.next-program a {
color: #333 !important;
text-decoration: none;
}
.prev-program a:hover,
.next-program a:hover {
color: #f57005 !important;
transition: all 0.3s ease;
}
.disabled {
color: #999;
}
.related-programs {
margin: 40px 0;
}
.related-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.related-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.related-item {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.related-item:hover {
transform: translateY(-5px);
}
.related-item a {
text-decoration: none;
color: inherit;
}
.related-image img {
width: 100%;
height: 150px;
object-fit: cover;
}
.related-info {
padding: 10px;
}
.related-item-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.related-item-desc {
font-size: 12px;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.go-to-top {
position: fixed;
right: 30px;
bottom: 30px;
width: 40px;
height: 40px;
background: #f57005;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.go-to-top.show {
opacity: 1;
visibility: visible;
}
.go-to-top:hover {
background: #e66600;
transform: translateY(-3px);
}
.go-to-top i {
font-size: 18px;
}
@media (max-width: 768px) {
.program-title {
font-size: 24px;
}
.related-list {
grid-template-columns: repeat(1, 1fr);
}
.program-meta {
gap: 10px;
}
.go-to-top {
right: 20px;
bottom: 20px;
width: 36px;
height: 36px;
}
}
.location-item a {
color: #000 !important;
}
.disclaimers {
color: #b1b1b1;
width: 80%;
margin: 20px auto;
margin-bottom: 60px;
}
.disclaimer-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
.disclaimer-content {
font-size: 14px;
line-height: 1.6;
}
.disclaimer-content p {
margin-bottom: 0;
}
.aboutauthor {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.aboutauthor.sticky {
position: fixed;
top: 20px;
width: calc(300px - 40px);
/* 假设父容器宽度为300px减去padding */
z-index: 100;
}
.aboutauthor-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.aboutauthor-main-top {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.aboutauthor-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
}
.aboutauthor-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-name {
font-size: 16px;
font-weight: 500;
color: #333;
}
.author-stats {
display: flex;
justify-content: space-around;
padding: 15px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.author-stats-item {
text-align: center;
}
.author-stats-item h6 {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.author-stats-item .count {
font-size: 16px;
font-weight: 600;
color: #333;
}
.aboutauthor-btn {
margin-top: 20px;
display: flex;
gap: 10px;
}
.aboutauthor-btn button {
flex: 1;
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.follow-btn {
background: #3881fd;
color: white;
}
.follow-btn:hover {
background: #2c5fd9;
}
.message-btn {
background: #f8fafc;
color: #333;
border: 1px solid #e2e8f0;
}
.message-btn:hover {
background: #e2e8f0;
}
.aboutauthor-btn i {
margin-right: 5px;
}
.infos.sticky {
position: fixed;
z-index: 100;
transition: all 0.3s ease;
margin-top: 0;
}
.infos {
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin-top: 30px;
padding: 20px;
transition: all 0.3s ease;
}
.infos-main {}
.infos-main-top {
padding: 20px;
}
.infos-title {
height: 60px;
display: flex;
align-items: center;
padding-left: 20px;
border-bottom: 1px solid #eee;
font-weight: 700;
}
.infos-main-middle {
display: flex;
justify-content: space-evenly;
border-top: 1px solid #efefef;
padding-top: 20px;
}
.infos-stats {
display: flex;
justify-content: space-evenly;
width: 100%;
}
.infos-stats-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
}
.infos-stats-item h6 {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.infos-btn-blue {
background-color: #0081ff;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
border: none;
}
.program-show {
margin: 20px 0;
margin-bottom: 60px;
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.program-swiper {
width: 100%;
height: 400px;
border-radius: 8px;
overflow: hidden;
}
.program-swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
}
.program-swiper .swiper-slide img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
cursor: zoom-in;
transition: transform 0.3s ease;
}
.program-swiper .swiper-slide img:hover {
transform: scale(1.02);
}
.program-swiper .swiper-button-prev,
.program-swiper .swiper-button-next {
color: #3881fd;
background: rgba(255, 255, 255, 0.9);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.program-swiper .swiper-button-prev:after,
.program-swiper .swiper-button-next:after {
font-size: 18px;
}
.program-swiper .swiper-pagination-bullet {
background: #3881fd;
opacity: 0.5;
}
.program-swiper .swiper-pagination-bullet-active {
opacity: 1;
}
/* Lightbox 样式优化 */
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
opacity: 0.8;
background: none !important;
}
.lb-nav a.lb-prev:after {
content: '\f104';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 30px;
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.lb-nav a.lb-next:after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 30px;
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.lb-closeContainer {
position: absolute;
top: 20px;
right: 20px;
}
.lb-close {
opacity: 0.8;
transition: opacity 0.3s ease;
background: none !important;
}
.lb-close:after {
content: '\f00d';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 30px;
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.lb-close:hover {
opacity: 1;
}
.lb-data .lb-caption {
font-size: 1.3rem;
font-weight: normal;
}
.lb-data .lb-number {
font-size: 12px;
color: #999;
}
</style>
<script>
// 初始化 Swiper
document.addEventListener('DOMContentLoaded', function () {
const swiper = new Swiper('.program-swiper', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
// 初始化 Lightbox
lightbox.option({
'resizeDuration': 200,
'wrapAround': true,
'albumLabel': "图片 %1 / %2",
'fadeDuration': 300,
'imageFadeDuration': 300,
'positionFromTop': 100,
'maxWidth': 1200,
'maxHeight': 800,
'disableScrolling': true,
'showImageNumberLabel': true,
'alwaysShowNavOnTouchDevices': true
});
});
</script>
</body>
</html>