diff --git a/.env.development b/.env.development
index 8e968ab..eb84861 100644
--- a/.env.development
+++ b/.env.development
@@ -8,7 +8,7 @@ ENV = 'development'
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
 # VUE_APP_BASE_API = 'http://192.168.1.222:8080'
-# 云端
+# 海湾酒店-云端
 VUE_APP_BASE_API = 'http://106.55.173.225:8090'
 
 # 路由懒加载
diff --git a/src/assets/styles/bigScreen.scss b/src/assets/styles/bigScreen.scss
index ccdf471..77336d0 100644
--- a/src/assets/styles/bigScreen.scss
+++ b/src/assets/styles/bigScreen.scss
@@ -311,11 +311,17 @@
   .el-picker-panel__footer {
     padding: 0.04rem !important;
   }
+  .el-button {
+    padding: 0.08rem 0.15rem !important;
+  }
   .el-button--mini {
-    padding: 0.07rem 0.15rem !important;
+    // padding: 0.08rem 0.15rem !important;
     font-size: 0.12rem !important;
     border-radius: 0.03rem !important;
   }
+  .el-button--text {
+    padding: 0 !important;
+  }
   .el-input__suffix {
     right: 0.05rem !important;
   }
@@ -477,7 +483,7 @@
     padding-right: 0.08rem !important;
   }
   .el-form-item--small .el-form-item__label {
-    line-height: 0.4rem !important;
+    line-height: 0.32rem !important;
   }
   .el-form-item__label {
     font-size: 0.14rem !important;
@@ -529,11 +535,37 @@
   }
   .el-checkbox {
     font-size: 0.14rem !important;
+    margin-right: 0.08rem !important;
+  }
+  .el-checkbox__label {
+    padding-left: 0.1rem !important;
+    line-height: 0.19rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-input-number--medium .el-input-number__increase,
+  .el-input-number--medium .el-input-number__decrease {
+    width: 0.36rem !important;
+    height: 50% !important;
+    font-size: 0.14rem !important;
+  }
+  .el-table__expand-icon {
+    font-size: 0.12rem !important;
+  }
+  .el-table [class*="el-table__row--level"] .el-table__expand-icon {
+    width: 0.2rem !important;
+    line-height: 0.2rem !important;
+    height: 0.2rem !important;
     margin-right: 0.03rem !important;
   }
   .el-cascader-node__label {
     padding: 0 0.1rem !important;
   }
+  .el-input--prefix .el-input__inner {
+    padding-left: 0.3rem !important;
+  }
+  .el-input__prefix {
+    left: 0.05rem !important ;
+  }
   .el-checkbox__inner {
     border-radius: 0.02rem !important;
     width: 0.14rem !important;
@@ -576,7 +608,7 @@
     padding-top: 0.1rem !important;
   }
   .el-form-item__content {
-    line-height: 0.4rem !important;
+    line-height: 0.32rem !important;
     font-size: 0.14rem !important;
   }
   .el-message-box__message p {
@@ -636,6 +668,22 @@
   .el-form-item--medium .el-form-item__content {
     width: 100%;
   }
+  .el-popover {
+    // min-width: 1.5rem !important;
+    min-width: 4.6rem !important;
+    border-radius: 0.04rem !important;
+    border: 0.01rem solid #e6ebf5 !important;
+    padding: 0.12rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-card__header {
+    padding: 0.14rem 0.15rem 0.07rem !important;
+    min-height: 0.4rem !important;
+  }
+  .el-form-item__error {
+    font-size: 0.12rem !important;
+    padding-top: 0.04rem !important;
+}
 }
 @media (min-width: 2000px) {
   // 页面公共样式
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 8dadc02..1f0c25b 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -73,6 +73,8 @@ export default {
           display: flex;
           .icon-item {
             display: flex;
+            flex-wrap: row;
+            align-items: center;
             max-width: 100%;
             height: 100%;
             padding: 0 5px;
@@ -101,4 +103,34 @@ export default {
       }
     }
   }
+  // 媒体查询，适配大于2000px分辨率的大屏样式-element样式
+@media (min-width: 2000px) {
+  .icon-body {
+    padding: 0.1rem !important;
+    .icon-search {
+      margin-bottom: 0.05rem !important;
+    }
+    .icon-list {
+      height: 2rem !important;
+      .list-container {
+        .icon-item-wrapper {
+          height: 0.25rem !important;
+          line-height: 0.25rem !important;
+          .icon-item {
+            padding: 0 0.05rem !important;
+            &:hover {
+              border-radius: 0.05rem !important;
+            }
+            span {
+              padding-left: 0.02rem !important;
+            }
+          }
+          .icon-item.active {
+            border-radius: 0.05rem !important;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/bigScreen/components/useElect.vue b/src/views/bigScreen/components/useElect.vue
index 5c6fc9c..99b7ae8 100644
--- a/src/views/bigScreen/components/useElect.vue
+++ b/src/views/bigScreen/components/useElect.vue
@@ -180,6 +180,7 @@ export default {
       systemTrend(data).then((res) => {
         console.log("用电趋势返回", res);
         if (res.code == 200) {
+          const titleFontSize = this.$refs.sys_charts.offsetWidth / 40;
           let adapterOption = {};
           // 添加折线的配置
           adapterOption = {
@@ -209,6 +210,14 @@ export default {
             },
             xAxis: {
               data: res.rows[0].timeStr,
+              axisLabel: {
+                fontSize: titleFontSize,
+              },
+            },
+            yAxis: {
+              axisLabel: {
+                fontSize: titleFontSize,
+              },
             },
             series: [
               {
diff --git a/src/views/components/viewColdSys.vue b/src/views/components/viewColdSys.vue
index 9c36dd5..5a2069c 100644
--- a/src/views/components/viewColdSys.vue
+++ b/src/views/components/viewColdSys.vue
@@ -444,7 +444,7 @@ export default {
     getChartsData() {
       viewMainParams().then((res) => {
         console.log("系统参数返回", res);
-        console.log("冷源监控返回",res.rows[0]);
+        console.log("冷源监控返回", res.rows[0]);
         if (res.code == 200) {
           this.useForm.maxData = 10;
           this.useForm.useData = res.rows[0].values[0].value;
@@ -454,6 +454,7 @@ export default {
             this.useForm.useData,
             this.useForm.maxData
           );
+          const titleFontSize = this.$refs.sys_charts.offsetWidth / 30;
           const adapterOption = {
             series: [
               {
@@ -484,7 +485,7 @@ export default {
                 label: {
                   show: true,
                   position: "center", // 文字显示在中心位置
-                  offset: [0, -5], // 向上偏移 10 个单位
+                  offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位
                   formatter: function () {
                     // 返回 HTML 标签，使用 rich 里定义的样式
                     return `{line|${that.useForm.useData}}`;
@@ -492,8 +493,8 @@ export default {
                   rich: {
                     line: {
                       color: "#fff", // 第二行文字颜色
-                      fontSize: 20, // 第二行文字大小
-                      lineHeight: 0, // 行高，实现间距
+                      fontSize: titleFontSize, // 第二行文字大小
+                      lineHeight: 5, // 行高，实现间距
                     },
                   },
                 },
@@ -575,4 +576,11 @@ export default {
     margin-top: 25px;
   }
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .eer {
+    font-size: 0.18rem !important;
+    margin-top: 0.25rem !important;
+  }
+}
 </style>
diff --git a/src/views/components/viewEnergy.vue b/src/views/components/viewEnergy.vue
index a2d1584..fbd43a5 100644
--- a/src/views/components/viewEnergy.vue
+++ b/src/views/components/viewEnergy.vue
@@ -81,11 +81,16 @@ export default {
       );
       console.log("当前要渲染的数据对象", chartsObj);
       console.log("当前要渲染的颜色对象", colorObj);
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
       let adapterOption = {};
       // 添加折线的配置
       adapterOption = {
         tooltip: {
           trigger: "axis",
+          textStyle: {
+            // 设置提示框内文字的大小
+            fontSize: titleFontSize,
+          },
           // 自定义 tooltip 内容
           formatter: function (params) {
             var res = params[0].name + "<br/>";
@@ -106,7 +111,7 @@ export default {
                   value +
                   chartsObj.unit +
                   "</span><br>";
-              }  else {
+              } else {
                 res +=
                   marker +
                   seriesName +
@@ -121,17 +126,30 @@ export default {
         },
         xAxis: {
           data: chartsObj.timeStr,
+          axisLabel: {
+            fontSize: titleFontSize,
+          },
         },
         yAxis: {
           name: chartsObj.unit,
+          nameTextStyle: {
+            fontSize: titleFontSize,
+          },
+          axisLabel: {
+            fontSize: titleFontSize,
+          },
         },
         series: [
           {
             data: chartsObj.data,
             name: event,
+            // 拐点大小
+            symbolSize: titleFontSize * 0.5,
             //折线颜色
             itemStyle: {
               color: colorObj.color, //折线的颜色
+              // 设置折线的厚度
+              width: titleFontSize * 0.1,
             },
             lineStyle: {
               color: colorObj.color, //折线点的颜色
@@ -292,16 +310,16 @@ export default {
 }
 // 媒体查询，适配大于2000px分辨率的大屏样式
 @media (min-width: 2000px) {
- .right-table {
-  padding: 0.27rem 0.15rem 0.25rem 0.15rem !important;
-}
-.mr20 {
-  width: 0.92rem !important;
-  padding: 0.02rem !important;
-}
-.charts {
-  margin-top: 0.2rem !important;
-  height: 3rem !important;
-}
+  .right-table {
+    padding: 0.27rem 0.15rem 0.25rem 0.15rem !important;
+  }
+  .mr20 {
+    width: 0.92rem !important;
+    padding: 0.02rem !important;
+  }
+  .charts {
+    margin-top: 0.2rem !important;
+    height: 3rem !important;
+  }
 }
 </style>
diff --git a/src/views/monitor/cache/list.vue b/src/views/monitor/cache/list.vue
index 29a7c74..960bb9b 100644
--- a/src/views/monitor/cache/list.vue
+++ b/src/views/monitor/cache/list.vue
@@ -3,7 +3,7 @@
     <el-row :gutter="10">
       <el-col :span="8">
         <el-card style="height: calc(100vh - 125px)">
-          <div slot="header">
+          <div slot="header" class="header-list">
             <span><i class="el-icon-collection"></i> 缓存列表</span>
             <el-button
               style="float: right; padding: 3px 0"
@@ -20,11 +20,7 @@
             @row-click="getCacheKeys"
             style="width: 100%"
           >
-            <el-table-column
-              label="序号"
-              width="60"
-              type="index"
-            ></el-table-column>
+            <el-table-column label="序号" type="index"></el-table-column>
 
             <el-table-column
               label="缓存名称"
@@ -42,7 +38,6 @@
             />
             <el-table-column
               label="操作"
-              width="60"
               align="center"
               class-name="small-padding fixed-width"
             >
@@ -61,7 +56,7 @@
 
       <el-col :span="8">
         <el-card style="height: calc(100vh - 125px)">
-          <div slot="header">
+          <div slot="header" class="header-list">
             <span><i class="el-icon-key"></i> 键名列表</span>
             <el-button
               style="float: right; padding: 3px 0"
@@ -78,11 +73,7 @@
             @row-click="handleCacheValue"
             style="width: 100%"
           >
-            <el-table-column
-              label="序号"
-              width="60"
-              type="index"
-            ></el-table-column>
+            <el-table-column label="序号" type="index"></el-table-column>
             <el-table-column
               label="缓存键名"
               align="center"
@@ -92,7 +83,6 @@
             </el-table-column>
             <el-table-column
               label="操作"
-              width="60"
               align="center"
               class-name="small-padding fixed-width"
             >
@@ -111,7 +101,7 @@
 
       <el-col :span="8">
         <el-card :bordered="false" style="height: calc(100vh - 125px)">
-          <div slot="header">
+          <div slot="header" class="header-list">
             <span><i class="el-icon-document"></i> 缓存内容</span>
             <el-button
               style="float: right; padding: 3px 0"
@@ -152,7 +142,14 @@
 </template>
 
 <script>
-import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache";
+import {
+  listCacheName,
+  listCacheKey,
+  getCacheValue,
+  clearCacheName,
+  clearCacheKey,
+  clearCacheAll,
+} from "@/api/monitor/cache";
 
 export default {
   name: "CacheList",
@@ -164,7 +161,7 @@ export default {
       loading: true,
       subLoading: false,
       nowCacheName: "",
-      tableHeight: window.innerHeight - 200
+      tableHeight: window.innerHeight - 200,
     };
   },
   created() {
@@ -174,7 +171,7 @@ export default {
     /** 查询缓存名称列表 */
     getCacheNames() {
       this.loading = true;
-      listCacheName().then(response => {
+      listCacheName().then((response) => {
         this.cacheNames = response.data;
         this.loading = false;
       });
@@ -186,7 +183,7 @@ export default {
     },
     /** 清理指定名称缓存 */
     handleClearCacheName(row) {
-      clearCacheName(row.cacheName).then(response => {
+      clearCacheName(row.cacheName).then((response) => {
         this.$modal.msgSuccess("清理缓存名称[" + row.cacheName + "]成功");
         this.getCacheKeys();
       });
@@ -198,7 +195,7 @@ export default {
         return;
       }
       this.subLoading = true;
-      listCacheKey(cacheName).then(response => {
+      listCacheKey(cacheName).then((response) => {
         this.cacheKeys = response.data;
         this.subLoading = false;
         this.nowCacheName = cacheName;
@@ -211,7 +208,7 @@ export default {
     },
     /** 清理指定键名缓存 */
     handleClearCacheKey(cacheKey) {
-      clearCacheKey(cacheKey).then(response => {
+      clearCacheKey(cacheKey).then((response) => {
         this.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功");
         this.getCacheKeys();
       });
@@ -226,16 +223,28 @@ export default {
     },
     /** 查询缓存内容详细 */
     handleCacheValue(cacheKey) {
-      getCacheValue(this.nowCacheName, cacheKey).then(response => {
+      getCacheValue(this.nowCacheName, cacheKey).then((response) => {
         this.cacheForm = response.data;
       });
     },
     /** 清理全部缓存 */
     handleClearCacheAll() {
-      clearCacheAll().then(response => {
+      clearCacheAll().then((response) => {
         this.$modal.msgSuccess("清理全部缓存成功");
       });
-    }
+    },
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (min-width: 2000px) {
+  ::v-deep .el-button--medium {
+    padding: 0 !important;
+  }
+
+  .header-list {
+    font-size: 0.14rem !important;
+  }
+}
+</style>
diff --git a/src/views/monitor/job/index.vue b/src/views/monitor/job/index.vue
index 78a6829..58faaf4 100644
--- a/src/views/monitor/job/index.vue
+++ b/src/views/monitor/job/index.vue
@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="任务名称" prop="jobName">
             <el-input
@@ -137,12 +136,7 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column
-        label="任务编号"
-        width="100"
-        align="center"
-        prop="jobId"
-      />
+      <el-table-column label="任务编号" align="center" prop="jobId" />
       <el-table-column
         label="任务名称"
         align="center"
@@ -243,8 +237,8 @@
     />
 
     <!-- 添加或修改定时任务对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row>
           <el-col :span="12">
             <el-form-item label="任务名称" prop="jobName">
@@ -285,7 +279,7 @@
           <el-col :span="24">
             <el-form-item label="cron表达式" prop="cronExpression">
               <el-input
-              style="width: 76%;"
+                style="width: 76%"
                 v-model="form.cronExpression"
                 placeholder="请输入cron执行表达式"
               >
@@ -350,13 +344,8 @@
     </el-dialog>
 
     <!-- 任务日志详细 -->
-    <el-dialog
-      title="任务详细"
-      :visible.sync="openView"
-      width="700px"
-      append-to-body
-    >
-      <el-form ref="form" :model="form" label-width="120px" size="mini">
+    <el-dialog title="任务详细" :visible.sync="openView" append-to-body>
+      <el-form ref="form" :model="form" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
@@ -667,3 +656,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 800px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 8rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/monitor/job/log.vue b/src/views/monitor/job/log.vue
index 0e9bb54..8632a62 100644
--- a/src/views/monitor/job/log.vue
+++ b/src/views/monitor/job/log.vue
@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="任务名称" prop="jobName">
             <el-input
               v-model="queryParams.jobName"
               placeholder="请输入任务名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.jobGroup"
               placeholder="请选择任务组名"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_job_group"
@@ -38,7 +35,6 @@
               v-model="queryParams.status"
               placeholder="请选择执行状态"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_common_status"
@@ -51,7 +47,6 @@
           <el-form-item label="执行时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd"
               type="daterange"
               range-separator="-"
@@ -139,12 +134,7 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column
-        label="日志编号"
-        width="80"
-        align="center"
-        prop="jobLogId"
-      />
+      <el-table-column label="日志编号" align="center" prop="jobLogId" />
       <el-table-column
         label="任务名称"
         align="center"
@@ -184,12 +174,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column
-        label="执行时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
+      <el-table-column label="执行时间" align="center" prop="createTime">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -221,13 +206,8 @@
     />
 
     <!-- 调度日志详细 -->
-    <el-dialog
-      title="调度日志详细"
-      :visible.sync="open"
-      width="700px"
-      append-to-body
-    >
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
+    <el-dialog title="调度日志详细" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
@@ -396,3 +376,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 700px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 100px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 7rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/monitor/logininfor/index.vue b/src/views/monitor/logininfor/index.vue
index 2182624..9cfdfff 100644
--- a/src/views/monitor/logininfor/index.vue
+++ b/src/views/monitor/logininfor/index.vue
@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="登录地址" prop="ipaddr">
             <el-input
               v-model="queryParams.ipaddr"
               placeholder="请输入登录地址"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.userName"
               placeholder="请输入用户名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -32,7 +29,6 @@
               v-model="queryParams.status"
               placeholder="登录状态"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_common_status"
@@ -45,7 +41,6 @@
           <el-form-item label="登录时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd HH:mm:ss"
               type="daterange"
               range-separator="-"
@@ -151,7 +146,6 @@
         label="登录地址"
         align="center"
         prop="ipaddr"
-        width="130"
         :show-overflow-tooltip="true"
       />
       <el-table-column
@@ -187,7 +181,6 @@
         prop="loginTime"
         sortable="custom"
         :sort-orders="['descending', 'ascending']"
-        width="180"
       >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.loginTime) }}</span>
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index e23bd45..89e8025 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="登录地址" prop="ipaddr">
             <el-input
@@ -88,7 +87,6 @@
         label="登录时间"
         align="center"
         prop="loginTime"
-        width="180"
       >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.loginTime) }}</span>
diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue
index 1cf2e8c..17f6e35 100644
--- a/src/views/monitor/operlog/index.vue
+++ b/src/views/monitor/operlog/index.vue
@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="操作地址" prop="operIp">
             <el-input
               v-model="queryParams.operIp"
               placeholder="请输入操作地址"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.title"
               placeholder="请输入系统模块"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -32,7 +29,6 @@
               v-model="queryParams.operName"
               placeholder="请输入操作人员"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -41,7 +37,6 @@
               v-model="queryParams.businessType"
               placeholder="操作类型"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_oper_type"
@@ -56,7 +51,6 @@
               v-model="queryParams.status"
               placeholder="操作状态"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_common_status"
@@ -69,7 +63,6 @@
           <el-form-item label="操作时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd HH:mm:ss"
               type="daterange"
               range-separator="-"
@@ -170,7 +163,6 @@
         label="操作人员"
         align="center"
         prop="operName"
-        width="110"
         :show-overflow-tooltip="true"
         sortable="custom"
         :sort-orders="['descending', 'ascending']"
@@ -179,7 +171,6 @@
         label="操作地址"
         align="center"
         prop="operIp"
-        width="130"
         :show-overflow-tooltip="true"
       />
       <el-table-column
@@ -200,7 +191,6 @@
         label="操作日期"
         align="center"
         prop="operTime"
-        width="160"
         sortable="custom"
         :sort-orders="['descending', 'ascending']"
       >
@@ -212,7 +202,6 @@
         label="消耗时间"
         align="center"
         prop="costTime"
-        width="110"
         :show-overflow-tooltip="true"
         sortable="custom"
         :sort-orders="['descending', 'ascending']"
@@ -248,13 +237,8 @@
     />
 
     <!-- 操作日志详细 -->
-    <el-dialog
-      title="操作日志详细"
-      :visible.sync="open"
-      width="800px"
-      append-to-body
-    >
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
+    <el-dialog title="操作日志详细" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="操作模块："
@@ -442,3 +426,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 800px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 110px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 8rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.1rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index abe84ac..57717bf 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="参数名称" prop="configName">
             <el-input
               v-model="queryParams.configName"
               placeholder="请输入参数名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.configKey"
               placeholder="请输入参数键名"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -44,7 +41,6 @@
           <el-form-item label="创建时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd"
               type="daterange"
               range-separator="-"
@@ -177,12 +173,7 @@
         prop="remark"
         :show-overflow-tooltip="true"
       />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
+      <el-table-column label="创建时间" align="center" prop="createTime">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -222,8 +213,8 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="参数名称" prop="configName">
           <el-input v-model="form.configName" placeholder="请输入参数名称" />
         </el-form-item>
@@ -440,3 +431,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index bd33ba9..bf484b8 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -89,17 +89,9 @@
       :default-expand-all="isExpandAll"
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
-      <el-table-column
-        prop="deptName"
-        label="部门名称"
-        width="260"
-      ></el-table-column>
-      <el-table-column
-        prop="orderNum"
-        label="排序"
-        width="200"
-      ></el-table-column>
-      <el-table-column prop="status" label="状态" width="100">
+      <el-table-column prop="deptName" label="部门名称"></el-table-column>
+      <el-table-column prop="orderNum" label="排序"></el-table-column>
+      <el-table-column prop="status" label="状态">
         <template slot-scope="scope">
           <dict-tag
             :options="dict.type.sys_normal_disable"
@@ -107,12 +99,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="200"
-      >
+      <el-table-column label="创建时间" align="center" prop="createTime">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -153,8 +140,8 @@
     </el-table>
 
     <!-- 添加或修改部门对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
             <el-form-item label="上级部门" prop="parentId">
@@ -431,3 +418,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index 08fc029..9d91967 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="字典名称" prop="dictType">
             <el-select v-model="queryParams.dictType">
@@ -167,12 +166,7 @@
         prop="remark"
         :show-overflow-tooltip="true"
       />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
+      <el-table-column label="创建时间" align="center" prop="createTime">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -212,8 +206,8 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="字典类型">
           <el-input v-model="form.dictType" :disabled="true" />
         </el-form-item>
@@ -503,3 +497,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 7a719a3..ce143c6 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="字典名称" prop="dictName">
             <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.dictType"
               placeholder="请输入字典类型"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -32,7 +29,6 @@
               v-model="queryParams.status"
               placeholder="字典状态"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_normal_disable"
@@ -45,7 +41,6 @@
           <el-form-item label="创建时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd"
               type="daterange"
               range-separator="-"
@@ -184,7 +179,6 @@
         label="创建时间"
         align="center"
         prop="createTime"
-        width="180"
       >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -225,8 +219,8 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="字典名称" prop="dictName">
           <el-input v-model="form.dictName" placeholder="请输入字典名称" />
         </el-form-item>
@@ -433,3 +427,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index ade2081..8ca5522 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -93,18 +93,13 @@
         prop="menuName"
         label="菜单名称"
         :show-overflow-tooltip="true"
-        width="160"
       ></el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="100">
+      <el-table-column prop="icon" label="图标" align="center">
         <template slot-scope="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
-      <el-table-column
-        prop="orderNum"
-        label="排序"
-        width="60"
-      ></el-table-column>
+      <el-table-column prop="orderNum" label="排序"></el-table-column>
       <el-table-column
         prop="perms"
         label="权限标识"
@@ -115,7 +110,7 @@
         label="组件路径"
         :show-overflow-tooltip="true"
       ></el-table-column>
-      <el-table-column prop="status" label="状态" width="80">
+      <el-table-column prop="status" label="状态">
         <template slot-scope="scope">
           <dict-tag
             :options="dict.type.sys_normal_disable"
@@ -163,8 +158,8 @@
     </el-table>
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row>
           <el-col :span="24">
             <el-form-item label="上级菜单" prop="parentId">
@@ -571,3 +566,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 680px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6.8rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 4867d25..0debd62 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="公告标题" prop="noticeTitle">
             <el-input
@@ -121,12 +120,7 @@
         prop="noticeTitle"
         :show-overflow-tooltip="true"
       />
-      <el-table-column
-        label="公告类型"
-        align="center"
-        prop="noticeType"
-        width="100"
-      >
+      <el-table-column label="公告类型" align="center" prop="noticeType">
         <template slot-scope="scope">
           <dict-tag
             :options="dict.type.sys_notice_type"
@@ -134,7 +128,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center" prop="status" width="100">
+      <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <dict-tag
             :options="dict.type.sys_notice_status"
@@ -142,18 +136,8 @@
           />
         </template>
       </el-table-column>
-      <el-table-column
-        label="创建者"
-        align="center"
-        prop="createBy"
-        width="100"
-      />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="100"
-      >
+      <el-table-column label="创建者" align="center" prop="createBy" />
+      <el-table-column label="创建时间" align="center" prop="createTime">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
         </template>
@@ -193,8 +177,8 @@
     />
 
     <!-- 添加或修改公告对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row>
           <el-col :span="12">
             <el-form-item label="公告标题" prop="noticeTitle">
@@ -394,3 +378,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 780px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 7.8rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 2269f4f..4c11d34 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="岗位编码" prop="postCode">
             <el-input
@@ -177,8 +176,8 @@
     />
 
     <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="岗位名称" prop="postName">
           <el-input v-model="form.postName" placeholder="请输入岗位名称" />
         </el-form-item>
@@ -383,3 +382,38 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
+
diff --git a/src/views/system/role/authUser.vue b/src/views/system/role/authUser.vue
index 2fea650..7c787c4 100644
--- a/src/views/system/role/authUser.vue
+++ b/src/views/system/role/authUser.vue
@@ -14,7 +14,7 @@
               v-model="queryParams.userName"
               placeholder="请输入用户名称"
               clearable
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +23,7 @@
               v-model="queryParams.phonenumber"
               placeholder="请输入手机号码"
               clearable
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 8020f7f..8c691e4 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -14,7 +14,6 @@
               v-model="queryParams.roleName"
               placeholder="请输入角色名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +22,7 @@
               v-model="queryParams.roleKey"
               placeholder="请输入权限字符"
               clearable
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -32,7 +31,7 @@
               v-model="queryParams.status"
               placeholder="角色状态"
               clearable
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_normal_disable"
@@ -45,7 +44,7 @@
           <el-form-item label="创建时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
               value-format="yyyy-MM-dd"
               type="daterange"
               range-separator="-"
@@ -135,21 +134,19 @@
       stripe
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色编号" prop="roleId" />
       <el-table-column
         label="角色名称"
         prop="roleName"
         :show-overflow-tooltip="true"
-        width="150"
       />
       <el-table-column
         label="权限字符"
         prop="roleKey"
         :show-overflow-tooltip="true"
-        width="150"
       />
-      <el-table-column label="显示顺序" prop="roleSort" width="100" />
-      <el-table-column label="状态" align="center" width="100">
+      <el-table-column label="显示顺序" prop="roleSort" />
+      <el-table-column label="状态" align="center">
         <template slot-scope="scope">
           <el-switch
             v-model="scope.row.status"
@@ -159,12 +156,7 @@
           ></el-switch>
         </template>
       </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
+      <el-table-column label="创建时间" align="center" prop="createTime">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -227,8 +219,8 @@
     />
 
     <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
         </el-form-item>
@@ -249,6 +241,7 @@
             v-model="form.roleSort"
             controls-position="right"
             :min="0"
+            style="width: 50%;"
           />
         </el-form-item>
         <el-form-item label="状态">
@@ -740,3 +733,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/temSys/temHistory/components/historyCharts.vue b/src/views/temSys/temHistory/components/historyCharts.vue
index f2a949e..2a9ab05 100644
--- a/src/views/temSys/temHistory/components/historyCharts.vue
+++ b/src/views/temSys/temHistory/components/historyCharts.vue
@@ -306,4 +306,13 @@ export default {
   width: 100% !important;
   height: 600px !important;
 }
+/* // 媒体查询，适配大于2000px分辨率的大屏样式 */
+@media (min-width: 2000px) {
+  .historyCharts {
+    height: 2.3rem !important;
+  }
+  .oneClass {
+    height: 6rem !important;
+  }
+}
 </style>
diff --git a/src/views/temSys/temHistory/index.vue b/src/views/temSys/temHistory/index.vue
index 01c3706..33c2bb5 100644
--- a/src/views/temSys/temHistory/index.vue
+++ b/src/views/temSys/temHistory/index.vue
@@ -349,7 +349,7 @@ export default {
       }
     }
     .oneClass {
-      width: 100% !important;
+      width: calc(100% - 0.4rem) !important;
       height: 7.5rem !important;
     }
     .twoClass {
diff --git a/src/views/temSys/temMonitor/index.vue b/src/views/temSys/temMonitor/index.vue
index 39fbafe..33ecc49 100644
--- a/src/views/temSys/temMonitor/index.vue
+++ b/src/views/temSys/temMonitor/index.vue
@@ -147,12 +147,7 @@
       </div>
     </div>
     <!-- 历史数据弹框 -->
-    <el-dialog
-      title="当日数据"
-      :visible.sync="openDialog"
-      width="900px"
-      append-to-body
-    >
+    <el-dialog title="当日数据" :visible.sync="openDialog" append-to-body>
       <div class="charts" ref="chart_ref"></div>
     </el-dialog>
     <!-- <div class="charts" ref="chart_ref"></div> -->
@@ -476,15 +471,21 @@ export default {
       if (chartRef) {
         // 初始化图表的代码
         this.chartInstance = echarts.init(this.$refs.chart_ref);
+        const titleFontSize = this.$refs.chart_ref.offsetWidth / 70;
         this.option = {
           tooltip: {
             trigger: "axis",
+            textStyle: {
+              // 设置提示框内文字的大小
+              fontSize: titleFontSize,
+            },
           },
           legend: {
             show: true,
             top: 10,
             textStyle: {
               color: "white",
+              fontSize: titleFontSize,
             },
           },
           grid: {
@@ -503,6 +504,7 @@ export default {
               // interval: 0, //强制显示所有x轴数据
               // rotate: 30, //x轴坐标字体倾斜30度
               color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
             },
             axisTick: {
               show: false, // 不显示坐标轴刻度线
@@ -537,6 +539,7 @@ export default {
             // 修饰刻度标签的颜色即y坐标数据
             axisLabel: {
               color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
             },
             // 显示y坐标轴
             axisLine: {
@@ -559,7 +562,12 @@ export default {
             {
               type: "line",
               // 拐点大小
-              symbolSize: 8,
+              // 拐点大小
+              symbolSize: titleFontSize * 0.5,
+              lineStyle: {
+                // 设置折线的厚度
+                width: titleFontSize * 0.1,
+              },
               data: this.chartData2,
               name: "湿度",
               //折线颜色
@@ -593,7 +601,11 @@ export default {
             {
               type: "line",
               // 拐点大小
-              symbolSize: 8,
+              symbolSize: titleFontSize * 0.5,
+              lineStyle: {
+                // 设置折线的厚度
+                width: titleFontSize * 0.1,
+              },
               data: this.chartData1,
               name: "温度",
               //折线颜色
@@ -978,8 +990,8 @@ export default {
     }
   }
   .charts {
-    width: 870px;
-    height: 300px;
+    width: 8.7rem !important;
+    height: 3rem !important;
   }
 }
 </style>
@@ -994,3 +1006,16 @@ export default {
   color: #25f1f8;
 }
 </style>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 900px !important;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 9rem !important;
+  }
+}
+</style>
diff --git a/src/views/tool/build/RightPanel.vue b/src/views/tool/build/RightPanel.vue
index c2760eb..0c25cb2 100644
--- a/src/views/tool/build/RightPanel.vue
+++ b/src/views/tool/build/RightPanel.vue
@@ -5,20 +5,33 @@
       <el-tab-pane label="表单属性" name="form" />
     </el-tabs>
     <div class="field-box">
-      <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
+      <a
+        class="document-link"
+        target="_blank"
+        :href="documentLink"
+        title="查看组件文档"
+      >
         <i class="el-icon-link" />
       </a>
       <el-scrollbar class="right-scrollbar">
         <!-- 组件属性 -->
-        <el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
+        <el-form
+          v-show="currentTab === 'field' && showField"
+          size="small"
+          label-width="90px"
+        >
           <el-form-item v-if="activeData.changeTag" label="组件类型">
             <el-select
               v-model="activeData.tagIcon"
               placeholder="请选择组件类型"
-              :style="{width: '100%'}"
+              :style="{ width: '100%' }"
               @change="tagChange"
             >
-              <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
+              <el-option-group
+                v-for="group in tagList"
+                :key="group.label"
+                :label="group.label"
+              >
                 <el-option
                   v-for="item in group.options"
                   :key="item.label"
@@ -31,38 +44,87 @@
               </el-option-group>
             </el-select>
           </el-form-item>
-          <el-form-item v-if="activeData.vModel!==undefined" label="字段名">
-            <el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
+          <el-form-item v-if="activeData.vModel !== undefined" label="字段名">
+            <el-input
+              v-model="activeData.vModel"
+              placeholder="请输入字段名（v-model）"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.componentName!==undefined" label="组件名">
+          <el-form-item
+            v-if="activeData.componentName !== undefined"
+            label="组件名"
+          >
             {{ activeData.componentName }}
           </el-form-item>
-          <el-form-item v-if="activeData.label!==undefined" label="标题">
+          <el-form-item v-if="activeData.label !== undefined" label="标题">
             <el-input v-model="activeData.label" placeholder="请输入标题" />
           </el-form-item>
-          <el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
-            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
+          <el-form-item
+            v-if="activeData.placeholder !== undefined"
+            label="占位提示"
+          >
+            <el-input
+              v-model="activeData.placeholder"
+              placeholder="请输入占位提示"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
-            <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
+          <el-form-item
+            v-if="activeData['start-placeholder'] !== undefined"
+            label="开始占位"
+          >
+            <el-input
+              v-model="activeData['start-placeholder']"
+              placeholder="请输入占位提示"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
-            <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
+          <el-form-item
+            v-if="activeData['end-placeholder'] !== undefined"
+            label="结束占位"
+          >
+            <el-input
+              v-model="activeData['end-placeholder']"
+              placeholder="请输入占位提示"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.span!==undefined" label="表单栅格">
-            <el-slider v-model="activeData.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
+          <el-form-item v-if="activeData.span !== undefined" label="表单栅格">
+            <el-slider
+              v-model="activeData.span"
+              :max="24"
+              :min="1"
+              :marks="{ 12: '' }"
+              @change="spanChange"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.layout==='rowFormItem'" label="栅格间隔">
-            <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
+          <el-form-item
+            v-if="activeData.layout === 'rowFormItem'"
+            label="栅格间隔"
+          >
+            <el-input-number
+              v-model="activeData.gutter"
+              :min="0"
+              placeholder="栅格间隔"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.layout==='rowFormItem'" label="布局模式">
+          <el-form-item
+            v-if="activeData.layout === 'rowFormItem'"
+            label="布局模式"
+          >
             <el-radio-group v-model="activeData.type">
               <el-radio-button label="default" />
               <el-radio-button label="flex" />
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
-            <el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{width: '100%'}">
+          <el-form-item
+            v-if="
+              activeData.justify !== undefined && activeData.type === 'flex'
+            "
+            label="水平排列"
+          >
+            <el-select
+              v-model="activeData.justify"
+              placeholder="请选择水平排列"
+              :style="{ width: '100%' }"
+            >
               <el-option
                 v-for="(item, index) in justifyOptions"
                 :key="index"
@@ -71,70 +133,133 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
+          <el-form-item
+            v-if="activeData.align !== undefined && activeData.type === 'flex'"
+            label="垂直排列"
+          >
             <el-radio-group v-model="activeData.align">
               <el-radio-button label="top" />
               <el-radio-button label="middle" />
               <el-radio-button label="bottom" />
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="activeData.labelWidth!==undefined" label="标签宽度">
-            <el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
+          <el-form-item
+            v-if="activeData.labelWidth !== undefined"
+            label="标签宽度"
+          >
+            <el-input
+              v-model.number="activeData.labelWidth"
+              type="number"
+              placeholder="请输入标签宽度"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
-            <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
+          <el-form-item
+            v-if="activeData.style && activeData.style.width !== undefined"
+            label="组件宽度"
+          >
+            <el-input
+              v-model="activeData.style.width"
+              placeholder="请输入组件宽度"
+              clearable
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.vModel!==undefined" label="默认值">
+          <el-form-item v-if="activeData.vModel !== undefined" label="默认值">
             <el-input
               :value="setDefaultValue(activeData.defaultValue)"
               placeholder="请输入默认值"
               @input="onDefaultValueInput"
             />
           </el-form-item>
-          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="至少应选">
+          <el-form-item
+            v-if="activeData.tag === 'el-checkbox-group'"
+            label="至少应选"
+          >
             <el-input-number
               :value="activeData.min"
               :min="0"
               placeholder="至少应选"
-              @input="$set(activeData, 'min', $event?$event:undefined)"
+              @input="$set(activeData, 'min', $event ? $event : undefined)"
             />
           </el-form-item>
-          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="最多可选">
+          <el-form-item
+            v-if="activeData.tag === 'el-checkbox-group'"
+            label="最多可选"
+          >
             <el-input-number
               :value="activeData.max"
               :min="0"
               placeholder="最多可选"
-              @input="$set(activeData, 'max', $event?$event:undefined)"
+              @input="$set(activeData, 'max', $event ? $event : undefined)"
             />
           </el-form-item>
-          <el-form-item v-if="activeData.prepend!==undefined" label="前缀">
+          <el-form-item v-if="activeData.prepend !== undefined" label="前缀">
             <el-input v-model="activeData.prepend" placeholder="请输入前缀" />
           </el-form-item>
-          <el-form-item v-if="activeData.append!==undefined" label="后缀">
+          <el-form-item v-if="activeData.append !== undefined" label="后缀">
             <el-input v-model="activeData.append" placeholder="请输入后缀" />
           </el-form-item>
-          <el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
-            <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
-              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('prefix-icon')">
+          <el-form-item
+            v-if="activeData['prefix-icon'] !== undefined"
+            label="前图标"
+          >
+            <el-input
+              v-model="activeData['prefix-icon']"
+              placeholder="请输入前图标名称"
+            >
+              <el-button
+                slot="append"
+                icon="el-icon-thumb"
+                @click="openIconsDialog('prefix-icon')"
+              >
                 选择
               </el-button>
             </el-input>
           </el-form-item>
-          <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
-            <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
-              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('suffix-icon')">
+          <el-form-item
+            v-if="activeData['suffix-icon'] !== undefined"
+            label="后图标"
+          >
+            <el-input
+              v-model="activeData['suffix-icon']"
+              placeholder="请输入后图标名称"
+            >
+              <el-button
+                slot="append"
+                icon="el-icon-thumb"
+                @click="openIconsDialog('suffix-icon')"
+              >
                 选择
               </el-button>
             </el-input>
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
-            <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
+          <el-form-item
+            v-if="activeData.tag === 'el-cascader'"
+            label="选项分隔符"
+          >
+            <el-input
+              v-model="activeData.separator"
+              placeholder="请输入选项分隔符"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
-            <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
+          <el-form-item
+            v-if="activeData.autosize !== undefined"
+            label="最小行数"
+          >
+            <el-input-number
+              v-model="activeData.autosize.minRows"
+              :min="1"
+              placeholder="最小行数"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
-            <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
+          <el-form-item
+            v-if="activeData.autosize !== undefined"
+            label="最大行数"
+          >
+            <el-input-number
+              v-model="activeData.autosize.maxRows"
+              :min="1"
+              placeholder="最大行数"
+            />
           </el-form-item>
           <el-form-item v-if="activeData.min !== undefined" label="最小值">
             <el-input-number v-model="activeData.min" placeholder="最小值" />
@@ -145,40 +270,68 @@
           <el-form-item v-if="activeData.step !== undefined" label="步长">
             <el-input-number v-model="activeData.step" placeholder="步数" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
-            <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
+          <el-form-item
+            v-if="activeData.tag === 'el-input-number'"
+            label="精度"
+          >
+            <el-input-number
+              v-model="activeData.precision"
+              :min="0"
+              placeholder="精度"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
+          <el-form-item
+            v-if="activeData.tag === 'el-input-number'"
+            label="按钮位置"
+          >
             <el-radio-group v-model="activeData['controls-position']">
-              <el-radio-button label="">
-                默认
-              </el-radio-button>
-              <el-radio-button label="right">
-                右侧
-              </el-radio-button>
+              <el-radio-button label=""> 默认 </el-radio-button>
+              <el-radio-button label="right"> 右侧 </el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
-            <el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
-              <template slot="append">
-                个字符
-              </template>
+          <el-form-item
+            v-if="activeData.maxlength !== undefined"
+            label="最多输入"
+          >
+            <el-input
+              v-model="activeData.maxlength"
+              placeholder="请输入字符长度"
+            >
+              <template slot="append"> 个字符 </template>
             </el-input>
           </el-form-item>
-          <el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
-            <el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
+          <el-form-item
+            v-if="activeData['active-text'] !== undefined"
+            label="开启提示"
+          >
+            <el-input
+              v-model="activeData['active-text']"
+              placeholder="请输入开启提示"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
-            <el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
+          <el-form-item
+            v-if="activeData['inactive-text'] !== undefined"
+            label="关闭提示"
+          >
+            <el-input
+              v-model="activeData['inactive-text']"
+              placeholder="请输入关闭提示"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
+          <el-form-item
+            v-if="activeData['active-value'] !== undefined"
+            label="开启值"
+          >
             <el-input
               :value="setDefaultValue(activeData['active-value'])"
               placeholder="请输入开启值"
               @input="onSwitchValueInput($event, 'active-value')"
             />
           </el-form-item>
-          <el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
+          <el-form-item
+            v-if="activeData['inactive-value'] !== undefined"
+            label="关闭值"
+          >
             <el-input
               :value="setDefaultValue(activeData['inactive-value'])"
               placeholder="请输入关闭值"
@@ -186,7 +339,10 @@
             />
           </el-form-item>
           <el-form-item
-            v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
+            v-if="
+              activeData.type !== undefined &&
+              'el-date-picker' === activeData.tag
+            "
             label="时间类型"
           >
             <el-select
@@ -204,7 +360,10 @@
             </el-select>
           </el-form-item>
           <el-form-item v-if="activeData.name !== undefined" label="文件字段名">
-            <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
+            <el-input
+              v-model="activeData.name"
+              placeholder="请输入上传文件字段名"
+            />
           </el-form-item>
           <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
             <el-select
@@ -222,9 +381,19 @@
               <el-option label="txt" value=".txt" />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
-            <el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
-              <el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
+          <el-form-item
+            v-if="activeData.fileSize !== undefined"
+            label="文件大小"
+          >
+            <el-input
+              v-model.number="activeData.fileSize"
+              placeholder="请输入文件大小"
+            >
+              <el-select
+                slot="append"
+                v-model="activeData.sizeUnit"
+                :style="{ width: '66px' }"
+              >
                 <el-option label="KB" value="KB" />
                 <el-option label="MB" value="MB" />
                 <el-option label="GB" value="GB" />
@@ -232,16 +401,19 @@
             </el-input>
           </el-form-item>
           <el-form-item v-if="activeData.action !== undefined" label="上传地址">
-            <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />
+            <el-input
+              v-model="activeData.action"
+              placeholder="请输入上传地址"
+              clearable
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
+          <el-form-item
+            v-if="activeData['list-type'] !== undefined"
+            label="列表类型"
+          >
             <el-radio-group v-model="activeData['list-type']" size="small">
-              <el-radio-button label="text">
-                text
-              </el-radio-button>
-              <el-radio-button label="picture">
-                picture
-              </el-radio-button>
+              <el-radio-button label="text"> text </el-radio-button>
+              <el-radio-button label="picture"> picture </el-radio-button>
               <el-radio-button label="picture-card">
                 picture-card
               </el-radio-button>
@@ -252,12 +424,24 @@
             v-show="'picture-card' !== activeData['list-type']"
             label="按钮文字"
           >
-            <el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
+            <el-input
+              v-model="activeData.buttonText"
+              placeholder="请输入按钮文字"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
-            <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
+          <el-form-item
+            v-if="activeData['range-separator'] !== undefined"
+            label="分隔符"
+          >
+            <el-input
+              v-model="activeData['range-separator']"
+              placeholder="请输入分隔符"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
+          <el-form-item
+            v-if="activeData['picker-options'] !== undefined"
+            label="时间段"
+          >
             <el-input
               v-model="activeData['picker-options'].selectableRange"
               placeholder="请输入时间段"
@@ -270,7 +454,13 @@
               @input="setTimeValue($event)"
             />
           </el-form-item>
-          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
+          <template
+            v-if="
+              ['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(
+                activeData.tag
+              ) > -1
+            "
+          >
             <el-divider>选项</el-divider>
             <draggable
               :list="activeData.options"
@@ -278,23 +468,34 @@
               group="selectItem"
               handle=".option-drag"
             >
-              <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
+              <div
+                v-for="(item, index) in activeData.options"
+                :key="index"
+                class="select-item"
+              >
                 <div class="select-line-icon option-drag">
                   <i class="el-icon-s-operation" />
                 </div>
-                <el-input v-model="item.label" placeholder="选项名" size="small" />
+                <el-input
+                  v-model="item.label"
+                  placeholder="选项名"
+                  size="small"
+                />
                 <el-input
                   placeholder="选项值"
                   size="small"
                   :value="item.value"
                   @input="setOptionValue(item, $event)"
                 />
-                <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
+                <div
+                  class="close-btn select-line-icon"
+                  @click="activeData.options.splice(index, 1)"
+                >
                   <i class="el-icon-remove-outline" />
                 </div>
               </div>
             </draggable>
-            <div style="margin-left: 20px;">
+            <div style="margin-left: 20px">
               <el-button
                 style="padding-bottom: 0"
                 icon="el-icon-circle-plus-outline"
@@ -311,24 +512,29 @@
             <el-divider>选项</el-divider>
             <el-form-item label="数据类型">
               <el-radio-group v-model="activeData.dataType" size="small">
-                <el-radio-button label="dynamic">
-                  动态数据
-                </el-radio-button>
-                <el-radio-button label="static">
-                  静态数据
-                </el-radio-button>
+                <el-radio-button label="dynamic"> 动态数据 </el-radio-button>
+                <el-radio-button label="static"> 静态数据 </el-radio-button>
               </el-radio-group>
             </el-form-item>
 
             <template v-if="activeData.dataType === 'dynamic'">
               <el-form-item label="标签键名">
-                <el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
+                <el-input
+                  v-model="activeData.labelKey"
+                  placeholder="请输入标签键名"
+                />
               </el-form-item>
               <el-form-item label="值键名">
-                <el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
+                <el-input
+                  v-model="activeData.valueKey"
+                  placeholder="请输入值键名"
+                />
               </el-form-item>
               <el-form-item label="子级键名">
-                <el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
+                <el-input
+                  v-model="activeData.childrenKey"
+                  placeholder="请输入子级键名"
+                />
               </el-form-item>
             </template>
 
@@ -340,7 +546,10 @@
               :expand-on-click-node="false"
               :render-content="renderContent"
             />
-            <div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
+            <div
+              v-if="activeData.dataType === 'static'"
+              style="margin-left: 20px"
+            >
               <el-button
                 style="padding-bottom: 0"
                 icon="el-icon-circle-plus-outline"
@@ -353,45 +562,74 @@
             <el-divider />
           </template>
 
-          <el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
+          <el-form-item
+            v-if="activeData.optionType !== undefined"
+            label="选项样式"
+          >
             <el-radio-group v-model="activeData.optionType">
-              <el-radio-button label="default">
-                默认
-              </el-radio-button>
-              <el-radio-button label="button">
-                按钮
-              </el-radio-button>
+              <el-radio-button label="default"> 默认 </el-radio-button>
+              <el-radio-button label="button"> 按钮 </el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
+          <el-form-item
+            v-if="activeData['active-color'] !== undefined"
+            label="开启颜色"
+          >
             <el-color-picker v-model="activeData['active-color']" />
           </el-form-item>
-          <el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
+          <el-form-item
+            v-if="activeData['inactive-color'] !== undefined"
+            label="关闭颜色"
+          >
             <el-color-picker v-model="activeData['inactive-color']" />
           </el-form-item>
 
-          <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
+          <el-form-item
+            v-if="activeData['allow-half'] !== undefined"
+            label="允许半选"
+          >
             <el-switch v-model="activeData['allow-half']" />
           </el-form-item>
-          <el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
-            <el-switch v-model="activeData['show-text']" @change="rateTextChange" />
+          <el-form-item
+            v-if="activeData['show-text'] !== undefined"
+            label="辅助文字"
+          >
+            <el-switch
+              v-model="activeData['show-text']"
+              @change="rateTextChange"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
-            <el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
+          <el-form-item
+            v-if="activeData['show-score'] !== undefined"
+            label="显示分数"
+          >
+            <el-switch
+              v-model="activeData['show-score']"
+              @change="rateScoreChange"
+            />
           </el-form-item>
-          <el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
+          <el-form-item
+            v-if="activeData['show-stops'] !== undefined"
+            label="显示间断点"
+          >
             <el-switch v-model="activeData['show-stops']" />
           </el-form-item>
           <el-form-item v-if="activeData.range !== undefined" label="范围选择">
             <el-switch v-model="activeData.range" @change="rangeChange" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.border !== undefined && activeData.optionType === 'default'"
+            v-if="
+              activeData.border !== undefined &&
+              activeData.optionType === 'default'
+            "
             label="是否带边框"
           >
             <el-switch v-model="activeData.border" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
+          <el-form-item
+            v-if="activeData.tag === 'el-color-picker'"
+            label="颜色格式"
+          >
             <el-select
               v-model="activeData['color-format']"
               placeholder="请选择颜色格式"
@@ -407,64 +645,99 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-if="activeData.size !== undefined &&
+            v-if="
+              activeData.size !== undefined &&
               (activeData.optionType === 'button' ||
                 activeData.border ||
-                activeData.tag === 'el-color-picker')"
+                activeData.tag === 'el-color-picker')
+            "
             label="选项尺寸"
           >
             <el-radio-group v-model="activeData.size">
-              <el-radio-button label="medium">
-                中等
-              </el-radio-button>
-              <el-radio-button label="small">
-                较小
-              </el-radio-button>
-              <el-radio-button label="mini">
-                迷你
-              </el-radio-button>
+              <el-radio-button label="medium"> 中等 </el-radio-button>
+              <el-radio-button label="small"> 较小 </el-radio-button>
+              <el-radio-button label="mini"> 迷你 </el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
+          <el-form-item
+            v-if="activeData['show-word-limit'] !== undefined"
+            label="输入统计"
+          >
             <el-switch v-model="activeData['show-word-limit']" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
+          <el-form-item
+            v-if="activeData.tag === 'el-input-number'"
+            label="严格步数"
+          >
             <el-switch v-model="activeData['step-strictly']" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
+          <el-form-item
+            v-if="activeData.tag === 'el-cascader'"
+            label="是否多选"
+          >
             <el-switch v-model="activeData.props.props.multiple" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
+          <el-form-item
+            v-if="activeData.tag === 'el-cascader'"
+            label="展示全路径"
+          >
             <el-switch v-model="activeData['show-all-levels']" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
+          <el-form-item
+            v-if="activeData.tag === 'el-cascader'"
+            label="可否筛选"
+          >
             <el-switch v-model="activeData.filterable" />
           </el-form-item>
-          <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
+          <el-form-item
+            v-if="activeData.clearable !== undefined"
+            label="能否清空"
+          >
             <el-switch v-model="activeData.clearable" />
           </el-form-item>
-          <el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
+          <el-form-item
+            v-if="activeData.showTip !== undefined"
+            label="显示提示"
+          >
             <el-switch v-model="activeData.showTip" />
           </el-form-item>
-          <el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
+          <el-form-item
+            v-if="activeData.multiple !== undefined"
+            label="多选文件"
+          >
             <el-switch v-model="activeData.multiple" />
           </el-form-item>
-          <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
+          <el-form-item
+            v-if="activeData['auto-upload'] !== undefined"
+            label="自动上传"
+          >
             <el-switch v-model="activeData['auto-upload']" />
           </el-form-item>
-          <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
+          <el-form-item
+            v-if="activeData.readonly !== undefined"
+            label="是否只读"
+          >
             <el-switch v-model="activeData.readonly" />
           </el-form-item>
-          <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
+          <el-form-item
+            v-if="activeData.disabled !== undefined"
+            label="是否禁用"
+          >
             <el-switch v-model="activeData.disabled" />
           </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
+          <el-form-item
+            v-if="activeData.tag === 'el-select'"
+            label="是否可搜索"
+          >
             <el-switch v-model="activeData.filterable" />
           </el-form-item>
           <el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
             <el-switch v-model="activeData.multiple" @change="multipleChange" />
           </el-form-item>
-          <el-form-item v-if="activeData.required !== undefined" label="是否必填">
+          <el-form-item
+            v-if="activeData.required !== undefined"
+            label="是否必填"
+          >
             <el-switch v-model="activeData.required" />
           </el-form-item>
 
@@ -486,25 +759,37 @@
             </el-tree>
           </template>
 
-          <template v-if="activeData.layout === 'colFormItem' && activeData.tag !== 'el-button'">
+          <template
+            v-if="
+              activeData.layout === 'colFormItem' &&
+              activeData.tag !== 'el-button'
+            "
+          >
             <el-divider>正则校验</el-divider>
             <div
               v-for="(item, index) in activeData.regList"
               :key="index"
               class="reg-item"
             >
-              <span class="close-btn" @click="activeData.regList.splice(index, 1)">
+              <span
+                class="close-btn"
+                @click="activeData.regList.splice(index, 1)"
+              >
                 <i class="el-icon-close" />
               </span>
               <el-form-item label="表达式">
                 <el-input v-model="item.pattern" placeholder="请输入正则" />
               </el-form-item>
-              <el-form-item label="错误提示" style="margin-bottom:0">
+              <el-form-item label="错误提示" style="margin-bottom: 0">
                 <el-input v-model="item.message" placeholder="请输入错误提示" />
               </el-form-item>
             </div>
             <div style="margin-left: 20px">
-              <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
+              <el-button
+                icon="el-icon-circle-plus-outline"
+                type="text"
+                @click="addReg"
+              >
                 添加规则
               </el-button>
             </div>
@@ -513,45 +798,49 @@
         <!-- 表单属性 -->
         <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
           <el-form-item label="表单名">
-            <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
+            <el-input
+              v-model="formConf.formRef"
+              placeholder="请输入表单名（ref）"
+            />
           </el-form-item>
           <el-form-item label="表单模型">
-            <el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
+            <el-input
+              v-model="formConf.formModel"
+              placeholder="请输入数据模型"
+            />
           </el-form-item>
           <el-form-item label="校验模型">
-            <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
+            <el-input
+              v-model="formConf.formRules"
+              placeholder="请输入校验模型"
+            />
           </el-form-item>
           <el-form-item label="表单尺寸">
             <el-radio-group v-model="formConf.size">
-              <el-radio-button label="medium">
-                中等
-              </el-radio-button>
-              <el-radio-button label="small">
-                较小
-              </el-radio-button>
-              <el-radio-button label="mini">
-                迷你
-              </el-radio-button>
+              <el-radio-button label="medium"> 中等 </el-radio-button>
+              <el-radio-button label="small"> 较小 </el-radio-button>
+              <el-radio-button label="mini"> 迷你 </el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item label="标签对齐">
             <el-radio-group v-model="formConf.labelPosition">
-              <el-radio-button label="left">
-                左对齐
-              </el-radio-button>
-              <el-radio-button label="right">
-                右对齐
-              </el-radio-button>
-              <el-radio-button label="top">
-                顶部对齐
-              </el-radio-button>
+              <el-radio-button label="left"> 左对齐 </el-radio-button>
+              <el-radio-button label="right"> 右对齐 </el-radio-button>
+              <el-radio-button label="top"> 顶部对齐 </el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item label="标签宽度">
-            <el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
+            <el-input-number
+              v-model="formConf.labelWidth"
+              placeholder="标签宽度"
+            />
           </el-form-item>
           <el-form-item label="栅格间隔">
-            <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
+            <el-input-number
+              v-model="formConf.gutter"
+              :min="0"
+              placeholder="栅格间隔"
+            />
           </el-form-item>
           <el-form-item label="禁用表单">
             <el-switch v-model="formConf.disabled" />
@@ -566,307 +855,318 @@
       </el-scrollbar>
     </div>
 
-    <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
-    <icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
+    <treeNode-dialog
+      :visible.sync="dialogVisible"
+      title="添加选项"
+      @commit="addNode"
+    />
+    <icons-dialog
+      :visible.sync="iconsVisible"
+      :current="activeData[currentIconModel]"
+      @select="setIcon"
+    />
   </div>
 </template>
 
 <script>
-import { isArray } from 'util'
-import draggable from 'vuedraggable'
-import TreeNodeDialog from './TreeNodeDialog'
-import { isNumberStr } from '@/utils/index'
-import IconsDialog from './IconsDialog'
+import { isArray } from "util";
+import draggable from "vuedraggable";
+import TreeNodeDialog from "./TreeNodeDialog";
+import { isNumberStr } from "@/utils/index";
+import IconsDialog from "./IconsDialog";
 import {
   inputComponents,
   selectComponents,
-  layoutComponents
-} from '@/utils/generator/config'
+  layoutComponents,
+} from "@/utils/generator/config";
 
 const dateTimeFormat = {
-  date: 'yyyy-MM-dd',
-  week: 'yyyy 第 WW 周',
-  month: 'yyyy-MM',
-  year: 'yyyy',
-  datetime: 'yyyy-MM-dd HH:mm:ss',
-  daterange: 'yyyy-MM-dd',
-  monthrange: 'yyyy-MM',
-  datetimerange: 'yyyy-MM-dd HH:mm:ss'
-}
+  date: "yyyy-MM-dd",
+  week: "yyyy 第 WW 周",
+  month: "yyyy-MM",
+  year: "yyyy",
+  datetime: "yyyy-MM-dd HH:mm:ss",
+  daterange: "yyyy-MM-dd",
+  monthrange: "yyyy-MM",
+  datetimerange: "yyyy-MM-dd HH:mm:ss",
+};
 
 export default {
   components: {
     draggable,
     TreeNodeDialog,
-    IconsDialog
+    IconsDialog,
   },
-  props: ['showField', 'activeData', 'formConf'],
+  props: ["showField", "activeData", "formConf"],
   data() {
     return {
-      currentTab: 'field',
+      currentTab: "field",
       currentNode: null,
       dialogVisible: false,
       iconsVisible: false,
       currentIconModel: null,
       dateTypeOptions: [
         {
-          label: '日(date)',
-          value: 'date'
+          label: "日(date)",
+          value: "date",
         },
         {
-          label: '周(week)',
-          value: 'week'
+          label: "周(week)",
+          value: "week",
         },
         {
-          label: '月(month)',
-          value: 'month'
+          label: "月(month)",
+          value: "month",
         },
         {
-          label: '年(year)',
-          value: 'year'
+          label: "年(year)",
+          value: "year",
         },
         {
-          label: '日期时间(datetime)',
-          value: 'datetime'
-        }
+          label: "日期时间(datetime)",
+          value: "datetime",
+        },
       ],
       dateRangeTypeOptions: [
         {
-          label: '日期范围(daterange)',
-          value: 'daterange'
+          label: "日期范围(daterange)",
+          value: "daterange",
         },
         {
-          label: '月范围(monthrange)',
-          value: 'monthrange'
+          label: "月范围(monthrange)",
+          value: "monthrange",
         },
         {
-          label: '日期时间范围(datetimerange)',
-          value: 'datetimerange'
-        }
+          label: "日期时间范围(datetimerange)",
+          value: "datetimerange",
+        },
       ],
       colorFormatOptions: [
         {
-          label: 'hex',
-          value: 'hex'
+          label: "hex",
+          value: "hex",
         },
         {
-          label: 'rgb',
-          value: 'rgb'
+          label: "rgb",
+          value: "rgb",
         },
         {
-          label: 'rgba',
-          value: 'rgba'
+          label: "rgba",
+          value: "rgba",
         },
         {
-          label: 'hsv',
-          value: 'hsv'
+          label: "hsv",
+          value: "hsv",
         },
         {
-          label: 'hsl',
-          value: 'hsl'
-        }
+          label: "hsl",
+          value: "hsl",
+        },
       ],
       justifyOptions: [
         {
-          label: 'start',
-          value: 'start'
+          label: "start",
+          value: "start",
         },
         {
-          label: 'end',
-          value: 'end'
+          label: "end",
+          value: "end",
         },
         {
-          label: 'center',
-          value: 'center'
+          label: "center",
+          value: "center",
         },
         {
-          label: 'space-around',
-          value: 'space-around'
+          label: "space-around",
+          value: "space-around",
         },
         {
-          label: 'space-between',
-          value: 'space-between'
-        }
+          label: "space-between",
+          value: "space-between",
+        },
       ],
       layoutTreeProps: {
         label(data, node) {
-          return data.componentName || `${data.label}: ${data.vModel}`
-        }
-      }
-    }
+          return data.componentName || `${data.label}: ${data.vModel}`;
+        },
+      },
+    };
   },
   computed: {
     documentLink() {
       return (
-        this.activeData.document
-        || 'https://element.eleme.cn/#/zh-CN/component/installation'
-      )
+        this.activeData.document ||
+        "https://element.eleme.cn/#/zh-CN/component/installation"
+      );
     },
     dateOptions() {
       if (
-        this.activeData.type !== undefined
-        && this.activeData.tag === 'el-date-picker'
+        this.activeData.type !== undefined &&
+        this.activeData.tag === "el-date-picker"
       ) {
-        if (this.activeData['start-placeholder'] === undefined) {
-          return this.dateTypeOptions
+        if (this.activeData["start-placeholder"] === undefined) {
+          return this.dateTypeOptions;
         }
-        return this.dateRangeTypeOptions
+        return this.dateRangeTypeOptions;
       }
-      return []
+      return [];
     },
     tagList() {
       return [
         {
-          label: '输入型组件',
-          options: inputComponents
+          label: "输入型组件",
+          options: inputComponents,
         },
         {
-          label: '选择型组件',
-          options: selectComponents
-        }
-      ]
-    }
+          label: "选择型组件",
+          options: selectComponents,
+        },
+      ];
+    },
   },
   methods: {
     addReg() {
       this.activeData.regList.push({
-        pattern: '',
-        message: ''
-      })
+        pattern: "",
+        message: "",
+      });
     },
     addSelectItem() {
       this.activeData.options.push({
-        label: '',
-        value: ''
-      })
+        label: "",
+        value: "",
+      });
     },
     addTreeItem() {
-      ++this.idGlobal
-      this.dialogVisible = true
-      this.currentNode = this.activeData.options
+      ++this.idGlobal;
+      this.dialogVisible = true;
+      this.currentNode = this.activeData.options;
     },
     renderContent(h, { node, data, store }) {
       return (
         <div class="custom-tree-node">
           <span>{node.label}</span>
           <span class="node-operation">
-            <i on-click={() => this.append(data)}
+            <i
+              on-click={() => this.append(data)}
               class="el-icon-plus"
               title="添加"
             ></i>
-            <i on-click={() => this.remove(node, data)}
+            <i
+              on-click={() => this.remove(node, data)}
               class="el-icon-delete"
               title="删除"
             ></i>
           </span>
         </div>
-      )
+      );
     },
     append(data) {
       if (!data.children) {
-        this.$set(data, 'children', [])
+        this.$set(data, "children", []);
       }
-      this.dialogVisible = true
-      this.currentNode = data.children
+      this.dialogVisible = true;
+      this.currentNode = data.children;
     },
     remove(node, data) {
-      const { parent } = node
-      const children = parent.data.children || parent.data
-      const index = children.findIndex(d => d.id === data.id)
-      children.splice(index, 1)
+      const { parent } = node;
+      const children = parent.data.children || parent.data;
+      const index = children.findIndex((d) => d.id === data.id);
+      children.splice(index, 1);
     },
     addNode(data) {
-      this.currentNode.push(data)
+      this.currentNode.push(data);
     },
     setOptionValue(item, val) {
-      item.value = isNumberStr(val) ? +val : val
+      item.value = isNumberStr(val) ? +val : val;
     },
     setDefaultValue(val) {
       if (Array.isArray(val)) {
-        return val.join(',')
+        return val.join(",");
       }
-      if (['string', 'number'].indexOf(val) > -1) {
-        return val
+      if (["string", "number"].indexOf(val) > -1) {
+        return val;
       }
-      if (typeof val === 'boolean') {
-        return `${val}`
+      if (typeof val === "boolean") {
+        return `${val}`;
       }
-      return val
+      return val;
     },
     onDefaultValueInput(str) {
       if (isArray(this.activeData.defaultValue)) {
         // 数组
         this.$set(
           this.activeData,
-          'defaultValue',
-          str.split(',').map(val => (isNumberStr(val) ? +val : val))
-        )
-      } else if (['true', 'false'].indexOf(str) > -1) {
+          "defaultValue",
+          str.split(",").map((val) => (isNumberStr(val) ? +val : val))
+        );
+      } else if (["true", "false"].indexOf(str) > -1) {
         // 布尔
-        this.$set(this.activeData, 'defaultValue', JSON.parse(str))
+        this.$set(this.activeData, "defaultValue", JSON.parse(str));
       } else {
         // 字符串和数字
         this.$set(
           this.activeData,
-          'defaultValue',
+          "defaultValue",
           isNumberStr(str) ? +str : str
-        )
+        );
       }
     },
     onSwitchValueInput(val, name) {
-      if (['true', 'false'].indexOf(val) > -1) {
-        this.$set(this.activeData, name, JSON.parse(val))
+      if (["true", "false"].indexOf(val) > -1) {
+        this.$set(this.activeData, name, JSON.parse(val));
       } else {
-        this.$set(this.activeData, name, isNumberStr(val) ? +val : val)
+        this.$set(this.activeData, name, isNumberStr(val) ? +val : val);
       }
     },
     setTimeValue(val, type) {
-      const valueFormat = type === 'week' ? dateTimeFormat.date : val
-      this.$set(this.activeData, 'defaultValue', null)
-      this.$set(this.activeData, 'value-format', valueFormat)
-      this.$set(this.activeData, 'format', val)
+      const valueFormat = type === "week" ? dateTimeFormat.date : val;
+      this.$set(this.activeData, "defaultValue", null);
+      this.$set(this.activeData, "value-format", valueFormat);
+      this.$set(this.activeData, "format", val);
     },
     spanChange(val) {
-      this.formConf.span = val
+      this.formConf.span = val;
     },
     multipleChange(val) {
-      this.$set(this.activeData, 'defaultValue', val ? [] : '')
+      this.$set(this.activeData, "defaultValue", val ? [] : "");
     },
     dateTypeChange(val) {
-      this.setTimeValue(dateTimeFormat[val], val)
+      this.setTimeValue(dateTimeFormat[val], val);
     },
     rangeChange(val) {
       this.$set(
         this.activeData,
-        'defaultValue',
+        "defaultValue",
         val ? [this.activeData.min, this.activeData.max] : this.activeData.min
-      )
+      );
     },
     rateTextChange(val) {
-      if (val) this.activeData['show-score'] = false
+      if (val) this.activeData["show-score"] = false;
     },
     rateScoreChange(val) {
-      if (val) this.activeData['show-text'] = false
+      if (val) this.activeData["show-text"] = false;
     },
     colorFormatChange(val) {
-      this.activeData.defaultValue = null
-      this.activeData['show-alpha'] = val.indexOf('a') > -1
-      this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
+      this.activeData.defaultValue = null;
+      this.activeData["show-alpha"] = val.indexOf("a") > -1;
+      this.activeData.renderKey = +new Date(); // 更新renderKey,重新渲染该组件
     },
     openIconsDialog(model) {
-      this.iconsVisible = true
-      this.currentIconModel = model
+      this.iconsVisible = true;
+      this.currentIconModel = model;
     },
     setIcon(val) {
-      this.activeData[this.currentIconModel] = val
+      this.activeData[this.currentIconModel] = val;
     },
     tagChange(tagIcon) {
-      let target = inputComponents.find(item => item.tagIcon === tagIcon)
-      if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
-      this.$emit('tag-change', target)
-    }
-  }
-}
+      let target = inputComponents.find((item) => item.tagIcon === tagIcon);
+      if (!target)
+        target = selectComponents.find((item) => item.tagIcon === tagIcon);
+      this.$emit("tag-change", target);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -937,10 +1237,53 @@ export default {
   color: #fff;
   font-size: 18px;
 }
-.node-label{
+.node-label {
   font-size: 14px;
 }
-.node-icon{
+.node-icon {
   color: #bebfc3;
 }
+
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .right-board {
+    width: 3.5rem !important;
+    padding-top: 0.03rem !important;
+    .field-box {
+      height: calc(100vh - 0.42rem) !important;
+    }
+  }
+  .select-item {
+    & .el-input + .el-input {
+      margin-left: 0.04rem !important;
+    }
+  }
+  .select-item + .select-item {
+    margin-top: 0.04rem !important;
+  }
+  .select-item.sortable-chosen {
+    border: 0.01rem dashed #409eff !important;
+  }
+  .select-line-icon {
+    line-height: 0.32rem !important;
+    font-size: 0.22rem !important;
+    padding: 0 0.04rem !important;
+  }
+
+  .time-range {
+    .el-date-editor {
+      width: 2.27rem !important;
+    }
+  }
+  .document-link {
+    width: 0.26rem !important;
+    height: 0.26rem !important;
+    border-radius: 0 0 0.06rem 0 !important;
+    line-height: 0.26rem !important;
+    font-size: 0.18rem !important;
+  }
+  .node-label {
+    font-size: 0.14rem !important;
+  }
+}
 </style>
diff --git a/src/views/tool/build/index.vue b/src/views/tool/build/index.vue
index db7199f..4819394 100644
--- a/src/views/tool/build/index.vue
+++ b/src/views/tool/build/index.vue
@@ -599,7 +599,7 @@ $lighterBlue: #409eff;
   height: calc(100vh - 42px);
   overflow: hidden;
   border-left: 1px solid #0e5191;
-  border-right: 1px solid #0e5191 ;
+  border-right: 1px solid #0e5191;
   box-sizing: border-box;
 }
 .center-board {
@@ -623,8 +623,8 @@ $lighterBlue: #409eff;
   height: 42px;
   text-align: right;
   padding: 0 15px;
-  box-sizing: border-box;;
-  border: 1px solid  #0e5191 ;
+  box-sizing: border-box;
+  border: 1px solid #0e5191;
   border-top: none;
   border-left: none;
   .delete-btn {
@@ -810,4 +810,202 @@ $lighterBlue: #409eff;
 .delete-btn::after {
   display: none !important;
 }
+
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .editor-tabs {
+    .el-tabs__item {
+      height: 0.32rem !important;
+      line-height: 0.32rem !important;
+      border-left: 0.01rem solid #121315 !important;
+      margin-right: 0.05rem !important;
+    }
+  }
+
+  // home
+  .right-scrollbar {
+    .el-scrollbar__view {
+      padding: 0.12rem 0.18rem 0.15rem 0.15rem !important;
+    }
+  }
+  .reg-item {
+    padding: 0.12rem 0.06rem !important;
+    border-radius: 0.04rem !important;
+    .close-btn {
+      right: -0.06rem !important;
+      top: -0.06rem !important;
+      width: 0.16rem !important;
+      height: 0.16rem !important;
+      line-height: 0.16rem !important;
+      font-size: 0.12rem !important;
+    }
+    & + .reg-item {
+      margin-top: 0.18rem !important;
+    }
+  }
+  .action-bar {
+    & .el-button + .el-button {
+      margin-left: 0.15rem !important;
+    }
+    & i {
+      font-size: 0.2rem !important;
+      top: -0.01rem !important;
+    }
+  }
+
+  .custom-tree-node {
+    font-size: 0.14rem !important;
+    i[class*="el-icon"] + i[class*="el-icon"] {
+      margin-left: 0.06rem !important;
+    }
+  }
+  .components-list {
+    padding: 0.08rem !important;
+  }
+  .components-draggable {
+    padding-bottom: 0.2rem !important;
+  }
+  .components-title {
+    font-size: 0.14rem !important;
+    margin: 0.06rem 0.02rem !important;
+    .svg-icon {
+      font-size: 0.18rem !important;
+    }
+  }
+
+  .components-body {
+    padding: 0.08rem 0.1rem !important;
+    font-size: 0.12rem !important;
+    border: 0.01rem dashed #436efc !important;
+    border-radius: 0.03rem !important;
+    .svg-icon {
+      font-size: 0.15rem !important;
+    }
+    &:hover {
+      border: 0.01rem dashed #787be8 !important;
+    }
+  }
+
+  .left-board {
+    width: 2.6rem !important;
+  }
+  .left-scrollbar {
+    height: calc(100vh - 0.42rem) !important;
+  }
+  .center-scrollbar {
+    height: calc(100vh - 0.42rem) !important;
+    border-left: 0.01rem solid #0e5191 !important;
+    border-right: 0.01rem solid #0e5191 !important;
+  }
+  .center-board {
+    margin: 0 3.5rem 0 2.6rem !important;
+  }
+  .empty-info {
+    font-size: 0.18rem !important;
+    letter-spacing: 0.04rem !important;
+  }
+  .action-bar {
+    height: 0.42rem !important;
+    padding: 0 0.15rem !important;
+    border: 0.01rem solid #0e5191 !important;
+  }
+  .logo-wrapper {
+    height: 0.42rem !important;
+    border-bottom: 0.01rem solid #0e5191 !important;
+  }
+  .logo {
+    left: 0.12rem !important;
+    top: 0.06rem !important;
+    line-height: 0.3rem !important;
+    font-size: 0.17rem !important;
+    > img {
+      width: 0.3rem !important;
+      height: 0.3rem !important;
+    }
+    .github {
+      margin-left: 0.15rem !important;
+      > img {
+        height: 0.22rem !important;
+      }
+    }
+  }
+
+  .center-board-row {
+    padding: 0.12rem 0.12rem 0.15rem 0.12rem !important;
+    & > .el-form {
+      height: calc(100vh - 0.69rem) !important;
+    }
+  }
+  .drawing-board {
+    .sortable-ghost {
+      &::before {
+        height: 0.03rem !important;
+      }
+    }
+    .components-item.sortable-ghost {
+      height: 0.6rem !important;
+    }
+    .active-from-item {
+      & > .el-form-item {
+        border-radius: 0.06rem !important;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 0.15rem !important;
+    }
+  }
+  .drawing-item {
+    &.unfocus-bordered:not(.activeFromItem) > div:first-child {
+      border: 0.01rem dashed #ccc !important;
+    }
+    .el-form-item {
+      padding: 0.12rem 0.1rem !important;
+    }
+  }
+  .drawing-row-item {
+    border: 0.01rem dashed #ccc !important;
+    border-radius: 0.03rem !important;
+    padding: 0 0.02rem !important;
+    margin-bottom: 0.15rem !important;
+    .drawing-row-item {
+      margin-bottom: 0.02rem !important;
+    }
+    .el-col {
+      margin-top: 0.22rem !important;
+    }
+    .drag-wrapper {
+      min-height: 0.8rem !important;
+    }
+    &.active-from-item {
+      border: 0.01rem dashed $lighterBlue !important;
+    }
+    .component-name {
+      font-size: 0.12rem !important;
+      padding: 0 0.06rem !important;
+    }
+  }
+  .drawing-item,
+  .drawing-row-item {
+    &:hover {
+      & > .el-form-item {
+        border-radius: 0.06rem !important;
+      }
+    }
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
+      top: -0.1rem !important;
+      width: 0.22rem !important;
+      height: 0.22rem !important;
+      line-height: 0.22rem !important;
+      font-size: 0.12rem !important;
+      border: 0.01rem solid !important;
+    }
+    & > .drawing-item-copy {
+      right: 0.56rem !important;
+    }
+    & > .drawing-item-delete {
+      right: 0.24rem !important;
+    }
+  }
+}
 </style>
diff --git a/src/views/tool/gen/createTable.vue b/src/views/tool/gen/createTable.vue
index 446fc6d..2252bf7 100644
--- a/src/views/tool/gen/createTable.vue
+++ b/src/views/tool/gen/createTable.vue
@@ -1,8 +1,13 @@
 <template>
   <!-- 创建表 -->
-  <el-dialog title="创建表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+  <el-dialog title="创建表" :visible.sync="visible" top="5vh" append-to-body>
     <span>创建表语句(支持多个建表语句)：</span>
-    <el-input type="textarea" :rows="10" placeholder="请输入文本" v-model="content"></el-input>
+    <el-input
+      type="textarea"
+      :rows="10"
+      placeholder="请输入文本"
+      v-model="content"
+    ></el-input>
     <div slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取 消</el-button>
       <el-button type="primary" @click="handleCreateTable">确 定</el-button>
@@ -18,7 +23,7 @@ export default {
       // 遮罩层
       visible: false,
       // 文本内容
-      content: ""
+      content: "",
     };
   },
   methods: {
@@ -32,14 +37,27 @@ export default {
         this.$modal.msgError("请输入建表语句");
         return;
       }
-      createTable({ sql: this.content }).then(res => {
+      createTable({ sql: this.content }).then((res) => {
         this.$modal.msgSuccess(res.msg);
         if (res.code === 200) {
           this.visible = false;
           this.$emit("ok");
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 800px !important;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 8rem !important;
+  }
+}
+</style>
diff --git a/src/views/tool/gen/index.vue b/src/views/tool/gen/index.vue
index 8366d4a..383442c 100644
--- a/src/views/tool/gen/index.vue
+++ b/src/views/tool/gen/index.vue
@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="表名称" prop="tableName">
             <el-input
@@ -146,33 +145,28 @@
         align="center"
         prop="tableName"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column
         label="表描述"
         align="center"
         prop="tableComment"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column
         label="实体"
         align="center"
         prop="className"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column
         label="创建时间"
         align="center"
         prop="createTime"
-        width="160"
       />
       <el-table-column
         label="更新时间"
         align="center"
         prop="updateTime"
-        width="160"
       />
       <el-table-column
         label="操作"