完善组件显示

demo/pc/list.html

@@ -375,49 +375,4 @@
             </div>
         </div>
     </div>
-</fieldset>
+</fieldset>
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>站点导航</legend>
-    <div class="layui-field-box">
-        <div class="ul-site-group" data-repeat="2">
-            <div class="ul-site-group-header">
-                新上线
-            </div>
-            <div class="ul-site-list">
-
-                <div class="ul-site-item" data-repeat="5">
-                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
-
-                    </div>
-                    <div class="ul-site-item-info">
-                        <div class="ul-site-item-title">
-                            layui奥宏样式库
-                        </div>
-                        <div class="ul-site-item-desc">
-                            纯CSS的组件案例样式大全
-                        </div>
-                    </div>
-                </div>
-                <div class="ul-site-item">
-                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
-
-                    </div>
-                    <div class="ul-site-item-info">
-                        <div class="ul-site-item-title">
-                            layui奥宏样式库
-                        </div>
-                        <div class="ul-site-item-desc">
-                            纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
-                        </div>
-
-                    </div>
-                </div>
-
-
-            </div>
-
-
-        </div>
-    </div>
-</fieldset>

public/static/lib/prism/prism.css

@@ -0,0 +1,5 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+scss&plugins=line-numbers+toolbar+copy-to-clipboard */
+code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
+pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
+div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}

source/components/list/ul-site-group/_index.html

@@ -54,7 +54,7 @@
                     高度修复
                 </div>
                 <div class="ul-site-item-desc">
-                    纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
+                    纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
                 </div>
             </div>
         </div>

view/index/common/_require.html

@@ -4,6 +4,7 @@
 <!-- <link rel="stylesheet" href="/static/css/{$Request.cookie.skin_name|default='skin-1'}.css"> -->
 <link rel="stylesheet" href="/static/css/common.css">
 <!-- <link rel="stylesheet" href="/cdn/layui-ul-change.css"> -->
+<link rel="stylesheet" href="/static/lib/prism/prism.css">
 <link rel="stylesheet" href="/cdn/layui-ul.css">
 <link rel="stylesheet" href="/cdn/layui-ul-mb.css">
 <script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
@@ -11,5 +12,6 @@
 <script src="/static/lib/layui/layui.js"></script>
 <script src="/static/js/common.js"></script>
 <script src="/static/lib/vue/vue.global.js"></script>
+<script src="/static/lib/prism/prism.js"></script>
 
 {:get_system_config('site_tongji')}

view/index/index/index.html

@@ -64,7 +64,7 @@
                     <div class="ql-snow">
                         <div class="ql-editor">{$model_post->content_html|raw}</div>
                     </div>
-                    <div class="demo-page" id="app-demo-page">
+                    <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'}
@@ -104,16 +104,16 @@
                                         </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>
+                                                <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 class="layui-code" style="margin: 0;">{$vo.scss|raw}</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 class="layui-code" style="margin: 0;">{$vo.css|raw}</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 class="layui-code" style="margin: 0;">{$vo.uniapp|raw}</pre>
+                                                <pre style="margin: 0;max-height: 400px;" class="line-numbers code-preview"><code class="language-html">{$vo.uniapp}</code></pre>
                                             </div>
                                         </div>
                                     </div>
@@ -273,6 +273,8 @@
 
         $('.component-item').each(function (index, elem) {
 
+
+
             createApp({
                 data() {
                     return {
@@ -280,10 +282,12 @@
                         padding: $(elem).data('padding'),
                         gray: $(elem).data('gray'),
                     }
-                }
+                },
+
             }).mount(elem)
         })
 
+        $('.code-preview').css('width', $('.main-content').width() + 'px')
 
     </script>
 </body>