更新资源编辑
@ -31,8 +31,8 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">资源编号</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="number" required lay-verify="required" placeholder="选取分类后系统自动生成" autocomplete="off"
|
||||
class="layui-input" lay-affix="clear" disabled>
|
||||
<input type="text" name="number" required lay-verify="required" placeholder="选取分类后系统自动生成"
|
||||
autocomplete="off" class="layui-input" lay-affix="clear" disabled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -75,8 +75,8 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">资源文件</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="fileurl" required placeholder="本地资源地址" autocomplete="off"
|
||||
class="layui-input" value="" style="margin-bottom: 10px;" lay-affix="clear">
|
||||
<input type="text" name="fileurl" required placeholder="本地资源地址" autocomplete="off" class="layui-input"
|
||||
value="" style="margin-bottom: 10px;" lay-affix="clear">
|
||||
<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
|
||||
<i class="layui-icon layui-icon-upload"></i>
|
||||
<div>点击上传,或将文件拖拽到此处</div>
|
||||
@ -89,7 +89,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="file-progress" style="margin-top: 10px;">
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="file-progress"
|
||||
style="margin-top: 10px;">
|
||||
<div class="layui-progress-bar" lay-percent=""></div>
|
||||
</div>
|
||||
<input type="hidden" name="file" id="file" value="">
|
||||
@ -107,16 +108,16 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分享码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="code" required placeholder="请输入分享码" autocomplete="off"
|
||||
class="layui-input" lay-affix="clear">
|
||||
<input type="text" name="code" required placeholder="请输入分享码" autocomplete="off" class="layui-input"
|
||||
lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">解压密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="zipcode" required placeholder="请输入解压密码" autocomplete="off"
|
||||
class="layui-input" lay-affix="clear">
|
||||
<input type="text" name="zipcode" required placeholder="请输入解压密码" autocomplete="off" class="layui-input"
|
||||
lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -127,6 +128,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片上传</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-upload">
|
||||
<button type="button" class="layui-btn" id="imageUpload">多图片上传</button>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
|
||||
预览图:
|
||||
<div class="layui-upload-list" id="imagePreview" style="display: flex; flex-direction: column;">
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="image-progress"
|
||||
style="margin-top: 10px;">
|
||||
<div class="layui-progress-bar" lay-percent=""></div>
|
||||
</div>
|
||||
<input type="hidden" name="images" id="images" value="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">内容</label>
|
||||
<div class="layui-input-block">
|
||||
@ -148,13 +168,22 @@
|
||||
|
||||
<script src="/static/js/wangeditor.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'layer'], function () {
|
||||
layui.use(['form', 'layer', 'upload', 'element'], function () {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var $ = layui.$;
|
||||
var upload = layui.upload;
|
||||
var element = layui.element;
|
||||
|
||||
// 格式化文件大小
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// 图标上传
|
||||
var iconUpload = upload.render({
|
||||
elem: '#upload-btn',
|
||||
@ -174,7 +203,7 @@
|
||||
$('#upload-text').html('');
|
||||
layer.msg('图标上传成功', { icon: 1 });
|
||||
},
|
||||
uploadError: function () {
|
||||
error: function () {
|
||||
var demoText = $('#upload-text');
|
||||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
@ -212,7 +241,7 @@
|
||||
$('input[name="fileurl"]').val(res.data.src);
|
||||
layer.msg('文件上传成功', { icon: 1 });
|
||||
},
|
||||
uploadError: function () {
|
||||
error: function () {
|
||||
layer.msg('文件上传失败', { icon: 2 });
|
||||
},
|
||||
progress: function (n, elem, e) {
|
||||
@ -223,116 +252,187 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 格式化文件大小
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// 获取分类列表
|
||||
$.get('{:url("resources/getcate")}', function (res) {
|
||||
if (res.code == 0) {
|
||||
var html = '<option value="">请选择分类</option>';
|
||||
res.data.forEach(function (item) {
|
||||
var disabled = item.cid == 0 ? 'disabled' : '';
|
||||
html += '<option value="' + item.id + '" ' + disabled + '>' + item.name + '</option>';
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach(function (child) {
|
||||
html += '<option value="' + child.id + '">├─ ' + child.name + '</option>';
|
||||
});
|
||||
}
|
||||
// 多图片上传
|
||||
var uploadInst = upload.render({
|
||||
elem: '#imageUpload',
|
||||
url: '{:url("index/upload_img")}',
|
||||
multiple: true,
|
||||
accept: 'images',
|
||||
before: function (obj) {
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#imagePreview').append('<div class="layui-upload-img-item" style="display: inline-block; margin-right: 10px;"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p></div>');
|
||||
});
|
||||
$('select[name="cate"]').html(html);
|
||||
form.render('select');
|
||||
|
||||
// 存储分类数据供后续使用
|
||||
window.categoryData = res.data;
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 });
|
||||
element.progress('image-progress', '0%');
|
||||
layer.msg('图片上传中', { icon: 16, time: 0 });
|
||||
},
|
||||
done: function (res) {
|
||||
if (res.code > 0) {
|
||||
return layer.msg('图片上传失败');
|
||||
}
|
||||
var images = $('#images').val();
|
||||
images = images ? images + ',' + res.data : res.data;
|
||||
$('#images').val(images);
|
||||
layer.msg('图片上传成功', { icon: 1 });
|
||||
},
|
||||
error: function () {
|
||||
var demoText = $('#imagePreview');
|
||||
demoText.append('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
uploadInst.upload();
|
||||
});
|
||||
},
|
||||
progress: function (n, elem, e) {
|
||||
element.progress('image-progress', n + '%');
|
||||
if (n == 100) {
|
||||
layer.msg('图片上传完毕', { icon: 1 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 获取分类列表
|
||||
function loadCategories() {
|
||||
$.get('{:url("resources/getcate")}', function (res) {
|
||||
if (res.code == 0) {
|
||||
var html = '<option value="">请选择分类</option>';
|
||||
res.data.forEach(function (item) {
|
||||
var disabled = item.cid == 0 ? 'disabled' : '';
|
||||
html += '<option value="' + item.id + '" ' + disabled + '>' + item.name + '</option>';
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach(function (child) {
|
||||
html += '<option value="' + child.id + '">├─ ' + child.name + '</option>';
|
||||
});
|
||||
}
|
||||
});
|
||||
$('select[name="cate"]').html(html);
|
||||
form.render('select');
|
||||
window.categoryData = res.data;
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 });
|
||||
}
|
||||
});
|
||||
}
|
||||
loadCategories();
|
||||
|
||||
// 递归查找分类信息的函数
|
||||
function findCategory(categories, targetId) {
|
||||
for (let category of categories) {
|
||||
if (category.id == targetId) {
|
||||
return {
|
||||
parent: null,
|
||||
current: category,
|
||||
total: category.total || 0
|
||||
};
|
||||
}
|
||||
if (category.children && category.children.length > 0) {
|
||||
for (let child of category.children) {
|
||||
if (child.id == targetId) {
|
||||
return {
|
||||
parent: category,
|
||||
current: child,
|
||||
total: child.total || 0
|
||||
};
|
||||
}
|
||||
if (child.children && child.children.length > 0) {
|
||||
const result = findCategory([child], targetId);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 监听分类选择变化
|
||||
form.on('select(cate)', function(data) {
|
||||
form.on('select(cate)', function (data) {
|
||||
var selectedId = data.value;
|
||||
if (!selectedId) {
|
||||
$('input[name="number"]').val('');
|
||||
return;
|
||||
}
|
||||
|
||||
// 递归查找分类信息的函数
|
||||
function findCategory(categories, targetId) {
|
||||
for (let category of categories) {
|
||||
// 检查当前分类
|
||||
if (category.id == targetId) {
|
||||
return {
|
||||
parent: null,
|
||||
current: category,
|
||||
total: category.total || 0
|
||||
};
|
||||
}
|
||||
// 检查子分类
|
||||
if (category.children && category.children.length > 0) {
|
||||
for (let child of category.children) {
|
||||
if (child.id == targetId) {
|
||||
return {
|
||||
parent: category,
|
||||
current: child,
|
||||
total: child.total || 0
|
||||
};
|
||||
}
|
||||
// 递归检查更深层级的子分类
|
||||
if (child.children && child.children.length > 0) {
|
||||
const result = findCategory([child], targetId);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 查找选中的分类信息
|
||||
const categoryInfo = findCategory(window.categoryData, selectedId);
|
||||
|
||||
if (categoryInfo) {
|
||||
// 生成资源编号
|
||||
var nextNumber = categoryInfo.total + 1;
|
||||
var numberStr = nextNumber.toString().padStart(5, '0');
|
||||
var resourceNumber = '';
|
||||
|
||||
// 构建编号前缀
|
||||
if (categoryInfo.parent) {
|
||||
resourceNumber = categoryInfo.parent.number + categoryInfo.current.number;
|
||||
} else {
|
||||
resourceNumber = categoryInfo.current.number;
|
||||
}
|
||||
|
||||
// 添加序号
|
||||
var resourceNumber = categoryInfo.parent ? categoryInfo.parent.number + categoryInfo.current.number : categoryInfo.current.number;
|
||||
resourceNumber += numberStr;
|
||||
|
||||
// 设置资源编号
|
||||
$('input[name="number"]').val(resourceNumber);
|
||||
}
|
||||
});
|
||||
|
||||
// 配置 wangeditor 编辑器
|
||||
const { createEditor, createToolbar } = window.wangEditor;
|
||||
const editorConfig = {
|
||||
MENU_CONF: {},
|
||||
placeholder: '请输入内容...',
|
||||
onChange(editor) {
|
||||
const html = editor.getHtml();
|
||||
},
|
||||
};
|
||||
editorConfig.MENU_CONF['uploadImage'] = {
|
||||
server: '{:url("index/upload_img")}',
|
||||
fieldName: 'file',
|
||||
maxFileSize: 50 * 1024 * 1024,
|
||||
maxNumberOfFiles: 10,
|
||||
allowedFileTypes: ['image/*'],
|
||||
meta: { token: 'xxx' },
|
||||
metaWithUrl: true,
|
||||
headers: { Accept: 'text/x-json' },
|
||||
timeout: 30 * 1000,
|
||||
onBeforeUpload(file) {
|
||||
console.log('准备上传图片', file);
|
||||
return file;
|
||||
},
|
||||
onProgress(progress) {
|
||||
console.log('上传进度', progress);
|
||||
},
|
||||
onSuccess(file, res) {
|
||||
console.log('上传成功', file, res);
|
||||
},
|
||||
onFailed(file, res) {
|
||||
layer.msg('上传失败:' + res.msg, { icon: 2 });
|
||||
console.log('上传失败', file, res);
|
||||
},
|
||||
onError(file, err, res) {
|
||||
layer.msg('上传出错:' + err.message, { icon: 2 });
|
||||
console.error('上传出错', file, err, res);
|
||||
},
|
||||
customInsert(res, insertFn) {
|
||||
if (res.code === 0 && res.url) {
|
||||
let imageUrl = res.url;
|
||||
if (!imageUrl.startsWith('http')) {
|
||||
imageUrl = 'https://' + imageUrl;
|
||||
}
|
||||
imageUrl = imageUrl.replace(/^https?:\/\/[^\/]+\/admin\/resources\//, 'https://www.yunzer.cn/');
|
||||
insertFn(imageUrl);
|
||||
} else {
|
||||
layer.msg('图片上传失败:' + (res.msg || '未知错误'), { icon: 2 });
|
||||
}
|
||||
}
|
||||
};
|
||||
const editor = createEditor({
|
||||
selector: '#editor-container',
|
||||
html: '<p><br></p>',
|
||||
config: editorConfig,
|
||||
mode: 'default',
|
||||
});
|
||||
const toolbar = createToolbar({
|
||||
editor,
|
||||
selector: '#toolbar-container',
|
||||
config: {},
|
||||
mode: 'default',
|
||||
});
|
||||
|
||||
// 表单提交
|
||||
form.on('submit(formSubmit)', function (data) {
|
||||
// 获取编辑器内容
|
||||
var content = editor.getHtml();
|
||||
if (!content || content === '<p><br></p>') {
|
||||
layer.msg('请输入文章内容', { icon: 2 });
|
||||
return false;
|
||||
}
|
||||
|
||||
var loadIndex = layer.load(2);
|
||||
data.field.content = content;
|
||||
|
||||
$.ajax({
|
||||
url: '{:url("resources/add")}',
|
||||
type: 'POST',
|
||||
@ -353,28 +453,15 @@
|
||||
});
|
||||
|
||||
// 重置按钮点击事件
|
||||
$('button[type="reset"]').on('click', function() {
|
||||
// 重新加载分类列表
|
||||
$.get('{:url("resources/getcate")}', function (res) {
|
||||
if (res.code == 0) {
|
||||
var html = '<option value="">请选择分类</option>';
|
||||
res.data.forEach(function (item) {
|
||||
var disabled = item.cid == 0 ? 'disabled' : '';
|
||||
html += '<option value="' + item.id + '" ' + disabled + '>' + item.name + '</option>';
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach(function (child) {
|
||||
html += '<option value="' + child.id + '">├─ ' + child.name + '</option>';
|
||||
});
|
||||
}
|
||||
});
|
||||
$('select[name="cate"]').html(html);
|
||||
form.render('select');
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 });
|
||||
}
|
||||
});
|
||||
$('button[type="reset"]').on('click', function () {
|
||||
loadCategories();
|
||||
});
|
||||
});
|
||||
|
||||
//返回资源列表
|
||||
function goBack() {
|
||||
window.location.href = '{:url("resources/lists")}';
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- wangeditor编辑器脚本 -->
|
||||
|
||||
@ -40,7 +40,8 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">描述</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="desc" placeholder="请输入资源描述" class="layui-textarea" lay-affix="clear">{$resource.desc|default=''}</textarea>
|
||||
<textarea name="desc" placeholder="请输入资源描述" class="layui-textarea"
|
||||
lay-affix="clear">{$resource.desc|default=''}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -76,8 +77,8 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">资源文件</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="fileurl" required placeholder="本地资源地址" autocomplete="off"
|
||||
class="layui-input" value="{$resource.fileurl|default=''}" style="margin-bottom: 10px;" lay-affix="clear">
|
||||
<input type="text" name="fileurl" required placeholder="本地资源地址" autocomplete="off" class="layui-input"
|
||||
value="{$resource.fileurl|default=''}" style="margin-bottom: 10px;" lay-affix="clear">
|
||||
<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
|
||||
<i class="layui-icon layui-icon-upload"></i>
|
||||
<div>点击上传,或将文件拖拽到此处</div>
|
||||
@ -90,7 +91,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="file-progress" style="margin-top: 10px;">
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="file-progress"
|
||||
style="margin-top: 10px;">
|
||||
<div class="layui-progress-bar" lay-percent=""></div>
|
||||
</div>
|
||||
<input type="hidden" name="file" id="file" value="">
|
||||
@ -105,26 +107,56 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片上传</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-upload">
|
||||
<button type="button" class="layui-btn" id="imageUpload">多图片上传</button>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
|
||||
预览图:
|
||||
<div class="layui-upload-list" id="imagePreview" style="display: flex; flex-direction: column;">
|
||||
{if condition="$resource.images"}
|
||||
{foreach name="images" item="image" explode=",", $resource.images}
|
||||
<div class="layui-upload-img-item" data-src="{$image}">
|
||||
<img src="{$image}" alt="已上传图片" style="width: 100px; height: 100px; object-fit: cover;">
|
||||
<p>{$image|basename}</p>
|
||||
<button type="button"
|
||||
class="layui-btn layui-btn-xs layui-btn-danger delete-image">删除</button>
|
||||
</div>
|
||||
{/foreach}
|
||||
{/if}
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="image-progress"
|
||||
style="margin-top: 10px;">
|
||||
<div class="layui-progress-bar" lay-percent=""></div>
|
||||
</div>
|
||||
<input type="hidden" name="images" id="images" value="{$resource.images|default=''}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分享码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="code" required placeholder="请输入分享码" autocomplete="off"
|
||||
class="layui-input" value="{$resource.code|default=''}" lay-affix="clear">
|
||||
<input type="text" name="code" required placeholder="请输入分享码" autocomplete="off" class="layui-input"
|
||||
value="{$resource.code|default=''}" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">解压密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="zipcode" required placeholder="请输入解压密码" autocomplete="off"
|
||||
class="layui-input" value="{$resource.zipcode|default=''}" lay-affix="clear">
|
||||
<input type="text" name="zipcode" required placeholder="请输入解压密码" autocomplete="off" class="layui-input"
|
||||
value="{$resource.zipcode|default=''}" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="sort" value="{$resource.sort|default='0'}" class="layui-input" placeholder="数字越大越靠前" lay-affix="clear">
|
||||
<input type="number" name="sort" value="{$resource.sort|default='0'}" class="layui-input"
|
||||
placeholder="数字越大越靠前" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -161,7 +193,7 @@
|
||||
var resourceData = null;
|
||||
|
||||
if (resourceId) {
|
||||
$.get('{:url("resources/get")}', {id: resourceId}, function(res) {
|
||||
$.get('{:url("resources/get")}', { id: resourceId }, function (res) {
|
||||
if (res.code == 0) {
|
||||
resourceData = res.data;
|
||||
console.log('Resource data:', resourceData); // 调试输出
|
||||
@ -211,7 +243,7 @@
|
||||
$('#upload-text').html('');
|
||||
layer.msg('图标上传成功', { icon: 1 });
|
||||
},
|
||||
uploadError: function () {
|
||||
error: function () {
|
||||
var demoText = $('#upload-text');
|
||||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
@ -226,6 +258,58 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 多图片上传
|
||||
var uploadInst = upload.render({
|
||||
elem: '#imageUpload',
|
||||
url: '{:url("index/upload_img")}',
|
||||
multiple: true,
|
||||
accept: 'images',
|
||||
before: function (obj) {
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#imagePreview').append('<div class="layui-upload-img-item" data-src="' + result + '"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-image">删除</button></div>');
|
||||
});
|
||||
element.progress('image-progress', '0%');
|
||||
layer.msg('图片上传中', { icon: 16, time: 0 });
|
||||
},
|
||||
done: function (res) {
|
||||
if (res.code > 0) {
|
||||
return layer.msg('图片上传失败');
|
||||
}
|
||||
var images = $('#images').val().split(',');
|
||||
if (res.data) {
|
||||
images.push(res.data);
|
||||
}
|
||||
$('#images').val(images.filter(Boolean).join(','));
|
||||
layer.msg('图片上传成功', { icon: 1 });
|
||||
},
|
||||
error: function () {
|
||||
var demoText = $('#imagePreview');
|
||||
demoText.append('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
uploadInst.upload();
|
||||
});
|
||||
},
|
||||
progress: function (n, elem, e) {
|
||||
element.progress('image-progress', n + '%');
|
||||
if (n == 100) {
|
||||
layer.msg('图片上传完毕', { icon: 1 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 删除图片功能
|
||||
$('#imagePreview').on('click', '.delete-image', function () {
|
||||
var $item = $(this).closest('.layui-upload-img-item');
|
||||
var imageSrc = $item.data('src');
|
||||
var images = $('#images').val().split(',');
|
||||
var index = images.indexOf(imageSrc);
|
||||
if (index > -1) {
|
||||
images.splice(index, 1);
|
||||
}
|
||||
$('#images').val(images.join(','));
|
||||
$item.remove();
|
||||
});
|
||||
|
||||
// 文件上传
|
||||
var fileUpload = upload.render({
|
||||
elem: '#ID-upload-demo-drag',
|
||||
@ -289,7 +373,7 @@
|
||||
// 如果有资源数据,设置分类值
|
||||
if (resourceData && resourceData.cate) {
|
||||
console.log('Setting cate value:', resourceData.cate); // 调试输出
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$('select[name="cate"]').val(resourceData.cate);
|
||||
form.render('select');
|
||||
}, 100);
|
||||
@ -300,7 +384,7 @@
|
||||
});
|
||||
|
||||
// 监听分类选择变化
|
||||
form.on('select(cate)', function(data) {
|
||||
form.on('select(cate)', function (data) {
|
||||
var selectedId = data.value;
|
||||
if (!selectedId) {
|
||||
$('input[name="number"]').val('');
|
||||
@ -311,9 +395,9 @@
|
||||
var parentCategory = null;
|
||||
var childCategory = null;
|
||||
|
||||
window.categoryData.forEach(function(parent) {
|
||||
window.categoryData.forEach(function (parent) {
|
||||
if (parent.children) {
|
||||
parent.children.forEach(function(child) {
|
||||
parent.children.forEach(function (child) {
|
||||
if (child.id == selectedId) {
|
||||
parentCategory = parent;
|
||||
childCategory = child;
|
||||
@ -363,7 +447,7 @@
|
||||
});
|
||||
|
||||
// 重置按钮点击事件
|
||||
$('button[type="reset"]').on('click', function() {
|
||||
$('button[type="reset"]').on('click', function () {
|
||||
// 重新加载分类列表
|
||||
$.get('{:url("resources/getcate")}', function (res) {
|
||||
if (res.code == 0) {
|
||||
@ -380,7 +464,7 @@
|
||||
|
||||
// 如果有资源数据,设置分类值
|
||||
if (resourceData && resourceData.cate) {
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$('select[name="cate"]').val(resourceData.cate);
|
||||
form.render('select');
|
||||
}, 100);
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
{include file="component/head" /}
|
||||
<link href="__STATIC__/css/lightbox.min.css" rel="stylesheet">
|
||||
<link href="__CSS__/swiper-bundle.min.css" rel="stylesheet">
|
||||
<script src="__JS__/jquery.min.js"></script>
|
||||
<script src="__JS__/lightbox.min.js"></script>
|
||||
<script src="__JS__/swiper-bundle.min.js"></script>
|
||||
{include file="component/header-simple" /}
|
||||
<div class="main">
|
||||
<div class="location">
|
||||
@ -24,6 +29,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="program-show">
|
||||
<div class="swiper program-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="program.images" id="image"}
|
||||
<div class="swiper-slide">
|
||||
<a href="{$image}" data-lightbox="program-images" data-title="{$program.title}">
|
||||
<img src="{$image}" alt="{$program.title}">
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="program-content">
|
||||
{$program.content|raw}
|
||||
</div>
|
||||
@ -898,5 +920,161 @@
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.program-show {
|
||||
margin: 20px 0;
|
||||
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: 14px;
|
||||
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>
|
||||
{include file="component/foot" /}
|
||||
195
public/static/css/lightbox.min.css
vendored
Normal file
@ -0,0 +1,195 @@
|
||||
.lb-loader,
|
||||
.lightbox {
|
||||
text-align: center;
|
||||
line-height: 0
|
||||
}
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: #000;
|
||||
opacity: .8;
|
||||
display: none
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
font-weight: 400;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
max-height: none;
|
||||
border-radius: 3px;
|
||||
border: 4px solid #fff
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.lb-loader,
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
top: 43%;
|
||||
height: 25%;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/loading.gif) no-repeat
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.lb-container>.nav {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: 0;
|
||||
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
|
||||
}
|
||||
|
||||
.lb-next,
|
||||
.lb-prev {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left 48% no-repeat;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .6s;
|
||||
-moz-transition: opacity .6s;
|
||||
-o-transition: opacity .6s;
|
||||
transition: opacity .6s
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
background: url(../images/next.png) right 48% no-repeat;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .6s;
|
||||
-moz-transition: opacity .6s;
|
||||
-o-transition: opacity .6s;
|
||||
transition: opacity .6s
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1em
|
||||
}
|
||||
|
||||
.lb-data .lb-caption a {
|
||||
color: #4ae
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/close.png) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: 0;
|
||||
opacity: .7;
|
||||
-webkit-transition: opacity .2s;
|
||||
-moz-transition: opacity .2s;
|
||||
-o-transition: opacity .2s;
|
||||
transition: opacity .2s
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1
|
||||
}
|
||||
733
public/static/css/swiper-bundle.min.css
vendored
Normal file
@ -0,0 +1,733 @@
|
||||
/**
|
||||
* Swiper 8.4.7
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* https://swiperjs.com
|
||||
*
|
||||
* Copyright 2014-2023 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: January 30, 2023
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: swiper-icons;
|
||||
src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
|
||||
font-weight: 400;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
:root {
|
||||
--swiper-theme-color: #007aff
|
||||
}
|
||||
|
||||
.swiper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.swiper-vertical>.swiper-wrapper {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
transition-property: transform;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
.swiper-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
transform: translate3d(0px, 0, 0)
|
||||
}
|
||||
|
||||
.swiper-pointer-events {
|
||||
touch-action: pan-y
|
||||
}
|
||||
|
||||
.swiper-pointer-events.swiper-vertical {
|
||||
touch-action: pan-x
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition-property: transform
|
||||
}
|
||||
|
||||
.swiper-slide-invisible-blank {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.swiper-autoheight,
|
||||
.swiper-autoheight .swiper-slide {
|
||||
height: auto
|
||||
}
|
||||
|
||||
.swiper-autoheight .swiper-wrapper {
|
||||
align-items: flex-start;
|
||||
transition-property: transform, height
|
||||
}
|
||||
|
||||
.swiper-backface-hidden .swiper-slide {
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.swiper-3d,
|
||||
.swiper-3d.swiper-css-mode .swiper-wrapper {
|
||||
perspective: 1200px
|
||||
}
|
||||
|
||||
.swiper-3d .swiper-cube-shadow,
|
||||
.swiper-3d .swiper-slide,
|
||||
.swiper-3d .swiper-slide-shadow,
|
||||
.swiper-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-3d .swiper-slide-shadow-left,
|
||||
.swiper-3d .swiper-slide-shadow-right,
|
||||
.swiper-3d .swiper-slide-shadow-top,
|
||||
.swiper-3d .swiper-wrapper {
|
||||
transform-style: preserve-3d
|
||||
}
|
||||
|
||||
.swiper-3d .swiper-slide-shadow,
|
||||
.swiper-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-3d .swiper-slide-shadow-left,
|
||||
.swiper-3d .swiper-slide-shadow-right,
|
||||
.swiper-3d .swiper-slide-shadow-top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.swiper-3d .swiper-slide-shadow {
|
||||
background: rgba(0, 0, 0, .15)
|
||||
}
|
||||
|
||||
.swiper-3d .swiper-slide-shadow-left {
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
|
||||
}
|
||||
|
||||
.swiper-3d .swiper-slide-shadow-right {
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
|
||||
}
|
||||
|
||||
.swiper-3d .swiper-slide-shadow-top {
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
|
||||
}
|
||||
|
||||
.swiper-3d .swiper-slide-shadow-bottom {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
|
||||
}
|
||||
|
||||
.swiper-css-mode>.swiper-wrapper {
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none
|
||||
}
|
||||
|
||||
.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.swiper-css-mode>.swiper-wrapper>.swiper-slide {
|
||||
scroll-snap-align: start start
|
||||
}
|
||||
|
||||
.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
|
||||
scroll-snap-type: x mandatory
|
||||
}
|
||||
|
||||
.swiper-vertical.swiper-css-mode>.swiper-wrapper {
|
||||
scroll-snap-type: y mandatory
|
||||
}
|
||||
|
||||
.swiper-centered>.swiper-wrapper::before {
|
||||
content: '';
|
||||
flex-shrink: 0;
|
||||
order: 9999
|
||||
}
|
||||
|
||||
.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
|
||||
margin-inline-start: var(--swiper-centered-offset-before)
|
||||
}
|
||||
|
||||
.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
width: var(--swiper-centered-offset-after)
|
||||
}
|
||||
|
||||
.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
|
||||
margin-block-start: var(--swiper-centered-offset-before)
|
||||
}
|
||||
|
||||
.swiper-centered.swiper-vertical>.swiper-wrapper::before {
|
||||
width: 100%;
|
||||
min-width: 1px;
|
||||
height: var(--swiper-centered-offset-after)
|
||||
}
|
||||
|
||||
.swiper-centered>.swiper-wrapper>.swiper-slide {
|
||||
scroll-snap-align: center center;
|
||||
scroll-snap-stop: always
|
||||
}
|
||||
|
||||
.swiper-virtual .swiper-slide {
|
||||
-webkit-backface-visibility: hidden;
|
||||
transform: translateZ(0)
|
||||
}
|
||||
|
||||
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
|
||||
height: 1px;
|
||||
width: var(--swiper-virtual-size)
|
||||
}
|
||||
|
||||
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
|
||||
width: 1px;
|
||||
height: var(--swiper-virtual-size)
|
||||
}
|
||||
|
||||
:root {
|
||||
--swiper-navigation-size: 44px
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: calc(var(--swiper-navigation-size)/ 44 * 27);
|
||||
height: var(--swiper-navigation-size);
|
||||
margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--swiper-navigation-color, var(--swiper-theme-color))
|
||||
}
|
||||
|
||||
.swiper-button-next.swiper-button-disabled,
|
||||
.swiper-button-prev.swiper-button-disabled {
|
||||
opacity: .35;
|
||||
cursor: auto;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-button-next.swiper-button-hidden,
|
||||
.swiper-button-prev.swiper-button-hidden {
|
||||
opacity: 0;
|
||||
cursor: auto;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-navigation-disabled .swiper-button-next,
|
||||
.swiper-navigation-disabled .swiper-button-prev {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
.swiper-button-next:after,
|
||||
.swiper-button-prev:after {
|
||||
font-family: swiper-icons;
|
||||
font-size: var(--swiper-navigation-size);
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
font-variant: initial;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-rtl .swiper-button-next {
|
||||
left: 10px;
|
||||
right: auto
|
||||
}
|
||||
|
||||
.swiper-button-prev:after,
|
||||
.swiper-rtl .swiper-button-next:after {
|
||||
content: 'prev'
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-rtl .swiper-button-prev {
|
||||
right: 10px;
|
||||
left: auto
|
||||
}
|
||||
|
||||
.swiper-button-next:after,
|
||||
.swiper-rtl .swiper-button-prev:after {
|
||||
content: 'next'
|
||||
}
|
||||
|
||||
.swiper-button-lock {
|
||||
display: none
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: .3s opacity;
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.swiper-pagination.swiper-pagination-hidden {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.swiper-pagination-disabled>.swiper-pagination,
|
||||
.swiper-pagination.swiper-pagination-disabled {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
.swiper-horizontal>.swiper-pagination-bullets,
|
||||
.swiper-pagination-bullets.swiper-pagination-horizontal,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-pagination-fraction {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic {
|
||||
overflow: hidden;
|
||||
font-size: 0
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transform: scale(.33);
|
||||
position: relative
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
|
||||
transform: scale(.66)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
|
||||
transform: scale(.33)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
|
||||
transform: scale(.66)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
|
||||
transform: scale(.33)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
|
||||
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: var(--swiper-pagination-bullet-inactive-color, #000);
|
||||
opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
|
||||
}
|
||||
|
||||
button.swiper-pagination-bullet {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none
|
||||
}
|
||||
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet:only-child {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: var(--swiper-pagination-bullet-opacity, 1);
|
||||
background: var(--swiper-pagination-color, var(--swiper-theme-color))
|
||||
}
|
||||
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets,
|
||||
.swiper-vertical>.swiper-pagination-bullets {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translate3d(0px, -50%, 0)
|
||||
}
|
||||
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
|
||||
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
|
||||
display: block
|
||||
}
|
||||
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
|
||||
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px
|
||||
}
|
||||
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
|
||||
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
display: inline-block;
|
||||
transition: .2s transform, .2s top
|
||||
}
|
||||
|
||||
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
|
||||
}
|
||||
|
||||
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transition: .2s transform, .2s left
|
||||
}
|
||||
|
||||
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transition: .2s transform, .2s right
|
||||
}
|
||||
|
||||
.swiper-pagination-progressbar {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
background: var(--swiper-pagination-color, var(--swiper-theme-color));
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale(0);
|
||||
transform-origin: left top
|
||||
}
|
||||
|
||||
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
transform-origin: right top
|
||||
}
|
||||
|
||||
.swiper-horizontal>.swiper-pagination-progressbar,
|
||||
.swiper-pagination-progressbar.swiper-pagination-horizontal,
|
||||
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
|
||||
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
|
||||
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
|
||||
.swiper-pagination-progressbar.swiper-pagination-vertical,
|
||||
.swiper-vertical>.swiper-pagination-progressbar {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.swiper-pagination-lock {
|
||||
display: none
|
||||
}
|
||||
|
||||
.swiper-scrollbar {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
-ms-touch-action: none;
|
||||
background: rgba(0, 0, 0, .1)
|
||||
}
|
||||
|
||||
.swiper-scrollbar-disabled>.swiper-scrollbar,
|
||||
.swiper-scrollbar.swiper-scrollbar-disabled {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
.swiper-horizontal>.swiper-scrollbar,
|
||||
.swiper-scrollbar.swiper-scrollbar-horizontal {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
bottom: 3px;
|
||||
z-index: 50;
|
||||
height: 5px;
|
||||
width: 98%
|
||||
}
|
||||
|
||||
.swiper-scrollbar.swiper-scrollbar-vertical,
|
||||
.swiper-vertical>.swiper-scrollbar {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 1%;
|
||||
z-index: 50;
|
||||
width: 5px;
|
||||
height: 98%
|
||||
}
|
||||
|
||||
.swiper-scrollbar-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: 10px;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.swiper-scrollbar-cursor-drag {
|
||||
cursor: move
|
||||
}
|
||||
|
||||
.swiper-scrollbar-lock {
|
||||
display: none
|
||||
}
|
||||
|
||||
.swiper-zoom-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.swiper-zoom-container>canvas,
|
||||
.swiper-zoom-container>img,
|
||||
.swiper-zoom-container>svg {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.swiper-slide-zoomed {
|
||||
cursor: move
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
z-index: 10;
|
||||
transform-origin: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent
|
||||
}
|
||||
|
||||
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
|
||||
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
|
||||
animation: swiper-preloader-spin 1s infinite linear
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader-white {
|
||||
--swiper-preloader-color: #fff
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader-black {
|
||||
--swiper-preloader-color: #000
|
||||
}
|
||||
|
||||
@keyframes swiper-preloader-spin {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
.swiper .swiper-notification {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1000
|
||||
}
|
||||
|
||||
.swiper-free-mode>.swiper-wrapper {
|
||||
transition-timing-function: ease-out;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.swiper-grid>.swiper-wrapper {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.swiper-grid-column>.swiper-wrapper {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.swiper-fade.swiper-free-mode .swiper-slide {
|
||||
transition-timing-function: ease-out
|
||||
}
|
||||
|
||||
.swiper-fade .swiper-slide {
|
||||
pointer-events: none;
|
||||
transition-property: opacity
|
||||
}
|
||||
|
||||
.swiper-fade .swiper-slide .swiper-slide {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-fade .swiper-slide-active,
|
||||
.swiper-fade .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto
|
||||
}
|
||||
|
||||
.swiper-cube {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
.swiper-cube .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.swiper-cube .swiper-slide .swiper-slide {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-cube.swiper-rtl .swiper-slide {
|
||||
transform-origin: 100% 0
|
||||
}
|
||||
|
||||
.swiper-cube .swiper-slide-active,
|
||||
.swiper-cube .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto
|
||||
}
|
||||
|
||||
.swiper-cube .swiper-slide-active,
|
||||
.swiper-cube .swiper-slide-next,
|
||||
.swiper-cube .swiper-slide-next+.swiper-slide,
|
||||
.swiper-cube .swiper-slide-prev {
|
||||
pointer-events: auto;
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
.swiper-cube .swiper-slide-shadow-bottom,
|
||||
.swiper-cube .swiper-slide-shadow-left,
|
||||
.swiper-cube .swiper-slide-shadow-right,
|
||||
.swiper-cube .swiper-slide-shadow-top {
|
||||
z-index: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.swiper-cube .swiper-cube-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: .6;
|
||||
z-index: 0
|
||||
}
|
||||
|
||||
.swiper-cube .swiper-cube-shadow:before {
|
||||
content: '';
|
||||
background: #000;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
filter: blur(50px)
|
||||
}
|
||||
|
||||
.swiper-flip {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
.swiper-flip .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.swiper-flip .swiper-slide .swiper-slide {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-flip .swiper-slide-active,
|
||||
.swiper-flip .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto
|
||||
}
|
||||
|
||||
.swiper-flip .swiper-slide-shadow-bottom,
|
||||
.swiper-flip .swiper-slide-shadow-left,
|
||||
.swiper-flip .swiper-slide-shadow-right,
|
||||
.swiper-flip .swiper-slide-shadow-top {
|
||||
z-index: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.swiper-creative .swiper-slide {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
overflow: hidden;
|
||||
transition-property: transform, opacity, height
|
||||
}
|
||||
|
||||
.swiper-cards {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
.swiper-cards .swiper-slide {
|
||||
transform-origin: center bottom;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
overflow: hidden
|
||||
}
|
||||
15
public/static/js/lightbox.min.js
vendored
Normal file
14
public/static/js/swiper-bundle.min.js
vendored
Normal file
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 654 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 74 KiB |
@ -1,4 +1,4 @@
|
||||
<?php /*a:3:{s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\index\welcome.php";i:1747701414;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:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\index\welcome.php";i:1749433730;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>
|
||||
@ -545,7 +545,7 @@ function initVisitTrend() {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['visitTrend']['dates'])); ?>,
|
||||
data: <?php echo json_encode($chartData['visitTrend']['dates']); ?>,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#e2e8f0'
|
||||
@ -567,7 +567,7 @@ function initVisitTrend() {
|
||||
},
|
||||
series: [{
|
||||
name: '访问量',
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['visitTrend']['visits'])); ?>,
|
||||
data: <?php echo json_encode($chartData['visitTrend']['visits']); ?>,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@ -581,7 +581,7 @@ function initVisitTrend() {
|
||||
}
|
||||
}, {
|
||||
name: '独立访客',
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['visitTrend']['uvs'])); ?>,
|
||||
data: <?php echo json_encode($chartData['visitTrend']['uvs']); ?>,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
@ -620,7 +620,7 @@ function initUserGrowth() {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['userGrowth']['dates'])); ?>
|
||||
data: <?php echo json_encode($chartData['userGrowth']['dates']); ?>
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
@ -629,7 +629,7 @@ function initUserGrowth() {
|
||||
{
|
||||
name: '新增用户',
|
||||
type: 'bar',
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['userGrowth']['newUsers'])); ?>,
|
||||
data: <?php echo json_encode($chartData['userGrowth']['newUsers']); ?>,
|
||||
itemStyle: {
|
||||
color: '#3881fd'
|
||||
}
|
||||
@ -638,7 +638,7 @@ function initUserGrowth() {
|
||||
name: '总用户数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['userGrowth']['totalUsers'])); ?>,
|
||||
data: <?php echo json_encode($chartData['userGrowth']['totalUsers']); ?>,
|
||||
itemStyle: {
|
||||
color: '#10b981'
|
||||
},
|
||||
@ -676,7 +676,7 @@ function initResourceStats() {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['resourceStats']['dates'])); ?>
|
||||
data: <?php echo json_encode($chartData['resourceStats']['dates']); ?>
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
@ -685,7 +685,7 @@ function initResourceStats() {
|
||||
{
|
||||
name: '新增资源',
|
||||
type: 'bar',
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['resourceStats']['newResources'])); ?>,
|
||||
data: <?php echo json_encode($chartData['resourceStats']['newResources']); ?>,
|
||||
itemStyle: {
|
||||
color: '#3881fd'
|
||||
}
|
||||
@ -694,7 +694,7 @@ function initResourceStats() {
|
||||
name: '总资源数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['resourceStats']['totalResources'])); ?>,
|
||||
data: <?php echo json_encode($chartData['resourceStats']['totalResources']); ?>,
|
||||
itemStyle: {
|
||||
color: '#10b981'
|
||||
},
|
||||
@ -706,7 +706,7 @@ function initResourceStats() {
|
||||
name: '下载量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['resourceStats']['downloads'])); ?>,
|
||||
data: <?php echo json_encode($chartData['resourceStats']['downloads']); ?>,
|
||||
itemStyle: {
|
||||
color: '#f59e0b'
|
||||
},
|
||||
@ -744,7 +744,7 @@ function initArticleStats() {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['articleStats']['dates'])); ?>
|
||||
data: <?php echo json_encode($chartData['articleStats']['dates']); ?>
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
@ -753,7 +753,7 @@ function initArticleStats() {
|
||||
{
|
||||
name: '新增文章',
|
||||
type: 'bar',
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['articleStats']['newArticles'])); ?>,
|
||||
data: <?php echo json_encode($chartData['articleStats']['newArticles']); ?>,
|
||||
itemStyle: {
|
||||
color: '#3881fd'
|
||||
}
|
||||
@ -762,7 +762,7 @@ function initArticleStats() {
|
||||
name: '总文章数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['articleStats']['totalArticles'])); ?>,
|
||||
data: <?php echo json_encode($chartData['articleStats']['totalArticles']); ?>,
|
||||
itemStyle: {
|
||||
color: '#10b981'
|
||||
},
|
||||
@ -774,7 +774,7 @@ function initArticleStats() {
|
||||
name: '浏览量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: <?php echo htmlentities((string) json_encode($chartData['articleStats']['views'])); ?>,
|
||||
data: <?php echo json_encode($chartData['articleStats']['views']); ?>,
|
||||
itemStyle: {
|
||||
color: '#f59e0b'
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:2:{s:63:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\resources\lists.php";i:1747702165;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<?php /*a:2:{s:63:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\resources\lists.php";i:1747817496;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -154,7 +154,7 @@
|
||||
{{# if(d.status == '0'){ }}
|
||||
<span style="color:red;">未审核</span>
|
||||
{{# } else if(d.status == '1'){ }}
|
||||
<span style="color:orange;">已审核</span>
|
||||
<span style="color:green;">已审核</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
@ -181,6 +181,7 @@
|
||||
method: 'post',
|
||||
cols: [[
|
||||
{ field: 'id', title: 'ID', align: 'center', width: 80 },
|
||||
{ field: 'number', title: '资源编号', width: 100 },
|
||||
{ field: 'title', title: '资源名称' },
|
||||
{ field: 'cate', title: '分类', align: 'center', width: 120 },
|
||||
{ field: 'icon', title: '图标', templet: '#iconTemplate', align: 'center', width: 100 },
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:2:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\resources\edit.php";i:1747445574;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<?php /*a:2:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\resources\edit.php";i:1749454320;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -117,16 +117,25 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="cate" lay-verify="required">
|
||||
<select name="cate" lay-verify="required" lay-filter="cate">
|
||||
<option value="">请选择分类</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">资源编号</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="number" required lay-verify="required" placeholder="请输入分类编号" autocomplete="off"
|
||||
class="layui-input" value="<?php echo htmlentities((string) (isset($resource['number']) && ($resource['number'] !== '')?$resource['number']:'')); ?>" lay-affix="clear" disabled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">描述</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="desc" placeholder="请输入资源描述" class="layui-textarea" lay-affix="clear"><?php echo htmlentities((string) (isset($resource['desc']) && ($resource['desc'] !== '')?$resource['desc']:'')); ?></textarea>
|
||||
<textarea name="desc" placeholder="请输入资源描述" class="layui-textarea"
|
||||
lay-affix="clear"><?php echo htmlentities((string) (isset($resource['desc']) && ($resource['desc'] !== '')?$resource['desc']:'')); ?></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -162,8 +171,8 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">资源文件</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="fileurl" required placeholder="本地资源地址" autocomplete="off"
|
||||
class="layui-input" value="<?php echo htmlentities((string) (isset($resource['fileurl']) && ($resource['fileurl'] !== '')?$resource['fileurl']:'')); ?>" style="margin-bottom: 10px;" lay-affix="clear">
|
||||
<input type="text" name="fileurl" required placeholder="本地资源地址" autocomplete="off" class="layui-input"
|
||||
value="<?php echo htmlentities((string) (isset($resource['fileurl']) && ($resource['fileurl'] !== '')?$resource['fileurl']:'')); ?>" style="margin-bottom: 10px;" lay-affix="clear">
|
||||
<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
|
||||
<i class="layui-icon layui-icon-upload"></i>
|
||||
<div>点击上传,或将文件拖拽到此处</div>
|
||||
@ -176,7 +185,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="file-progress" style="margin-top: 10px;">
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="file-progress"
|
||||
style="margin-top: 10px;">
|
||||
<div class="layui-progress-bar" lay-percent=""></div>
|
||||
</div>
|
||||
<input type="hidden" name="file" id="file" value="">
|
||||
@ -191,18 +201,65 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片上传</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-upload">
|
||||
<button type="button" class="layui-btn" id="imageUpload">多图片上传</button>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
|
||||
预览图:
|
||||
<div class="layui-upload-list" id="imagePreview" style="display: flex; flex-direction: column;">
|
||||
<?php if($resource['images']): if(is_array($images) || $images instanceof \think\Collection || $images instanceof \think\Paginator): if( count($images)==0 ) : echo "" ;else: foreach($images as $key=>$image): ?>
|
||||
<div class="layui-upload-img-item" data-src="<?php echo htmlentities((string) $image); ?>">
|
||||
<img src="<?php echo htmlentities((string) $image); ?>" alt="已上传图片" style="width: 100px; height: 100px; object-fit: cover;">
|
||||
<p><?php echo htmlentities((string) basename($image)); ?></p>
|
||||
<button type="button"
|
||||
class="layui-btn layui-btn-xs layui-btn-danger delete-image">删除</button>
|
||||
</div>
|
||||
<?php endforeach; endif; else: echo "" ;endif; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="image-progress"
|
||||
style="margin-top: 10px;">
|
||||
<div class="layui-progress-bar" lay-percent=""></div>
|
||||
</div>
|
||||
<input type="hidden" name="images" id="images" value="<?php echo htmlentities((string) (isset($resource['images']) && ($resource['images'] !== '')?$resource['images']:'')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分享码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="code" required placeholder="请输入分享码" autocomplete="off"
|
||||
class="layui-input" value="<?php echo htmlentities((string) (isset($resource['code']) && ($resource['code'] !== '')?$resource['code']:'')); ?>" lay-affix="clear">
|
||||
<input type="text" name="code" required placeholder="请输入分享码" autocomplete="off" class="layui-input"
|
||||
value="<?php echo htmlentities((string) (isset($resource['code']) && ($resource['code'] !== '')?$resource['code']:'')); ?>" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">解压密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="zipcode" required placeholder="请输入解压密码" autocomplete="off" class="layui-input"
|
||||
value="<?php echo htmlentities((string) (isset($resource['zipcode']) && ($resource['zipcode'] !== '')?$resource['zipcode']:'')); ?>" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="sort" value="<?php echo htmlentities((string) (isset($resource['sort']) && ($resource['sort'] !== '')?$resource['sort']:'0')); ?>" class="layui-input" placeholder="数字越大越靠前" lay-affix="clear">
|
||||
<input type="number" name="sort" value="<?php echo htmlentities((string) (isset($resource['sort']) && ($resource['sort'] !== '')?$resource['sort']:'0')); ?>" class="layui-input"
|
||||
placeholder="数字越大越靠前" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">内容</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="editor—wrapper" id="content" name="content" style="border: 1px solid #ccc;">
|
||||
<div id="toolbar-container" style="border-bottom: 1px solid #ccc;"><!-- 工具栏 --></div>
|
||||
<div id="editor-container" style="height: 800px;"><!-- 编辑器 --></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -215,6 +272,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/wangeditor.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'layer'], function () {
|
||||
var form = layui.form;
|
||||
@ -228,7 +286,7 @@
|
||||
var resourceData = null;
|
||||
|
||||
if (resourceId) {
|
||||
$.get('<?php echo url("resources/get"); ?>', {id: resourceId}, function(res) {
|
||||
$.get('<?php echo url("resources/get"); ?>', { id: resourceId }, function (res) {
|
||||
if (res.code == 0) {
|
||||
resourceData = res.data;
|
||||
console.log('Resource data:', resourceData); // 调试输出
|
||||
@ -278,7 +336,7 @@
|
||||
$('#upload-text').html('');
|
||||
layer.msg('图标上传成功', { icon: 1 });
|
||||
},
|
||||
uploadError: function () {
|
||||
error: function () {
|
||||
var demoText = $('#upload-text');
|
||||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
@ -293,6 +351,58 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 多图片上传
|
||||
var uploadInst = upload.render({
|
||||
elem: '#imageUpload',
|
||||
url: '<?php echo url("index/upload_img"); ?>',
|
||||
multiple: true,
|
||||
accept: 'images',
|
||||
before: function (obj) {
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#imagePreview').append('<div class="layui-upload-img-item" data-src="' + result + '"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-image">删除</button></div>');
|
||||
});
|
||||
element.progress('image-progress', '0%');
|
||||
layer.msg('图片上传中', { icon: 16, time: 0 });
|
||||
},
|
||||
done: function (res) {
|
||||
if (res.code > 0) {
|
||||
return layer.msg('图片上传失败');
|
||||
}
|
||||
var images = $('#images').val().split(',');
|
||||
if (res.data) {
|
||||
images.push(res.data);
|
||||
}
|
||||
$('#images').val(images.filter(Boolean).join(','));
|
||||
layer.msg('图片上传成功', { icon: 1 });
|
||||
},
|
||||
error: function () {
|
||||
var demoText = $('#imagePreview');
|
||||
demoText.append('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
uploadInst.upload();
|
||||
});
|
||||
},
|
||||
progress: function (n, elem, e) {
|
||||
element.progress('image-progress', n + '%');
|
||||
if (n == 100) {
|
||||
layer.msg('图片上传完毕', { icon: 1 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 删除图片功能
|
||||
$('#imagePreview').on('click', '.delete-image', function () {
|
||||
var $item = $(this).closest('.layui-upload-img-item');
|
||||
var imageSrc = $item.data('src');
|
||||
var images = $('#images').val().split(',');
|
||||
var index = images.indexOf(imageSrc);
|
||||
if (index > -1) {
|
||||
images.splice(index, 1);
|
||||
}
|
||||
$('#images').val(images.join(','));
|
||||
$item.remove();
|
||||
});
|
||||
|
||||
// 文件上传
|
||||
var fileUpload = upload.render({
|
||||
elem: '#ID-upload-demo-drag',
|
||||
@ -339,6 +449,9 @@
|
||||
// 获取分类列表
|
||||
$.get('<?php echo url("resources/getcate"); ?>', function (res) {
|
||||
if (res.code == 0) {
|
||||
// 存储分类数据供后续使用
|
||||
window.categoryData = res.data;
|
||||
|
||||
var html = '<option value="">请选择分类</option>';
|
||||
res.data.forEach(function (item) {
|
||||
html += '<option value="' + item.id + '">' + item.name + '</option>';
|
||||
@ -353,7 +466,7 @@
|
||||
// 如果有资源数据,设置分类值
|
||||
if (resourceData && resourceData.cate) {
|
||||
console.log('Setting cate value:', resourceData.cate); // 调试输出
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$('select[name="cate"]').val(resourceData.cate);
|
||||
form.render('select');
|
||||
}, 100);
|
||||
@ -363,9 +476,50 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 监听分类选择变化
|
||||
form.on('select(cate)', function (data) {
|
||||
var selectedId = data.value;
|
||||
if (!selectedId) {
|
||||
$('input[name="number"]').val('');
|
||||
return;
|
||||
}
|
||||
|
||||
// 查找选中的分类信息
|
||||
var parentCategory = null;
|
||||
var childCategory = null;
|
||||
|
||||
window.categoryData.forEach(function (parent) {
|
||||
if (parent.children) {
|
||||
parent.children.forEach(function (child) {
|
||||
if (child.id == selectedId) {
|
||||
parentCategory = parent;
|
||||
childCategory = child;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (parentCategory && childCategory) {
|
||||
// 生成资源编号
|
||||
var total = childCategory.total || 0;
|
||||
// 判断是否是初始化时的分类
|
||||
var isInitialCategory = resourceData && resourceData.cate == selectedId;
|
||||
var nextNumber = isInitialCategory ? total : total + 1;
|
||||
var numberStr = nextNumber.toString().padStart(5, '0');
|
||||
var resourceNumber = parentCategory.number + childCategory.number + numberStr;
|
||||
|
||||
// 设置资源编号
|
||||
$('input[name="number"]').val(resourceNumber);
|
||||
}
|
||||
});
|
||||
|
||||
// 表单提交
|
||||
form.on('submit(formSubmit)', function (data) {
|
||||
// 获取编辑器内容
|
||||
var content = editor.getHtml();
|
||||
var loadIndex = layer.load(2);
|
||||
data.field.content = content;
|
||||
|
||||
$.ajax({
|
||||
url: '<?php echo url("resources/edit"); ?>',
|
||||
type: 'POST',
|
||||
@ -386,7 +540,7 @@
|
||||
});
|
||||
|
||||
// 重置按钮点击事件
|
||||
$('button[type="reset"]').on('click', function() {
|
||||
$('button[type="reset"]').on('click', function () {
|
||||
// 重新加载分类列表
|
||||
$.get('<?php echo url("resources/getcate"); ?>', function (res) {
|
||||
if (res.code == 0) {
|
||||
@ -403,7 +557,7 @@
|
||||
|
||||
// 如果有资源数据,设置分类值
|
||||
if (resourceData && resourceData.cate) {
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$('select[name="cate"]').val(resourceData.cate);
|
||||
form.render('select');
|
||||
}, 100);
|
||||
@ -418,6 +572,86 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- wangeditor编辑器脚本 -->
|
||||
<script>
|
||||
const { createEditor, createToolbar } = window.wangEditor
|
||||
|
||||
const editorConfig = {
|
||||
MENU_CONF: {},
|
||||
placeholder: '请输入内容...',
|
||||
onChange(editor) {
|
||||
const html = editor.getHtml()
|
||||
},
|
||||
}
|
||||
|
||||
// 配置图片上传
|
||||
editorConfig.MENU_CONF['uploadImage'] = {
|
||||
server: '<?php echo url("index/upload_img"); ?>',
|
||||
fieldName: 'file',
|
||||
maxFileSize: 50 * 1024 * 1024, // 50M
|
||||
maxNumberOfFiles: 10,
|
||||
allowedFileTypes: ['image/*'],
|
||||
meta: {
|
||||
token: 'xxx'
|
||||
},
|
||||
metaWithUrl: true,
|
||||
headers: {
|
||||
Accept: 'text/x-json'
|
||||
},
|
||||
timeout: 30 * 1000, // 30s
|
||||
|
||||
onBeforeUpload(file) {
|
||||
console.log('准备上传图片', file)
|
||||
return file
|
||||
},
|
||||
onProgress(progress) {
|
||||
console.log('上传进度', progress)
|
||||
},
|
||||
onSuccess(file, res) {
|
||||
console.log('上传成功', file, res)
|
||||
},
|
||||
onFailed(file, res) {
|
||||
layer.msg('上传失败:' + res.msg, { icon: 2 })
|
||||
console.log('上传失败', file, res)
|
||||
},
|
||||
onError(file, err, res) {
|
||||
layer.msg('上传出错:' + err.message, { icon: 2 })
|
||||
console.error('上传出错', file, err, res)
|
||||
},
|
||||
customInsert(res, insertFn) {
|
||||
// 只使用返回的url字段,并确保使用完整的URL
|
||||
if (res.code === 0 && res.url) {
|
||||
// 如果URL不是以http开头,添加https://
|
||||
let imageUrl = res.url;
|
||||
if (!imageUrl.startsWith('http')) {
|
||||
imageUrl = 'https://' + imageUrl;
|
||||
}
|
||||
// 移除可能存在的重复域名和路径
|
||||
imageUrl = imageUrl.replace(/^https?:\/\/[^\/]+\/admin\/resources\//, 'https://www.yunzer.cn/');
|
||||
insertFn(imageUrl);
|
||||
} else {
|
||||
layer.msg('图片上传失败:' + (res.msg || '未知错误'), { icon: 2 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const editor = createEditor({
|
||||
selector: '#editor-container',
|
||||
html: `<?php echo (isset($resource['content']) && ($resource['content'] !== '')?$resource['content']:''); ?>`,
|
||||
config: editorConfig,
|
||||
mode: 'default', // or 'simple'
|
||||
})
|
||||
|
||||
const toolbarConfig = {}
|
||||
|
||||
const toolbar = createToolbar({
|
||||
editor,
|
||||
selector: '#toolbar-container',
|
||||
config: toolbarConfig,
|
||||
mode: 'default', // or 'simple'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
//返回资源列表
|
||||
function goBack() {
|
||||
|
||||