优化属性面板样式

SuperMap · Oct 10, 2024 · 3ea7766 · 3ea7766
1 parent 50960c3
commit 3ea7766
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 30 deletions.
diff --git a/src/common/attribute-panel/AttributePanel.vue b/src/common/attribute-panel/AttributePanel.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="sm-component-attribute-panel" :style="[getTextColorStyle]">
-    <div v-if="title">{{ title }}</div>
-    <div v-show="showIcon" class="sm-component-attribute-panel__header">
-      <sm-icon
+    <div class="sm-component-attribute-panel__header">
+      <div class="title">{{ title }}</div>
+      <div v-show="showIcon" class="switchDataText">
+        <sm-icon
         :class="['icon', 'left-icon', currentIndex === 0 && 'disabled']"
         type="caret-left"
         @click="changeIndex(-1)"
@@ -13,14 +14,15 @@
         :class="['icon', 'right-icon', currentIndex === total - 1 && 'disabled']"
         @click="changeIndex(1)"
       />
+      </div>
     </div>
     <div class="sm-component-attribute-panel__content">
       <slot></slot>
       <div v-if="$scopedSlots && Object.keys($scopedSlots).length && Object.keys(attributes).length">
         <ul>
           <li v-for="(value, key, index) in attributes" :key="index" class="content">
-            <div class="left ellipsis" :title="key" style="{width: 110}">{{ key }}</div>
-            <div class="right ellipsis" :title="value.value || value" style="{width: 170}">
+            <div class="left ellipsis" :title="key" :style="attributeStyle.keyStyle">{{ key }}</div>
+            <div class="right ellipsis" :title="value.value || value" :style="attributeStyle.valueStyle">
               <slot v-if="fieldsMap[key]" :name="fieldsMap[key]" :value="value"></slot>
               <span v-else>{{ value }}</span>
             </div>
@@ -56,6 +58,15 @@ class SmAttributePanel extends Mixins(Theme) {
 
   @Prop() title: String;
 
+  @Prop({
+    default: () => {
+      return {
+        keyStyle: {},
+        valueStyle: {}
+      };
+    }
+  }) attributeStyle: Object;
+
   @Prop({
     default: () => {
       return [];

diff --git a/src/common/attribute-panel/style/attribute-panel.scss b/src/common/attribute-panel/style/attribute-panel.scss
@@ -3,32 +3,38 @@
 
 @include b(attribute-panel) {
   min-width: 200px;
-  height: auto;
+  height: 100%;
+  overflow: auto;
   padding: 10px;
   border-radius: 4px;
   @include e(header) {
     width: 100%;
     display: inline-flex;
     align-items: center;
-    padding: 0px 15px 8px ;
+    padding: 0px 10px 8px ;
     border-bottom: 1px solid $border-color-split;
-    & .icon {
-      font-size: 16px;
-    }
-    & .left-icon {
-      padding-right: 5px;
-    }
-    & .right-icon {
-      padding-left: 5px;
-    }
-    & .disabled {
-      color: $disabled-color;
-    }
-    & .ellipsis {
-      max-width: calc(100% - 50px);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .switchDataText {
+      position: absolute;
+      right: 10px;
+      .icon {
+        font-size: 16px;
+      }
+      .left-icon {
+        padding-right: 5px;
+      }
+      .right-icon {
+        padding-left: 5px;
+      }
+      .disabled {
+        color: $disabled-color;
+      }
+      .ellipsis {
+        vertical-align: top;
+        max-width: calc(100% - 50px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
   @include e(content) {
@@ -40,7 +46,6 @@
         list-style: none;
         margin: 0;
         padding: 0;
-        overflow: auto;
         font-size: 14px;
         max-height: 200px;
         background: transparent;
@@ -54,16 +59,18 @@
           display: table-row;
           color: white;
           .left {
+            max-width: 110px;
             display: table-cell;
           }
           .right {
+            max-width: 170px;
             display: table-cell;
           }
-        }
-        .content .ellipsis {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+          .ellipsis {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
         }
       }
     }