From 1e2f70aa506ba2db7df0a723c04900d5e8135286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?=
 <3277200+sentsim@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:09:42 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=20.layui-body=20?=
 =?UTF-8?q?=E5=92=8C=20.layui-text=20=E6=A0=B7=E5=BC=8F=E7=BB=86=E8=8A=82?=
 =?UTF-8?q?=20(#2395)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: 剔除 .layui-body 不必要的 z-index，提升内部 fixed 布局灵活度

* style: 优化 .layui-text 文本类
---
 docs/class/index.md        |  46 ++++++++++------
 examples/layout-admin.html | 108 +++++++++++++------------------------
 examples/text.md.html      |  52 ++++++++++++------
 src/css/layui.css          |  20 +++----
 4 files changed, 113 insertions(+), 113 deletions(-)
diff --git a/docs/class/index.md b/docs/class/index.md
index dcc49463..dcf3dc6d 100644
--- a/docs/class/index.md
+++ b/docs/class/index.md
@@ -123,9 +123,9 @@ toc: true
 | layui-font-black | <span class="layui-font-black">深</span> |
 | layui-font-gray | <span class="layui-font-gray">浅</span> |
 
-<h2 id="text" lay-toc="{hot: true}">文档容器</h2>
+<h2 id="text" lay-toc="{hot: true}">文本容器</h2>
 
-通过设置 `class="layui-text"` 定义一段包含标题、段落、列表、链接等组合的文档区域。
+通过设置 `class="layui-text"` 定义一段包含标题、段落、列表等组合的文本区域，通常用于 Markdown 文档。
 
 <pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 535px;', layout: ['preview', 'code'], tools: ['full','window']}">
   <textarea>
@@ -139,45 +139,59 @@ toc: true
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="{{= d.layui[2].cdn.css }}" rel="stylesheet">
 </head>
-<body>
-  <div class="layui-text" style="padding: 16px;">
+<body class="layui-padding-3">
+  <div class="layui-text">
     <h1>标题1</h1>
+    <p>段落1段落1段落1段落1段落1段落1段落1段落1段落1 <sup class="footnote-ref"><a href="javascript:;">[1]</a></sup></p>
     <h2>标题2</h2>
+    <p>段落2段落2 <strong>加粗</strong> <em>强调</em>  段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
+    <p>段落2-1 <code>inline code</code> 段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1</p>
     <h3>标题3</h3>
+    <p>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3 <a href="javascript:;">链接</a></p>
     <h4>标题4</h4>
     <h5>标题5</h5>
     <h6>标题6</h6>
-    
-    <hr>
+    <p>段落6段落6段落6段落6段落6段落6段落6段落6段落6</p>
 
+    <h3>无序列表</h3>
     <ul>
       <li>列表1</li>
       <li>
         列表2
         <ul>
-          <li>列表2-1</li>
+          <li>
+            列表2-1
+            <ul>
+              <li>列表2-1-1</li>
+            </ul>
+          </li>
           <li>列表2-2</li>
-          <li>列表2-3</li>
         </ul>
       </li>
       <li>列表3</li>
     </ul>
 
-    <hr>
-
+    <h3>有序列表</h3>
     <ol>
       <li>列表1</li>
       <li>列表2</li>
       <li>列表3</li>
     </ol>
 
-    <hr>
+    <h3>Blockquote</h3>
+    <blockquote>
+      <p>引用</p>
+      <blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote>
+    </blockquote>
 
-    <h2>标题2</h2>
-    <p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1</p>
-    <p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
-    <blockquote>引用</blockquote>
-    <p>这是一个包含<a href="javascript:;">超文本</a>和<strong>加粗文本</strong>的段落</p>
+    <h3>Code</h3>
+&lt;pre&gt;<code>var cp = function(){
+  return gulp.src('./dist/**/*')
+  .pipe(gulp.dest(dest));
+};
+</code>&lt;/pre&gt;
+    <hr>
+    <p id="ref-1">Footer</p>
   </div>
 </body>
 </html>
diff --git a/examples/layout-admin.html b/examples/layout-admin.html
index aa24bbbd..b026baa3 100644
--- a/examples/layout-admin.html
+++ b/examples/layout-admin.html
@@ -1,15 +1,14 @@
- 
- 
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-<title>layout 管理系统大布局 - Layui</title>
-<link rel="stylesheet" href="../src/css/layui.css">
+  <meta charset="utf-8">
+  <title>layout 管理界面大布局示例 - Layui</title>
+  <meta name="renderer" content="webkit">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="../src/css/layui.css" rel="stylesheet">
 </head>
 <body>
-
 <div class="layui-layout layui-layout-admin">
   <div class="layui-header">
     <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
@@ -19,34 +18,30 @@
       <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
         <i class="layui-icon layui-icon-spread-left"></i>
       </li>
-      
-      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
-      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
-      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
+      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
+      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
+      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
       <li class="layui-nav-item">
         <a href="javascript:;">nav groups</a>
         <dl class="layui-nav-child">
-          <dd><a href="">menu 11</a></dd>
-          <dd><a href="">menu 22</a></dd>
-          <dd><a href="">menu 33</a></dd>
+          <dd><a href="javascript:;">menu 11</a></dd>
+          <dd><a href="javascript:;">menu 22</a></dd>
+          <dd><a href="javascript:;">menu 33</a></dd>
         </dl>
       </li>
-      
-      
     </ul>
     <ul class="layui-nav layui-layout-right">
-      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
+      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
         <a href="javascript:;">
-          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
+          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
           tester
         </a>
         <dl class="layui-nav-child">
-          <dd><a href="">Your Profile</a></dd>
-          <dd><a href="">Settings</a></dd>
-          <dd><a href="">Sign out</a></dd>
+          <dd><a href="javascript:;">Your Profile</a></dd>
+          <dd><a href="javascript:;">Settings</a></dd>
+          <dd><a href="javascript:;">Sign out</a></dd>
         </dl>
       </li>
-
       <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
         <a href="javascript:;">
           <i class="layui-icon layui-icon-more-vertical"></i>
@@ -54,7 +49,6 @@
       </li>
     </ul>
   </div>
-  
   <div class="layui-side layui-bg-black">
     <div class="layui-side-scroll">
       <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
@@ -65,7 +59,7 @@
             <dd><a href="javascript:;">menu 1</a></dd>
             <dd><a href="javascript:;">menu 2</a></dd>
             <dd><a href="javascript:;">menu 3</a></dd>
-            <dd><a href="">the links</a></dd>
+            <dd><a href="javascript:;">the links</a></dd>
           </dl>
         </li>
         <li class="layui-nav-item">
@@ -73,42 +67,20 @@
           <dl class="layui-nav-child">
             <dd><a href="javascript:;">list 1</a></dd>
             <dd><a href="javascript:;">list 2</a></dd>
-            <dd><a href="">超链接</a></dd>
+            <dd><a href="javascript:;">超链接</a></dd>
           </dl>
         </li>
         <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
-        <li class="layui-nav-item"><a href="">the links</a></li>
+        <li class="layui-nav-item"><a href="javascript:;">the links</a></li>
       </ul>
     </div>
   </div>
-  
   <div class="layui-body">
     <!-- 内容主体区域 -->
     <div style="padding: 15px;">
-      内容主体区域
-      
-      <br><br>
-      
       <blockquote class="layui-elem-quote layui-text">
-        <ul>
-          <li>
-            你也可以单独打开管理界面大布局的演示页面：
-            <a class="layui-btn layui-btn-normal" href="layuiAdmin.html" target="_blank">单独打开</a>
-          </li>
-          <li>
-            该页面只是简单的管理系统的界面基础布局示例，并不是一整套界面布局方案，您可以关注基于 layui 的通用型管理系统界面模板解决方案：
-            <a href="/layuiadmin/" target="_blank" class="layui-btn">layuiAdmin</a>
-          </li>
-          <li>
-            layui 之所以赢得如此多人的青睐，更多是在于它“前后界面兼备”的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统的界面需求。
-            <br>layui 管理基本布局， 致力于让每一位开发者都能轻松搭建自己的管理系统模板。
-          </li>
-        </ul>
+        Layui 框体布局内容主体区域
       </blockquote>
-      
-      <a href="/doc/element/layout.html#admin" target="_blank" class="layui-btn">查看该布局代码</a>
-      <br><br><br>
-      
       <div class="layui-card layui-panel">
         <div class="layui-card-header">
           下面是充数内容，为的是出现滚动条
@@ -118,12 +90,8 @@
         </div>
       </div>
       <br><br>
-      
-     
-      
     </div>
   </div>
-  
   <div class="layui-footer">
     <!-- 底部固定区域 -->
     底部固定区域
@@ -132,31 +100,31 @@
 
 <script src="../src/layui.js"></script>
 <script>
-//JS 
+//JS
 layui.use(['element', 'layer', 'util'], function(){
-  var element = layui.element
-  ,layer = layui.layer
-  ,util = layui.util
-  ,$ = layui.$;
-  
+  var element = layui.element;
+  var layer = layui.layer;
+  var util = layui.util;
+  var $ = layui.$;
+
   //头部事件
   util.event('lay-header-event', {
-    //左侧菜单事件
-    menuLeft: function(othis){
+    menuLeft: function(othis){ // 左侧菜单事件
       layer.msg('展开左侧菜单的操作', {icon: 0});
-    }
-    ,menuRight: function(){
+    },
+    menuRight: function(){  // 右侧菜单事件
       layer.open({
-        type: 1
-        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
-        ,area: ['260px', '100%']
-        ,offset: 'rt' //右上角
-        ,anim: 5
-        ,shadeClose: true
+        type: 1,
+        title: '更多',
+        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
+        area: ['260px', '100%'],
+        offset: 'rt', // 右上角
+        anim: 'slideLeft', // 从右侧抽屉滑出
+        shadeClose: true,
+        scrollbar: false
       });
     }
   });
-  
 });
 </script>
 </body>
diff --git a/examples/text.md.html b/examples/text.md.html
index 716ff27e..5b89bbe9 100644
--- a/examples/text.md.html
+++ b/examples/text.md.html
@@ -10,41 +10,59 @@
     <div class="layui-container layui-row">
       <div class="layui-col-md4 layui-text">
         <h1>标题1</h1>
+        <p>段落1段落1段落1段落1段落1段落1段落1段落1段落1 <sup class="footnote-ref"><a href="#ref-1">[1]</a></sup></p>
         <h2>标题2</h2>
+        <p>段落2段落2 <strong>加粗</strong> <em>强调</em>  段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
+        <p>段落2-1 <code>inline code</code> 段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1段落2-1</p>
         <h3>标题3</h3>
+        <p>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3 <a href="">链接</a></p>
         <h4>标题4</h4>
         <h5>标题5</h5>
         <h6>标题6</h6>
-        <p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1 <sup class="footnote-ref"><a href="#ref-1">[1]</a></sup></p>
-        <p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
-        <p>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3 <a href="">链接</a></p>
+        <p>段落6段落6段落6段落6段落6段落6段落6段落6段落6</p>
+
+        <h3>无序列表</h3>
         <ul>
-          <li>无序1</li>
-          <li>无序2</li>
-          <li>无序3</li>
+          <li>列表1</li>
+          <li>
+            列表2
+            <ul>
+              <li>
+                列表2-1
+                <ul>
+                  <li>列表2-1-1</li>
+                </ul>
+              </li>
+              <li>列表2-2</li>
+            </ul>
+          </li>
+          <li>列表3</li>
         </ul>
+
+        <h3>有序列表</h3>
         <ol>
-          <li>有序1</li>
-          <li>有序2</li>
-          <li>有序3</li>
+          <li>列表1</li>
+          <li>列表2</li>
+          <li>列表3</li>
         </ol>
-        <br>
+
+        <h3>Blockquote</h3>
         <blockquote>
           <p>引用</p>
           <blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote>
         </blockquote>
 
-        <br>
-
-        <pre>
-var cp = function(){
+        <h3>Code</h3>
+<pre><code>var cp = function(){
   return gulp.src('./dist/**/*')
   .pipe(gulp.dest(dest));
-};</pre>
+};
+</code></pre>
         
-        <p id="ref-1">REF-1</p>
+        <hr>
 
+        <p id="ref-1">REF-1</p>
       </div>
     </div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/css/layui.css b/src/css/layui.css
index ef075c35..e579a630 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -11,8 +11,8 @@ a:active,a:hover{outline:0}
 img{display: inline-block; border: none; vertical-align: middle;}
 li{list-style:none;}
 table{border-collapse: collapse; border-spacing: 0;}
-h1,h2,h3,h4{font-weight: 700;}
-h5,h6{font-weight: 500; font-size: 100%;}
+h1,h2,h3,h4,h5,h6{font-weight: 700;}
+h5,h6{font-size: 100%;}
 button,input,select,textarea{font-size: 100%; }
 input,button,textarea,select,optgroup,option{font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0;}
 pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}
@@ -266,7 +266,7 @@ a cite{font-style: normal; *cursor:pointer;}
 .layui-header a:hover{transition: all .5s; -webkit-transition: all .5s;}
 .layui-side{position: fixed; left: 0; top: 0; bottom: 0; z-index: 999; width: 200px; overflow-x: hidden;}
 .layui-side-scroll{position: relative; width: 220px; height: 100%; overflow-x: hidden;}
-.layui-body{position: relative; left: 200px; right: 0; top: 0; bottom: 0; z-index: 900; width: auto; box-sizing: border-box;}
+.layui-body{position: relative; left: 200px; right: 0; top: 0; bottom: 0; width: auto; box-sizing: border-box;}
 
 /* 后台框架大布局 */
 .layui-layout-body{overflow-x: hidden;}
@@ -650,12 +650,12 @@ hr.layui-border-black{border-width: 0 0 1px;}
 
 /* 文本区域 */
 .layui-text{line-height: 1.8; font-size: 14px;}
-.layui-text h1{font-size: 32px;}
-.layui-text h2{font-size: 24px;}
-.layui-text h3{font-size: 18px;}
-.layui-text h4{font-size: 16px;}
-.layui-text h5{font-size: 14px;}
-.layui-text h6{font-size: 13px;}
+.layui-text h1{margin: 32px 0; font-size: 32px;}
+.layui-text h2{margin: 24px 0; font-size: 24px;}
+.layui-text h3{margin: 16px 0; font-size: 18px;}
+.layui-text h4{margin: 11px 0; font-size: 16px;}
+.layui-text h5{margin: 11px 0; font-size: 14px;}
+.layui-text h6{margin: 11px 0; font-size: 13px;}
 .layui-text ul,
 .layui-text ol{padding-left: 15px;}
 .layui-text ul li{margin-top: 5px; list-style-type: disc;}
@@ -668,7 +668,7 @@ hr.layui-border-black{border-width: 0 0 1px;}
 .layui-text a:not(.layui-btn){color: #01AAED;}
 .layui-text a:not(.layui-btn):hover{text-decoration: underline;}
 .layui-text blockquote:not(.layui-elem-quote){margin: 15px 0; padding: 5px 15px; border-left: 5px solid #eee;}
-.layui-text pre > code:not(.layui-code){padding: 15px; font-family: "Courier New",Consolas,"Lucida Console";}
+.layui-text pre > code:not(.layui-code){display: block; padding: 15px; font-family: "Courier New",Consolas,"Lucida Console";}
 
 /* 字体大小 */
 .layui-font-12{font-size: 12px !important;}
