From 83353dd1357b32870ec2b695f7a79b6fdea84b0d Mon Sep 17 00:00:00 2001
From: wangzhiming <8449761382@qq.com>
Date: Sat, 6 Jun 2020 10:58:46 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6-=E5=8D=A1=E7=89=87=20?=
 =?UTF-8?q?=E6=9C=80=E4=B8=8B=E6=96=B9=E5=86=85=E5=AE=B9=E7=BA=AF=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/public/css/app.css        | 11 ++++++++++-
 admin/public/js/index.js        | 24 +++++++++++++++++++++---
 admin/views/components/card.njk | 27 +++++++++++----------------
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/admin/public/css/app.css b/admin/public/css/app.css
index f3583c9..b08705b 100644
--- a/admin/public/css/app.css
+++ b/admin/public/css/app.css
@@ -791,8 +791,17 @@ a:hover{
     padding:10px 15px 13px;
 }
 
+.code-source-show{
+    margin-top: 15px;
+    border: 1px solid rgb(235, 235, 235);
+    border-radius: 3px;
+    background-color: rgb(250, 250, 250);
+    overflow: hidden;
+}
 
-
+.code-source-show .code-show{
+    margin-top: 0;
+}
 
 
 
diff --git a/admin/public/js/index.js b/admin/public/js/index.js
index 64dd349..6cd0bc1 100644
--- a/admin/public/js/index.js
+++ b/admin/public/js/index.js
@@ -43,17 +43,35 @@ var PageIndex = {
                 '    <div class="code-control">' +
                 '        <i class="fa fa-code"></i>' +
                 '    </div>' +
-                '</div>'
-
+                '</div>',
+            _showOnlyCode = '' +
+              '<div class="code-show">' +
+              '    <div class="code-highlight">' +
+              '        <textarea class="code-text"></textarea>' +
+              '    </div>' +
+              '    <pre class="hljs-pre"><code class="hljs"></code></pre>' +
+              '    <div class="code-control">' +
+              '        <i class="fa fa-code"></i>' +
+              '    </div>' +
+              '</div>'
 
         $('.demo-code').each(function (index, item) {
             var scope = $(this),
                 source = scope.find('.code-source')
-
             if (source.length) {
                 // $(_show).appendTo(scope).find('.hljs').html(hljs.highlightAuto(source.html()).value)
                 $(_show).insertAfter(source).find('.hljs').html(hljs.highlightAuto(source.html()).value)
             }
+            // 只展示代码
+            var sourceToShow = scope.find('.code-source-show')
+            if (sourceToShow.length) {
+                // $(_show).appendTo(scope).find('.hljs').html(hljs.highlightAuto(source.html()).value)
+              let content = sourceToShow.html()
+              let result = $(_showOnlyCode)
+              sourceToShow.html(result).find('.hljs').html(hljs.highlightAuto(content).value)
+              sourceToShow.find('.code-control').hide()
+              sourceToShow.find('pre.hljs-pre').show()
+            }
         })
 
         /*
diff --git a/admin/views/components/card.njk b/admin/views/components/card.njk
index 3bd7248..6e34531 100644
--- a/admin/views/components/card.njk
+++ b/admin/views/components/card.njk
@@ -1175,25 +1175,20 @@
                                         <p>卡列也可以扩展并使用一些其他代码进行自定义。下面显示的是.card-columns使用与我们使用的相同CSS（即CSS列）的类的扩展，以生成一组用于更改列数的响应层。</p>
                                     </div>
                                 </div>
-<div class="language-scss" data-lang="scss">
-    <div class="row">
-        <div class="col">
-            <code class="language-scss" data-lang="scss">
-                .card-columns {
-                @include media-breakpoint-only(lg) {
-                column-count: 4;
-                }
-                @include media-breakpoint-only(xl) {
-                column-count: 5;
-                }
-                }
-            </code>
-        </div>
-    </div>
+<div class="code-source-show">
+    <code class="language-scss" data-lang="scss">
+        .card-columns {
+        @include media-breakpoint-only(lg) {
+        column-count: 4;
+        }
+        @include media-breakpoint-only(xl) {
+        column-count: 5;
+        }
+        }
+    </code>
 </div>
 
 
-
                             </div>
                         </div>
 
-- 
Gitee