style: pc端企业搜索芝麻相关样式调整

apps/bigmember_pc/src/components/filter-items/ZhiMaBidSelector.vue

@@ -17,8 +17,10 @@
             suffix-icon="el-icon-search"
             v-model="searchContent"
             @keyup.native="onKeyup"
-            @focus.native="onKeydown"
+            @focus="onFocus"
+            @blur="onBlur"
             @keydown.native="onKeydown"
+            :class="{ 'input-focus': inputFocus }"
           >
           </el-input>
         </div>
@@ -112,8 +114,8 @@
     </div>
     <template #suffix-icon>
       <el-tooltip effect="dark" placement="bottom">
-        <div class="iconfont icon-help pointer"></div>
-        <div slot="content">
+        <div class="iconfont icon-help pointer zhima-bid--icon"></div>
+        <div slot="content" class="zhima-bid-help-tip">
           “芝麻实力标”是由芝麻企业信用平<br />台通过对数据进行深度分析和挖掘，<br />为小微企业进行全方位的能力评估。
         </div>
       </el-tooltip>
@@ -144,7 +146,7 @@ export default {
     },
     trigger: {
       type: String,
-      default: 'click'
+      default: 'hover'
     },
     placeholder: {
       type: String,
@@ -167,6 +169,7 @@ export default {
   data() {
     return {
       searchContent: '',
+      inputFocus: false,
       tags: [],
       pActive: 0,
       cActive: 0,
@@ -215,7 +218,6 @@ export default {
     }
   },
   mounted() {
-    window.t = this
     // this.initAreaMap()
     this.getZhiMaFilterData()
     this.calcMatch()
@@ -287,6 +289,13 @@ export default {
         searchShow
       }
     },
+    onFocus() {
+      this.onKeydown()
+      this.inputFocus = true
+    },
+    onBlur() {
+      this.inputFocus = false
+    },
     async getZhiMaFilterData() {
       try {
         const { data } = await getZhiMaFilterData()
@@ -1057,6 +1066,13 @@ export default {
 }
 </script>
 
+<style>
+.vip-module {
+  .zhima-bid--icon {
+    color: rgba(201, 143, 55, 1) !important;
+  }
+}
+</style>
 <style lang="scss" scoped>
 ::v-deep {
   .el-dropdown-menu.fixed-dropdown {
@@ -1066,6 +1082,20 @@ export default {
     position: relative;
     z-index: 99;
   }
+
+  .input-focus {
+    .el-input__suffix-inner {
+      color: $color_main;
+    }
+  }
+}
+.zhima-bid-help-tip {
+  padding: 2px;
+  line-height: 18px;
+}
+
+.zhima-bid--icon {
+  color: $color_main;
 }
 
 .list-empty-container {

apps/bigmember_pc/src/components/zhima/mark-in-list.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="zhima-mark-in-list">
+  <div class="zhima-mark-in-list" ref="markList">
     <div class="zhima-mark-logo">
       <span
         class="j-icon j-icon-base icon-img-zhima-zhimaxinyong-logo zhima-logo"
       ></span>
     </div>
     <span class="zhima-divider">|</span>
-    <div class="zhima-mark-text ellipsis">{{ text }}</div>
+    <div class="zhima-mark-text ellipsis" ref="textWrapper">
+      <span ref="textContent">{{ text }}</span>
+    </div>
   </div>
 </template>
 
@@ -20,12 +22,28 @@ export default {
     }
   },
   computed: {},
-  methods: {}
+  mounted() {
+    this.calcTextWidth()
+  },
+  methods: {
+    calcTextWidth() {
+      const { textWrapper, textContent, markList } = this.$refs
+      const wrapperWidth = textWrapper?.offsetWidth
+      const contentWidth = textContent?.offsetWidth
+      const contentOffsetLeft = textContent?.offsetLeft
+      if (contentWidth < wrapperWidth) {
+        markList.style.width = contentWidth + contentOffsetLeft + 20 + 'px'
+        textContent.style.width = 'unset'
+        textContent.style.paddingRight = 0
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .zhima-mark-in-list {
+  position: relative;
   display: flex;
   align-items: center;
   border-radius: 6px;