mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-09-03 22:51:38 +08:00
291 lines
12 KiB
HTML
291 lines
12 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">
|
|
|
|
<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">
|
|
{$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="desc">
|
|
{$vo.desc|raw}
|
|
</div>
|
|
<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'}">
|
|
<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>
|
|
<div class="" style="margin-top: 10px;">
|
|
<div class="preview" :class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}">{$vo.html|raw}</div>
|
|
</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 class="layui-code" style="margin: 0;">{$vo.html}</pre>
|
|
</div>
|
|
<div class="layui-tab-item ">
|
|
<pre class="layui-code" style="margin: 0;">{$vo.scss|raw}</pre>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<pre class="layui-code" style="margin: 0;">{$vo.css|raw}</pre>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<pre class="layui-code" style="margin: 0;">{$vo.uniapp|raw}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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) {
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
margin: $(elem).data('margin'),
|
|
padding: $(elem).data('padding'),
|
|
gray: $(elem).data('gray'),
|
|
}
|
|
}
|
|
}).mount(elem)
|
|
})
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |