<template>
  <div class="interactLocation">
    <!-- 输入框 -->
    <div class="inputBox" @keydown.enter="searchFu()">
      <div class="searInco" @click="searchFu()">
        <van-icon name="search" />
      </div>
      <van-field maxlength="20" v-model="txt" placeholder="搜索位置" />
    </div>
    <div class="locationBox">
      <div class="row" v-for="item in locationData" :key="item.id">
        <h3>{{item.name}}</h3>
        <div class="row_floo">
          <div class="row_flooLL">{{item.loc}}</div>
          <div class="row_flooRR">{{item.num}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "interactLocation",
  components: {},
  data() {
    return {
      txt: "",
      locationData:[
        {id:1,name:'芜湖市',loc:'中国安徽省芜湖市',num:''},
        {id:2,name:'鸠兹广场',loc:'安徽省芜湖市镜湖区滨江路桥口',num:'247m'},
        {id:3,name:'中江塔',loc:'安徽省芜湖市镜湖区滨江路桥口',num:'425m'},
        {id:4,name:'方特旅游区',loc:'安徽省芜湖市镜湖区银湖北路80号',num:'692m'},
        {id:5,name:'芜湖滨江公园',loc:'芜湖市镜湖区新芜路7号',num:'849m'},
        {id:6,name:'芜湖长江三桥',loc:'安徽省芜湖市',num:'945m'},
        {id:7,name:'鸠兹古镇',loc:'安徽省芜湖市鸠江区陈棱路与徽州路交汇处西北角',num:'1007m'},
        {id:8,name:'临江桥',loc:'安徽省芜湖市',num:'1205m'},
        {id:9,name:'芜湖大剧院',loc:'安徽芜湖市镜湖区滨江路17号',num:'2351m'}
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    searchFu() {},
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.interactLocation {
  width: 100%;
  height: 100%;
  padding: 10px 15px 40px;
  overflow-y: auto;

  .inputBox {
    margin: 0px auto;
    width: 100%;
    height: 30px;
    position: relative;

    .searInco {
      color: #a0a0a0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      position: absolute;
      top: 0;
      left: 10px;
      z-index: 3;
      width: 20px;
      height: 30px;
    }

    /deep/.van-cell {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0px 0 0px 36px;
      background-color: #F9F9F9;
      border-radius: 5px;
    }
  }
  .locationBox{
    margin-top: 20px;
    .row{
      padding-bottom: 15px;
      border-bottom: 1px solid #E5E5E5;
      padding-top: 15px;
      &>h3{
        font-size: 16px;
        color: #393939;
      }
      .row_floo{
        margin: 10px 0 0;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #868686;
        .row_flooLL{
          max-width: 80%;
        }
      }
    }
  }
}
</style>