style: 仪表板组件样式

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -311,7 +311,7 @@ export default {
       }
     },
     handleMouseDown() {
-      this.$store.commit('setClickComponentStatus', fals)
+      this.$store.commit('setClickComponentStatus', false)
     },
     initMobileCanvas() {
       this.$store.commit('openMobileLayout')

frontend/src/views/panel/AssistComponent/index.vue

@@ -339,7 +339,8 @@ export default {
     white-space: pre;
     text-overflow: ellipsis;
     position: absolute;
-    inset: 0px 0px 0px 40px;
+    /* inset: 0px 0px 0px 40px; */
+    margin-left: 40px;
     box-sizing: border-box;
     overflow: hidden;
     overflow-x: hidden;

frontend/src/views/panel/edit/index.vue

@@ -37,35 +37,31 @@
             </div>
             <!-- 视图图表 end -->
             <!-- 过滤组件 start -->
-            <div tabindex="-1" style="position: relative; margin: 16px auto">
-              <div style="height: 60px; position: relative">
-                <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
-                  <el-button circle :class="show&&showIndex===1? 'button-show':'button-closed'" class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
-                </div>
-                <div class="button-text" style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
-                  <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-                    {{ $t('panel.module') }}
-                  </div>
-                </div>
+
+            <div class="button-div-class" style="  width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px; ">
+              <el-button circle :class="show&&showIndex===1? 'button-show':'button-closed'" class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
+            </div>
+            <div class="button-text" style=" position: relative; margin: 18px auto 16px;">
+              <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+                {{ $t('panel.module') }}
               </div>
             </div>
+
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
               <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
             </div>
             <!-- 过滤组件 end -->
             <!-- 其他组件 start -->
-            <div tabindex="-1" style="position: relative; margin: 16px auto">
-              <div style="height: 60px; position: relative">
-                <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
-                  <el-button circle :class="show&&showIndex===3? 'button-show':'button-closed'" class="el-icon-brush" size="mini" @click="showPanel(3)" />
-                </div>
-                <div class="button-text" style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
-                  <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-                    {{ $t('panel.other_module') }}
-                  </div>
-                </div>
+
+            <div class="button-div-class" style="  width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px; ">
+              <el-button circle :class="show&&showIndex===3? 'button-show':'button-closed'" class="el-icon-brush" size="mini" @click="showPanel(3)" />
+            </div>
+            <div class="button-text" style=" position: relative; margin: 18px auto 16px;">
+              <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+                {{ $t('panel.other_module') }}
               </div>
             </div>
+
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
               <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
             </div>
@@ -220,8 +216,8 @@ import ViewSelect from '../ViewSelect'
 import SubjectSetting from '../SubjectSetting'
 import bus from '@/utils/bus'
 import Editor from '@/components/canvas/components/Editor/index'
-import {deepCopy, panelInit} from '@/components/canvas/utils/utils'
-import componentList, { BASE_MOBILE_STYLE ,HYPERLINKS} from '@/components/canvas/custom-component/component-list' // 左侧列表数据
+import { deepCopy, panelInit } from '@/components/canvas/utils/utils'
+import componentList, { BASE_MOBILE_STYLE, HYPERLINKS } from '@/components/canvas/custom-component/component-list' // 左侧列表数据
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'

frontend/src/views/panel/filter/index.vue

@@ -272,7 +272,8 @@ export default {
     white-space: pre;
     text-overflow: ellipsis;
     position: absolute;
-    inset: 0px 0px 0px 40px;
+    /* inset: 0px 0px 0px 40px; */
+    margin-left: 40px;
     box-sizing: border-box;
     overflow: hidden;
     overflow-x: hidden;