<template>
  <view class="change-position">
    <view class="search">
      <u-search shape="square" :show-action="false"  />
      <u-button type="primary">新增</u-button>
    </view>
    <view class="search-list">
      <view v-for="item in 20" class="item" hover-class="is-active">
        <view class="icon" />
        <text class="position-name">山东路（香港中路-闽江路）</text>
        <text class="position">100m内</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Change",
}
</script>

<style scoped lang="scss">
.change-position {
  width: 100%;
  height : 100%;
  background: #ffffff;
  
  .search {
    width  : calc(100% - 52rpx);
    padding: 26rpx;
    display: flex;
    align-items: center;
    
    .u-button {
      width: 170rpx;
      background: #2663BF;
      color: #ffffff;
      margin-left: 20rpx;
      height: 68rpx;
    }
    
  }
  
  .search-list {
    min-height: 160rpx;
    width: 100%;
    max-height: 400rpx;
    overflow-y: auto;
    
    .item {
      display: flex;
      height: 100rpx;
      align-items: center;
      font-size: 32rpx;
      color: #8a8a8a;
      padding: 0 26rpx;
      
      &.is-active {
        background: #e7effd;
        color: #2663BF;
        
        .icon {
          background-image: url("/static/position_active.png");
        }
      }
      
      .icon {
        width: 60rpx;
        height: 60rpx;
        background-image: url("/static/position.png");
        background-size: 60rpx 60rpx;
        background-repeat: no-repeat;
      }
      
      .position-name {
        display: block;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
