feat: update style

src/layout/components/AppMain.vue

@@ -24,6 +24,7 @@ limitations under the License. -->
 <script lang="ts" setup></script>
 <style lang="scss" scoped>
 .app-main {
-  height: calc(100% - 128px);
+  height: calc(100% - 40px);
+  background: #f7f9fa;
 }
 </style>

src/views/dashboard/Edit.vue

@@ -19,9 +19,7 @@ limitations under the License. -->
     <el-button size="mini" type="primary">Apply</el-button>
   </div>
   <div class="flex-h ds-main">
-    <div class="ds-layout">
     <GridLayout />
-    </div>
     <div class="ds-config">Configurations</div>
   </div>
 </template>
@@ -35,29 +33,20 @@ import GridLayout from "./widget/GridLayout.vue";
   text-align: right;
   padding: 5px 10px;
   background: rgb(240, 242, 245);
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #dfe4e8;
 }
 
 .ds-main {
-  background: #f7f9fa;
-  // background: #eee;
-}
-
-.ds-layout {
-  // background: rgb(240, 242, 245);
-  // background-color: #fafbfc;
-  height: 890px;
-  flex-grow: 2;
-  overflow: auto;
-  // padding: 0 5px;
+  height: calc(100% - 40px);
 }
 
 .ds-config {
   width: 360px;
   margin: 5px 0;
   background-color: #fff;
-  box-shadow: 5px 5px 5px #fff;
+  box-shadow: 2px 0 2px 0 #ccc;
   text-align: center;
+  border-left: 1px solid #eee;
 }
 
 .panel {

src/views/dashboard/New.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="new-dashboard">
-    <h4>{{ t("newDashboard") }}</h4>
+    <div class="title">{{ t("newDashboard") }}</div>
     <div class="item">
       <div class="label">{{ t("name") }}</div>
       <el-input
@@ -195,20 +195,30 @@ const onCreate = () => {
 selectorStore.fetchServices("general");
 </script>
 <style lang="scss" scoped>
+.title {
+  font-size: 18px;
+  font-weight: bold;
+  padding-top: 20px;
+}
+
 .new-dashboard {
   margin: 0 auto;
 }
+
 .item {
   margin-top: 20px;
 }
+
 .new-dashboard,
 .selectors,
 .el-cascader-menu {
   width: 600px;
 }
+
 .create {
   width: 600px;
 }
+
 .btn {
   margin-top: 40px;
 }

src/views/dashboard/widget/GridLayout.vue

@@ -21,7 +21,6 @@ limitations under the License. -->
     :is-resizable="true"
     :is-mirrored="false"
     :vertical-compact="true"
-    :margin="[10, 10]"
     :use-css-transforms="true"
   >
     <grid-item
@@ -73,6 +72,8 @@ const layout = [
 <style lang="scss" scoped>
 .vue-grid-layout {
   background: #f7f9fa;
+  flex-grow: 2;
+  overflow: auto;
 }
 
 .vue-grid-item:not(.vue-grid-placeholder) {