mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-01 10:32:49 +08:00
405 lines
18 KiB
HTML
405 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible"
|
|
content="ie=edge">
|
|
<title>{$model_post->title}-{:get_system_config('site_name')}</title>
|
|
{include file='common/_require'/}
|
|
<link rel="stylesheet"
|
|
href="/static/lib/quill/quill.snow.css">
|
|
<link rel="stylesheet"
|
|
href="/cdn/augmented-ui.min.css">
|
|
<link rel="stylesheet"
|
|
href="/cdn/fontawesome-free-6.4.0-web/css/all.min.css" />
|
|
<link rel="stylesheet"
|
|
href="/static/lib/markdown-css/github-markdown.css">
|
|
|
|
|
|
<style>
|
|
.ql-editor {
|
|
padding: 15px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="layui-container">
|
|
<div class="layui-row ul-padding-md">
|
|
<div style="font-size: 22px;">
|
|
{:get_system_config('site_name')}
|
|
</div>
|
|
<div style="font-size: 18px;">
|
|
{:get_system_config('site_desc')}
|
|
</div>
|
|
</div>
|
|
<div class="layui-row layui-col-space6 "
|
|
style="margin-top: 15px;">
|
|
<div class="layui-col-md3 ul-border-right">
|
|
<div class="ul-nav-tree ul-padding-md ">
|
|
|
|
{volist name='list_post' id='category'}
|
|
<div class="ul-nav-tree-group">
|
|
<div class="ul-nav-tree-group-title">
|
|
{$category.title}
|
|
</div>
|
|
<div class="ul-nav-tree-group-main">
|
|
{volist name='category.post' id='post'}
|
|
<a href="{$post.read_url}"
|
|
class="ul-nav-tree-item {eq name='post.id' value='$model_post.id'}current{/eq}">
|
|
<div class="ul-nav-tree-item-title">
|
|
{$post.title}
|
|
</div>
|
|
<div class="ul-nav-tree-item-desc">
|
|
{$post.desc}
|
|
</div>
|
|
</a>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md9">
|
|
<div class="main-content ul-padding-md">
|
|
<div class="">
|
|
<span class="layui-breadcrumb"
|
|
lay-separator="/">
|
|
<a href="{:url('Index/index')}">首页</a>
|
|
<a><cite>{$model_post->title}</cite></a>
|
|
</span>
|
|
</div>
|
|
<div class="ql-snow">
|
|
<div class="ql-editor">{$model_post->content_html|raw}</div>
|
|
</div>
|
|
<div class="demo-page"
|
|
id="app-demo-page"
|
|
data-prismjs-copy="复制"
|
|
data-prismjs-copy-error="复制失败"
|
|
data-prismjs-copy-success="复制成功!">
|
|
{$model_post->demo_page|raw}
|
|
|
|
{volist name='model_post->components' id='vo'}
|
|
<fieldset class="layui-elem-field layui-field-title no-parser">
|
|
<legend>{$vo.config.TITLE}</legend>
|
|
<div class="layui-field-box">
|
|
|
|
<div class="component-item"
|
|
style="margin-top: 10px;"
|
|
data-margin="{$vo.config.MARGIN|default='0'}"
|
|
data-padding="{$vo.config.PADDING|default='0'}"
|
|
data-gray="{$vo.config.GRAY|default='0'}"
|
|
data-mobile="{$vo.config.MOBILE|default='0'}"
|
|
data-inner-margin="{$vo.config.INNER_MARGIN|default='0'}">
|
|
<div class="">
|
|
<span>预览效果</span>
|
|
<div class="layui-btn-group"
|
|
style="margin-left: 10px;">
|
|
<button type="button"
|
|
class="layui-btn layui-btn-xs"
|
|
@click="padding = 1"
|
|
:class="padding == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">padding</button>
|
|
<button type="button"
|
|
class="layui-btn layui-btn-xs"
|
|
@click="padding = 0"
|
|
:class="padding == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
|
|
</div>
|
|
<div class="layui-btn-group"
|
|
style="margin-left: 10px;">
|
|
<button type="button"
|
|
class="layui-btn layui-btn-xs"
|
|
@click="margin = 1"
|
|
:class="margin == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">margin</button>
|
|
<button type="button"
|
|
class="layui-btn layui-btn-xs"
|
|
@click="margin = 0"
|
|
:class="margin == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
|
|
</div>
|
|
<div class="layui-btn-group"
|
|
style="margin-left: 10px;">
|
|
<button type="button"
|
|
class="layui-btn layui-btn-xs"
|
|
@click="gray = 1"
|
|
:class="gray == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">gray</button>
|
|
<button type="button"
|
|
class="layui-btn layui-btn-xs"
|
|
@click="gray = 0"
|
|
:class="gray == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
|
|
</div>
|
|
<div class="layui-btn-group"
|
|
style="margin-left: 10px;">
|
|
<button type="button"
|
|
class="layui-btn layui-btn-xs"
|
|
@click="mobile = 1"
|
|
:class="mobile == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">手机端</button>
|
|
<button type="button"
|
|
class="layui-btn layui-btn-xs"
|
|
@click="mobile = 0"
|
|
:class="mobile == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">正常</button>
|
|
</div>
|
|
</div>
|
|
<div class=""
|
|
style="margin-top: 10px;">
|
|
<div class="preview content"
|
|
:class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}"
|
|
:style="mobile== 1?'display:none':''">{$vo.html|raw}</div>
|
|
<iframe class="preview iframe ul-demo-mobile-page"
|
|
:class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}"
|
|
:style="mobile== 0?'display:none':''"></iframe>
|
|
</div>
|
|
</div>
|
|
<div class="code">
|
|
<div class="layui-tab layui-tab-card">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">HTML</li>
|
|
<li>SCSS</li>
|
|
<li>CSS</li>
|
|
<li>UniApp</li>
|
|
</ul>
|
|
<div class="layui-tab-content"
|
|
style="padding:0">
|
|
<div class="layui-tab-item layui-show">
|
|
<pre style="margin: 0;max-height: 400px;"
|
|
class="line-numbers code-preview"><code class="language-html">{$vo.html}</code></pre>
|
|
</div>
|
|
<div class="layui-tab-item ">
|
|
<pre style="margin: 0;max-height: 400px;"
|
|
class="line-numbers code-preview"><code class="language-scss">{$vo.scss}</code></pre>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<pre style="margin: 0;max-height: 400px;"
|
|
class="line-numbers code-preview"><code class="language-css">{$vo.css}</code></pre>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<pre style="margin: 0;max-height: 400px;"
|
|
class="line-numbers code-preview"><code class="language-html">{$vo.uniapp}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="desc markdown-body ">
|
|
{$vo.desc|raw}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
{/volist}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="ul-padding-md">
|
|
<div id="gitee-container">
|
|
<fieldset class="layui-elem-field layui-field-title ">
|
|
<legend>开源信息</legend>
|
|
<div class="layui-field-box">
|
|
<script src='https://gitee.com/ulthon/layui-ul/widget_preview'
|
|
async
|
|
defer></script>
|
|
<div id="osc-gitee-widget-tag"></div>
|
|
<style>
|
|
.osc_pro_color {
|
|
color: #4183c4 !important;
|
|
}
|
|
|
|
.osc_panel_color {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.osc_background_color {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.osc_border_color {
|
|
border-color: #e3e9ed !important;
|
|
}
|
|
|
|
.osc_desc_color {
|
|
color: #666666 !important;
|
|
}
|
|
|
|
.osc_link_color * {
|
|
color: #9b9b9b !important;
|
|
}
|
|
</style>
|
|
</div>
|
|
</fieldset>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-tips-container"
|
|
style="display: none;">
|
|
<div class="ul-nav-min right-tips-nav"
|
|
style="width: 160px;">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="tpl"
|
|
style="display: none;">
|
|
<a class="ul-nav-min-item">
|
|
个人中心
|
|
</a>
|
|
</div>
|
|
<script>
|
|
|
|
$('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) {
|
|
if ($(elem).hasClass('no-parser')) {
|
|
return;
|
|
}
|
|
if ($(elem).find('.demo-js-src').length == 0) {
|
|
$(elem).children('.layui-field-box')
|
|
.addClass('demo-js-src')
|
|
.css('display', 'block')
|
|
.data('title', $(elem).children('legend').text());
|
|
}
|
|
});
|
|
$('.main-content h2,.main-content>.demo-page>fieldset>legend').each(function (index, elem) {
|
|
|
|
var id = 'title' + index;
|
|
$(elem).attr('id', id);
|
|
|
|
var navItem = $('.tpl .ul-nav-min-item').clone();
|
|
navItem.attr('href', '#' + id);
|
|
navItem.text($(elem).text());
|
|
navItem.appendTo('.right-tips-nav');
|
|
});
|
|
|
|
if ($('.right-tips-nav').children().length > 0) {
|
|
layer.open({
|
|
type: 1,
|
|
content: $('.right-tips-container'),
|
|
title: '目录',
|
|
offset: 'r',
|
|
closeBtn: 0,
|
|
shade: 0,
|
|
success(layero) {
|
|
$(layero).css('margin-left', '-15px');
|
|
}
|
|
});
|
|
}
|
|
function renderRepeat(elem) {
|
|
$(elem).find('[data-repeat]').each(function () {
|
|
for (let index = 1; index < $(this).data('repeat'); index++) {
|
|
var clone = $(this).clone();
|
|
clone.insertAfter(this);
|
|
renderRepeat(clone);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
$('.demo-js-src').each(function () {
|
|
var html = $(this).html();
|
|
var htmlList = html.split(/[\n]/g);
|
|
var htmlListNew = [];
|
|
var baseLineBlankNums = -1;
|
|
htmlList.forEach(function (htmlLine, htmlIndex) {
|
|
if (htmlIndex == 0 && htmlLine.length == 0) {
|
|
return true;
|
|
}
|
|
if (baseLineBlankNums < 0) {
|
|
var kong = htmlLine.match(/^ */g); //筛选
|
|
if (kong != null) {
|
|
baseLineBlankNums = kong[0].length;
|
|
} else {
|
|
baseLineBlankNums = 0;
|
|
}
|
|
}
|
|
|
|
htmlListNew.push(htmlLine.slice(baseLineBlankNums));
|
|
});
|
|
var contentCode = htmlListNew.join("\n");
|
|
if ($(this).siblings('pre.demo-js').length == 0) {
|
|
var title = $(this).data('title');
|
|
|
|
if (!title) {
|
|
title = $(this).closest('fieldset').find('legend').text();
|
|
}
|
|
$('<pre class="layui-code demo-js" lay-title="' + title + '"></pre>').insertAfter(this);
|
|
}
|
|
$(this).siblings('pre.demo-js').text(contentCode);
|
|
});
|
|
|
|
renderRepeat('body');
|
|
|
|
layui.form.render();
|
|
layui.element.render();
|
|
layui.code({
|
|
encode: true
|
|
});
|
|
layui.util.fixbar();
|
|
|
|
const { createApp } = Vue;
|
|
|
|
|
|
$('.component-item').each(function (index, elem) {
|
|
var html = $(elem).find('.preview.content').html();
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
margin: $(elem).data('margin'),
|
|
padding: $(elem).data('padding'),
|
|
gray: $(elem).data('gray'),
|
|
mobile: $(elem).data('mobile'),
|
|
innerMargin: $(elem).data('inner-margin'),
|
|
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
|
|
var iframe = $(elem).find('.preview.iframe')[0];
|
|
var preview =
|
|
iframe.contentDocument ||
|
|
iframe.contentWindow.document;
|
|
|
|
var innerMarginStyle = '';
|
|
|
|
if (this.innerMargin == 1) {
|
|
innerMarginStyle = 'margin-right:15px';
|
|
}
|
|
|
|
var iframeHtml = '<!DOCTYPE html>' +
|
|
'<html lang="en">' +
|
|
'<head>' +
|
|
'<meta charset="UTF-8">' +
|
|
'<meta http-equiv="X-UA-Compatible" content="IE=edge">' +
|
|
'<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
|
|
'<title>演示</title>' +
|
|
'<link rel="stylesheet" href="/static/css/reset.css">' +
|
|
'<link rel="stylesheet" href="/static/css/pagination.css">' +
|
|
'<link rel="stylesheet" href="/static/lib/layui/css/layui.css">' +
|
|
'<link rel="stylesheet" href="/cdn/layui-ul.css">' +
|
|
'<link rel="stylesheet" href="/cdn/layui-ul-mb.css">' +
|
|
'</head>' +
|
|
'<body style="' + innerMarginStyle + '">' +
|
|
html +
|
|
'</body>' +
|
|
'</html>';
|
|
|
|
preview.open();
|
|
preview.write(iframeHtml);
|
|
preview.close();
|
|
}
|
|
|
|
}).mount(elem);
|
|
});
|
|
console.log($('.main-content').width());
|
|
$('.code-preview').css('width', 'calc(' + $('.main-content').width() + 'px - 1em - 3.8em)')
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |