ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 10:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加表单详情预览

Browse Source
This commit is contained in:
augushong
2024-01-24 18:10:08 +08:00
parent 6ce2bdaf47
commit ce464185b2
11 changed files with 503 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
.php-cs-fixer.php Normal file
View File

@@ -0,0 +1,133 @@
<?php
return (new PhpCsFixer\Config())
->setRules([
'@PSR12:risky' => true,
'array_syntax' => ['syntax' => 'short'],
'binary_operator_spaces' => [
'default' => 'single_space',
'operators' => ['=>' => 'single_space'],
],
'blank_line_after_namespace' => true,
'array_indentation'=>true,
'blank_line_after_opening_tag' => true,
'blank_line_before_statement' => [
'statements' => ['return'],
],
'braces' => true,
'cast_spaces' => true,
'class_attributes_separation' => [
'elements' => [
'method' => 'one',
'trait_import' => 'none',
],
],
'class_definition' => true,
'concat_space' => [
'spacing' => 'one',
],
'declare_equal_normalize' => true,
'elseif' => true,
'encoding' => true,
'full_opening_tag' => true,
'fully_qualified_strict_types' => true,
'function_declaration' => true,
'function_typehint_space' => true,
'heredoc_to_nowdoc' => true,
'include' => true,
'increment_style' => ['style' => 'post'],
'indentation_type' => true,
'linebreak_after_opening_tag' => true,
'line_ending' => true,
'lowercase_cast' => true,
'constant_case' => true,
'lowercase_keywords' => true,
'lowercase_static_reference' => true,
'magic_method_casing' => true,
'magic_constant_casing' => true,
'method_argument_space' => true,
'native_function_casing' => true,
'no_alias_functions' => true,
'no_extra_blank_lines' => [
'tokens' => [
'extra',
'throw',
'use',
],
],
'no_blank_lines_after_class_opening' => true,
'no_blank_lines_after_phpdoc' => true,
'no_closing_tag' => true,
'no_empty_phpdoc' => true,
'no_empty_statement' => true,
'no_leading_import_slash' => true,
'no_leading_namespace_whitespace' => true,
'no_mixed_echo_print' => [
'use' => 'echo',
],
'no_multiline_whitespace_around_double_arrow' => true,
'multiline_whitespace_before_semicolons' => [
'strategy' => 'no_multi_line',
],
'no_short_bool_cast' => true,
'no_singleline_whitespace_before_semicolons' => true,
'no_spaces_after_function_name' => true,
'no_spaces_around_offset' => true,
'no_spaces_inside_parenthesis' => true,
'no_trailing_comma_in_list_call' => true,
'no_trailing_comma_in_singleline_array' => true,
'no_trailing_whitespace' => true,
'no_trailing_whitespace_in_comment' => true,
'no_unneeded_control_parentheses' => true,
'no_unreachable_default_argument_value' => true,
'no_useless_return' => true,
'no_whitespace_before_comma_in_array' => true,
'no_whitespace_in_blank_line' => true,
'normalize_index_brace' => true,
'not_operator_with_successor_space' => false,
'object_operator_without_whitespace' => true,
'ordered_imports' => ['sort_algorithm' => 'alpha'],
'phpdoc_indent' => true,
'general_phpdoc_tag_rename' => true,
'phpdoc_inline_tag_normalizer' => true,
'phpdoc_tag_type' => true,
'phpdoc_no_access' => true,
'phpdoc_no_package' => true,
'phpdoc_no_useless_inheritdoc' => true,
'phpdoc_scalar' => true,
'phpdoc_single_line_var_spacing' => true,
'phpdoc_summary' => true,
'phpdoc_to_comment' => true,
'phpdoc_trim' => true,
'phpdoc_types' => true,
'phpdoc_var_without_name' => true,
'psr_autoloading' => true,
'self_accessor' => false,
'short_scalar_cast' => true,
'simplified_null_return' => false,
'single_blank_line_at_eof' => true,
'single_blank_line_before_namespace' => true,
'single_class_element_per_statement' => true,
'single_import_per_statement' => true,
'single_line_after_imports' => true,
'single_line_comment_style' => [
'comment_types' => ['hash'],
],
'single_quote' => true,
'space_after_semicolon' => true,
'standardize_not_equals' => true,
'switch_case_semicolon_to_colon' => true,
'switch_case_space' => true,
'ternary_operator_spaces' => true,
'trailing_comma_in_multiline' => true,
'trim_array_spaces' => true,
'unary_operator_spaces' => true,
'visibility_required' => [
'elements' => ['method', 'property'],
],
'whitespace_after_comma_in_array' => true,
'no_unused_imports' => true,
])
// ->setIndent("\t")
->setLineEnding("\n");

20
app/model/Post.php
View File

@@ -26,7 +26,7 @@ class Post extends Model
public static $stausNameList = [
0 => '不发布',
1 => '发布'
1 => '发布',
];
protected $defaultSoftDelete = 0;
@@ -50,16 +50,18 @@ class Post extends Model
{
return strtotime($value);
}
public function getPublishTimeTextAttr()
{
$value = $this->getData('publish_time');
return date('Y-m-d', $value);
}
public function getPublishTimeDatetimeAttr()
{
$value = $this->getData('publish_time');
return date('Y-m-d H:i:s', $value);
}
@@ -131,6 +133,7 @@ class Post extends Model
{
return json_encode($value);
}
public function setContentHtmlAttr($value)
{
return trim($value);
@@ -182,7 +185,6 @@ class Post extends Model
return [];
}
$cache_key = 'cache_components_data_' . $tpl_name;
$list_components_data = Cache::get($cache_key);
@@ -193,11 +195,8 @@ class Post extends Model
$list_components = scandir($components_type_path);
$list_components_data = [];
$scss_compiler = new Compiler();
$markdown_parser = new Parsedown();
@@ -219,12 +218,13 @@ class Post extends Model
$components_data = [];
if (file_exists($php_path)) {
$components_data = require($php_path);
$components_data = require $php_path;
}
$html_content = View::display(file_get_contents($components_path . '/_index.html'), $components_data);
$formatter = new Formatter();
$html_content = $formatter->beautify($html_content);
$list_components_data[$components_name]['config'] = $env_info->get();
@@ -247,7 +247,6 @@ class Post extends Model
return $list_components_data;
}
public static function quickSelect($clear = false)
{
$cacke_key = 'post_list';
@@ -255,7 +254,6 @@ class Post extends Model
$list_post = Cache::get($cacke_key);
if (empty($list_post) || $clear) {
$list_post = Category::with(['post'])->where('type', 'default')
->where('status', 1)
->order('sort asc')
@@ -280,6 +278,7 @@ class Post extends Model
return $model_post;
}
public static function quickFindByTplName($tpl_name, $clear = false)
{
$cache_key = 'post_item_' . $tpl_name;
@@ -291,6 +290,7 @@ class Post extends Model
Cache::set($cache_key, $model_post, get_system_config('cache_expire_time'));
}
return $model_post;
}

51
public/cdn/layui-ul.css
View File

