Startseite Erkunden
原型工具、Api管理、Bug管理等 更多工具
 团队协作  快速原型  自动标注  Bug管理  Api管理
Anmelden
zhuliang
/
AdminLTE
Mirror von https://github.com/almasaeed2010/AdminLTE.git
Beobachten 1
Favorit hinzufügen 0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

added info-box

Daniel vor 3 Jahren
Ursprung
a57567bf09
Commit
a82603dc37
7 geänderte Dateien mit 363 neuen und 33 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 7 18
      src/index.html
  2. 107 0
      src/index2.html
  3. 81 0
      src/pages/forms/general.html
  4. 15 0
      src/partials/dashboard/_content-header.html
  5. 7 15
      src/partials/dashboard/_sidenav.html
  6. 145 0
      src/scss/_info-box.scss
  7. 1 0
      src/scss/parts/_extra-components.scss

+ 7 - 18
src/index.html
Datei anzeigen 

@@ -5,11 +5,10 @@
 
   <head>
 
     @@include('./_head.html', {
 
       "path": ".",
 
-      "title": "AdminLTE - Free Bootstrap 5 Admin Dashboard"
 
+      "title": "AdminLTE 4 | Dashboard"
 
     })
 
-    <!-- <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> -->
 
+    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 
   </head>
 
-
 
   <body class="layout-fixed">
 
     <div class="wrapper">
 
       @@include('./dashboard/_topbar.html', {
 
@@ -17,25 +16,15 @@
 
       })
 
 
       @@include('./dashboard/_sidenav.html', {
 
+        "mainPage": "dashboard",
 
+        "page": "index",
 
         "path": "."
 
       })
 
       <!-- Main content -->
 
       <div class="content-wrapper">
 
-        <div class="content-header">
 
-          <div class="container-fluid">
 
-            <div class="row mb-2">
 
-              <div class="col-sm-6">
 
-                <div class="fs-3">Dashboard</div>
 
-              </div>
 
-              <div class="col-sm-6">
 
-                <ol class="breadcrumb float-sm-end">
 
-                  <li class="breadcrumb-item"><a href="#">Home</a></li>
 
-                  <li class="breadcrumb-item active" aria-current="page">Library</li>
 
-                </ol>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
+        @@include('./dashboard/_content-header.html', {
 
+          "header_name": "Dashboard"
 
+        })
 
         <div class="content">
 
           <div class="container-fluid">
 
             <!-- Small boxes (Stat box) -->

+ 107 - 0
src/index2.html
Datei anzeigen 

@@ -0,0 +1,107 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<!-- For RTL verison -->
 
+<!-- <html lang="en" dir="rtl"> -->
 
+  <head>
 
+    @@include('./_head.html', {
 
+      "path": ".",
 
+      "title": "AdminLTE 4 | Dashboard 2"
 
+    })
 
+  </head>
 
+  <body class="layout-fixed">
 
+    <div class="wrapper">
 
+      @@include('./dashboard/_topbar.html', {
 
+        "path": "."
 
+      })
 
+
 
+      @@include('./dashboard/_sidenav.html', {
 
+        "mainPage": "dashboard",
 
+        "page": "index2",
 
+        "path": "."
 
+      })
 
+      <!-- Main content -->
 
+      <div class="content-wrapper">
 
+        @@include('./dashboard/_content-header.html', {
 
+          "header_name": "Dashboard v2"
 
+        })
 
+        <div class="content">
 
+          <div class="container-fluid">
 
+            <!-- Info boxes -->
 
+            <div class="row">
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box">
 
+                  <span class="info-box-icon bg-info text-light"><i class="fas fa-cog"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">CPU Traffic</span>
 
+                    <span class="info-box-number">
 
+                      10
 
+                      <small>%</small>
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box mb-3">
 
+                  <span class="info-box-icon bg-danger text-light"><i class="fas fa-thumbs-up"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Likes</span>
 
+                    <span class="info-box-number">41,410</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+
 
+              <!-- fix for small devices only -->
 
+              <!-- <div class="clearfix hidden-md-up"></div> -->
 
+
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box mb-3">
 
+                  <span class="info-box-icon bg-success text-light"><i class="fas fa-shopping-cart"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Sales</span>
 
+                    <span class="info-box-number">760</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box mb-3">
 
+                  <span class="info-box-icon bg-warning text-light"><i class="fas fa-users"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">New Members</span>
 
+                    <span class="info-box-number">2,000</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+            </div>
 
+            <!-- /.row -->
 
+          </div><!-- /.container-fluid -->
 
+        </div>
 
+      </div>
 
+      <!-- /.content-wrapper -->
 
+
 
+      @@include('./dashboard/_footer.html', {
 
+        "path": "."
 
+      })
 
+    </div>
 
+    <!--  ./wrapper -->
 
+
 
+    @@include('./_scripts.html', {
 
+      "path": "."
 
+    })
 
