<template>
  <div class="page_search">
    <div class="header">
      <i class="iconfont icon-zuojiantou"></i>
      <el-input
        placeholder=" 姓名 / 首拼 / 透析号"
        prefix-icon="el-icon-search"
        v-model="searchVal"
        v-on:input="watchNum"
      ></el-input>
    </div>
    <div class="searchList">
        <ul>
            <li>不卡件大事</li>
            <li>不卡件大事</li>
            <li>不卡件大事</li>
            <li>不卡件大事</li>
        </ul>
    </div>
    <div class="history">
      <div class="historyTitle">
        <span>历史搜索</span>
        <!-- <i class="iconfont icon-lajixiang"></i> -->
        <i>&#xe62a;</i>
      </div>
      <div class="record">
        <ul class="recordList">
          <li class="recordOne">123</li>
          <li class="recordOne">123</li>
          <li class="recordOne">哦驾驶的拉升的</li>
          <li class="recordOne">哦驾驶的拉升的</li>
          <li class="recordOne">asd</li>
        </ul>
      </div>
    </div>

    <!-- <div class="searchList">
      <van-tabs
        v-model="active"
        title-active-color="#000000"
        title-inactive-color="#3C3C3C"
      >
        <van-tab title="全部">
          <ul class="list">
            <li class="searchOne">
              <img src="../../assets/images/one.jpg" alt />
              <span>爱听课的小</span>
            </li>
            <li class="searchOne">
              <img src="../../assets/images/one.jpg" alt />
              <span>爱听课的小</span>
            </li>
          </ul>
        </van-tab>
        <van-tab title="血透">血透</van-tab>
        <van-tab title="慢病">慢病</van-tab>
        <van-tab title="会员">会员</van-tab>
        <van-tab title="电商">电商</van-tab>
      </van-tabs>
    </div> -->
  </div>
</template>

<script>
 import { SaveSearch } from '@/api/login/login'
export default {
   data() {
     return {
       searchVal: '',
       active: 0
     }
   },
   methods: {
     SaveSearch() {
       SaveSearch(this.searchVal).then(response => {

       })
     },
     watchNum() {
       console.log(this.searchVal)
     }
   }
}
</script>

<style lang="scss">
.page_search {
  overflow: hidden;
  height: 100%;
  .header {
    height: 2.5rem;
    width: 100%;
    line-height: 2.5rem;
    border-bottom: 1px solid #f4f4f4;
    .icon-zuojiantou {
      float: left;
      width: 2.5rem;
      height: 2.5rem;
      text-align: center;
    }
    .el-input {
      width: 19.4375rem;
      height: 1.9375rem;
      line-height: 1.9375rem;
      background: rgba(244, 244, 244, 1);
      border-radius: 0.9375rem;
    }
    .el-input__inner {
      border: none;
      height: 100%;
      line-height: 1.9375rem;
      background: rgba(244, 244, 244, 1);
      border-radius: 0.9375rem;
      padding-left: 2.5rem;
    }
    .el-input__prefix {
      margin-top: -0.25rem;
      font-size: 1.25rem;
    }
  }
  .history {
    padding: 1.25rem 0.75rem 0 0.875rem;
    .historyTitle {
      height: 1.25rem;
      line-height: 1.25rem;
      i {
        float: right;
        font-size: 1.625rem;
        color: #9b9b9b;
      }
      span {
        float: left;
        font-size: 0.9375rem;
        color: rgba(60, 60, 60, 1);
      }
    }
  }
  .record {
    margin-top: 1.25rem;
    .recordList {
      display: flex;
      flex-wrap: wrap;
    }
    .recordOne {
      min-width: 0.0625rem;
      height: 1.6875rem;
      background: rgba(244, 244, 244, 1);
      border-radius: 14px;
      color: rgba(155, 155, 155, 1);
      font-size: 0.875rem;
      padding: 0.4375rem 0.875rem;
      margin-right: 0.625rem;
      box-sizing: border-box;
      margin-bottom: 0.625rem;
    }
  }
  .searchList {
    .van-tab {
      font-weight: 600;
    }
    .van-tab--active {
      font-size: 1.25rem;
      font-weight: 600;
    }
    .van-tabs__line {
      height: 0.25rem;
      background: linear-gradient(
        -90deg,
        rgba(129, 159, 246, 1),
        rgba(81, 119, 238, 1),
        rgba(75, 102, 234, 1)
      );
    }
    .list {
      margin-top: 0.625rem;
    }
    .searchOne {
      height: 4.625rem;
      width: 21.25rem;
      margin: 0 auto;
      border-bottom: 1px solid #e6e6e6;
      line-height: 4.625rem;
      img {
        float: left;
        width: 3.4375rem;
        height: 3.3125rem;
        border-radius: 50%;
        margin-top: 0.625rem;
      }
      span {
        float: left;
        margin-left: 1.125rem;
        color: rgba(0, 0, 0, 1);
        font-weight: 600;
      }
    }
  }
}
</style>
