vue2-client 1.8.259 → 1.8.261

package/src/base-client/components/common/AddressSearchCombobox/AddressSearchCombobox.vue

@@ -1,413 +1,413 @@
-<template>
-  <div id="addressSearchCombobox">
-    <div>
-      <a-input-group
-        style="display: flex; width: 100%;"
-        compact>
-        <a-input
-          v-model="addressInput"
-          :read-only="readOnly || !this.addressObj.address"
-          @change="change"
-          style="flex: 1; width: auto; min-width: 0;"
-          placeholder="请选择地址信息"/>
-        <a-button
-          v-if="attr?.inputOnAfterName && attr?.inputOnAfterFunc"
-          style="flex: 1; width: auto; min-width: 4rem;max-width: 6rem"
-          type="primary"
-          @click="emitFunc(attr?.inputOnAfterFunc,addressInput)">
-          {{ attr?.inputOnAfterName }}
-        </a-button>
-        <!--    默认展示该图标 如果配置了按钮插槽展示  primary 央视 -->
-        <a-button
-          style="width: 2rem; flex-shrink: 0;"
-          :type="attr?.inputOnAfterName ? 'primary' :''"
-          icon="environment"
-          @click="visible=true">
-        </a-button>
-      </a-input-group>
-    </div>
-    <a-modal
-      v-model="visible"
-      title="地址选择"
-      @ok="selected"
-      :zIndex="m_index"
-      :destroyOnClose="true">
-      <div class="certain-category-search-wrapper">
-        <a-auto-complete
-          style="right: 0px;width: 90%;z-index:2;margin-top:2%;"
-          :disabled="!mapAutocomplete"
-          class="certain-category-search"
-          dropdown-class-name="certain-category-search-dropdown"
-          option-label-prop="value"
-          placeholder="输入地址关键字搜索"
-          @search="fetchFunction"
-          @select="onSelect"
-        >
-          <a-spin v-if="searching" slot="notFoundContent" size="small"/>
-          <template slot="dataSource">
-            <a-select-opt-group v-for="group in option" :key="group.title">
-              <span
-                slot="label">
-                <a-icon type="bank"/> {{ group.title }}
-              </span>
-              <a-select-option v-for="address in group.children" :key="address.label + ' <' + address.value + '>'">
-                <p class="addressName">
-                  <a-icon type="environment"/>
-                  <span v-html="highLight(address.label, address.word)"></span></p>
-                <p v-if="address.address !== '[]'" class="addressRemark">
-                  {{ address.address }}
-                </p>
-              </a-select-option>
-            </a-select-opt-group>
-          </template>
-          <a-input>
-            <a-icon slot="suffix" class="certain-category-icon" type="search"/>
-          </a-input>
-        </a-auto-complete>
-      </div>
-      <div id="addressSearchCombobox_map"/>
-      <a-descriptions
-        bordered
-        class="asc_descriptions"
-        :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
-      >
-        <a-descriptions-item label="坐标" span="2"><span>{{ addressObj.lng_lat }}</span></a-descriptions-item>
-        <a-descriptions-item label="地址" span="2"><span>{{ addressObj.address }}</span></a-descriptions-item>
-      </a-descriptions>
-    </a-modal>
-    <!--    -->
-  </div>
-</template>
-<script>
-
-import { GetGDMap } from '@vue2-client/utils/map-utils'
-import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
-import { mapState } from 'vuex'
-import { runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'AddressSearchCombobox',
-  data () {
-    // 检索去抖
-    this.fetchFunction = debounce(this.fetchFunction, 300)
-    return {
-      // 地址搜索联想
-      mapAutocomplete: undefined,
-      // 检索结果
-      option: [],
-      // 最后检索版本
-      lastFetchId: 0,
-      // 检索中
-      searching: false,
-      addressObj: {
-        lng_lat: '',
-        address: '',
-      },
-      visible: false,
-      map: null,
-      m_index: 1002,
-      positionPicker: null,
-      addressInput: this.searchResult,
-      // 选择地址返回的行政区域
-      divisions: {},
-      // 生成地址串中省市区街道信息禁止修改
-      readOnlyDivisions: false
-    }
-  },
-  computed: {
-    ...mapState('setting', ['isMobile', 'gaode_key', 'gaode_secret_key'])
-  },
-  props: {
-    attr: {
-      type: Object,
-      default: () => {
-      }
-    },
-    emitFunc: {
-      type: Function,
-      default: () => {
-      }
-    },
-    searchResult: {
-      type: String,
-      default: undefined
-    },
-    // 返回数据格式
-    searchResultType: {
-      type: String,
-      default: 'Default'
-      // default: 'Array'
-      // default: 'Object'
-    },
-    // Object 返回格式时 可以自定义key
-    resultKeys: {
-      type: Object,
-      default: () => {
-        return { address: 'address', coords: 'coords' }
-      }
-    },
-    readOnly: {
-      type: Boolean,
-      default: false
-    },
-    // 省市区是否可以修改
-    divisionsChange: {
-      type: Boolean,
-      default: false
-    },
-  },
-  created () {
-  },
-  mounted () {
-  },
-  methods: {
-    change (value) {
-      if (this.readOnlyDivisions && !this.divisionsChange) {
-        // 如果省市区街道信息禁止修改
-        if (this.divisions.str && !this.addressInput.startsWith(this.divisions.str)) {
-          this.addressInput = this.addressObj.address
-          this.$message.info('省市区街道信息请从选择新地址以变更')
-          return
-        }
-      }
-      debounce(() => {
-        this.selected(null, this.addressInput)
-      }, 200)()
-    },
-    initMap (aMap) {
-      this.map = new (aMap).Map('addressSearchCombobox_map', { // 设置地图容器id
-        resizeEnable: true, // 是否监控地图容器尺寸变化
-        zoom: 10, // 初始化地图层级
-      })
-      this.geocoder = new (aMap).Geocoder({
-        radius: 500 // 范围，默认：500
-      })
-      this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
-      // 初始化窗体
-      /* this.infoWindow = new (aMap).InfoWindow({
-        anchor: 'bottom-center',
-        isCustom: false, // 使用自定义窗体
-        autoMove: true,
-        content: '',
-        showShadow: true,
-        offset: new (aMap).Pixel(0, -25)
-      }) */
-    },
-    onSelect (value) {
-      console.log(' value--- ', this.searchResult)
-      const _arr = value.replace('>', '').split('<')
-      this.addressObj.address = _arr[0]
-      this.addressObj.lng_lat = _arr[1]
-      this.map.setCenter(this.addressObj.lng_lat.split(','))
-    },
-    selected (_value, _addstr) {
-      let result
-      if (this.searchResultType !== 'Default') {
-        if (this.searchResultType === 'Array') {
-          result = [_addstr || this.addressObj.address, this.addressObj.lng_lat]
-        } else {
-          result = {}
-          result[this.resultKeys.address] = _addstr || this.addressObj.address
-          result[this.resultKeys.coords] = this.addressObj.lng_lat
-        }
-      }
-      this.visible = false
-      this.$emit('onSelect', JSON.stringify(result))
-      // 如果传递了地址 是为了更新上级 不做省市区检验处理
-      if (!_addstr) {
-        this.addressInput = this.addressObj.address
-        this.$emit('onDivisionsChange', Object.assign({}, result, { divisions: this.divisions, vm: this }))
-      }
-    },
-    // 懒加载检索方法
-    fetchFunction (value) {
-      if (value && this.mapAutocomplete) {
-        this.searching = true
-        this.lastFetchId += 1
-        const fetchId = this.lastFetchId
-        this.mapAutocomplete.search(value, (status, result) => {
-          if (fetchId !== this.lastFetchId) {
-            return
-          }
-          if (status === 'complete') {
-            this.option = []
-            const addressMap = {}
-            result.tips.forEach((res) => {
-              if (res.location) {
-                if (!Object.prototype.hasOwnProperty.call(addressMap, res.district)) {
-                  addressMap[res.district] = []
-                }
-                addressMap[res.district].push({
-                  label: res.name,
-                  value: res.location.lng + ',' + res.location.lat,
-                  address: res.address + '',
-                  word: value
-                })
-              }
-            })
-            for (const key of Object.keys(addressMap)) {
-              this.option.push({
-                title: key,
-                children: addressMap[key]
-              })
-            }
-          }
-          this.searching = false
-        })
-      }
-    },
-    // 获取数据
-    getData (value, callback) {
-      if (value !== '') {
-        const logicName = this.attr.keyName
-        const logic = logicName.substring(6)
-        runLogic(logic, value, 'af-system').then(res => {
-          callback(res)
-        })
-      }
-    },
-    // 关键字高亮
-    highLight (value, word) {
-      // 如果标题中包含，关键字就替换一下
-      if (value.includes(word)) {
-        value = value.replace(word,
-          // 这里是替换成html格式的数据，最好再加一个样式权重，保险一点
-          '<span style="color:red!important;">' + word + '</span>'
-        )
-        return value
-        // eslint-disable-next-line brace-style
-      }
-      // 不包含的话还用这个
-      else {
-        return value
-      }
-    }
-  },
-  watch: {
-    'visible' (val) {
-      if (val) {
-        this.$nextTick(() => {
-          GetGDMap(this.gaode_secret_key, this.gaode_key).then(aMap => {
-            this.initMap(aMap)
-            this.mapAutocomplete = new (aMap).AutoComplete({
-              // city 限定城市，默认全国
-              city: '全国',
-              dragEnable: true,
-              animateEnable: false
-            })
-            this.positionPicker = new window.AMapUI.PositionPicker({
-              mode: 'dragMap',
-              map: this.map
-            })
-            this.positionPicker.on('success', (positionResult) => {
-              console.log(positionResult)
-              console.log(positionResult.position)
-              // 设置 行政区划信息
-              if (positionResult?.regeocode?.addressComponent) {
-                const { addressComponent } = positionResult?.regeocode
-                this.divisions.province = addressComponent.province
-                this.divisions.city = addressComponent.city
-                this.divisions.district = addressComponent.district
-                this.divisions.township = addressComponent.township
-                this.divisions.towncode = addressComponent.towncode
-                this.divisions.street = addressComponent.street
-                // 试着获取小区
-                if (positionResult?.regeocode?.aois && positionResult?.regeocode?.aois.length) {
-                  // 取第一个当做小区
-                  this.divisions.area = positionResult?.regeocode?.aois[0]?.name
-                } else if (positionResult?.regeocode?.pois && positionResult?.regeocode?.pois.length) {
-                  // 取第一个当做小区
-                  this.divisions.area = positionResult?.regeocode?.pois[0]?.name
-                }
-                this.divisions.str =
-                  `${addressComponent.province}${addressComponent.city}${addressComponent.district}${addressComponent.township}`
-              }
-              if (this.divisions.str && positionResult.address.startsWith(this.divisions.str)) {
-                // 如果 省市区信息和获取到的地址的前缀一致 那么省市区前缀禁止修改只能修改后面的 通过 onchange事件拦截
-                this.readOnlyDivisions = true
-              }
-              this.addressObj.address = positionResult.address
-              this.addressObj.lng_lat = `${positionResult.position.lng},${positionResult.position.lat}`
-            })
-            this.positionPicker.on('fail', function (positionResult) {
-            })
-            this.positionPicker.start()
-          })
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-#addressSearchCombobox_map {
-  margin: 1% 0;
-  width: 100%;
-  height: 400px;
-  text-align: center
-}
-
-.asc_descriptions .ant-descriptions-item-content {
-  width: 80%;
-}
-
-.certain-category-search-wrapper {
-  margin-bottom: -4rem;
-  text-align: center;
-}
-
-#addressSearchCombobox {
-
-  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
-    color: #666;
-    font-weight: bold;
-    font-size: 14px;
-  }
-
-  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
-    border-bottom: 1px solid #f6f6f6;
-  }
-
-  .certain-category-search-dropdown .ant-select-dropdown-menu-item {
-    padding-left: 16px;
-  }
-
-  .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
-    text-align: center;
-    cursor: default;
-  }
-
-  .certain-category-search-dropdown .ant-select-dropdown-menu {
-    max-height: 300px;
-  }
-
-  .certain-category-search-wrapper .certain-search-item-count {
-    position: absolute;
-    color: #999;
-    right: 16px;
-  }
-
-  .certain-category-search-wrapper .certain-category-search.ant-select-focused,
-  .certain-category-icon {
-    color: #108ee9;
-  }
-
-  .certain-category-search-wrapper .certain-category-icon {
-    color: #6e6e6e;
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    font-size: 16px;
-  }
-
-  .addressName {
-    margin-bottom: 0;
-    font-size: 14px;
-    font-weight: bold;
-  }
-
-  .addressRemark {
-    margin-bottom: 0;
-    font-size: 12px;
-  }
-}
-</style>
+<template>
+  <div id="addressSearchCombobox">
+    <div>
+      <a-input-group
+        style="display: flex; width: 100%;"
+        compact>
+        <a-input
+          v-model="addressInput"
+          :read-only="readOnly || !this.addressObj.address"
+          @change="change"
+          style="flex: 1; width: auto; min-width: 0;"
+          placeholder="请选择地址信息"/>
+        <a-button
+          v-if="attr?.inputOnAfterName && attr?.inputOnAfterFunc"
+          style="flex: 1; width: auto; min-width: 4rem;max-width: 6rem"
+          type="primary"
+          @click="emitFunc(attr?.inputOnAfterFunc,addressInput)">
+          {{ attr?.inputOnAfterName }}
+        </a-button>
+        <!--    默认展示该图标 如果配置了按钮插槽展示  primary 央视 -->
+        <a-button
+          style="width: 2rem; flex-shrink: 0;"
+          :type="attr?.inputOnAfterName ? 'primary' :''"
+          icon="environment"
+          @click="visible=true">
+        </a-button>
+      </a-input-group>
+    </div>
+    <a-modal
+      v-model="visible"
+      title="地址选择"
+      @ok="selected"
+      :zIndex="m_index"
+      :destroyOnClose="true">
+      <div class="certain-category-search-wrapper">
+        <a-auto-complete
+          style="right: 0px;width: 90%;z-index:2;margin-top:2%;"
+          :disabled="!mapAutocomplete"
+          class="certain-category-search"
+          dropdown-class-name="certain-category-search-dropdown"
+          option-label-prop="value"
+          placeholder="输入地址关键字搜索"
+          @search="fetchFunction"
+          @select="onSelect"
+        >
+          <a-spin v-if="searching" slot="notFoundContent" size="small"/>
+          <template slot="dataSource">
+            <a-select-opt-group v-for="group in option" :key="group.title">
+              <span
+                slot="label">
+                <a-icon type="bank"/> {{ group.title }}
+              </span>
+              <a-select-option v-for="address in group.children" :key="address.label + ' <' + address.value + '>'">
+                <p class="addressName">
+                  <a-icon type="environment"/>
+                  <span v-html="highLight(address.label, address.word)"></span></p>
+                <p v-if="address.address !== '[]'" class="addressRemark">
+                  {{ address.address }}
+                </p>
+              </a-select-option>
+            </a-select-opt-group>
+          </template>
+          <a-input>
+            <a-icon slot="suffix" class="certain-category-icon" type="search"/>
+          </a-input>
+        </a-auto-complete>
+      </div>
+      <div id="addressSearchCombobox_map"/>
+      <a-descriptions
+        bordered
+        class="asc_descriptions"
+        :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
+      >
+        <a-descriptions-item label="坐标" span="2"><span>{{ addressObj.lng_lat }}</span></a-descriptions-item>
+        <a-descriptions-item label="地址" span="2"><span>{{ addressObj.address }}</span></a-descriptions-item>
+      </a-descriptions>
+    </a-modal>
+    <!--    -->
+  </div>
+</template>
+<script>
+
+import { GetGDMap } from '@vue2-client/utils/map-utils'
+import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
+import { mapState } from 'vuex'
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'AddressSearchCombobox',
+  data () {
+    // 检索去抖
+    this.fetchFunction = debounce(this.fetchFunction, 300)
+    return {
+      // 地址搜索联想
+      mapAutocomplete: undefined,
+      // 检索结果
+      option: [],
+      // 最后检索版本
+      lastFetchId: 0,
+      // 检索中
+      searching: false,
+      addressObj: {
+        lng_lat: '',
+        address: '',
+      },
+      visible: false,
+      map: null,
+      m_index: 1002,
+      positionPicker: null,
+      addressInput: this.searchResult,
+      // 选择地址返回的行政区域
+      divisions: {},
+      // 生成地址串中省市区街道信息禁止修改
+      readOnlyDivisions: false
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile', 'gaode_key', 'gaode_secret_key'])
+  },
+  props: {
+    attr: {
+      type: Object,
+      default: () => {
+      }
+    },
+    emitFunc: {
+      type: Function,
+      default: () => {
+      }
+    },
+    searchResult: {
+      type: String,
+      default: undefined
+    },
+    // 返回数据格式
+    searchResultType: {
+      type: String,
+      default: 'Default'
+      // default: 'Array'
+      // default: 'Object'
+    },
+    // Object 返回格式时 可以自定义key
+    resultKeys: {
+      type: Object,
+      default: () => {
+        return { address: 'address', coords: 'coords' }
+      }
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    // 省市区是否可以修改
+    divisionsChange: {
+      type: Boolean,
+      default: false
+    },
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    change (value) {
+      if (this.readOnlyDivisions && !this.divisionsChange) {
+        // 如果省市区街道信息禁止修改
+        if (this.divisions.str && !this.addressInput.startsWith(this.divisions.str)) {
+          this.addressInput = this.addressObj.address
+          this.$message.info('省市区街道信息请从选择新地址以变更')
+          return
+        }
+      }
+      debounce(() => {
+        this.selected(null, this.addressInput)
+      }, 200)()
+    },
+    initMap (aMap) {
+      this.map = new (aMap).Map('addressSearchCombobox_map', { // 设置地图容器id
+        resizeEnable: true, // 是否监控地图容器尺寸变化
+        zoom: 10, // 初始化地图层级
+      })
+      this.geocoder = new (aMap).Geocoder({
+        radius: 500 // 范围，默认：500
+      })
+      this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
+      // 初始化窗体
+      /* this.infoWindow = new (aMap).InfoWindow({
+        anchor: 'bottom-center',
+        isCustom: false, // 使用自定义窗体
+        autoMove: true,
+        content: '',
+        showShadow: true,
+        offset: new (aMap).Pixel(0, -25)
+      }) */
+    },
+    onSelect (value) {
+      console.log(' value--- ', this.searchResult)
+      const _arr = value.replace('>', '').split('<')
+      this.addressObj.address = _arr[0]
+      this.addressObj.lng_lat = _arr[1]
+      this.map.setCenter(this.addressObj.lng_lat.split(','))
+    },
+    selected (_value, _addstr) {
+      let result
+      if (this.searchResultType !== 'Default') {
+        if (this.searchResultType === 'Array') {
+          result = [_addstr || this.addressObj.address, this.addressObj.lng_lat]
+        } else {
+          result = {}
+          result[this.resultKeys.address] = _addstr || this.addressObj.address
+          result[this.resultKeys.coords] = this.addressObj.lng_lat
+        }
+      }
+      this.visible = false
+      this.$emit('onSelect', JSON.stringify(result))
+      // 如果传递了地址 是为了更新上级 不做省市区检验处理
+      if (!_addstr) {
+        this.addressInput = this.addressObj.address
+        this.$emit('onDivisionsChange', Object.assign({}, result, { divisions: this.divisions, vm: this }))
+      }
+    },
+    // 懒加载检索方法
+    fetchFunction (value) {
+      if (value && this.mapAutocomplete) {
+        this.searching = true
+        this.lastFetchId += 1
+        const fetchId = this.lastFetchId
+        this.mapAutocomplete.search(value, (status, result) => {
+          if (fetchId !== this.lastFetchId) {
+            return
+          }
+          if (status === 'complete') {
+            this.option = []
+            const addressMap = {}
+            result.tips.forEach((res) => {
+              if (res.location) {
+                if (!Object.prototype.hasOwnProperty.call(addressMap, res.district)) {
+                  addressMap[res.district] = []
+                }
+                addressMap[res.district].push({
+                  label: res.name,
+                  value: res.location.lng + ',' + res.location.lat,
+                  address: res.address + '',
+                  word: value
+                })
+              }
+            })
+            for (const key of Object.keys(addressMap)) {
+              this.option.push({
+                title: key,
+                children: addressMap[key]
+              })
+            }
+          }
+          this.searching = false
+        })
+      }
+    },
+    // 获取数据
+    getData (value, callback) {
+      if (value !== '') {
+        const logicName = this.attr.keyName
+        const logic = logicName.substring(6)
+        runLogic(logic, value, 'af-system').then(res => {
+          callback(res)
+        })
+      }
+    },
+    // 关键字高亮
+    highLight (value, word) {
+      // 如果标题中包含，关键字就替换一下
+      if (value.includes(word)) {
+        value = value.replace(word,
+          // 这里是替换成html格式的数据，最好再加一个样式权重，保险一点
+          '<span style="color:red!important;">' + word + '</span>'
+        )
+        return value
+        // eslint-disable-next-line brace-style
+      }
+      // 不包含的话还用这个
+      else {
+        return value
+      }
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.$nextTick(() => {
+          GetGDMap(this.gaode_secret_key, this.gaode_key).then(aMap => {
+            this.initMap(aMap)
+            this.mapAutocomplete = new (aMap).AutoComplete({
+              // city 限定城市，默认全国
+              city: '全国',
+              dragEnable: true,
+              animateEnable: false
+            })
+            this.positionPicker = new window.AMapUI.PositionPicker({
+              mode: 'dragMap',
+              map: this.map
+            })
+            this.positionPicker.on('success', (positionResult) => {
+              console.log(positionResult)
+              console.log(positionResult.position)
+              // 设置 行政区划信息
+              if (positionResult?.regeocode?.addressComponent) {
+                const { addressComponent } = positionResult?.regeocode
+                this.divisions.province = addressComponent.province
+                this.divisions.city = addressComponent.city
+                this.divisions.district = addressComponent.district
+                this.divisions.township = addressComponent.township
+                this.divisions.towncode = addressComponent.towncode
+                this.divisions.street = addressComponent.street
+                // 试着获取小区
+                if (positionResult?.regeocode?.aois && positionResult?.regeocode?.aois.length) {
+                  // 取第一个当做小区
+                  this.divisions.area = positionResult?.regeocode?.aois[0]?.name
+                } else if (positionResult?.regeocode?.pois && positionResult?.regeocode?.pois.length) {
+                  // 取第一个当做小区
+                  this.divisions.area = positionResult?.regeocode?.pois[0]?.name
+                }
+                this.divisions.str =
+                  `${addressComponent.province}${addressComponent.city}${addressComponent.district}${addressComponent.township}`
+              }
+              if (this.divisions.str && positionResult.address.startsWith(this.divisions.str)) {
+                // 如果 省市区信息和获取到的地址的前缀一致 那么省市区前缀禁止修改只能修改后面的 通过 onchange事件拦截
+                this.readOnlyDivisions = true
+              }
+              this.addressObj.address = positionResult.address
+              this.addressObj.lng_lat = `${positionResult.position.lng},${positionResult.position.lat}`
+            })
+            this.positionPicker.on('fail', function (positionResult) {
+            })
+            this.positionPicker.start()
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#addressSearchCombobox_map {
+  margin: 1% 0;
+  width: 100%;
+  height: 400px;
+  text-align: center
+}
+
+.asc_descriptions .ant-descriptions-item-content {
+  width: 80%;
+}
+
+.certain-category-search-wrapper {
+  margin-bottom: -4rem;
+  text-align: center;
+}
+
+#addressSearchCombobox {
+
+  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
+    color: #666;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
+    border-bottom: 1px solid #f6f6f6;
+  }
+
+  .certain-category-search-dropdown .ant-select-dropdown-menu-item {
+    padding-left: 16px;
+  }
+
+  .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
+    text-align: center;
+    cursor: default;
+  }
+
+  .certain-category-search-dropdown .ant-select-dropdown-menu {
+    max-height: 300px;
+  }
+
+  .certain-category-search-wrapper .certain-search-item-count {
+    position: absolute;
+    color: #999;
+    right: 16px;
+  }
+
+  .certain-category-search-wrapper .certain-category-search.ant-select-focused,
+  .certain-category-icon {
+    color: #108ee9;
+  }
+
+  .certain-category-search-wrapper .certain-category-icon {
+    color: #6e6e6e;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    font-size: 16px;
+  }
+
+  .addressName {
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .addressRemark {
+    margin-bottom: 0;
+    font-size: 12px;
+  }
+}
+</style>