新样式

src/components/Query/clickQuery/CockpitVector.vue

@@ -2,21 +2,20 @@
   <div class="CockpitVectorBox">
 
     <div class="cockpit_vector">
-      <div class="list_vector list_vector_multi" v-for="(item, index ) in store.state.vectorData" :key="index"
-        v-if="shouldDisplayItem(item)">
-        <!-- <div class="filed_box">
-          {{ item.name }}
-        </div>
-        :
-        <div class="filed_box">
-          {{ item.value }}
-        </div> -->
-
-        <div>
-          <div class="left_info filed_box">{{ item.name }}</div>
-          <div class="right_info filed_box">{{ item.value }}</div>
-        </div>
-      </div>
+
+      <el-table :header-cell-style="{
+        background: 'rgba(10, 25, 38, 0.6)',
+        color: '#66b1ff',
+        fontSize: '14px',
+        fontFamily: 'Microsoft YaHei',
+        fontWeight: '400',
+      }" :data="store.state.vectorData.filter(item => item.name !== 'id' && item.name !== 'geom' && item.name !== 'type')" style="width: 100%" >
+
+        <el-table-column show-overflow-tooltip="true" prop="name" label="属性" width="90">
+        </el-table-column>
+        <el-table-column show-overflow-tooltip="true" prop="value" label="属性值">
+        </el-table-column>
+      </el-table>
     </div>
   </div>
 </template>
@@ -44,9 +43,6 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    shouldDisplayItem(item) {  
-      return item.name !== 'geom' && item.name !== 'id' && item.name !== 'type'&& item.name !== 'create_time'&& item.name !== 'val1';  
-    },
     build_data(geojson) {
       geojson.coordinates.forEach((res) => {
         const twoDArray = res[0];
@@ -148,7 +144,7 @@ export default {
   position: absolute;
   top: 6rem;
   width: 20rem;
-  height: 35rem;
+  height: 37rem;
   overflow: auto;
   overflow-x: hidden;
   // z-index: -1;
@@ -231,12 +227,39 @@ export default {
   border-bottom: 1px solid #CCC;
 }
 
-.filed_box {
-  display: inline-block;
+
+/deep/ .el-table tr {
+  background: rgba(10, 25, 38, 0.5) !important;
+}
+
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  background: rgba(10, 25, 38, 0.5) !important;
+
+  border-bottom: 0px solid #EBEEF5;
+}
+
+
+.el-table {
+  color: #fff;
+  background: rgba(10, 25, 38, 0.5) !important;
+}
+
+/deep/ .el-table__fixed-right::before,
+.el-table__fixed::before {
+
+  background: rgba(10, 25, 38, 0.9) !important;
+
 }
-.left_info{
-  border: #CCC 1px solid;
-}.right_info{
-  border: #CCC 1px solid;
+
+/deep/ .el-table__fixed-right-patch {
+  background: rgba(10, 25, 38, 0.9) !important;
+
+}
+
+/deep/ .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  background: rgba(10, 25, 38, 0) !important;
 }
 </style>