@@ -1108,6 +1108,57 @@
margin-bottom: 6px;
}
.ul-descriptions-form .item {
float: left;
width: 50%;
box-sizing: border-box;
padding: 10px;
}
.ul-descriptions-form .item .label {
font-size: 13px;
color: #999;
margin-bottom: 6px;
}
.ul-descriptions-form .item .value {
font-size: 14px;
color: #333;
}
.ul-descriptions-form .item.full-line {
width: 100%;
}
.ul-descriptions-form .item.poster .poster-item {
height: 80px;
}
.ul-descriptions-form .item .article-item {
color: #666;
white-space: pre-wrap;
word-wrap: break-word;
}
.ul-descriptions-form.border {
border: 1px solid #e8e8e8;
}
.ul-descriptions-form.border .item {
border: 1px solid #e8e8e8;
}
.ul-descriptions-form.space-between .item {
display: flex;
}
.ul-descriptions-form.space-between .item .label {
width: 80px;
text-align: right;
margin-right: 10px;
white-space: nowrap;
flex-shrink: 0;
}
.ul-descriptions-form.space-between .item .value {
margin-left: 5px;
}
.ul-descriptions-form::after {
content: "";
display: block;
clear: both;
}
.ul-descriptions-info {
display: flex;
align-items: flex-start;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -6,6 +6,7 @@
@import './card/ul-card-qrcode/index';
@import './card/ul-easy-image/index';
@import './card/ul-info-card/index';
@import './descriptions/ul-descriptions-form/index';
@import './descriptions/ul-descriptions-info/index';
@import './descriptions/ul-descriptions-row/index';
@import './descriptions/ul-easy-item/index';

6
source/components/descriptions/ul-descriptions-form/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=表单详情
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

78
source/components/descriptions/ul-descriptions-form/_index.html Normal file
View File

@@ -0,0 +1,78 @@
{volist name='type' id='vo_type'}
{volist name='position' id='vo_position'}
<div class="ul-group-title">类名 ul-descriptions-form {$vo_type} {$vo_position}</div>
<div class="ul-descriptions-form {$vo_type} {$vo_position}">
<div class="item">
<div class="label">商品分类</div>
<div class="value">图书 </div>
</div>
<div class="item">
<div class="label">商品标题</div>
<div class="value">中国科幻基石丛书：三体全集（套装1-3册） </div>
</div>
<div class="item poster">
<div class="label">封面</div>
<div class="value">
<img class="poster-item"
src="http://cdn.bookcase.ulthon.com/upload/book/619142b09b36c.jpe"
alt="">
</div>
</div>
<div class="item">
<div class="label">作者</div>
<div class="value">刘慈欣 </div>
</div>
<div class="item">
<div class="label">价格</div>
<div class="value">50.30 </div>
</div>
<div class="item article full-line">
<div class="label">商品详情</div>
<div class="value">
<div class="article-item">第一部
《三体》
文化大革命如火如荼地进行，天文学家叶文洁在其间历经劫难，被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线，向宇宙发出地球文明的第一声啼鸣，取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下，四光年外的“三体文明”百余次毁灭与重生，正被逼迫不得不逃离母星，而恰在此时，他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标，彻底改变了人类的命运。
地球的基础科学出现了异常的扰动，纳米科学家汪淼进入神秘的网络游戏《三体》，开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时，接触到了地球上应对三体人到来而形成的一个秘密组织（ETO）。地球防卫组织中国区作战中心通过“古筝计划”，一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋，获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。
在运用超技术锁死地球人的基础科学之后，庞大的三体舰队开始向地球进发，人类的末日悄然来临 [3-6] 。
第二部
《三体2：黑暗森林》
三体人在利用科技锁死了地球人的科学之后，出动庞大的宇宙舰队直扑太阳系，面对地球文明前所未有的危局，人类组建起同样庞大的太空舰队，同时（PDC）利用三体人思维透明的致命缺陷，制订了“面壁计划”。出乎意料地，社会学教授罗辑被选出作为四位“面壁者”之一，展开对三体人的秘密反击。虽然三体人自身无法识破人类的计谋，却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。
在这场你死我活的文明生存竞争中，罗辑由一开始的逃避和享乐主义逐渐意识到自己的责任，想到了一个对抗三体文明入侵的办法。科研军官章北海试图借一场陨石雨干涉飞船推进形式的研究方向。近二百年后，获选增援未来的他在人类舰队被“水滴”清除殆尽前，成功抢夺战舰逃离。此时罗辑证实了宇宙文明间的黑暗森林法则，任何暴露自己位置的文明都将很快被消灭。
借助于这一发现，他以向全宇宙公布三体世界的位置坐标相威胁，暂时制止了三体对太阳系的入侵，使地球与三体建立起脆弱的战略平衡。 [5-7]
第三部
《三体3：死神永生》
身患绝症的云天明买下一颗星星送给暗恋着的大学同学程心，而程心因参与（PIA）向三体舰队发射探测器的工作，却想让航天专业背景的他放弃安乐死，作为被执行人将大脑捐献给阶梯计划。与三体文明的战争使人类首次看到了宇宙黑暗的真相，地球文明因为黑暗森林打击的存在如临大敌，不敢在太空中暴露自己。在零道德的宇宙中发起黑暗战役的战舰被诱导返航，却受到有道德的地球文明审判。
不称职的懦弱少女程心被选来充当掌握地球命运的执剑人，她因为罗辑的成功将这看作一项只需花费时间的任务，刚刚任职水滴就向地球发动攻击，程心为了忠于人性做出了错误的决定。在警示下继续逃离的“蓝色空间”号，受到具有发射引力波能力的“万有引力”号与两个同行的“水滴”追击，其上的人员进入四维空间摧毁水滴并占领了“万有引力”号，启动引力波广播向宇宙公布了三体星系的坐标。
云天明与地球取得联系，通过讲述三个自己编创的童话故事，向程心透露大量情报；人类自以为悟出了生存竞争的秘密，开始进行掩体计划，维德领导的空间曲率驱动研究因为程心的错误判断被终止，使得人类最终没有能够逃脱被高级文明毁灭的命运。因为宇宙中还存在更强大的文明，战争的方式和武器已经远超出人类的想象，极高文明发出了一张卡片大小的“二向箔”，使整个太阳系压缩为二维平面而毁灭。
在地球人类接近灭亡之际，只有程心和艾AA两个幸存者乘坐光速飞船离开。罗辑成为设置于冥王星的地球文明博物馆的“守墓人”，她们在冥王星带走人类文明的精华。在云天明送的恒星的一颗行星上，程心遇到关一帆且探讨了宇宙降维的真相，然而超乎一切之上的力量要求宇宙归零重生，在黑域中穿越长达1800万年的时空……程心没有等到云天明到来，和关一帆在小宇宙中短暂居住后重新进入大宇宙生活 [5] [8] 。
</div>
</div>
</div>
<div class="item files full-line">
<div class="label">文件</div>
<div class="value">
<div class="ul-card-file ul-inline-block">
<div class="main">
<div class="info">
<div class="name">核弹制作与发射 从入门到精通 </div>
<div class="desc">75GB</div>
</div>
<div class="icon excel"><i class="fa fa-file-excel"></i></div>
</div>
<div class="footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></div>
</div>
<div class="ul-card-file ul-inline-block">
<div class="main">
<div class="info">
<div class="name">核弹制作与发射 从入门到精通 </div>
<div class="desc">75GB</div>
</div>
<div class="icon zipper"><i class="fa fa-file-zipper"></i></div>
</div>
<div class="footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></div>
</div>
</div>
</div>
</div>
{/volist}
{/volist}

2
source/components/descriptions/ul-descriptions-form/_index.md Normal file
View File

@@ -0,0 +1,2 @@
支持边框、左右等搭配

12
source/components/descriptions/ul-descriptions-form/_index.php Normal file
View File

@@ -0,0 +1,12 @@
<?php
return [
'type'=>[
'',
'border'
],
'position'=>[
'',
'space-between',
]
];

74
source/components/descriptions/ul-descriptions-form/_index.scss Normal file
View File

@@ -0,0 +1,74 @@
.ul-descriptions-form {
.item {
float: left;
width: 50%;
box-sizing: border-box;
padding: 10px;
.label {
font-size: 13px;
color: #999;
margin-bottom: 6px;
}
.value {
font-size: 14px;
color: #333;
}
&.full-line {
width: 100%;
}
&.poster {
.poster-item {
height: 80px;
}
}
.article-item {
color: #666;
// 文本换行
white-space: pre-wrap;
word-wrap: break-word
}
}
// 增加边框
&.border {
.item {
border: 1px solid #e8e8e8;
}
border: 1px solid #e8e8e8;
}
// 左右排列
&.space-between {
.item {
display: flex;
.label {
width: 80px;
text-align: right;
margin-right: 10px;
white-space: nowrap;
flex-shrink: 0;
}
.value {
margin-left: 5px;
}
}
}
&::after {
content: '';
display: block;
clear: both;
}
}

199
view/index/index/index.html
View File

@@ -3,14 +3,20 @@
<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">
<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">
<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>
@@ -31,7 +37,8 @@
{:get_system_config('site_desc')}
</div>
</div>
<div class="layui-row layui-col-space6 " style="margin-top: 15px;">
<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 ">
@@ -42,7 +49,8 @@
</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}">
<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>
@@ -60,7 +68,8 @@
<div class="layui-col-md9">
<div class="main-content ul-padding-md">
<div class="">
<span class="layui-breadcrumb" lay-separator="/">
<span class="layui-breadcrumb"
lay-separator="/">
<a href="{:url('Index/index')}">首页</a>
<a><cite>{$model_post->title}</cite></a>
</span>
@@ -68,7 +77,11 @@
<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="复制成功!">
<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'}
@@ -76,29 +89,68 @@
<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="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 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 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 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 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 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">
@@ -109,18 +161,23 @@
<li>CSS</li>
<li>UniApp</li>
</ul>
<div class="layui-tab-content" style="padding:0">
<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>
<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>
<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>
<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>
<pre style="margin: 0;max-height: 400px;"
class="line-numbers code-preview"><code class="language-html">{$vo.uniapp}</code></pre>
</div>
</div>
</div>
@@ -141,7 +198,9 @@
<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>
<script src='https://gitee.com/ulthon/layui-ul/widget_preview'
async
defer></script>
<div id="osc-gitee-widget-tag"></div>
<style>
.osc_pro_color {
@@ -177,12 +236,15 @@
</div>
</div>
</div>
<div class="right-tips-container" style="display: none;">
<div class="ul-nav-min right-tips-nav" style="width: 160px;">
<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;">
<div class="tpl"
style="display: none;">
<a class="ul-nav-min-item">
个人中心
</a>
@@ -199,17 +261,17 @@
.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)
$(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')
})
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({
@@ -220,18 +282,18 @@
closeBtn: 0,
shade: 0,
success(layero) {
$(layero).css('margin-left', '-15px')
$(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)
var clone = $(this).clone();
clone.insertAfter(this);
renderRepeat(clone);
}
})
});
}
@@ -240,22 +302,22 @@
$('.demo-js-src').each(function () {
var html = $(this).html();
var htmlList = html.split(/[\n]/g);
var htmlListNew = []
var htmlListNew = [];
var baseLineBlankNums = -1;
htmlList.forEach(function (htmlLine, htmlIndex) {
if (htmlIndex == 0 && htmlLine.length == 0) {
return true
return true;
}
if (baseLineBlankNums < 0) {
var kong = htmlLine.match(/^ */g) //筛选
var kong = htmlLine.match(/^ */g); //筛选
if (kong != null) {
baseLineBlankNums = kong[0].length
baseLineBlankNums = kong[0].length;
} else {
baseLineBlankNums = 0
baseLineBlankNums = 0;
}
}
htmlListNew.push(htmlLine.slice(baseLineBlankNums))
htmlListNew.push(htmlLine.slice(baseLineBlankNums));
});
var contentCode = htmlListNew.join("\n");
if ($(this).siblings('pre.demo-js').length == 0) {
@@ -266,22 +328,24 @@
}
$('<pre class="layui-code demo-js" lay-title="' + title + '"></pre>').insertAfter(this);
}
$(this).siblings('pre.demo-js').text(contentCode)
})
$(this).siblings('pre.demo-js').text(contentCode);
});
renderRepeat('body')
renderRepeat('body');
layui.form.render()
layui.element.render()
layui.form.render();
layui.element.render();
layui.code({
encode: true
})
layui.util.fixbar()
});
layui.util.fixbar();
const { createApp } = Vue
const { createApp } = Vue;
$('.component-item').each(function (index, elem) {
var html = $(elem).find('.preview.content').html();
createApp({
data() {
return {
@@ -291,11 +355,10 @@
mobile: $(elem).data('mobile'),
innerMargin: $(elem).data('inner-margin'),
}
};
},
mounted() {
var html = $(elem).find('.preview.content').html();
mounted() {
var iframe = $(elem).find('.preview.iframe')[0];
var preview =
@@ -324,15 +387,15 @@
'<body style="' + innerMarginStyle + '">' +
html +
'</body>' +
'</html>'
'</html>';
preview.open();
preview.write(iframeHtml);
preview.close();
}
}).mount(elem)
})
}).mount(elem);
});
console.log($('.main-content').width());
$('.code-preview').css('width', 'calc(' + $('.main-content').width() + 'px - 1em - 3.8em)')