新增卡片样式,导航样式,头部样式

app/model/Post.php

@@ -158,6 +158,8 @@ class Post extends Model
       return '';
     }
 
+    View::assign('site_logo_src', get_source_link(get_system_config('site_logo')));
+
     return View::fetch($file_path);
   }
 

demo/card.html

@@ -0,0 +1,66 @@
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>卡片A</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md" data-repeat="3">
+      <div class="ul-card-a" >
+        <div class="ul-card-a-left">
+          <img width="100%" src="{$site_logo_src}" alt="">
+        </div>
+        <div class="ul-card-a-right">
+          <div class="ul-card-a-main">
+            <div class="ul-card-a-title">
+              卡片标题
+            </div>
+            <div class="ul-card-a-desc">
+              这是卡片说明
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>详细属性卡片</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md layui-bg-gray">
+      <div class="layui-card ul-card">
+        <div class="layui-card-header">
+          <span class="ul-card-status layui-bg-green">意向</span>
+          <span class="ul-card-title">卡片面板</span>
+          <span class="ul-card-options">
+            <span>2021年3月29日</span>
+            <span class=""><i class="layui-icon layui-icon-right"></i></span>
+          </span>
+        </div>
+        <div class="layui-card-body">
+          <div class="data-item">
+            <span class="data-title">入库时间:</span>
+            <span class="data-value">2021年3月29日16:33:21</span>
+          </div>
+          <div class="data-item">
+            <span class="data-title">用户名称:</span>
+            <span class="data-value">奥古斯宏</span>
+          </div>
+          <div class="data-item">
+            <span class="data-title">公司名称:</span>
+            <span class="data-value">临沂奥宏网络科技有限公司</span>
+          </div>
+          <div class="data-item">
+            <span class="data-title">电话:</span>
+            <span class="data-value">13012341234</span>
+          </div>
+          <div class="data-item">
+            <span class="data-title">相册:</span>
+            <span class="data-img">
+              <img class="data-img-main" src="/static/images/view.jpg" alt="">
+              <img class="data-img-main" src="/static/images/view.jpg" alt="">
+              <img class="data-img-main" src="/static/images/view.jpg" alt="">
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>

demo/form.html

@@ -1,9 +1,10 @@
 <fieldset class="layui-elem-field layui-field-title">
   <legend>表格输入</legend>
   <div class="layui-field-box">
+    <div class="demo-js-src" style="display: block;">
       <div class="layui-form">
         <div class="layui-form-item">
-        <table class="layui-table ul-input-table">
+          <table class="layui-table ul-input-table" lay-even>
             <tbody>
               <tr>
                 <td>输入</td>
@@ -54,4 +55,6 @@
         </div>
       </div>
     </div>
+    <pre  class="layui-code demo-js"></pre>
+  </div>
 </fieldset>

demo/group_panel.html

@@ -60,47 +60,3 @@
     </div>
   </div>
 </fieldset>
-
-<fieldset class="layui-elem-field layui-field-title">
-  <legend>详细属性分组</legend>
-  <div class="layui-field-box">
-    <div class="ul-padding-md layui-bg-gray">
-      <div class="layui-card ul-card">
-        <div class="layui-card-header">
-          <span class="ul-card-status layui-bg-green">意向</span>
-          <span class="ul-card-title">卡片面板</span>
-          <span class="ul-card-options">
-            <span>2021年3月29日</span>
-            <span class=""><i class="layui-icon layui-icon-right"></i></span>
-          </span>
-        </div>
-        <div class="layui-card-body">
-          <div class="data-item">
-            <span class="data-title">入库时间:</span>
-            <span class="data-value">2021年3月29日16:33:21</span>
-          </div>
-          <div class="data-item">
-            <span class="data-title">用户名称:</span>
-            <span class="data-value">奥古斯宏</span>
-          </div>
-          <div class="data-item">
-            <span class="data-title">公司名称:</span>
-            <span class="data-value">临沂奥宏网络科技有限公司</span>
-          </div>
-          <div class="data-item">
-            <span class="data-title">电话:</span>
-            <span class="data-value">13012341234</span>
-          </div>
-          <div class="data-item">
-            <span class="data-title">相册:</span>
-            <span class="data-img">
-              <img class="data-img-main" src="/static/images/view.jpg" alt="">
-              <img class="data-img-main" src="/static/images/view.jpg" alt="">
-              <img class="data-img-main" src="/static/images/view.jpg" alt="">
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</fieldset>

demo/header.html

