@zhangqingcq/plug-r-qw/src/style/components/inputMap.less

A JS lib base on Vue and View-design, you can achieve some complex functions with simple code after install this lib.

/**
 * created 2020.07.03
 * @author ricky zhangqingcq@foxmail.com
 */

@import '../common/color';

.containerIKJ {
		position: relative;
	.searchInputWrap {
    position: absolute;
    top: 2px;
    left: 8px;
    width: 80%;
    z-index: 162; /*暂定为162，如果被其它元素挡住导致异常的话再调整*/
    .mapInputIKJ {
      > input::-webkit-input-placeholder {
        color: #888;
      }

      > input::-moz-placeholder {
        color: #888;
      }

      > input:-ms-input-placeholder {
        color: #888;
      }

      > .ivu-input {
        background-color: rgba(255, 255, 255, 0.9);
        border-color: transparent;

        &:focus {
          border-color: @borderColor;
          box-shadow: none;
          background-color: #fff;
        }
      }
    }

    .addressListWrap {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 2px;
      z-index: 162;
      .addressList {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        max-height: 200px;
        overflow-y: auto;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
    }

    .addressItem {
      padding: 5px 12px;
      cursor: pointer;
      line-height: 22px;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background-color: #f5f5f5;
      }

      .addressName {
        display: block;
        font-weight: 500;
        color: #333;
      }

      .addressDetail {
        display: block;
        font-size: 12px;
        color: #999;
        line-height: 18px;
      }
    }
	}
}

.containerMapAddress {
	.searchInputWrap {
		position: relative;
		display: flex;
		gap: 8px;

		.searchInput {
			flex: 1;
		}

		.addressListWrap {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			margin-top: 2px;
			z-index: 162;

			.addressList {
				border: 1px solid #d9d9d9;
				border-radius: 4px;
				max-height: 200px;
				overflow-y: auto;
				background-color: #fff;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
			}
		}

		.addressItem {
			padding: 5px 12px;
			cursor: pointer;
			line-height: 22px;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			&:hover {
				background-color: #f5f5f5;
			}

			.addressName {
				display: block;
				font-weight: 500;
				color: #333;
			}

			.addressDetail {
				display: block;
				font-size: 12px;
				color: #999;
				line-height: 18px;
			}
		}
	}
}

.mapInfoWindowIKJ {
	padding: 3px 6px 1px 6px;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid #666;
	line-height: 15px;
}

.mapInfoWindowMA {
	padding: 3px 6px 1px 6px;
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid #666;
	line-height: 15px;
}