.ks-area-picker {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 14px;
  overflow: hidden;
  border-top: 1px solid #f8f8f9;
  .ks-area-picker-container {
    font-size: 12px;
    height: 100%;
    width: 100%;
    white-space: nowrap;
    .area-picker-swipe {
      height: 100%;
      .van-swipe__track {
        .area-swipe-item {
          .area-list {
            // flex: 1;
            // width: 0;
            width: 100%;
            background: #fff;
            // flex-direction: column;
            display: inline-block;
            vertical-align: top; //用来调整偏移位置
            height: 100%;
            position: relative;
            .area-list-title {
              padding-left: 16px;
              border-bottom: 1px solid #ebedf0;
              color: #858793;
              font-size: 14px;
              font-family: PingFangSC, PingFangSC-Regular;
              line-height: 42px;
            }
            .select-color {
              color: #323233;
              border-color: #7972fe;
              font-weight: bold;
            }
            .area-list-content {
              height: calc(100% - 43px);
              border: 1px solid #f8f8f9;
              overflow-y: auto;
              .list-item {
                width: 100%;
                cursor: pointer;
                padding: 0 0 0 16px;
                box-sizing: border-box;
                &:hover {
                  background: #f8f8f9;
                }
                .item-choose {
                  display: flex;
                  justify-content: space-between;
                  .address-name {
                    flex: 1;
                    line-height: 48px;
                    // display: inline-flex;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                  }
                  .checkbox-item {
                    width: 14px;
                    height: 14px;
                    padding: 17px 12px 17px 10px;
                    background-image: url('https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-area-select/notChecked.svg');
                    background-repeat: no-repeat;
                    background-size: 14px 14px;
                    background-position: 11px 17px;
                    box-sizing: content-box;
                  }
                  .partial-checked {
                    background-image: url('https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-area-select/notAllChecked.svg');
                  }
                  .all-checked {
                    background-image: url('https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-area-select/allChecked.svg');
                  }
                }
              }
              .is-choose {
                background: #f8f8f9;
                &:hover {
                  background: #f8f8f9;
                }
              }
              .read-only {
                filter: grayscale(100%);
                background: #ebebed;
                .item-choose {
                  .checkbox-item {
                    filter: brightness(0.8);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