+  </body>
 
+</html>

+ 81 - 0
src/pages/forms/general.html
Datei anzeigen 

@@ -0,0 +1,81 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<!-- For RTL verison -->
 
+<!-- <html lang="en" dir="rtl"> -->
 
+  <head>
 
+    @@include('./_head.html', {
 
+      "path": "../../",
 
+      "title": "AdminLTE 4 | Dashboard 2"
 
+    })
 
+  </head>
 
+  <body class="layout-fixed">
 
+    <div class="wrapper">
 
+      @@include('./dashboard/_topbar.html', {
 
+        "path": "../../"
 
+      })
 
+
 
+      @@include('./dashboard/_sidenav.html', {
 
+        "mainPage": "forms",
 
+        "page": "general",
 
+        "path": "../../"
 
+      })
 
+      <!-- Main content -->
 
+      <div class="content-wrapper">
 
+        @@include('./dashboard/_content-header.html', {
 
+          "header_name": "General Form"
 
+        })
 
+        <!-- Main content -->
 
+        <div class="content">
 
+          <div class="container-fluid">
 
+            <div class="row g-4">
 
+              <!-- left column -->
 
+              <div class="col-md-6">
 
+                <!-- general form elements -->
 
+                <div class="card">
 
+                  <div class="card-header">Quick Example</div>
 
+                  <form>
 
+                    <div class="card-body">
 
+                      <div class="mb-3">
 
+                        <label for="exampleInputEmail1" class="form-label">Email address</label>
 
+                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
 
+                        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
 
+                      </div>
 
+                      <div class="mb-3">
 
+                        <label for="exampleInputPassword1" class="form-label">Password</label>
 
+                        <input type="password" class="form-control" id="exampleInputPassword1">
 
+                      </div>
 
+                      <div class="input-group mb-3">
 
+                        <input type="file" class="form-control" id="inputGroupFile02">
 
+                        <label class="input-group-text" for="inputGroupFile02">Upload</label>
 
+                      </div>
 
+                      <div class="mb-3 form-check">
 
+                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
 
+                        <label class="form-check-label" for="exampleCheck1">Check me out</label>
 
+                      </div>
 
+                    </div>
 
+                    <div class="card-footer">
 
+                      <button type="submit" class="btn btn-primary">Submit</button>
 
+                    </div>
 
+                  </form>
 
+                </div>
 
+                <!-- /.card -->
 
+              </div>
 
+            </div>
 
+            <!-- /.row -->
 
+          </div><!-- /.container-fluid -->
 
+        </div>
 
+        <!-- /.content -->
 
+      </div>
 
+      <!-- /.content-wrapper -->
 
+
 
+      @@include('./dashboard/_footer.html', {
 
+        "path": "../../"
 
+      })
 
+    </div>
 
+    <!--  ./wrapper -->
 
+
 
+    @@include('./_scripts.html', {
 
+      "path": "../../"
 
+    })
 
+  </body>
 
+</html>

+ 15 - 0
src/partials/dashboard/_content-header.html
Datei anzeigen 

@@ -0,0 +1,15 @@
 
+<div class="content-header">
 
+  <div class="container-fluid">
 
+    <div class="row mb-2">
 
+      <div class="col-sm-6">
 
+        <div class="fs-3">@@header_name</div>
 
+      </div>
 
+      <div class="col-sm-6">
 
+        <ol class="breadcrumb float-sm-end">
 
+          <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+          <li class="breadcrumb-item active" aria-current="page">@@header_name</li>
 
+        </ol>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>

+ 7 - 15
src/partials/dashboard/_sidenav.html
Datei anzeigen 

@@ -12,8 +12,8 @@
 
     <nav class="mt-2">
 
       <!-- Sidebar Menu -->
 
       <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
 
-        <li class="nav-item menu-open">
 
-          <a href="#" class="nav-link active">
 
+        <li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
 
+          <a href="#" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
 
             <i class="nav-icon fas fa-circle"></i>
 
             <p>
 
               Dashboard
 
@@ -22,7 +22,7 @@
 
           </a>
 
           <ul class="nav nav-treeview">
 
             <li class="nav-item">
 
-              <a href="#" class="nav-link active">
 
+              <a href="@@path/index.html" class="nav-link @@if (context.page === 'index') {active}">
 
                 <i class="nav-icon far fa-circle"></i>
 
                 <p>
 
                   Dashboard v1
 
@@ -30,7 +30,7 @@
 
               </a>
 
             </li>
 
             <li class="nav-item">
 
-              <a href="#" class="nav-link">
 
+              <a href="@@path/index2.html" class="nav-link @@if (context.page === 'index2') {active}">
 
                 <i class="nav-icon far fa-circle"></i>
 
                 <p>
 
                   Dashboard v2
 
@@ -39,8 +39,8 @@
 
             </li>
 
           </ul>
 
         </li>
 
