perf: 优化详情中各种 box (#1582)

* perf: 优化移动到表单 * perf: 优化详情中各种 box Co-authored-by: ibuler <ibuler@qq.com>
2026-01-30 05:42:19 +00:00 · 2022-03-18 11:21:25 +08:00
parent 632dc064d9
commit 222eb4fcb0
41 changed files with 115 additions and 94 deletions
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -2,6 +2,7 @@
  <el-dialog
    :title="title"
    :top="top"
+    :width="iWidth"
    class="dialog"
    v-bind="$attrs"
    append-to-body
@@ -39,6 +40,10 @@ export default {
      type: String,
      default: '3vh'
    },
+    width: {
+      type: String,
+      default: '60%'
+    },
    showConfirm: {
      type: Boolean,
      default: true
@@ -58,6 +63,11 @@ export default {
    return {
    }
  },
+  computed: {
+    iWidth() {
+      return this.$store.getters.isMobile ? '80%' : this.width
+    }
+  },
  methods: {
    onCancel() {
      this.$emit('cancel')
--- a/src/components/ListTable/TableAction/ImportTable.vue
+++ b/src/components/ListTable/TableAction/ImportTable.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <el-row>
-      <el-col :span="8">
+      <el-col :md="8" :sm="24">
        <div class="tableFilter">
          <el-radio-group v-model="importStatusFilter" size="small">
            <el-radio-button label="all">{{ $t('common.Total') }}</el-radio-button>
@@ -11,7 +11,7 @@
          </el-radio-group>
        </div>
      </el-col>
-      <el-col :span="8" style="text-align: center">
+      <el-col :md="8" :sm="24" style="text-align: center">
        <span class="summary-item summary-total"> {{ $t('common.Total') }}: {{ totalCount }}</span>
        <span class="summary-item summary-success"> {{ $t('common.Success') }}: {{ successCount }}</span>
        <span class="summary-item summary-failed"> {{ $t('common.Failed') }}: {{ failedCount }}</span>
--- a/src/components/MFAVerifyDialog/index.vue
+++ b/src/components/MFAVerifyDialog/index.vue
@@ -10,14 +10,14 @@
    v-on="$listeners"
  >
    <el-row :gutter="20">
-      <el-col :span="4">
+      <el-col :md="4" :sm="24">
        <div style="line-height: 34px;text-align: center">MFA</div>
      </el-col>
-      <el-col :span="14">
+      <el-col :md="14" :sm="24">
        <el-input v-model="MFAToken" />
        <span class="help-tips help-block">{{ $t('common.MFARequireForSecurity') }}</span>
      </el-col>
-      <el-col :span="4">
+      <el-col :md="4" :sm="24">
        <el-button size="mini" type="primary" style="line-height:20px " @click="verifyMFA">
          {{ this.$t('common.Confirm') }}
        </el-button>
--- a/src/layout/components/GenericUpdateFormDialog/index.vue
+++ b/src/layout/components/GenericUpdateFormDialog/index.vue
@@ -7,15 +7,22 @@
    :show-cancel="false"
    :show-confirm="false"
  >
-    <el-row>
-      <el-col :span="4">
+    <el-row :gutter="20">
+      <el-col :md="4" :sm="24">
        <div class="select-prop-label">
          <label>{{ selectPropertiesLabel }}</label>
        </div>
      </el-col>
-      <el-col :span="18">
+      <el-col :md="18" :sm="24">
        <el-checkbox-group v-model="checkedFields" @change="handleCheckedFieldsChange">
-          <el-checkbox v-for="(value, name) in iFormSetting.fieldsMeta" :key="name" :checked="true" :label="name">{{ value.label }}</el-checkbox>
+          <el-checkbox
+            v-for="(value, name) in iFormSetting.fieldsMeta"
+            :key="name"
+            :checked="true"
+            :label="name"
+          >
+            {{ value.label }}
+          </el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,6 +1,7 @@
 const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
+  isMobile: state => state.app.device === 'mobile',
  token: state => state.users.token,
  currentOrg: state => state.users.currentOrg,
  currentOrgIsDefault: state => state.users.currentOrg['is_default'],
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -171,6 +171,9 @@ input[type=file] {
  }
 }

+.el-col.el-col-sm-24 .ibox {
+  margin-bottom: 10px;
+
 .el-pagination {
  overflow: auto;
 }
--- a/src/views/accounts/GatheredUser/TaskDetail/Detail.vue
+++ b/src/views/accounts/GatheredUser/TaskDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
  </el-row>
--- a/src/views/acl/AssetAcl/AssetAclDetail/detail.vue
+++ b/src/views/acl/AssetAcl/AssetAclDetail/detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <!--      <RelationCard ref="RelationCard" type="info" v-bind="nodeRelationConfig" />-->
    </el-col>
  </el-row>
--- a/src/views/acl/UserLoginACL/UserDetail/Detail.vue
+++ b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <QuickActions type="primary" :actions="quickActions" />
    </el-col>
  </el-row>
--- a/src/views/assets/Asset/AssetDetail/Account.vue
+++ b/src/views/assets/Asset/AssetDetail/Account.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="24">
-      <el-col :span="16">
+      <el-col :md="16" :sm="24">
        <AccountListTable ref="ListTable" :url="assetUserUrl" :has-import="false" :has-clone="false" />
      </el-col>
-      <el-col :span="8">
+      <el-col :md="8" :sm="24">
        <QuickActions type="primary" :actions="quickActions" />
      </el-col>
    </el-row>
--- a/src/views/assets/Asset/AssetDetail/Detail.vue
+++ b/src/views/assets/Asset/AssetDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <QuickActions type="primary" :actions="quickActions" />
      <RelationCard ref="NodeRelation" v-perms="'assets.change_asset'" type="info" style="margin-top: 15px" v-bind="nodeRelationConfig" />
      <LabelCard v-if="$hasPerm('assets.view_label')" type="warning" style="margin-top: 15px" v-bind="labelConfig" />
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col :md="16" :sm="24">
        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
      </el-col>
-      <el-col :span="8">
+      <el-col :md="8" :sm="24">
        <PermUserGroupCard v-bind="UserGroupCardConfig" />
      </el-col>
    </el-row>
--- a/src/views/assets/Asset/AssetDetail/SystemUser.vue
+++ b/src/views/assets/Asset/AssetDetail/SystemUser.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col :md="16" :sm="24">
        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
      </el-col>
-      <el-col :span="8">
+      <el-col :md="8" :sm="24">
        <QuickActions type="primary" :actions="quickActions" />
        <RelationCard ref="systemUserRelation" style="margin-top: 15px" v-bind="systemUserRelationConfig" />
      </el-col>
--- a/src/views/assets/Asset/AssetList.vue
+++ b/src/views/assets/Asset/AssetList.vue
@@ -34,8 +34,8 @@
    </GenericTreeListPage>
    <Dialog width="30%" :title="this.$t('assets.NodeInformation')" :visible.sync="nodeInfoDialogSetting.dialogVisible" :show-cancel="false" :show-confirm="false">
      <el-row v-for="item in nodeInfoDialogSetting.items" :key="'card-' + item.key" :gutter="10" class="item">
-        <el-col :span="6"><div class="item-label"><label>{{ item.label }}: </label></div></el-col>
-        <el-col :span="18"><div class="item-text">{{ item.value }}</div></el-col>
+        <el-col :md="6" :sm="24"><div class="item-label"><label>{{ item.label }}: </label></div></el-col>
+        <el-col :md="18" :sm="24"><div class="item-text">{{ item.value }}</div></el-col>
      </el-row>
    </Dialog>
    <AssetBulkUpdateDialog
--- a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/detail.vue
+++ b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <QuickActions type="primary" :actions="quickActions" />
    </el-col>
  </el-row>
--- a/src/views/assets/CommandFilter/CommandFilterDetail/Detail.vue
+++ b/src/views/assets/CommandFilter/CommandFilterDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <RelationCard ref="systemUserRelation" v-bind="systemUserRelationConfig" />
    </el-col>
  </el-row>
--- a/src/views/assets/Domain/DomainDetail/Detail.vue
+++ b/src/views/assets/Domain/DomainDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10" />
+    <el-col :md="10" :sm="24" />
  </el-row>
 </template>

--- a/src/views/assets/Domain/DomainDetail/GatewayList.vue
+++ b/src/views/assets/Domain/DomainDetail/GatewayList.vue
@@ -12,14 +12,14 @@
      :destroy-on-close="true"
    >
      <el-row :gutter="20">
-        <el-col :span="4">
-          <div style="line-height: 34px;text-align: center">{{ $t('assets.SshPort') }}</div>
+        <el-col :md="4" :sm="24">
+          <div style="line-height: 34px">{{ $t('assets.SshPort') }}</div>
        </el-col>
-        <el-col :span="14">
+        <el-col :md="14" :sm="24">
          <el-input v-model="portInput" />
          <span class="help-tips help-block">{{ $t('assets.TestGatewayHelpMessage') }}</span>
        </el-col>
-        <el-col :span="4">
+        <el-col :md="4" :sm="24">
          <el-button size="mini" type="primary" style="line-height:20px " :loading="buttonLoading" @click="dialogConfirm">{{ this.$t('common.Confirm') }}</el-button>
        </el-col>
      </el-row>
--- a/src/views/assets/Platform/Detail.vue
+++ b/src/views/assets/Platform/Detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10" />
+    <el-col :md="10" :sm="24" />
  </el-row>
 </template>

--- a/src/views/assets/SystemUser/SystemUserDetail/AccountList.vue
+++ b/src/views/assets/SystemUser/SystemUserDetail/AccountList.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="20">
+    <el-col :md="20" :sm="24">
      <AccountListTable ref="ListTable" :url="accountUrl" :has-import="false" :has-clone="false" />
    </el-col>
-    <el-col :span="4" />
+    <el-col :md="4" :sm="24" />
  </el-row>
 </template>

--- a/src/views/assets/SystemUser/SystemUserDetail/AppAccountList.vue
+++ b/src/views/assets/SystemUser/SystemUserDetail/AppAccountList.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="20">
+    <el-col :md="20" :sm="24">
      <AppAccountListTable ref="ListTable" :url="accountUrl" :has-import="false" :has-clone="false" />
    </el-col>
-    <el-col :span="4" />
+    <el-col :md="4" :sm="24" />
  </el-row>
 </template>

--- a/src/views/assets/SystemUser/SystemUserDetail/AppList.vue
+++ b/src/views/assets/SystemUser/SystemUserDetail/AppList.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col :md="16" :sm="24">
        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
      </el-col>
-      <el-col :span="8">
+      <el-col :md="8" :sm="24">
        <RelationCard ref="assetSelect" type="primary" style="margin-top: 15px" v-bind="appRelationConfig" />
      </el-col>
    </el-row>
--- a/src/views/assets/SystemUser/SystemUserDetail/AssetList.vue
+++ b/src/views/assets/SystemUser/SystemUserDetail/AssetList.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col :md="16" :sm="24">
        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
      </el-col>
-      <el-col :span="8">
+      <el-col :md="8" :sm="24">
        <QuickActions type="primary" :actions="quickActions" />
        <AssetRelationCard ref="assetSelect" type="primary" style="margin-top: 15px" v-bind="assetRelationConfig" />
        <RelationCard ref="nodeRelation" type="info" style="margin-top: 15px" v-bind="nodeRelationConfig" />
--- a/src/views/assets/SystemUser/SystemUserDetail/Detail.vue
+++ b/src/views/assets/SystemUser/SystemUserDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <QuickActions type="primary" :actions="quickActions" />
      <RelationCard
        v-if="!(object.protocol === 'rdp' || object.protocol === 'vnc')"
--- a/src/views/assets/SystemUser/SystemUserDetail/SwitchToUserList.vue
+++ b/src/views/assets/SystemUser/SystemUserDetail/SwitchToUserList.vue
@@ -4,10 +4,10 @@
      <b>{{ Tips.title }}</b>: <span>{{ Tips.body }}</span>
    </el-alert>
    <el-row :gutter="20">
-      <el-col :span="20">
+      <el-col :md="20" :sm="24">
        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
      </el-col>
-      <el-col :span="4" />
+      <el-col :md="4" :sm="24" />
    </el-row>
  </div>
 </template>
--- a/src/views/dashboard/DatesLoginSummary/index.vue
+++ b/src/views/dashboard/DatesLoginSummary/index.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="white-bg dashboard-header print-margin">
    <el-row>
-      <el-col :span="12">
+      <el-col :md="12" :sm="24">
        <h2>{{ $t('dashboard.LoginOverview') }}</h2>
      </el-col>
-      <el-col :span="12">
-        <el-button-group style="float: right; padding: 0">
+      <el-col :md="12" :sm="24" class="clearfix">
+        <el-button-group style="float: right; padding: 0" class="clearfix">
          <el-button type="default" size="mini" :class="{ 'active': active === 'weekly'}" @click="changeDates('weekly')">{{ $t('dashboard.Weekly') }}</el-button>
          <el-button type="default" size="mini" :class="{ 'active': active === 'monthly'}" @click="changeDates('monthly')">{{ $t('dashboard.Monthly') }}</el-button>
        </el-button-group>
@@ -13,7 +13,7 @@
    </el-row>
    <el-row :gutter="20">
      <el-col :lg="18" :sm="24">
-        <LoginMetric :range="active" class="card-item" style="margin-top: -30px" heigth="300px" />
+        <LoginMetric :range="active" class="card-item" heigth="300px" />
      </el-col>
      <el-col :lg="6" :sm="24">
        <LoginActivePin :range="active" class="card-item" />
--- a/src/views/dashboard/TopAndLatestSummary/index.vue
+++ b/src/views/dashboard/TopAndLatestSummary/index.vue
@@ -1,12 +1,12 @@
 <template>
  <el-row :gutter="10" style="margin-bottom: 20px;margin-top: 20px">
-    <el-col :md="8" :sm="12">
+    <el-col :md="8" :sm="24">
      <TopUser />
    </el-col>
-    <el-col :md="8" :sm="12" class="print-margin-top">
+    <el-col :md="8" :sm="24" class="print-margin-top">
      <TopAssets />
    </el-col>
-    <el-col :md="8" :sm="12">
+    <el-col :md="8" :sm="24">
      <Latest10Sessions class="card-item print-margin-top" />
    </el-col>
  </el-row>
--- a/src/views/ops/TaskDetail/AdhocDetail/AdhocDetail.vue
+++ b/src/views/ops/TaskDetail/AdhocDetail/AdhocDetail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :title="cardTitle" :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <RunInfoCard type="danger" style="margin-top: 15px" v-bind="RunFailedConfig" />
      <RunInfoCard type="info" v-bind="RunSuccessConfig" style="margin-top: 15px" />
    </el-col>
--- a/src/views/ops/TaskDetail/HistoryExecutionDetail/HistoryExecutionDetail.vue
+++ b/src/views/ops/TaskDetail/HistoryExecutionDetail/HistoryExecutionDetail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :title="cardTitle" :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <RunInfoCard type="danger" style="margin-top: 15px" v-bind="RunFailedConfig" />
      <RunInfoCard type="info" v-bind="RunSuccessConfig" style="margin-top: 15px" />
    </el-col>
--- a/src/views/ops/TaskDetail/TaskDetail.vue
+++ b/src/views/ops/TaskDetail/TaskDetail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :title="cardTitle" :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <RunInfoCard type="danger" style="margin-top: 15px" v-bind="RunFailedConfig" />
      <RunInfoCard type="info" v-bind="RunSuccessConfig" style="margin-top: 15px" />
    </el-col>
--- a/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/AppliactionPermissionDetail.vue
+++ b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/AppliactionPermissionDetail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard :items="detailCardItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <QuickActions type="primary" :actions="quickActions" />
    </el-col>
  </el-row>
--- a/src/views/profile/ProfileInfo.vue
+++ b/src/views/profile/ProfileInfo.vue
@@ -2,10 +2,10 @@
  <Page v-bind="$attrs">
    <div>
      <el-row :gutter="20">
-        <el-col :span="14">
+        <el-col :md="14" :sm="24">
          <DetailCard :items="detailCardItems" />
        </el-col>
-        <el-col :span="10">
+        <el-col :md="10" :sm="24">
          <QuickActions
            type="primary"
            :title="this.$t('users.AuthSettings')"
@@ -30,14 +30,14 @@
        :destroy-on-close="true"
      >
        <el-row :gutter="20">
-          <el-col :span="4">
-            <div style="line-height: 34px;text-align: center">{{ $t('assets.Password') }}</div>
+          <el-col :md="4" :sm="24">
+            <div style="line-height: 34px">{{ $t('assets.Password') }}</div>
          </el-col>
-          <el-col :span="14">
+          <el-col :md="14" :sm="24">
            <el-input v-model="passwordInput" type="password" />
            <span class="help-tips help-block">{{ $t('common.PasswordRequireForSecurity') }}</span>
          </el-col>
-          <el-col :span="4">
+          <el-col :md="4" :sm="24">
            <el-button size="mini" type="primary" style="line-height:20px " @click="passConfirm">{{ this.$t('common.Confirm') }}</el-button>
          </el-col>
        </el-row>
--- a/src/views/sessions/SessionDetail/SessionCommands.vue
+++ b/src/views/sessions/SessionDetail/SessionCommands.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="16">
+    <el-col :md="16" :sm="24">
      <ListTable :table-config="tableConfig" :header-actions="headerActions" />
    </el-col>
  </el-row>
--- a/src/views/sessions/SessionDetail/SessionDetailInfo.vue
+++ b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :span="14">
+    <el-col :md="14" :sm="24">
      <DetailCard v-if="object" :items="detailItems" />
    </el-col>
-    <el-col :span="10">
+    <el-col :md="10" :sm="24">
      <QuickActions v-if="object" type="primary" :actions="quickActions" />
    </el-col>
  </el-row>
--- a/src/views/settings/License.vue
+++ b/src/views/settings/License.vue
@@ -5,10 +5,10 @@
        {{ this.$t('setting.ImportLicenseTip') }}
      </el-alert>
      <el-row :gutter="20">
-        <el-col :span="14">
+        <el-col :md="14" :sm="24">
          <DetailCard :title="cardTitle" :items="detailItems" />
        </el-col>
-        <el-col :span="10">
+        <el-col :md="10" :sm="24">
          <QuickActions type="primary" :actions="quickActions" />
        </el-col>
      </el-row>
--- a/src/views/settings/Terminal/Monitor/component/MonitorCard.vue
+++ b/src/views/settings/Terminal/Monitor/component/MonitorCard.vue
@@ -5,7 +5,7 @@
    </div>
    <el-card class="box-card" shadow="never">
      <el-row :gutter="10">
-        <el-col :span="18">
+        <el-col :md="18" :sm="24">
          <div style="padding-top: 6px;padding-bottom: 8px;">
            <h2 style="text-align: center;font-weight: 350">{{ $t('xpack.LoadStatus') }}</h2>
            <div class="progress">
@@ -50,7 +50,7 @@
            </div>
          </div>
        </el-col>
-        <el-col :span="6">
+        <el-col :md="6" :sm="24">
          <div style="height: 100%;width: 100%;padding-top: 8px;">
            <h2 style="text-align: center;font-weight: 350">{{ $t('dashboard.OnlineSessions') }}</h2>
            <div style="text-align: center;font-size: 30px;">
--- a/src/views/settings/Terminal/TerminalDetail.vue
+++ b/src/views/settings/Terminal/TerminalDetail.vue
@@ -2,7 +2,7 @@
  <GenericDetailPage :object.sync="terminalData" v-bind="config">
    <div>
      <el-row :gutter="20">
-        <el-col :span="14">
+        <el-col :md="14" :sm="24">
          <DetailCard :title="cardTitle" :items="detailItems" />
        </el-col>
      </el-row>
--- a/src/views/tickets/TicketFlow/components/Details.vue
+++ b/src/views/tickets/TicketFlow/components/Details.vue
@@ -5,14 +5,14 @@
    </div>
    <div class="content">
      <el-row :gutter="10">
-        <el-col v-for="item in detailCardItems" :key="'card-' + item.key" :span="12">
-          <el-row class="item">
-            <el-col :span="6">
+        <el-col v-for="item in detailCardItems" :key="'card-' + item.key">
+          <el-row class="item" :gutter="10">
+            <el-col :md="6" :sm="12">
              <div :style="{ 'text-align': 'align' }" class="item-label">
                <label>{{ item.key }}: </label>
              </div>
            </el-col>
-            <el-col :span="18">
+            <el-col :md="18" :sm="12">
              <div class="item-text">
                <ItemValue v-bind="item" />
              </div>
@@ -22,14 +22,14 @@
      </el-row>
      <el-divider v-if="specialCardItems.length > 0" />
      <el-row :gutter="10">
-        <el-col v-for="item in specialCardItems" :key="'card-' + item.key" :span="24">
+        <el-col v-for="item in specialCardItems" :key="'card-' + item.key" :md="24" :sm="24">
          <el-row class="item">
-            <el-col :span="6">
+            <el-col :md="6" :sm="24">
              <div :style="{ 'text-align': 'align' }" class="item-label">
                <label>{{ item.key }}: </label>
              </div>
            </el-col>
-            <el-col :span="18">
+            <el-col :md="18" :sm="24">
              <div class="item-text">
                <ItemValue v-bind="item" />
              </div>
--- a/src/views/tickets/TicketFlow/components/GenericTicketDetail.vue
+++ b/src/views/tickets/TicketFlow/components/GenericTicketDetail.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row>
-    <el-col :span="17">
+    <el-col :md="17" :sm="24">
      <Details :detail-card-items="detailCardItems" :title="$t('common.BasicInfo')" />
      <Details v-if="specialCardItems.length > 0" :detail-card-items="specialCardItems" :title="$t('common.ApprovaLevel')" />
      <slot id="MoreDetails" />
--- a/src/views/tickets/components/Details.vue
+++ b/src/views/tickets/components/Details.vue
@@ -5,14 +5,14 @@
    </div>
    <div class="content">
      <el-row :gutter="10">
-        <el-col v-for="item in detailCardItems" :key="'card-' + item.key" :span="12">
+        <el-col v-for="item in detailCardItems" :key="'card-' + item.key" :md="12" :sm="24">
          <el-row class="item">
-            <el-col :span="6">
+            <el-col :md="6" :sm="12">
              <div :style="{ 'text-align': 'align' }" class="item-label">
                <label>{{ item.key }}: </label>
              </div>
            </el-col>
-            <el-col :span="18">
+            <el-col :md="18" :sm="12">
              <div class="item-text">
                <ItemValue v-bind="item" />
              </div>
@@ -22,14 +22,14 @@
      </el-row>
      <el-divider v-if="specialCardItems.length > 0" />
      <el-row :gutter="10">
-        <el-col v-for="item in specialCardItems" :key="'card-' + item.key" :span="12">
+        <el-col v-for="item in specialCardItems" :key="'card-' + item.key" :md="12" :sm="24">
          <el-row class="item">
-            <el-col :span="6">
+            <el-col :md="6" :sm="12">
              <div :style="{ 'text-align': 'align' }" class="item-label">
                <label>{{ item.key }}: </label>
              </div>
            </el-col>
-            <el-col :span="18">
+            <el-col :md="18" :sm="12">
              <div class="item-text">
                <ItemValue v-bind="item" />
              </div>
--- a/src/views/tickets/components/GenericTicketDetail.vue
+++ b/src/views/tickets/components/GenericTicketDetail.vue
@@ -1,13 +1,13 @@
 <template>
-  <el-row>
-    <el-col :span="17">
+  <el-row :gutter="20">
+    <el-col :md="17" :sm="24">
      <Details :detail-card-items="detailCardItems" :title="$t('common.BasicInfo')" />
      <Details v-if="specialCardItems.length > 0" :detail-card-items="specialCardItems" :title="$t('common.ApplyInfo')" />
      <Details v-if="object.state === 'approved' && assignedCardItems.length > 0" :detail-card-items="assignedCardItems" :title="$t('tickets.AssignedInfo')" />
      <slot id="MoreDetails" />
      <Comments :object="object" v-bind="$attrs" />
    </el-col>
-    <el-col :span="6" :offset="1">
+    <el-col :md="7" :sm="24">
      <Steps :object="object" />
      <Session v-perms="'tickets.view_ticket'" :object="object" />
    </el-col>