<template>
  <article class="history-search">
    <header class="history-search-title">
      <span>历史搜索</span>
      <img src="../../images/search-grey.png" alt="删除">
    </header>
    <section class="history-search-content">
      <span v-for="(item, index) in sourceData" :key="index">{{item.name}}</span>
    </section>
  </article>
</template>
<script>
export default {
  props: {
    sourceData: {
      type: Array,
      default: () => [{name:'222'},{name:'222'},{name:'222'},{name:'222'},{name:'222'},{name:'222'},{name:'222'}]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
.history-search {
  margin: px2rem(15px);
  &-title {
    width: 100%;
    justify-content: space-between;
    display: inline-flex;
    span {
      padding: px2rem(4px) px2rem(4px);
      font-size: px2rem(12px);
      color: 6;
    }
  }
  &-content {
    
  }
}
</style>
