feat(视图): css调整

frontend/src/views/chart/components/DimensionItem.vue

@@ -2,22 +2,20 @@
   <span>
     <el-dropdown trigger="click" size="small">
       <span class="el-dropdown-link">
-        <span
-          class="item-axis"
-        >
+        <el-tag size="small" class="item-axis">
           {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
-          <span />
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item icon="el-icon-edit-outline">
-              item1
-            </el-dropdown-item>
-            <el-dropdown-item icon="el-icon-delete">
-              item2
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </span>
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item icon="el-icon-edit-outline">
+            item1
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-delete">
+            item2
+          </el-dropdown-item>
+        </el-dropdown-menu>
       </span>
-    </el-dropdown>
+    </el-dropdown></span>
+  </el-dropdown>
   </span>
 </template>
 
@@ -43,13 +41,10 @@ export default {
   .item-axis {
     padding: 1px 6px;
     margin: 0 3px 2px 3px;
-    border: solid 1px #eee;
-    background-color: #f1f1f1;
     text-align: left;
     height: 24px;
     line-height: 22px;
     display: inline-block;
-    color: #1890ff;
     border-radius: 4px;
     box-sizing: border-box;
     white-space: nowrap;

frontend/src/views/chart/components/QuotaItem.vue

@@ -2,34 +2,32 @@
   <span>
     <el-dropdown trigger="click" size="small">
       <span class="el-dropdown-link">
-        <span
-          class="item-axis"
-        >
+        <el-tag size="small" class="item-axis">
           {{ item.name }}<span class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
-          <span />
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item icon="el-icon-notebook-2">
-              <el-dropdown placement="right-start" size="small" @command="summary">
-                <span class="el-dropdown-link">
-                  {{ $t('chart.summary') }}<span class="summary-span">({{ $t('chart.'+item.summary) }})</span><i class="el-icon-arrow-right el-icon--right" />
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
-                  <el-dropdown-item :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
-                  <el-dropdown-item :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
-                  <el-dropdown-item :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
-                  <el-dropdown-item :command="beforeSummary('std')">{{ $t('chart.std') }}</el-dropdown-item>
-                  <el-dropdown-item :command="beforeSummary('var_samp')">{{ $t('chart.var_samp') }}</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </el-dropdown-item>
-            <el-dropdown-item icon="el-icon-delete">
-              item4
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </span>
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item icon="el-icon-notebook-2">
+            <el-dropdown placement="right-start" size="small" @command="summary">
+              <span class="el-dropdown-link">
+                {{ $t('chart.summary') }}<span class="summary-span">({{ $t('chart.'+item.summary) }})</span><i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('std')">{{ $t('chart.std') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSummary('var_samp')">{{ $t('chart.var_samp') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-delete">
+            item4
+          </el-dropdown-item>
+        </el-dropdown-menu>
       </span>
-    </el-dropdown>
+    </el-dropdown></span>
+  </el-dropdown>
   </span>
 </template>
 
@@ -67,13 +65,10 @@ export default {
   .item-axis {
     padding: 1px 6px;
     margin: 0 3px 2px 3px;
-    border: solid 1px #eee;
-    background-color: #f1f1f1;
     text-align: left;
     height: 24px;
     line-height: 22px;
     display: inline-block;
-    color: #1890ff;
     border-radius: 4px;
     box-sizing: border-box;
     white-space: nowrap;