增加单页应用的layui-admin

single/res/views/component/badge/index.html

@@ -0,0 +1,103 @@
+
+<title>徽章</title>
+
+<div class="layui-card layadmin-header">
+  <div class="layui-breadcrumb" lay-filter="breadcrumb">
+    <a lay-href="">主页</a>
+    <a><cite>组件</cite></a>
+    <a><cite>徽章</cite></a>
+  </div>
+</div>
+
+<style>
+/* 这段样式只是用于演示 */
+
+</style>
+
+<div class="layui-fluid">
+  <div class="layui-row layui-col-space15">
+    <div class="layui-col-md12">
+      <div class="layui-card">
+        <div class="layui-card-header">小徽章大家族</div>
+        <div class="layui-card-body">
+          
+          <br>小圆点：
+          
+          <span class="layui-badge-dot"></span>
+          <span class="layui-badge-dot layui-bg-orange"></span>
+          <span class="layui-badge-dot layui-bg-green"></span>
+          <span class="layui-badge-dot layui-bg-cyan"></span>
+          <span class="layui-badge-dot layui-bg-blue"></span>
+          <span class="layui-badge-dot layui-bg-black"></span>
+          <span class="layui-badge-dot layui-bg-gray"></span>
+          
+          <br><br>常规弧形徽章：
+          
+          <span class="layui-badge">6</span>
+          <span class="layui-badge">99</span>
+          <span class="layui-badge">61728</span>
+          <span class="layui-badge">赤</span>
+          <span class="layui-badge layui-bg-orange">橙</span>
+          <span class="layui-badge layui-bg-green">绿</span>
+          <span class="layui-badge layui-bg-cyan">青</span>
+          <span class="layui-badge layui-bg-blue">蓝</span>
+          <span class="layui-badge layui-bg-black">黑</span>
+          <span class="layui-badge layui-bg-gray">灰</span>
+          
+          <br><br>边框徽章：
+          
+          <span class="layui-badge-rim">6</span>
+          <span class="layui-badge-rim">Hot</span>
+          
+          <br><br>
+        
+        </div>
+      </div>
+    </div>
+    <div class="layui-col-md12">
+      <div class="layui-card">
+        <div class="layui-card-header">与其它元素的搭配</div>
+        <div class="layui-card-body">
+          
+          <br>
+          
+          <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
+          <button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
+           
+          <br><br>
+           
+          <ul class="layui-nav style=" text-align:="" right;"=""> &lt;-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 --&gt;
+            <li class="layui-nav-item">
+              <a href="">控制台<span class="layui-badge">9</span></a>
+            </li>
+            <li class="layui-nav-item">
+              <a href="">个人中心<span class="layui-badge-dot"></span></a>
+            </li>
+          </ul>
+          <br>
+           
+          <div class="layui-tab layui-tab-brief">
+            <ul class="layui-tab-title">
+              <li class="layui-this">网站设置</li>
+              <li>用户管理<span class="layui-badge-dot"></span></li>
+              <li>最新邮件<span class="layui-badge">99+</span></li>
+            </ul>
+            <div class="layui-tab-content"></div>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+layui.use(['admin'], function(){
+  var $ = layui.$
+  ,admin = layui.admin
+  ,element = layui.element
+  ,router = layui.router();
+
+  element.render();
+});
+</script>