布局修改

src/main/resources/templates/template.html

@@ -28,8 +28,8 @@
         }
 
         .t1 {
-            width: 18%;
-            margin-right: 10px;
+            /* width: 18%; */
+            /* margin-right: 10px; */
             -webkit-box-sizing:border-box; 
             -moz-box-sizing:border-box; 
             -ms-box-sizing:border-box; 
@@ -49,7 +49,7 @@
 
         .view {
 
-            width: 79%;
+            /* width: 79%; */
         }
 
         #timeType {
@@ -83,23 +83,27 @@
         <div class="logo"></div>
         <div class="name">KPI-Analyser</div>
     </div>
-<div class="all">
-    <div class="c t1">
-        <button type="button" class="layui-btn layui-btn-sm" onclick="addTemplate()">添加指标模板</button>
-        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteTemplate()">删除指标模板</button>
-        <div id="allArea"></div>
-        <div id="indicatorTemplate"></div>
-        <div id="add-template" style="display: none;">
-            <form class="layui-form" action="">
-                <div class="layui-form-item" style="margin-top: 20px">
-                    <label class="layui-form-label">模板名称</label>
-                    <div class="layui-input-block" style="width: 400px">
-                        <input id="templateName" type="text" name="templateName" required lay-verify="required"
-                               placeholder="请输入模板名称" autocomplete="off" class="layui-input">
-                    </div>
+<div class="all layui-row">
+    <div class=" t1 layui-col-md2 " >
+        <div class="c" style="width:90%">
+            <div class="grid-demo grid-demo-bg1">
+                <button type="button" class="layui-btn layui-btn-sm" onclick="addTemplate()">添加指标模板</button>
+                <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteTemplate()">删除指标模板</button>
+                <div id="allArea"></div>
+                <div id="indicatorTemplate"></div>
+                <div id="add-template" style="display: none;">
+                    <form class="layui-form" action="">
+                        <div class="layui-form-item" style="margin-top: 20px">
+                            <label class="layui-form-label">模板名称</label>
+                            <div class="layui-input-block" style="width: 400px">
+                                <input id="templateName" type="text" name="templateName" required lay-verify="required"
+                                       placeholder="请输入模板名称" autocomplete="off" class="layui-input">
+                            </div>
+                        </div>
+                    </form>
+                    <div id="allIndicator"></div>
                 </div>
-            </form>
-            <div id="allIndicator"></div>
+            </div>
         </div>
     </div>
     <!-- <div class="c t2">
@@ -112,40 +116,42 @@
                       style="border-width:1px;border-style: solid;border-color: #eee;"></textarea>
         </form>
     </div> -->
-    <div class="c view">
-        <div class="row layui-form row2">
-            <div style="width:100%;float: left;">
-                <div class="c1 label"> 粒度:</div>
-    
-                <div class="timeTypeDiv c1" style="width: 10%;">
-                    <select name="timeType" id="timeType">
-                        <option value="quater">15分钟</option>
-                        <option value="hour">小时</option>
-                        <option value="day">天</option>
-                        <!--<option value="week">星期</option>-->
-                        <!--<option value="month">月</option>-->
-                    </select>
-                </div>
-    
-                <div class="c1 label" style="margin-left: 120px;">时间:</div>
-                <input type="text" class="layui-input c1" style="width: 300px;" id="time1">
-                <button class="layui-btn btn c1" style="margin-left: 20px;" onclick="search()">查询</button>
-<!--                <button class="layui-btn btn c1" style="margin-left: 20px;" onclick="conditionSearch()">条件查询</button>-->
-            </div>
-        </br>
-            <div style="width:100%;float: left;">
-                <div class="column" id="searchType" style="width:auto;float: left;">
-                    <input type="radio" name="where" value="area" title="按地市查询" lay-filter="where" checked>
-                    <input type="radio" name="where" value="eci" title="按eci查询" lay-filter="where" >
+    <div class="c view layui-col-md10">
+        <div class="grid-demo">
+            <div class="row layui-form row2">
+                <div style="width:100%;float: left;">
+                    <div class="c1 label"> 粒度:</div>
+        
+                    <div class="timeTypeDiv c1" style="width: 10%;">
+                        <select name="timeType" id="timeType">
+                            <option value="quater">15分钟</option>
+                            <option value="hour">小时</option>
+                            <option value="day">天</option>
+                            <!--<option value="week">星期</option>-->
+                            <!--<option value="month">月</option>-->
+                        </select>
+                    </div>
+        
+                    <div class="c1 label" style="margin-left: 120px;">时间:</div>
+                    <input type="text" class="layui-input c1" style="width: 300px;" id="time1">
+                    <button class="layui-btn btn c1" style="margin-left: 20px;" onclick="search()">查询</button>
+    <!--                <button class="layui-btn btn c1" style="margin-left: 20px;" onclick="conditionSearch()">条件查询</button>-->
                 </div>
-                <div style="width:70%;float: left;">
-                    <input id="condition" class="layui-input" placeholder="如多个eci查询请用英文逗号隔开"
-                                style="border-width:1px;border-style: solid;border-color: #eee;"></input>
+            </br>
+                <div style="width:100%;float: left;">
+                    <div class="column" id="searchType" style="width:auto;float: left;">
+                        <input type="radio" name="where" value="area" title="按地市查询" lay-filter="where" checked>
+                        <input type="radio" name="where" value="eci" title="按eci查询" lay-filter="where" >
+                    </div>
+                    <div style="width:70%;float: left;">
+                        <input id="condition" class="layui-input" placeholder="如多个eci查询请用英文逗号隔开"
+                                    style="border-width:1px;border-style: solid;border-color: #eee;"></input>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div>
-            <table id="demo" lay-filter="test" style="width: 200px;"></table>
+            <div>
+                <table id="demo" lay-filter="test" style="width: 200px;"></table>
+            </div>
         </div>
     </div>
 </div>