样式调整

.gitignore

@@ -1,3 +1,5 @@
+.lh
+
 .DS_Store
 node_modules
 /dist

src/components/form-designer/form-widget/index.vue

@@ -259,7 +259,6 @@
   .grid-cell {
     min-height: 30px;
     border-right: 1px dotted #cccccc;
-
   }
 
   .fade-enter-active, .fade-leave-active {

src/components/form-designer/index.vue

@@ -31,7 +31,7 @@
     </el-header>
 
     <el-container>
-      <el-aside class="side-panel">
+      <el-aside class="left-panel">
         <widget-panel :designer="designer" />
       </el-aside>
 
@@ -51,7 +51,7 @@
         </el-main>
       </el-container>
 
-      <el-aside>
+      <el-aside class="right-panel">
         <setting-panel :designer="designer" :selected-widget="designer.selectedWidget"
                        :form-config="designer.formConfig" :global-dsv="globalDsv" />
       </el-aside>
@@ -416,12 +416,12 @@
 
   .el-container.center-layout-container {
     min-width: 680px;
-    border-left: 2px dotted #EBEEF5;
+    border-left: 1px solid #EBEEF5;
-    border-right: 2px dotted #EBEEF5;
+    border-right: 1px solid #EBEEF5;
   }
 
   .el-header.main-header {
-    border-bottom: 2px dotted #EBEEF5;
+    border-bottom: 1px solid #EBEEF5;
     height: 48px !important;
     line-height: 48px !important;
     min-width: 800px;
@@ -475,15 +475,19 @@
 
   .el-header.toolbar-header {
     font-size: 14px;
-    border-bottom: 1px dotted #CCCCCC;
+    border-bottom: 1px solid #dddddd;
     height: 42px !important;
     //line-height: 42px !important;
   }
 
-  .el-aside.side-panel {
+  .el-aside.left-panel {
     width: 260px !important;
     overflow-y: hidden;
   }
+  .el-aside.right-panel {
+    // width: 320px !important;
+    overflow-y: hidden;
+  }
 
   .el-main.form-widget-main {
     padding: 0;

src/components/form-designer/setting-panel/form-setting.vue

@@ -42,7 +42,7 @@
             <el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{i18nt('designer.setting.addEventHandler')}}</el-button>
           </el-form-item>
           <el-form-item label-width="0">
-            <el-divider class="custom-divider">{{i18nt('designer.setting.formSFCSetting')}}</el-divider>
+            <el-divider class="custom-divider" content-position="left">{{i18nt('designer.setting.formSFCSetting')}}</el-divider>
           </el-form-item>
           <el-form-item :label="i18nt('designer.setting.formModelName')">
             <el-input type="text" v-model="formConfig.modelName"></el-input>
@@ -332,6 +332,10 @@
     .custom-divider.el-divider--horizontal {
       margin: 10px 0;
     }
+    .custom-divider .el-divider__text.is-left{
+      left: 5px;
+      padding: 0 5px 0 5px;
+    }
   }
 
   .setting-collapse {
@@ -340,9 +344,15 @@
     }
 
     ::v-deep .el-collapse-item__header {
-      font-style: italic;
+      background: #f2f2f4;
+      height: 28px;
+      padding: 0 10px;
+      // font-style: italic;
       font-weight: bold;
     }
+    ::v-deep .el-collapse-item__wrap {
+      padding: 10px;
+    }
   }
 
   .small-padding-dialog {

src/components/form-designer/setting-panel/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container class="panel-container">
-    <el-tabs :active-name="activeTab" style="height: 100%; overflow: hidden">
+    <el-tabs :active-name="activeTab" style="width: 100%; height: 100%; overflow: hidden">
       <el-tab-pane :label="i18nt('designer.hint.widgetSetting')" name="1">
         <el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">
 
@@ -306,7 +306,11 @@
 
 <style lang="scss" scoped>
   .panel-container {
-    padding: 0 8px;
+    // padding: 0 8px;
+    ::v-deep .el-tabs__header {
+      padding: 0 10px;
+      margin: 0;
+    }
   }
 
   .setting-scrollbar {
@@ -321,9 +325,15 @@
     }
 
     ::v-deep .el-collapse-item__header {
-      font-style: italic;
+      background: #f2f2f4;
+      height: 28px;
+      padding: 0 10px;
+      // font-style: italic;
       font-weight: bold;
     }
+    ::v-deep .el-collapse-item__wrap {
+      padding: 10px;
+    }
   }
 
   .setting-form {

src/components/form-designer/widget-panel/index.vue

@@ -265,7 +265,9 @@
 
 <style lang="scss" scoped>
   .color-svg-icon {
-    color: $--color-primary;
+    // color: $--color-primary;
+    -webkit-font-smoothing: antialiased;
+    color: #7c7d82;
   }
 
   .side-scroll-bar {
@@ -297,7 +299,7 @@
 
     ::v-deep .el-collapse-item__header {
       margin-left: 8px;
-      font-style: italic;
+      // font-style: italic;
       font-weight: bold;
     }
 
@@ -319,21 +321,27 @@
 
         .container-widget-item, .field-widget-item {
           display: inline-block;
-          height: 28px;
+          height: 32px;
-          line-height: 28px;
+          line-height: 32px;
-          width: 115px;
+          // width: 115px;
+          width: 91px;
           float: left;
           margin: 2px 6px 6px 0;
           cursor: move;
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
-          background: #f1f2f3;
+          // background: #f1f2f3;
+          background: #fff;
+          border: 1px solid #e8e9eb;
+          border-radius: 4px;
+          padding: 0 8px;
         }
 
         .container-widget-item:hover, .field-widget-item:hover {
-          background: #EBEEF5;
+          // background: #EBEEF5;
-          outline: 1px solid $--color-primary;
+          // outline: 1px solid $--color-primary;
+          border-color: $--color-primary;
         }
 
         .drag-handler {

src/main.js

@@ -7,8 +7,9 @@ import ElementUI from 'element-ui'
 import './utils/directive'
 import './icons'
 
-import 'element-ui/lib/theme-chalk/index.css'
+// import 'element-ui/lib/theme-chalk/index.css'
 import '@/styles/index.scss'
+import '@/styles/theme/index.scss'
 import '@/iconfont/iconfont.css'
 
 import {loadExtension} from '@/extension/extension-loader'

src/styles/global.scss

@@ -1,5 +1,6 @@
 /* 全局css变量 */
-$--color-primary: #409EFF;
+// $--color-primary: #409EFF;
+$--color-primary: #2468f2;
 
 .primary-color {
   color: $--color-primary;
@@ -11,7 +12,7 @@ $--color-primary: #409EFF;
 
 .form-widget-list {
 
-  .ghost{
+  .ghost {
     content: '';
     font-size: 0;
     height: 3px;
@@ -29,7 +30,7 @@ $--color-primary: #409EFF;
     line-height: 36px !important;
   }
 
-  .el-rate{
+  .el-rate {
     margin-top: 8px;
   }
 }
@@ -39,7 +40,7 @@ $--color-primary: #409EFF;
     line-height: 32px !important;
   }
 
-  .el-rate{
+  .el-rate {
     margin-top: 6px;
   }
 }
@@ -49,7 +50,7 @@ $--color-primary: #409EFF;
     line-height: 28px !important;
   }
 
-  .el-rate{
+  .el-rate {
     margin-top: 4px;
   }
 }
@@ -59,7 +60,8 @@ $--color-primary: #409EFF;
   margin-bottom: 3px;
 }
 
-input[type="password"]::-ms-reveal {  /* 隐藏IE/Edge原生的密码查看按钮 */
+input[type="password"]::-ms-reveal {
+  /* 隐藏IE/Edge原生的密码查看按钮 */
   display: none;
 }
 
@@ -90,7 +92,8 @@ input[type="password"]::-ms-reveal {  /* 隐藏IE/Edge原生的密码查看按
   background-color: rgba(#101F1C, 0.85);
 }
 
-* {//Firefox浏览器滚动条样式
+* {
+  //Firefox浏览器滚动条样式
   scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色
   scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
 }

src/styles/index.scss

@@ -11,5 +11,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  // font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: -apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,Arial,microsoft yahei ui,Microsoft YaHei,SimSun,sans-serif;
 }