@@ -62,3 +62,95 @@
 
   </div>
 </fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>经典头部</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md">
+      <div class="ul-header-a">
+        <div class="ul-header-a-main">
+
+          <div class="ul-header-a-left">
+            Hi:欢迎来到{:get_system_config('site_name')}
+          </div>
+          <div class="ul-header-a-right">
+            <div class="ul-header-a-nav-item" style="min-width: 100px;">
+              <div class="ul-header-a-img" style="background-image: url('{$site_logo_src}');">
+  
+              </div>
+              <span>奥宏科技</span>
+              <div class="ul-header-a-nav-plus" style="left: 0;width: 100%">
+                <div class="ul-nav-min" style="width: 100%">
+                  <div class="ul-nav-min-item">
+                    个人中心
+                  </div>
+                  <div class="ul-nav-min-item">
+                    安全中心
+                  </div>
+                  <div class="ul-nav-min-item">
+                    数据中心
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="ul-header-a-nav-item">
+              充值
+            </div>
+            <div class="ul-header-a-nav-item">
+              提现
+            </div>
+            <div class="ul-header-a-nav-item">
+              退出
+            </div>
+            <div class="ul-header-a-nav-item">
+              <div class="layui-btn layui-btn-xs">在线客服</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ul-padding-md">
+      <div class="ul-header-a">
+        <div class="ul-header-a-main" style="max-width: 600px;">
+
+          <div class="ul-header-a-left">
+            Hi:欢迎来到{:get_system_config('site_name')}
+          </div>
+          <div class="ul-header-a-right">
+            <div class="ul-header-a-nav-item" style="min-width: 100px;">
+              <div class="ul-header-a-img" style="background-image: url('{$site_logo_src}');">
+  
+              </div>
+              <span>奥宏科技</span>
+              <div class="ul-header-a-nav-plus" style="left: 0;width: 100%">
+                <div class="ul-nav-min" style="width: 100%">
+                  <div class="ul-nav-min-item">
+                    个人中心
+                  </div>
+                  <div class="ul-nav-min-item">
+                    安全中心
+                  </div>
+                  <div class="ul-nav-min-item">
+                    数据中心
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="ul-header-a-nav-item">
+              充值
+            </div>
+            <div class="ul-header-a-nav-item">
+              提现
+            </div>
+            <div class="ul-header-a-nav-item">
+              退出
+            </div>
+            <div class="ul-header-a-nav-item">
+              <div class="layui-btn layui-btn-xs">在线客服</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>

demo/nav.html

@@ -86,3 +86,100 @@
     </ul>
   </div>
 </fieldset>
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>最简单的导航</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md">
+      <div class="ul-nav-min" style="width: 120px;">
+        <div class="ul-nav-min-item">
+          个人中心
+        </div>
+        <div class="ul-nav-min-item">
+          安全中心
+        </div>
+        <div class="ul-nav-min-item">
+          数据中心
+        </div>
+      </div>
+
+    </div>
+  </div>
+</fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>经典头部跳转导航</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md">
+      <div class="ul-nav-header">
+        <div class="ul-nav-header-main">
+
+          <div class="ul-nav-header-left">
+            <img style="height: 60px" src="{$site_logo_src}" alt="">
+          </div>
+          <div class="ul-nav-header-right">
+            <div class="ul-nav-header-item">
+              首页
+            </div>
+            <div class="ul-nav-header-item">
+              活动中心
+            </div>
+            <div class="ul-nav-header-item">
+              咨询
+            </div>
+            <div class="ul-nav-header-item">
+              帮助指南
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ul-padding-md">
+      <div class="ul-nav-header ul-nav-header-red">
+        <div class="ul-nav-header-main">
+
+          <div class="ul-nav-header-left">
+            <img style="height: 60px" src="{$site_logo_src}" alt="">
+          </div>
+          <div class="ul-nav-header-right">
+            <div class="ul-nav-header-item">
+              首页
+            </div>
+            <div class="ul-nav-header-item">
+              活动中心
+            </div>
+            <div class="ul-nav-header-item">
+              咨询
+            </div>
+            <div class="ul-nav-header-item">
+              帮助指南
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ul-padding-md">
+      <div class="ul-nav-header ul-nav-header-primary">
+        <div class="ul-nav-header-main">
+
+          <div class="ul-nav-header-left">
+            <img style="height: 80px" src="{$site_logo_src}" alt="">
+          </div>
+          <div class="ul-nav-header-right">
+            <div class="ul-nav-header-item">
+              首页
+            </div>
+            <div class="ul-nav-header-item">
+              活动中心
+            </div>
+            <div class="ul-nav-header-item">
+              咨询
+            </div>
+            <div class="ul-nav-header-item">
+              帮助指南
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>

