feat: 迁移经典头部跳转导航

demo/pc/nav.html

@@ -1,36 +0,0 @@
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>操作导航</legend>
-    <div class="layui-field-box">
-        <div class="ul-padding-md ul-bg-gray">
-            <div class="ul-nav-button">
-                <div class="ul-nav-button-item">
-                    <div class="ul-nav-button-icon">
-                        <i class="icon layui-icon layui-icon-add-circle"></i>
-                    </div>
-                    <div class="ul-nav-button-info">
-                        <div class="ul-nav-button-title">
-                            发布公告
-                        </div>
-                        <div class="ul-nav-button-desc">
-                            发布文字/图片和视频.
-                        </div>
-                    </div>
-                </div>
-
-                <div class="ul-nav-button-item">
-                    <div class="ul-nav-button-icon">
-                        <i class="icon layui-icon layui-icon-about"></i>
-                    </div>
-                    <div class="ul-nav-button-info">
-                        <div class="ul-nav-button-title">
-                            关于
-                        </div>
-                        <div class="ul-nav-button-desc">
-                            查看详细系统信息
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</fieldset>

public/cdn/layui-ul.css

@@ -80,6 +80,15 @@
   border-radius: 100%;
 }
 
+.ul-demo-img-logo {
+  background-image: url("/cdn/img/ulthon_logo_108.png");
+  background-size: cover;
+  background-position: center;
+}
+.ul-demo-img-logo.circle {
+  border-radius: 100%;
+}
+
 .ul-demo-mobile-page {
   width: 360px;
   height: 660px;
@@ -2427,6 +2436,38 @@
   color: #fff;
 }
 
+.ul-nav-button-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0px 1px 3px #bbb;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.ul-nav-button-icon {
+  margin-right: 10px;
+}
+
+.ul-nav-button-icon .icon {
+  font-size: 38px;
+  color: #999;
+}
+
+.ul-nav-button-title {
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.ul-nav-button-desc {
+  color: #666;
+  font-size: 14px;
+}
+
 .ul-nav-card-item {
   padding: 0 15px;
   border: 1px solid #ddd;
@@ -3214,38 +3255,6 @@
   margin-left: 45px;
 }
 
-.ul-nav-button-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-bottom: 10px;
-  border-radius: 8px;
-  padding: 10px;
-  box-shadow: 0px 1px 3px #bbb;
-  background-color: #fff;
-  cursor: pointer;
-}
-
-.ul-nav-button-icon {
-  margin-right: 10px;
-}
-
-.ul-nav-button-icon .icon {
-  font-size: 38px;
-  color: #999;
-}
-
-.ul-nav-button-title {
-  color: #333;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.ul-nav-button-desc {
-  color: #666;
-  font-size: 14px;
-}
-
 .ul-timeline-rowstyle {
   display: flex;
   flex-wrap: nowrap;

source/components/_index.scss

@@ -45,6 +45,7 @@
 @import './list/ul-site-group/index';
 @import './logo/ul-logo/index';
 @import './nav/ul-nav-block/index';
+@import './nav/ul-nav-button/index';
 @import './nav/ul-nav-card/index';
 @import './nav/ul-nav-easy/index';
 @import './nav/ul-nav-grid/index';

source/components/nav/ul-nav-button/_index.env

@@ -0,0 +1,6 @@
+title=操作导航
+padding=0
+margin=0
+gray=0
+mobile=0
+inner_margin=0

source/components/nav/ul-nav-button/_index.html

@@ -0,0 +1,29 @@
+<div class="ul-nav-button">
+    <div class="ul-nav-button-item">
+        <div class="ul-nav-button-icon">
+            <i class="icon layui-icon layui-icon-add-circle"></i>
+        </div>
+        <div class="ul-nav-button-info">
+            <div class="ul-nav-button-title">
+                发布公告
+            </div>
+            <div class="ul-nav-button-desc">
+                发布文字/图片和视频.
+            </div>
+        </div>
+    </div>
+
+    <div class="ul-nav-button-item">
+        <div class="ul-nav-button-icon">
+            <i class="icon layui-icon layui-icon-about"></i>
+        </div>
+        <div class="ul-nav-button-info">
+            <div class="ul-nav-button-title">
+                关于
+            </div>
+            <div class="ul-nav-button-desc">
+                查看详细系统信息
+            </div>
+        </div>
+    </div>
+</div>

source/components/nav/ul-nav-button/_index.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+
+];

