<template>
  <div class="app-search">
    <div class="hot-search">
      <h2 class="hot-search__title">热门搜索</h2>
      <ul class="hot-search__list">
        <li v-for="(item, index) in hotList" :key="index">
          <app-link :data="item">{{ item.name }}</app-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      hotList: [
        { name: '1+x', href: 'https://x.ezijing.com' },
        { name: '金融', href: 'https://kelley.ezijing.com' },
        { name: 'MBA', href: 'https://sofia.ezijing.com' },
        { name: '心理学', href: 'https://ciis.ezijing.com' },
        { name: '新闻', path: '/about/news' }
      ]
    }
  }
}
</script>

<style lang="scss">
.app-search {
  padding: 0 0.15rem;
  min-height: 100vh;
  background-color: #fff;
}
.hot-search__title {
  padding: 0.2rem 0;
  font-size: 0.12rem;
  font-weight: 400;
  color: #333;
  border-bottom: 1px solid #999;
}
.hot-search__list {
  li {
    font-size: 0.14rem;
    color: #333;
    font-weight: 500;
    line-height: 0.52rem;
    border-bottom: 1px solid #999;
  }
  a {
    display: block;
  }
}
</style>
