#map {
      flex: 0 0 75%;
      /* 鍦板浘鍖哄煙鍗�70% */
      height: 100vh;
      position: relative;
    }

    #cities {
      flex: 0 0 25%;
      /* 鍒楄〃鍖哄煙鍗�30% */
      padding: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      background-color: #1832AB;
      border-left: 1px solid #ccc;
      overflow-y: auto;
      /* 浣垮煄甯傚垪琛ㄥ彲婊氬姩 */
    }

    .city {
      margin: 10px 0;
      cursor: pointer;
      transition: color 0.1s;
      font-size: 20px;
       color: #fff;
    }

    .city:hover {
      color: #fff;
    }

    .selected {
      color: #fff;
      font-weight: bold;
    }

    .tooltip {
      position: absolute;
      background-color: white;
      border: 1px solid #ccc;
      padding: 5px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .label {
      position: absolute;
      color: black;
      line-height: 30px;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .stitle {
      background-color: #1832AB;
      color: #fff;
      padding: 10px;
      font-size: 20px;
      margin-bottom: 10px;
    }

    .stext {
      line-height: 35px;
      font-size: 18px;
      color: #333;
      margin-bottom: 5px;
    }

    .stext span {
      font-weight: bold;
    }

    .line {
      stroke: gray;
      stroke-width: 1;
    }