fix(视图):尝试解决源码运行，视图类型样式错乱的问题

86fd2cfb · junjie · 01e23ef5 · 86fd2cfb · 86fd2cfb · 86fd2cfb
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -684,3 +684,12 @@ div:focus {
  background: linear-gradient(to right, #fff, rgba(255,255,255,0)) !important;
 }

+.chart-type .el-radio__input{
+  display: none!important;
+}
+
+.chart-type .el-radio__label{
+  padding-left: 0!important;
+}
+
+
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1880,22 +1880,11 @@ export default {
    height: calc(100% - 6px);
  }

-  .chart-type{
-    padding: 4px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-
  .chart-icon{
    width: 20px;
    height: 20px;
  }

-  .chart-type>>>.el-radio__input{
-    display: none !important;
-  }
-
  .el-radio{
    margin:5px;
  }

--- a/frontend/src/views/chart/view/ChartType.vue
+++ b/frontend/src/views/chart/view/ChartType.vue
@@ -5,7 +5,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="table-normal" label="table-normal" border>
+            <el-radio value="table-normal" label="table-normal" border class="radio-style">
              <span :title="$t('chart.chart_table_normal')">
                <svg-icon icon-class="table-normal" class="chart-icon" />
              </span>
@@ -13,7 +13,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="table-info" label="table-info" border>
+            <el-radio value="table-info" label="table-info" border class="radio-style">
              <span :title="$t('chart.chart_table_info')">
                <svg-icon icon-class="table-info" class="chart-icon" />
              </span>
@@ -28,7 +28,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="text" label="text" border>
+            <el-radio value="text" label="text" border class="radio-style">
              <span :title="$t('chart.chart_card')">
                <svg-icon icon-class="text" class="chart-icon" />
              </span>
@@ -36,7 +36,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="gauge" label="gauge" border>
+            <el-radio value="gauge" label="gauge" border class="radio-style">
              <span :title="$t('chart.chart_gauge')">
                <svg-icon icon-class="gauge" class="chart-icon" />
              </span>
@@ -44,7 +44,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="liquid" label="liquid" border>
+            <el-radio value="liquid" label="liquid" border class="radio-style">
              <span :title="$t('chart.chart_liquid')">
                <svg-icon icon-class="liquid" class="chart-icon" />
              </span>
@@ -58,7 +58,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="line" label="line" border>
+            <el-radio value="line" label="line" border class="radio-style">
              <span :title="$t('chart.chart_line')">
                <svg-icon icon-class="line" class="chart-icon" />
              </span>
@@ -66,7 +66,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="line-stack" label="line-stack" border>
+            <el-radio value="line-stack" label="line-stack" border class="radio-style">
              <span :title="$t('chart.chart_line_stack')">
                <svg-icon icon-class="line-stack" class="chart-icon" />
              </span>
@@ -81,7 +81,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="bar" label="bar" border>
+            <el-radio value="bar" label="bar" border class="radio-style">
              <span :title="$t('chart.chart_bar')">
                <svg-icon icon-class="bar" class="chart-icon" />
              </span>
@@ -89,7 +89,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="bar-stack" label="bar-stack" border>
+            <el-radio value="bar-stack" label="bar-stack" border class="radio-style">
              <span :title="$t('chart.chart_bar_stack')">
                <svg-icon icon-class="bar-stack" class="chart-icon" />
              </span>
@@ -97,7 +97,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="waterfall" label="waterfall" border>
+            <el-radio value="waterfall" label="waterfall" border class="radio-style">
              <span :title="$t('chart.chart_waterfall')">
                <svg-icon icon-class="waterfall" class="chart-icon" />
              </span>
@@ -109,7 +109,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="bar-horizontal" label="bar-horizontal" border>
+            <el-radio value="bar-horizontal" label="bar-horizontal" border class="radio-style">
              <span :title="$t('chart.chart_bar_horizontal')">
                <svg-icon icon-class="bar-horizontal" class="chart-icon" />
              </span>
@@ -117,7 +117,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border>
+            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border class="radio-style">
              <span :title="$t('chart.chart_bar_stack_horizontal')">
                <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
              </span>
@@ -132,7 +132,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="pie" label="pie" border>
+            <el-radio value="pie" label="pie" border class="radio-style">
              <span :title="$t('chart.chart_pie')">
                <svg-icon icon-class="pie" class="chart-icon" />
              </span>
@@ -140,7 +140,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="pie-rose" label="pie-rose" border>
+            <el-radio value="pie-rose" label="pie-rose" border class="radio-style">
              <span :title="$t('chart.chart_pie_rose')">
                <svg-icon icon-class="pie-rose" class="chart-icon" />
              </span>
@@ -148,7 +148,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="radar" label="radar" border>
+            <el-radio value="radar" label="radar" border class="radio-style">
              <span :title="$t('chart.chart_radar')">
                <svg-icon icon-class="radar" class="chart-icon" />
              </span>
@@ -160,7 +160,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="treemap" label="treemap" border>
+            <el-radio value="treemap" label="treemap" border class="radio-style">
              <span :title="$t('chart.chart_treemap')">
                <svg-icon icon-class="treemap" class="chart-icon" />
              </span>
@@ -168,7 +168,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="word-cloud" label="word-cloud" border>
+            <el-radio value="word-cloud" label="word-cloud" border class="radio-style">
              <span :title="$t('chart.chart_word_cloud')">
                <svg-icon icon-class="word-cloud" class="chart-icon" />
              </span>
@@ -183,7 +183,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="scatter" label="scatter" border>
+            <el-radio value="scatter" label="scatter" border class="radio-style">
              <span :title="$t('chart.chart_scatter')">
                <svg-icon icon-class="scatter" class="chart-icon" />
              </span>
@@ -191,7 +191,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="funnel" label="funnel" border>
+            <el-radio value="funnel" label="funnel" border class="radio-style">
              <span :title="$t('chart.chart_funnel')">
                <svg-icon icon-class="funnel" class="chart-icon" />
              </span>
@@ -207,7 +207,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="table-normal" label="table-normal" border>
+            <el-radio value="table-normal" label="table-normal" border class="radio-style">
              <span :title="$t('chart.chart_table_normal')">
                <svg-icon icon-class="table-normal" class="chart-icon" />
              </span>
@@ -215,7 +215,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="table-info" label="table-info" border>
+            <el-radio value="table-info" label="table-info" border class="radio-style">
              <span :title="$t('chart.chart_table_info')">
                <svg-icon icon-class="table-info" class="chart-icon" />
              </span>
@@ -230,7 +230,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="text" label="text" border>
+            <el-radio value="text" label="text" border class="radio-style">
              <span :title="$t('chart.chart_card')">
                <svg-icon icon-class="text" class="chart-icon" />
              </span>
@@ -238,7 +238,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="gauge" label="gauge" border>
+            <el-radio value="gauge" label="gauge" border class="radio-style">
              <span :title="$t('chart.chart_gauge')">
                <svg-icon icon-class="gauge" class="chart-icon" />
              </span>
@@ -253,7 +253,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="line" label="line" border>
+            <el-radio value="line" label="line" border class="radio-style">
              <span :title="$t('chart.chart_line')">
                <svg-icon icon-class="line" class="chart-icon" />
              </span>
@@ -261,7 +261,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="line-stack" label="line-stack" border>
+            <el-radio value="line-stack" label="line-stack" border class="radio-style">
              <span :title="$t('chart.chart_line_stack')">
                <svg-icon icon-class="line-stack" class="chart-icon" />
              </span>
@@ -269,7 +269,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="chart-mix" label="chart-mix" border>
+            <el-radio value="chart-mix" label="chart-mix" border class="radio-style">
              <span :title="$t('chart.chart_mix')">
                <svg-icon icon-class="chart-mix" class="chart-icon" />
              </span>
@@ -283,7 +283,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="bar" label="bar" border>
+            <el-radio value="bar" label="bar" border class="radio-style">
              <span :title="$t('chart.chart_bar')">
                <svg-icon icon-class="bar" class="chart-icon" />
              </span>
@@ -291,7 +291,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="bar-stack" label="bar-stack" border>
+            <el-radio value="bar-stack" label="bar-stack" border class="radio-style">
              <span :title="$t('chart.chart_bar_stack')">
                <svg-icon icon-class="bar-stack" class="chart-icon" />
              </span>
@@ -304,7 +304,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="bar-horizontal" label="bar-horizontal" border>
+            <el-radio value="bar-horizontal" label="bar-horizontal" border class="radio-style">
              <span :title="$t('chart.chart_bar_horizontal')">
                <svg-icon icon-class="bar-horizontal" class="chart-icon" />
              </span>
@@ -312,7 +312,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border>
+            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border class="radio-style">
              <span :title="$t('chart.chart_bar_stack_horizontal')">
                <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
              </span>
@@ -327,7 +327,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="pie" label="pie" border>
+            <el-radio value="pie" label="pie" border class="radio-style">
              <span :title="$t('chart.chart_pie')">
                <svg-icon icon-class="pie" class="chart-icon" />
              </span>
@@ -335,7 +335,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="pie-rose" label="pie-rose" border>
+            <el-radio value="pie-rose" label="pie-rose" border class="radio-style">
              <span :title="$t('chart.chart_pie_rose')">
                <svg-icon icon-class="pie-rose" class="chart-icon" />
              </span>
@@ -343,7 +343,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="radar" label="radar" border>
+            <el-radio value="radar" label="radar" border class="radio-style">
              <span :title="$t('chart.chart_radar')">
                <svg-icon icon-class="radar" class="chart-icon" />
              </span>
@@ -355,7 +355,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="treemap" label="treemap" border>
+            <el-radio value="treemap" label="treemap" border class="radio-style">
              <span :title="$t('chart.chart_treemap')">
                <svg-icon icon-class="treemap" class="chart-icon" />
              </span>
@@ -371,7 +371,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="scatter" label="scatter" border>
+            <el-radio value="scatter" label="scatter" border class="radio-style">
              <span :title="$t('chart.chart_scatter')">
                <svg-icon icon-class="scatter" class="chart-icon" />
              </span>
@@ -379,7 +379,7 @@
            </el-radio>
          </div>
          <div style="position: relative;display: block;">
-            <el-radio value="funnel" label="funnel" border>
+            <el-radio value="funnel" label="funnel" border class="radio-style">
              <span :title="$t('chart.chart_funnel')">
                <svg-icon icon-class="funnel" class="chart-icon" />
              </span>
@@ -394,7 +394,7 @@
      <div style="display: block;">
        <div class="radio-row">
          <div style="position: relative;display: block;">
-            <el-radio value="map" label="map" border>
+            <el-radio value="map" label="map" border class="radio-style">
              <span :title="$t('chart.chart_map')">
                <svg-icon icon-class="map" class="chart-icon" />
              </span>
@@ -447,18 +447,10 @@ export default {
  height: 40px;
 }

-.chart-type>>>.el-radio__input{
-  display: none!important;
-}
-
 .el-radio{
  margin:5px;
 }

-.el-radio>>>.el-radio__label{
-  padding-left: 0;
-}
-
 .radio-row{
  width: 100%;
  display: flex;
@@ -466,11 +458,6 @@ export default {
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
-  >>>.el-radio{
-    width: 80px;
-    height: 60px;
-    padding: 0;
-  }
 }

 .chart-type-divider{
@@ -500,4 +487,10 @@ export default {
  white-space: pre;
  font-size: 12px;
 }
+
+.radio-style{
+  width: 80px;
+  height: 60px;
+  padding: 0;
+}
 </style>