chelvc-custom/src/pages/client/chooseCity/index.vue

<template>
  <view class="chooseCity">
    <!-- 地图 -->
    <view class="map">地图</view>
    <view class="nearsMap">附近地址</view>
    <view class="city">
      <view class="citeItem1">某某省某某市某某区某某</view>
      <view class="citeItem2">某某省某某市</view>
    </view>
    <view class="city">
      <view class="citeItem1">某某省某某市某某区某某</view>
      <view class="citeItem2">某某省某某市</view>
    </view>
    <view class="city">
      <view class="citeItem1">某某省某某市某某区某某</view>
      <view class="citeItem2">某某省某某市</view>
    </view>
    <view class="city">
      <view class="citeItem1">某某省某某市某某区某某</view>
      <view class="citeItem2">某某省某某市</view>
    </view>
  </view>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.chooseCity {
  background-color: #fff;

  .map {
    width: 100%;
    height: 600rpx;
    text-align: center;
    line-height: 600rpx;
    background-color: pink;
  }

  .nearsMap {
    font-size: 36rpx;
    padding: 30rpx;
    border-bottom: 2rpx solid #d9d9d9;
  }

  .city {
    width: 100%;
    height: 150rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .citeItem1 {
      font-size: 34rpx;
      color: #343434;
      margin-bottom: 20rpx;
    }

    .citeItem2 {
      font-size: 26rpx;
      color: #999999;
    }
  }

  .city:nth-of-type(2n) {
    background-color: #efefef;
  }
}
</style>