public/cdn/layui-ul.css

@@ -1,5 +1,6 @@
 /* 列表开始 */
-.ul-nav-tree {}
+.ul-nav-tree {
+}
 
 .ul-nav-tree-group-title {
   font-size: 16px;
@@ -21,7 +22,6 @@
 
 .ul-nav-tree-item-title {
   font-size: 15px;
-
 }
 
 .ul-nav-tree-item-desc {
@@ -41,12 +41,11 @@
   margin-bottom: 15px;
 }
 
-
 .ul-icon-exit {
   display: inline-block;
   width: 16px;
   height: 16px;
-  background-image   : url('img/exit.png');
+  background-image: url("img/exit.png");
   background-size: cover;
   background-position: center;
 }
@@ -63,7 +62,8 @@
 
 /* 用户头像开始 */
 
-.ul-avatar-list {}
+.ul-avatar-list {
+}
 
 .ul-avatar-list-item {
   display: flex;
@@ -80,7 +80,7 @@
 .ul-avatar-list-item-img {
   height: 48px;
   width: 48px;
-  background-image   : url('/static/images/avatar.png');
+  background-image: url("/static/images/avatar.png");
   background-size: cover;
   background-position: center;
   border-radius: 3px;
@@ -112,7 +112,6 @@
 
 /* 头像结束 */
 
-
 /* 头部开始 */
 
 .ul-header {
@@ -139,7 +138,7 @@
 }
 
 .ul-header-user-avatar {
-  background-image   : url('/static/images/avatar.png');
+  background-image: url("/static/images/avatar.png");
   width: 45px;
   height: 45px;
   background-size: cover;
@@ -160,7 +159,6 @@
 
 /* 头部结束 */
 
-
 /* 导航开始 */
 .layui-nav.ul-nav-white {
   background-color: #f0f0f0;
@@ -183,7 +181,6 @@
   color: #fff !important;
 }
 
-
 .layui-nav.ul-nav-white .layui-nav-itemed > a,
 .layui-nav-tree.ul-nav-white .layui-nav-title a,
 .layui-nav-tree.ul-nav-white .layui-nav-title a:hover {
@@ -205,16 +202,16 @@
 
 /* 导航结束 */
 
-
 /* 链接导航开始 */
 
 .ul-link-select {
   display: flex;
   align-items: flex-start;
-  justify-content: flex-start
+  justify-content: flex-start;
 }
 
-.ul-link-title {}
+.ul-link-title {
+}
 
 .ul-link-list {
   display: flex;
@@ -251,13 +248,12 @@
   margin: 15px;
   text-align: center;
   min-width: 220px;
-
 }
 
 .ul-photo-poster {
   width: 180px;
   height: 140px;
-  background-image   : url('../static/images/avatar.png');
+  background-image: url("../static/images/avatar.png");
   background-size: cover;
   background-position: center;
   margin: 0 auto;
@@ -273,10 +269,8 @@
 .ul-photo-desc {
   font-size: 14px;
   color: #999;
-
 }
 
-
 .ul-photo-card-list {
   display: flex;
   align-items: flex-start;
@@ -288,7 +282,6 @@
   width: 200px;
   margin: 15px;
   box-shadow: 0 5px 10px #999;
-
 }
 
 .ul-photo-card-poster {
@@ -307,12 +300,10 @@
 .ul-photo-card-desc {
   font-size: 14px;
   color: #999;
-
 }
 
 /* 相册列表结束 */
 
-
 .ul-info-tips {
   padding: 15px;
   background-color: rgba(255, 255, 255, 0.6);
@@ -372,7 +363,8 @@
   margin-top: 8px;
 }
 
-.ul-message-list {}
+.ul-message-list {
+}
 
 .ul-message-item {
   margin-bottom: 15px;
@@ -428,9 +420,7 @@
 }
 
 .ul-message-item-img-list {
-
   margin-top: 10px;
-
 }
 
 .ul-message-item-img {
@@ -440,14 +430,12 @@
   background-position: center;
   margin-right: 10px;
   display: inline-block;
-
 }
 
 .ul-nav-easy {
   background-color: transparent;
 }
 
-
 .layui-nav-tree.ul-nav-easy .layui-nav-item > a {
   color: #666;
 }
@@ -478,7 +466,8 @@
   margin-bottom: 15px;
 }
 
-.ul-upload-photo-list {}
+.ul-upload-photo-list {
+}
 
 .ul-upload-photo-item {
   display: inline-block;
@@ -509,7 +498,7 @@
 }
 
 .ul-upload-photo-button {
-  background-image   : url('img/upload.png');
+  background-image: url("img/upload.png");
   background-size: cover;
   background-position: center;
 }
@@ -532,15 +521,14 @@
   position: relative;
 }
 
-
 .ul-tree-item-info.current {
   background-color: #9cf;
-  border-color    : #6699CC;
+  border-color: #6699cc;
 }
 
 .ul-tree-item-info:hover {
   background-color: rgb(190, 222, 255);
-  border-color    : #6699CC;
+  border-color: #6699cc;
 }
 
 .ul-tree-item-title {
@@ -553,7 +541,6 @@
   top: 10px;
 }
 
-
 .ul-note-item {
   display: flex;
   justify-content: flex-start;
@@ -569,7 +556,6 @@
 
 .ul-note-item .ul-note-item-icon {
   margin-right: 10px;
-  ;
 }
 
 .ul-note-item .ul-note-item-desc {
@@ -590,16 +576,152 @@
   margin-top: 5px;
 }
 
-
 .ul-input-table {
   text-align: center;
 }
 
-.ul-input-table td,
+.ul-input-table tbody td,
-.ul-input-table th {
+.ul-input-table tbody th {
   padding: 2px 4px;
 }
 
 .ul-input-table .layui-form-checkbox[lay-skin="primary"] {
   margin-top: 0px;
 }
+
+.ul-input-table .layui-form-select dl dd {
+  text-align: left;
+}
+
+.ul-nav-min {
+  box-shadow: 2px 2px 5px #999;
+  padding: 5px;
+  text-align: center;
+}
+
+.ul-nav-min-item {
+  padding: 5px 0;
+  cursor: pointer;
+  color: #333;
+}
+
+.ul-nav-min-item:hover {
+  color: #6cf;
+}
+
+.ul-header-a {
+  background-color: #ddd;
+}
+
+.ul-header-a-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* border-width: 1px 0;
+  border-color: #bbb;
+  border-style: solid; */
+  padding: 5px;
+  margin: 0 auto;
+}
+
+.ul-header-a-nav-item {
+  margin-right: 15px;
+  color: #333;
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ul-header-a-nav-item:hover .ul-header-a-nav-plus {
+  display: block;
+}
+
+.ul-header-a-img {
+  height: 24px;
+  width: 24px;
+  background-size: cover;
+  background-position: center;
+}
+
+.ul-header-a-right {
+  display: flex;
+  align-items: center;
+}
+
+.ul-header-a-nav-plus {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  display: none;
+}
+
+.ul-nav-header-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 15px;
+}
+.ul-nav-header-right {
+  text-align: right;
+}
+
+.ul-nav-header-item {
+  display: inline-block;
+  margin-right: 15px;
+  cursor: pointer;
+  padding: 5px 15px;
+  color: #333;
+}
+
+.ul-nav-header-item:hover {
+  color: #6cf;
+}
+
+.ul-nav-header-red {
+  background-color: #f72222;
+}
+
+.ul-nav-header-red .ul-nav-header-item {
+  color: #fff;
+}
+.ul-nav-header-red .ul-nav-header-item:hover {
+  color: #fedf50;
+}
+.ul-nav-header-primary {
+  background-color: #6cf;
+}
+
+.ul-nav-header-primary .ul-nav-header-item {
+  color: #fff;
+}
+.ul-nav-header-primary .ul-nav-header-item:hover {
+  color: #ccffff;
+}
+
+.ul-card-a {
+  width: 180px;
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid #bbb;
+  box-shadow: 2px 2px 5px #999;
+  color: #516073;
+  padding: 15px;
+  cursor: pointer;
+}
+.ul-card-a-left{
+  width: 40%;
+}
+.ul-card-a-right {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  width: 50%;
+}
+.ul-card-a-title {
+  font-size: 18px;
+}
+.ul-card-a-desc {
+  margin-top: 5px;
+  font-size: 14px;
+}

view/index/index/index.html

@@ -106,7 +106,7 @@
         htmlListNew.push(htmlLine.slice(baseLineBlankNums))
       });
 
-      $(this).siblings('pre.demo-js').html(htmlListNew.join("\n"))
+      $(this).siblings('pre.demo-js').text(htmlListNew.join("\n"))
     })
     layui.form.render()
     layui.element.render()