v-grid-box>Grid，

.eslintrc.js

@@ -15,9 +15,9 @@ module.exports = {
     'vue/max-attributes-per-line': [
       2,
       {
-        'singleline': 5,
+        'singleline': 12,
         'multiline': {
-          'max': 1,
+          'max': 13,
           'allowFirstLine': false
         }
       }

src/components/Common/Layout/Flex.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :style="wrapperStyle">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keyMaps: {
+        fd: 'flexDirection',
+        ai: 'alignItems',
+        jc: 'justifyContent',
+        fw: 'flexWrap',
+      },
+      valueMaps: {
+        rr: 'row-reverse',
+        co: 'column',
+        cr: 'column-reverse',
+        c: 'center',
+        fs: 'flex-start',
+        fe: 'flex-end',
+        sb: 'space-between',
+        sa: 'space-around',
+      },
+    }
+  },
+  computed: {
+    wrapperStyle() {
+      const style = {
+        display: 'flex',
+      }
+      for (const key in this.$attrs) {
+        style[this.keyMaps[key] || key] = this.valueMaps[this.$attrs[key]] || this.$attrs[key]
+      }
+      return style
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped></style>

src/components/Common/Layout/Grid.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :style="wrapperStyle">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    columns: { type: Array, default: () => [1] },
+    rows: { type: Array, default: () => [1] },
+    gap: { type: String, default: '20px' },
+  },
+  computed: {
+    wrapperStyle() {
+      const [columnGap, rowGap = columnGap] = this.gap.split(' ')
+      return {
+        display: 'grid',
+        gridTemplateColumns: this.calcStyle(this.columns, columnGap),
+        gridTemplateRows: this.calcStyle(this.rows, rowGap),
+        gridGap: `${columnGap} ${rowGap}`,
+      }
+    },
+  },
+  methods: {
+    calcStyle(list, gap) {
+      if (!(list instanceof Array) || list.length === 0) return ''
+      const total = list.reduce((cur, c, i) => (typeof c === 'number' ? cur + c : cur), 0)
+      const baseColumn = list.reduce(
+        (cur, c, i) => (typeof c === 'string' ? cur + ` - ${c}` : cur),
+        `100% - ${gap} * ${list.length - 1}`
+      )
+      return list
+        .map((c) => {
+          return typeof c === 'number' ? `calc((${baseColumn}) * ${c} / ${total})` : c
+        })
+        .join(' ')
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped></style>

src/components/Common/register.js

@@ -1,4 +1,6 @@
 import ModuleWrapper from './Layout/ModuleWrapper.vue'
+import Flex from './Layout/Flex.vue'
+import Grid from './Layout/Grid.vue'
 
 import AntOriginSelect from './Form/AntOriginSelect.vue'
 import AntOriginTreeSelect from './Form/AntOriginTreeSelect.vue'
@@ -6,7 +8,6 @@ import DurationPicker from './Form/DurationPicker.vue'
 
 import WangEditor from './WangEditor/Index.vue'
 
-import GridBox from './Directives/GridBox'
 import Loading from './Directives/Loading'
 
 import MyCesium from './Cesium/index'
@@ -14,6 +15,8 @@ import MyCesium from './Cesium/index'
 export default {
   install(Vue) {
     Vue.component('ModuleWrapper', ModuleWrapper)
+    Vue.component('Flex', Flex)
+    Vue.component('Grid', Grid)
 
     Vue.component('AntOriginSelect', AntOriginSelect)
     Vue.component('AntOriginTreeSelect', AntOriginTreeSelect)
@@ -21,7 +24,6 @@ export default {
 
     Vue.component('WangEditor', WangEditor)
 
-    Vue.directive('grid-box', GridBox)
     Vue.directive('loading', Loading)
 
     window.MyCesium = MyCesium

src/views/simulationScene/centralControl/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="central-control-page" v-grid-box="{ columns: [1, 1], rows: ['331px', 1], gap: '20px' }">
+  <Grid class="central-control-page" :columns="[1, 1]" :rows="['331px', 1]">
     <ModuleWrapper title="系统模块" style="grid-column: 1 / 3">
-      <div class="normal" v-grid-box="{ columns: [1, 1, 1, 1, 1] }">
+      <Grid class="normal" :columns="[1, 1, 1, 1, 1]">
         <div
           v-for="block in systemModules"
           :key="block.moduleCode"
@@ -13,11 +13,11 @@
             {{ systemStatusDesc[block.moduleStatus] }}
           </div>
         </div>
-      </div>
+      </Grid>
     </ModuleWrapper>
     <ModuleWrapper v-if="!loadedScenario" title="全部想定" style="grid-column: 1 / 3">
       <div class="normal flex-c ai-c" v-loading="loading">
-        <div class="scenario-wrapper" v-grid-box="{ columns: [1, 1, 1, 1, 1], rows: [1, 1] }">
+        <Grid class="scenario-wrapper" :columns="[1, 1, 1, 1, 1]" :rows="[1, 1]">
           <div v-for="item in scenarioList" :key="item.id" class="scenario-item">
             <img
               class="scenario-image"
@@ -33,7 +33,7 @@
               <a-icon type="reload" />
             </div>
           </div>
-        </div>
+        </Grid>
         <a-pagination
           v-model="pagination.current"
           :pageSize.sync="pagination.pageSize"
@@ -149,7 +149,7 @@
         </div>
       </div>
     </ModuleWrapper>
-  </div>
+  </Grid>
 </template>
 
 <script>

src/views/simulationScene/database/bzhjsjk.vue

@@ -1,6 +1,6 @@
 <template>
   <page-header-wrapper>
-    <div v-grid-box="{ columns: ['400px', 1] }">
+    <Grid :columns="['400px', 1]">
       <a-card :bordered="false">
         <a-list :loading="listLoading" item-layout="horizontal" :data-source="scenarioList">
           <a-list-item slot="renderItem" slot-scope="item" @click="handleClickScenario(item)">
@@ -64,7 +64,7 @@
           </span>
         </a-table>
       </a-card>
-    </div>
+    </Grid>
     <h-modal
       :title="AEModal.title"
       :width="640"

src/views/simulationScene/database/bzllsjk.vue

@@ -1,6 +1,6 @@
 <template>
   <page-header-wrapper>
-    <div v-grid-box="{ columns: ['400px', 1] }">
+    <Grid :columns="['400px', 1]">
       <a-card :bordered="false">
         <a-tree :treeData="zzTree" :selectedKeys.sync="selectedKeys" @select="getList()"> </a-tree>
       </a-card>
@@ -50,7 +50,7 @@
           </span>
         </a-table>
       </a-card>
-    </div>
+    </Grid>
     <h-modal
       :title="AEModal.title"
       :width="640"

src/views/simulationScene/database/fasjk.vue

@@ -1,6 +1,6 @@
 <template>
   <page-header-wrapper>
-    <div v-grid-box="{ columns: ['400px', 1] }">
+    <Grid :columns="['400px', 1]">
       <a-card :bordered="false">
         <a-list :loading="listLoading" item-layout="horizontal" :data-source="scenarioList">
           <a-list-item slot="renderItem" slot-scope="item" @click="handleClickScenario(item)">
@@ -56,7 +56,7 @@
           </span> -->
         </a-table>
       </a-card>
-    </div>
+    </Grid>
     <h-modal
       :title="AEModal.title"
       :width="640"

src/views/simulationScene/database/index.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="database-page" v-grid-box="{ rows: [1, 1] }">
+  <Grid class="database-page" :rows="[1, 1]">
     <ModuleWrapper title="保障实体类数据库">
-      <div class="normal bzstlsjk" v-grid-box="{ columns: [1, 1, 1] }">
+      <Grid class="normal bzstlsjk" :columns="[1, 1, 1]">
         <div v-for="(item, index) in bzstlsjk" :key="index" class="sjk-item" @click="$router.push(item.path)">
           <img :src="item.image" alt="" />
           <div class="title">{{ item.title }}</div>
         </div>
-      </div>
+      </Grid>
     </ModuleWrapper>
     <ModuleWrapper title="业务应用类数据库">
-      <div class="normal ywyylsjk" v-grid-box="{ columns: [1, 1, 1, 1, 1] }">
+      <Grid class="normal ywyylsjk" :columns="[1, 1, 1, 1, 1]">
         <div v-for="(item, index) in ywyylsjk" :key="index" class="sjk-item" @click="$router.push(item.path)">
           <img :src="item.image" alt="" />
           <div class="title">{{ item.title }}</div>
         </div>
-      </div>
+      </Grid>
     </ModuleWrapper>
-  </div>
+  </Grid>
 </template>
 
 <script>

src/views/simulationScene/database/jcsjk.vue

@@ -1,6 +1,6 @@
 <template>
   <page-header-wrapper>
-    <div v-grid-box="{ columns: ['400px', 1] }">
+    <Grid :columns="['400px', 1]">
       <a-card :bordered="false">
         <a-list :loading="listLoading" item-layout="horizontal" :data-source="scenarioList">
           <a-list-item slot="renderItem" slot-scope="item" @click="handleClickScenario(item)">
@@ -56,7 +56,7 @@
           </span> -->
         </a-table>
       </a-card>
-    </div>
+    </Grid>
     <h-modal
       :title="AEModal.title"
       :width="640"

src/views/simulationScene/database/zzllsjk.vue

@@ -1,6 +1,6 @@
 <template>
   <page-header-wrapper>
-    <div v-grid-box="{ columns: ['400px', 1] }">
+    <Grid :columns="['400px', 1]">
       <a-card :bordered="false">
         <a-tree :treeData="zzTree" :selectedKeys.sync="selectedKeys" @select="getList()"> </a-tree>
       </a-card>
@@ -50,7 +50,7 @@
           </span>
         </a-table>
       </a-card>
-    </div>
+    </Grid>
     <h-modal
       :title="AEModal.title"
       :width="640"

src/views/simulationScene/sceneEditing/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scene-editing-page" v-grid-box="{ columns: ['320px', 1, '320px'], rows: [45, 30, 25], gap: '0px' }">
+  <Grid class="scene-editing-page" :columns="['320px', 1, '320px']" :rows="[45, 30, 25]" gap="0px">
     <ModuleWrapper title="作战/保障力量" style="grid-column: 1 / 2; grid-row: 1 / 2">
       <div class="normal" style="padding: 5px; overflow-y: auto">
         <a-tree
@@ -281,7 +281,7 @@
         </a-col>
       </a-row>
     </a-modal>
-  </div>
+  </Grid>
 </template>
 
 <script>

src/views/simulationScene/simulationModel/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="simulation-model-page" v-grid-box="{ columns: ['320px', 1, '320px'], rows: [45, 15, 40], gap: '0px' }">
+  <Grid class="simulation-model-page" :columns="['320px', 1, '320px']" :rows="[45, 15, 40]" gap="0px">
     <ModuleWrapper title="作战/保障力量" style="grid-column: 1 / 2; grid-row: 1 / 2">
       <div class="normal" style="padding: 5px">
         <a-tree :treeData="zb.zbTreeData"> </a-tree>
@@ -45,7 +45,7 @@
         </div>
       </div>
     </ModuleWrapper>
-  </div>
+  </Grid>
 </template>
 
 <script>

src/views/simulationScene/systemSelect/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="system-select-page" v-grid-box="{ columns: [1, 1, 1, 1, 1, 1], rows: [1, 1], gap: '40px' }">
+  <Grid class="system-select-page" :columns="[1, 1, 1, 1, 1, 1]" :rows="[1, 1]" gap="40px">
     <div
       v-for="(block, index) in systemModules"
       :key="block.moduleCode"
@@ -13,7 +13,7 @@
         {{ systemStatusDesc[block.moduleStatus] }}
       </div>
     </div>
-  </div>
+  </Grid>
 </template>
 
 <script>

src/views/user/Login.vue

@@ -108,8 +108,9 @@
                 class="login-button"
                 :loading="state.loginBtn"
                 :disabled="state.loginBtn"
-                >{{ $t('user.login.login') }}</a-button
               >
+                {{ $t('user.login.login') }}
+              </a-button>
             </a-form-item>
           </a-form>