-        <li class="nav-item menu-open">
 
-          <a href="#" class="nav-link">
 
+        <li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
 
+          <a href="#" class="nav-link @@if (context.mainPage === 'forms') {active}">
 
             <i class="nav-icon fas fa-circle"></i>
 
             <p>
 
               Forms
 
@@ -49,21 +49,13 @@
 
           </a>
 
           <ul class="nav nav-treeview">
 
             <li class="nav-item">
 
-              <a href="@@path/pages/forms/general.html" class="nav-link">
 
+              <a href="@@path/pages/forms/general.html" class="nav-link @@if (context.page === 'general') {active}">
 
                 <i class="nav-icon far fa-circle"></i>
 
                 <p>
 
                   General Elements
 
                 </p>
 
               </a>
 
             </li>
 
-            <li class="nav-item">
 
-              <a href="#" class="nav-link">
 
-                <i class="nav-icon far fa-circle"></i>
 
-                <p>
 
-                  Level 2
 
-                </p>
 
-              </a>
 
-            </li>
 
           </ul>
 
         </li>

+ 145 - 0
src/scss/_info-box.scss
Datei anzeigen 

@@ -0,0 +1,145 @@
 
+//
 
+// Component: Info Box
 
+//
 
+
 
+.info-box {
 
+  @include box-shadow($card-shadow);
 
+  @include border-radius($border-radius);
 
+
 
+  background-color: $white;
 
+  display: flex;
 
+  margin-bottom: map-get($spacers, 3);
 
+  min-height: 80px;
 
+  padding: .5rem;
 
+  position: relative;
 
+  width: 100%;
 
+
 
+  .progress {
 
+    background-color: rgba($black, .125);
 
+    height: 2px;
 
+    margin: 5px 0;
 
+
 
+    .progress-bar {
 
+      background-color: $white;
 
+    }
 
+  }
 
+
 
+  .info-box-icon {
 
+    @if $enable-rounded {
 
+      border-radius: $border-radius;
 
+    }
 
+
 
+    align-items: center;
 
+    display: flex;
 
+    font-size: 1.875rem;
 
+    justify-content: center;
 
+    text-align: center;
 
+    width: 70px;
 
+
 
+    > img {
 
+      max-width: 100%;
 
+    }
 
+  }
 
+
 
+  .info-box-content {
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: center;
 
+    line-height: 1.8;
 
+    flex: 1;
 
+    padding: 0 10px;
 
+  }
 
+
 
+  .info-box-number {
 
+    display: block;
 
+    margin-top: .25rem;
 
+    font-weight: $font-weight-bold;
 
+  }
 
+
 
+  .progress-description,
 
+  .info-box-text {
 
+    display: block;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    white-space: nowrap;
 
+  }
 
+
 
+  @each $name, $color in $theme-colors {
 
+    .info-box {
 
+      .bg-#{$name} {
 
+        color: color-contrast($color);
 
+
 
+        .progress-bar {
 
+          background-color: color-contrast($color);
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .info-box-more {
 
+    display: block;
 
+  }
 
+
 
+  .progress-description {
 
+    margin: 0;
 
+
 
+  }
 
+
 
+  @include media-breakpoint-up(md) {
 
+    .col-xl-2 &,
 
+    .col-lg-2 &,
 
+    .col-md-2 & {
 
+      .progress-description {
 
+        display: none;
 
+      }
 
+    }
 
+
 
+    .col-xl-3 &,
 
+    .col-lg-3 &,
 
+    .col-md-3 & {
 
+      .progress-description {
 
+        display: none;
 
+      }
 
+    }
 
+  }
 
+
 
+  @include media-breakpoint-up(lg) {
 
+    .col-xl-2 &,
 
+    .col-lg-2 &,
 
+    .col-md-2 & {
 
+      .progress-description {
 
+        @include font-size(.75rem);
 
+        display: block;
 
+      }
 
+    }
 
+
 
+    .col-xl-3 &,
 
+    .col-lg-3 &,
 
+    .col-md-3 & {
 
+      .progress-description {
 
+        @include font-size(.75rem);
 
+        display: block;
 
+      }
 
+    }
 
+  }
 
+
 
+  @include media-breakpoint-up(xl) {
 
+    .col-xl-2 &,
 
+    .col-lg-2 &,
 
+    .col-md-2 & {
 
+      .progress-description {
 
+        @include font-size(1rem);
 
+        display: block;
 
+      }
 
+    }
 
+
 
+    .col-xl-3 &,
 
+    .col-lg-3 &,
 
+    .col-md-3 & {
 
+      .progress-description {
 
+        @include font-size(1rem);
 
+        display: block;
 
+      }
 
+    }
 
+  }
 
+}

+ 1 - 0
src/scss/parts/_extra-components.scss
Datei anzeigen 

@@ -3,3 +3,4 @@
 
 //
 
 
 @import "../small-box";
 
+@import "../info-box";