From c7d24c341d275586eee4d038f435d05262c191e6 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Fri, 26 Mar 2021 12:14:18 +0800
Subject: [PATCH] style(frontend): css fix

---
 frontend/src/styles/reset.css                      |  4 ++--
 .../src/views/chart/components/ChartComponent.vue  |  4 ++--
 .../component-style/BackgroundColorSelector.vue    |  2 +-
 .../components/component-style/LegendSelector.vue  |  2 +-
 .../components/component-style/TitleSelector.vue   |  2 +-
 .../components/component-style/XAxisSelector.vue   |  2 +-
 .../components/component-style/YAxisSelector.vue   |  2 +-
 .../chart/components/filter/QuotaFilterEditor.vue  |  2 +-
 .../chart/components/shape-attr/ColorSelector.vue  |  2 +-
 .../chart/components/shape-attr/LabelSelector.vue  |  2 +-
 .../chart/components/shape-attr/SizeSelector.vue   |  2 +-
 .../components/shape-attr/TooltipSelector.vue      |  2 +-
 frontend/src/views/chart/view/ChartEdit.vue        | 14 +++++++++-----
 frontend/src/views/dataset/add/AddSQL.vue          |  2 +-
 frontend/src/views/dataset/data/UpdateInfo.vue     |  8 ++++----
 15 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/frontend/src/styles/reset.css b/frontend/src/styles/reset.css
index b7d5b60c81..f799db2c2f 100644
--- a/frontend/src/styles/reset.css
+++ b/frontend/src/styles/reset.css
@@ -32,7 +32,7 @@ li {
     list-style: none;
 }
 #app {
-    overflow: hidden;
+    /*overflow: hidden;*/
 }
 .el-tabs {
     height: 100%;
@@ -43,4 +43,4 @@ li {
 }
 .el-tabs__nav-scroll {
     padding-left: 20px;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index d54552337c..f0c61518a9 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex;width: 100%;height: 100%;">
+  <div style="display: flex;">
     <div :id="chartId" style="width: 100%;height: 100%;" />
   </div>
 </template>
@@ -50,7 +50,7 @@ export default {
   },
   methods: {
     drawEcharts() {
-      debugger
+      // debugger
       const chart = this.chart
       let chart_option = {}
       // type
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index 038e201afa..bd563ecc27 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -62,7 +62,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .shape-item{
   padding: 6px;
   border: none;
diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index 45c7233ec9..9308df28b0 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -117,7 +117,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .shape-item{
   padding: 6px;
   border: none;
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index b86412b4d3..400f1b37bc 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -96,7 +96,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .shape-item{
   padding: 6px;
   border: none;
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index 84dfacbe0f..eebed0cd8f 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -74,7 +74,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .shape-item{
   padding: 6px;
   border: none;
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index c4f254b301..a8bb41abf2 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -74,7 +74,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .shape-item{
   padding: 6px;
   border: none;
diff --git a/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue b/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
index cd74405567..7ccafa100e 100644
--- a/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
+++ b/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
@@ -99,7 +99,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .filter-item{
   width: 100%;
   border-radius: 4px;
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 02fd2fa465..c3491ca085 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -126,7 +126,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .shape-item{
   padding: 6px;
   border: none;
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index 41612bbbd0..1bc73b8182 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -91,7 +91,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
   .shape-item{
     padding: 6px;
     border: none;
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 0943446a16..7603f0373f 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -130,7 +130,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .shape-item{
   padding: 6px;
   border: none;
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index c7f45b8f2a..e079902e23 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -88,7 +88,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .shape-item{
   padding: 6px;
   border: none;
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index ddbb0ef56a..9bf2d85b7b 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -101,7 +101,7 @@
             </div>
           </el-row>
         </div>
-        <div style="height: 40%;overflow:auto;border-top: 1px solid #e6e6e6">
+        <div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6">
           <el-tabs type="card" :stretch="true" class="tab-header">
             <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
               <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
@@ -572,7 +572,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
   .padding-lr {
     padding: 0 6px;
   }
@@ -654,6 +654,9 @@ export default {
     background-color: #f7f8fa;
     border-bottom-color: #f7f8fa!important;
   }
+  .tab-header>>>.el-tabs__nav-scroll{
+    padding-left: 0!important;
+  }
 
   .draggable-group {
     display: inline-block;
@@ -702,9 +705,10 @@ export default {
 
   .filter-class{
     height: calc(35% - 102px);
-    .filter-inner-class{
-      height: calc(100% - 40px);
-    }
+  }
+
+  .filter-class>>>.filter-inner-class{
+    height: calc(100% - 40px);
   }
 
   .chart-class{
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 4e7f75f6e8..4bb5811761 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -264,7 +264,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
   .el-divider--horizontal {
     margin: 12px 0;
   }
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index 49324e36d0..a210c9ad77 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -504,16 +504,16 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
   .el-divider--horizontal {
     margin: 12px 0;
   }
 
   .el-radio{
     margin-right: 10px;
-    >>>.el-radio__label{
-      font-size: 12px;
-    }
+  }
+  .el-radio>>>.el-radio__label{
+    font-size: 12px;
   }
 
   .dialog-css >>> .el-dialog__header {