Home Explore Help
Register Sign In
root
/
gs_bg
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

新增卡片列表demo

RuoYi 5 years ago
parent
b757c5b7b3
commit
08ca506cfb
3 changed files with 329 additions and 0 deletions
Split View Show Diff Stats
  1. 9 0
      ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoFormController.java
  2. 319 0
      ruoyi-admin/src/main/resources/templates/demo/form/cards.html
  3. 1 0
      ruoyi-admin/src/main/resources/templates/index.html

+ 9 - 0
ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoFormController.java
View File 

@@ -136,6 +136,15 @@ public class DemoFormController
 
         return prefix + "/basic";

     }

 

+    /**

+     * 卡片列表

+     */

+    @GetMapping("/cards")

+    public String cards()

+    {

+        return prefix + "/cards";

+    }

+

     /**

      * 搜索自动补全

      */

+ 319 - 0
ruoyi-admin/src/main/resources/templates/demo/form/cards.html
View File 

@@ -0,0 +1,319 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+<head>
 
+	<th:block th:include="include :: header('卡片列表')" />
 
+</head>
 
+<body class="gray-bg">
 
+    <div class="wrapper wrapper-content animated fadeInRight">
 
+        <div class="row">
 
+            <div class="col-sm-4">
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+                        <span class="label label-primary pull-right">NEW</span>
 
+                        <h5>IT-01 - 设计部</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">48%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 48%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                12
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                4个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;200,913 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+                        <h5>IT-04 - 市场部</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">32%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 32%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                24
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                3个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;190,325 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+                        <h5>IT-07 - 财务部</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">73%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 73%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                11
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                6个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;560,105 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="col-sm-4">
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+                        <h5>IT-02 - 开发部</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">61%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 61%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                43
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                1个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;705,913 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+                        <span class="label label-warning pull-right">截止</span>
 
+                        <h5>IT-05 - 管理层</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">14%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 14%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                8
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                7个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;40,200 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+                        <h5>IT-08 - 销售部</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">25%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 25%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                25
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                4个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;140,105 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="col-sm-4">
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+
 
+                        <h5>IT-02 - 销售部</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">82%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 82%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                68
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                2个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;701,400 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+                        <h5>IT-06 - 销售部</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">26%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 26%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                16
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                8个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;160,100 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+                <div class="ibox">
 
+                    <div class="ibox-title">
 
+                        <h5>IT-09 - 销售部</h5>
 
+                    </div>
 
+                    <div class="ibox-content">
 
+                        <h4>部门简介</h4>
 
+                        <p>
 
+                                                                           平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
 
+                        </p>
 
+                        <div>
 
+                            <span>当前项目进度：</span>
 
+                            <div class="stat-percent">18%</div>
 
+                            <div class="progress progress-mini">
 
+                                <div style="width: 18%;" class="progress-bar"></div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="row  m-t-sm">
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">项目</div>
 
+                                53
 
+                            </div>
 
+                            <div class="col-sm-4">
 
+                                <div class="font-bold">周期</div>
 
+                                9个月
 
+                            </div>
 
+                            <div class="col-sm-4 text-right">
 
+                                <div class="font-bold">预算</div>
 
+                                &yen;60,140 <i class="fa fa-level-up text-navy"></i>
 
+                            </div>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <th:block th:include="include :: footer" />
 
+</body>
 
+</html>

+ 1 - 0
ruoyi-admin/src/main/resources/templates/index.html
View File 

@@ -76,6 +76,7 @@
 
 								<li><a class="menuItem" th:href="@{/demo/form/grid}">栅格</a></li>

 								<li><a class="menuItem" th:href="@{/demo/form/select}">下拉框</a></li>

 								<li><a class="menuItem" th:href="@{/demo/form/basic}">基本表单</a></li>

+								<li><a class="menuItem" th:href="@{/demo/form/cards}">卡片列表</a></li>

 								<li><a class="menuItem" th:href="@{/demo/form/jasny}">功能扩展</a></li>

 								<li><a class="menuItem" th:href="@{/demo/form/sortable}">拖动排序</a></li>

 								<li><a class="menuItem" th:href="@{/demo/form/tabs_panels}">选项卡 & 面板</a></li>