source/components/nav/ul-nav-button/_index.scss

@@ -0,0 +1,34 @@
+
+
+.ul-nav-button-item {
+    display         : flex;
+    align-items     : center;
+    justify-content : flex-start;
+    margin-bottom   : 10px;
+    border-radius   : 8px;
+    padding         : 10px;
+    box-shadow      : 0px 1px 3px #bbb;
+    background-color: #fff;
+    cursor          : pointer;
+}
+
+.ul-nav-button-icon {
+    margin-right: 10px;
+}
+
+.ul-nav-button-icon .icon {
+    font-size: 38px;
+    color    : #999;
+}
+
+.ul-nav-button-title {
+    color      : #333;
+    font-size  : 16px;
+    font-weight: 600;
+}
+
+.ul-nav-button-desc {
+    color    : #666;
+    font-size: 14px;
+}
+

source/components/nav/ul-nav-header/_index.html

@@ -2,12 +2,8 @@
     <div class="ul-nav-header">
         <div class="ul-nav-header-main">
 
-            <div class="ul-nav-header-left">
+            <div class="ul-nav-header-left ul-demo-img-logo" style="height: 60px;width: 60px;">
-                <img
+
-                    style="height: 60px"
-                    src="{$site_logo_src}"
-                    alt=""
-                >
             </div>
             <div class="ul-nav-header-right">
                 <div class="ul-nav-header-item">
@@ -30,12 +26,8 @@
     <div class="ul-nav-header ul-nav-header-red">
         <div class="ul-nav-header-main">
 
-            <div class="ul-nav-header-left">
+            <div class="ul-nav-header-left ul-demo-img-logo" style="height: 60px;width: 60px;">
-                <img
+
-                    style="height: 60px"
-                    src="{$site_logo_src}"
-                    alt=""
-                >
             </div>
             <div class="ul-nav-header-right">
                 <div class="ul-nav-header-item">
@@ -58,12 +50,8 @@
     <div class="ul-nav-header ul-nav-header-primary">
         <div class="ul-nav-header-main">
 
-            <div class="ul-nav-header-left">
+            <div class="ul-nav-header-left ul-demo-img-logo" style="height: 60px;width: 60px;">
-                <img
+
-                    style="height: 80px"
-                    src="{$site_logo_src}"
-                    alt=""
-                >
             </div>
             <div class="ul-nav-header-right">
                 <div class="ul-nav-header-item">

source/scss/_common.scss

@@ -80,6 +80,15 @@
     border-radius: 100%;
   }
 }
+.ul-demo-img-logo {
+  background-image: url("/cdn/img/ulthon_logo_108.png");
+  background-size: cover;
+  background-position: center;
+
+  &.circle {
+    border-radius: 100%;
+  }
+}
 
 .ul-demo-mobile-page {
   width: 360px;

source/scss/layui-ul.scss

@@ -270,40 +270,6 @@
 
 }
 
-
-.ul-nav-button-item {
-    display         : flex;
-    align-items     : center;
-    justify-content : flex-start;
-    margin-bottom   : 10px;
-    border-radius   : 8px;
-    padding         : 10px;
-    box-shadow      : 0px 1px 3px #bbb;
-    background-color: #fff;
-    cursor          : pointer;
-}
-
-.ul-nav-button-icon {
-    margin-right: 10px;
-}
-
-.ul-nav-button-icon .icon {
-    font-size: 38px;
-    color    : #999;
-}
-
-.ul-nav-button-title {
-    color      : #333;
-    font-size  : 16px;
-    font-weight: 600;
-}
-
-.ul-nav-button-desc {
-    color    : #666;
-    font-size: 14px;
-}
-
-
 .ul-timeline-rowstyle {
     display   : flex;
     flex-wrap : nowrap;