Эх сурвалжийг харах

style: 移动端企业搜索芝麻力标样式调整

cuiyalong 11 сар өмнө
parent
commit
b4ff7feb11

+ 49 - 0
apps/mobile/src/components/zhima/mark-in-list.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="sesame-container">
+    <div class="sesame-logo">
+      <i class="j-icon j-base-icon icon-zhima-logo" />
+    </div>
+    <span class="text-wrapper ellipsis">
+      <span class="text-content">{{ text }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ZhiMaMark',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sesame-container {
+  display: inline-flex;
+  align-items: center;
+  max-width: 268px;
+  margin-top: 8px;
+  border-radius: 5px;
+  background: rgba(236, 244, 255, 1);
+  .sesame-logo {
+    padding: 4px 6px;
+    height: 24px;
+    flex-shrink: 0;
+    background: rgba(223, 237, 255, 1);
+    border-radius: 5px;
+  }
+  .text-wrapper {
+    flex: 1;
+    padding: 4px 12px 4px 8px;
+  }
+  .text-content {
+    color: #0987ff;
+    font-size: 10px;
+    line-height: 14px;
+  }
+}
+</style>

+ 3 - 28
apps/mobile/src/views/search/result/company/index.vue

@@ -105,12 +105,7 @@
           @click="goEntPage(item)"
         >
           <template slot="zhima">
-            <div class="sesame-container" v-if="item.zhiMa">
-              <div class="sesame-logo">
-                <i class="j-icon j-base-icon icon-zhima-logo" />
-              </div>
-              <span class="ellipsis">{{ item.zhiMa }}</span>
-            </div>
+            <MarkInList v-if="item.zhiMa" :text="item.zhiMa" />
           </template>
         </CompanyCell>
       </van-list>
@@ -137,6 +132,7 @@ import ScopeSelectorContent from '@/components/selector/scope'
 import AreaSelectorContent from '@/components/selector/area'
 import MoneySelectorContent from '@/components/selector/money'
 import MoreSelectorContent from '@/components/search/company-search/MoreSelectorContent'
+import MarkInList from '@/components/zhima/mark-in-list.vue'
 import { AppEmpty, CompanyCell } from '@/ui'
 import { getShortName, openLinkOfOther } from '@/utils'
 import { entMoneyData, entScopeData } from '@/data'
@@ -159,6 +155,7 @@ export default {
     DropdownLayout,
     MoreSelectorContent,
     AreaSelectorContent,
+    MarkInList,
     AppEmpty
   },
   mixins: [mixinPoints],
@@ -534,28 +531,6 @@ export default {
     border-radius: 4px;
     flex-shrink: 0;
   }
-  .sesame-container {
-    display: flex;
-    align-items: center;
-    max-width: 268px;
-    margin-top: 8px;
-    border-radius: 5px;
-    background: rgba(236, 244, 255, 1);
-    .sesame-logo {
-      padding: 4px 6px;
-      height: 24px;
-      flex-shrink: 0;
-      background: rgba(223, 237, 255, 1);
-      border-radius: 5px;
-    }
-    span {
-      flex: 1;
-      padding: 5px 12px 5px 8px;
-      color: #0987ff;
-      font-size: 10px;
-      line-height: 14px;
-    }
-  }
 }
 .money-component-group {
   padding: 16px;