Forráskód Böngészése

新增卡片列表demo

RuoYi 5 éve
szülő
commit
08ca506cfb

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

@@ -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

@@ -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

@@ -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>