前端模板布局优化

class="head-container" div 范围过大

eladmin-generator/src/main/resources/template/front/index.ftl

@@ -31,78 +31,78 @@
     </#if>
       <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
       <crudOperation :permission="permission" />
-      <!--表单组件-->
-      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
-        <el-form ref="form" :model="form" <#if isNotNullColumns??>:rules="rules"</#if> size="small" label-width="80px">
-    <#if columns??>
-      <#list columns as column>
-        <#if column.formShow>
-          <el-form-item label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>"<#if column.istNotNull> prop="${column.changeColumnName}"</#if>>
-            <#if column.formType = 'Input'>
-            <el-input v-model="form.${column.changeColumnName}" style="width: 370px;" />
-            <#elseif column.formType = 'Textarea'>
-            <el-input v-model="form.${column.changeColumnName}" :rows="3" type="textarea" style="width: 370px;" />
-            <#elseif column.formType = 'Radio'>
-              <#if (column.dictName)?? && (column.dictName)!="">
-            <el-radio v-model="form.${column.changeColumnName}" v-for="item in dict.${column.dictName}" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
-              <#else>
-                未设置字典，请手动设置 Radio
-              </#if>
-            <#elseif column.formType = 'Select'>
-              <#if (column.dictName)?? && (column.dictName)!="">
-            <el-select v-model="form.${column.changeColumnName}" filterable placeholder="请选择">
-              <el-option
-                v-for="item in dict.${column.dictName}"
-                :key="item.id"
-                :label="item.label"
-                :value="item.value" />
-            </el-select>
-              <#else>
-            未设置字典，请手动设置 Select
-              </#if>
-            <#else>
-            <el-date-picker v-model="form.${column.changeColumnName}" type="datetime" style="width: 370px;" />
-            </#if>
-          </el-form-item>
-        </#if>
-      </#list>
-    </#if>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="text" @click="crud.cancelCU">取消</el-button>
-          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
-        </div>
-      </el-dialog>
-      <!--表格渲染-->
-      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-        <el-table-column type="selection" width="55" />
-        <#if columns??>
-            <#list columns as column>
-            <#if column.columnShow>
-          <#if (column.dictName)?? && (column.dictName)!="">
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
-          <template slot-scope="scope">
-            {{ dict.label.${column.dictName}[scope.row.${column.changeColumnName}] }}
-          </template>
-        </el-table-column>
-                <#else>
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" />
-                </#if>
-            </#if>
-            </#list>
-        </#if>
-        <el-table-column v-if="checkPer(['admin','${changeClassName}:edit','${changeClassName}:del'])" label="操作" width="150px" align="center">
-          <template slot-scope="scope">
-            <udOperation
-              :data="scope.row"
-              :permission="permission"
-            />
-          </template>
-        </el-table-column>
-      </el-table>
-      <!--分页组件-->
-      <pagination />
     </div>
+    <!--表单组件-->
+    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
+      <el-form ref="form" :model="form" <#if isNotNullColumns??>:rules="rules"</#if> size="small" label-width="80px">
+  <#if columns??>
+    <#list columns as column>
+      <#if column.formShow>
+        <el-form-item label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>"<#if column.istNotNull> prop="${column.changeColumnName}"</#if>>
+          <#if column.formType = 'Input'>
+          <el-input v-model="form.${column.changeColumnName}" style="width: 370px;" />
+          <#elseif column.formType = 'Textarea'>
+          <el-input v-model="form.${column.changeColumnName}" :rows="3" type="textarea" style="width: 370px;" />
+          <#elseif column.formType = 'Radio'>
+            <#if (column.dictName)?? && (column.dictName)!="">
+          <el-radio v-model="form.${column.changeColumnName}" v-for="item in dict.${column.dictName}" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
+            <#else>
+              未设置字典，请手动设置 Radio
+            </#if>
+          <#elseif column.formType = 'Select'>
+            <#if (column.dictName)?? && (column.dictName)!="">
+          <el-select v-model="form.${column.changeColumnName}" filterable placeholder="请选择">
+            <el-option
+              v-for="item in dict.${column.dictName}"
+              :key="item.id"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+            <#else>
+          未设置字典，请手动设置 Select
+            </#if>
+          <#else>
+          <el-date-picker v-model="form.${column.changeColumnName}" type="datetime" style="width: 370px;" />
+          </#if>
+        </el-form-item>
+      </#if>
+    </#list>
+  </#if>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="selection" width="55" />
+      <#if columns??>
+          <#list columns as column>
+          <#if column.columnShow>
+        <#if (column.dictName)?? && (column.dictName)!="">
+      <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
+        <template slot-scope="scope">
+          {{ dict.label.${column.dictName}[scope.row.${column.changeColumnName}] }}
+        </template>
+      </el-table-column>
+              <#else>
+      <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" />
+              </#if>
+          </#if>
+          </#list>
+      </#if>
+      <el-table-column v-if="checkPer(['admin','${changeClassName}:edit','${changeClassName}:del'])" label="操作" width="150px" align="center">
+        <template slot-scope="scope">
+          <udOperation
+            :data="scope.row"
+            :permission="permission"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <pagination />
   </div>
 </template>