<template>
  <div class="home_con">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="nav_bread">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
    </a-breadcrumb>
 
  <!-- 搜索部分 -->
  <div class="home_search">
    <div class="search_tab">
      <span>查专利</span>
      <span>查企业</span>
    </div>
    <div class="search">
      <a-input-search
        v-model:value="searchValue"
        placeholder="请输入专利名称、专利号等关键词"
        @search="onSearch"
      >
        <template #enterButton>
          <img
            style="padding-right: 5px"
            src="@/static/home/index/icon-search.png"
            alt=""
          />搜索
        </template>
      </a-input-search>
    </div>
    <div class="search_info">
      <div class="search_tips">
        <div class="num">1200w+</div>
        <div class="" style="font-family: 'jiangcheng'">企业数量</div>
      </div>
      <div class="split"></div>
      <div class="search_tips">
        <div class="num">2400w+</div>
        <div class="" style="font-family: 'jiangcheng'">专利数量</div>
      </div>
      <div class="split"></div>
      <div class="search_tips">
        <div class="num">3300w+</div>
        <div class="" style="font-family: 'jiangcheng'">专利授权数量</div>
      </div>
      <div class="split"></div>
      <div class="search_tips">
        <div class="num">20000w+</div>
        <div class="" style="font-family: 'jiangcheng'">专利转让数量</div>
      </div>
    </div>
  </div>
  <div class="home_list">
    <!-- 列表 -->
    <div class="ranking">
      <div class="ranking_title">
        <img src="@/static/home/index/icon-list01.png" alt="" />
        <span class="title">&nbsp;企业科创能力榜单</span>
        <span class="more">更多</span>
      </div>
      <!-- 判断是否有数据 -->
      <ul v-if="innovateList.length !== 0">
        <li class="rank_item" v-for="item in innovateList">
          {{ item }}
        </li>
      </ul>
      <div class="empty_img" v-else>
        <img src="@/static/home/index/img-empty.png" alt="" />
        <div class="nodata">暂无数据</div>
      </div>
    </div>
    <div class="ranking">
      <div class="ranking_title">
        <img src="@/static/home/index/icon-list02.png" alt="" />
        <span class="title">&nbsp;企业技术合作榜单</span>
        <span class="more">更多</span>
      </div>
      <ul v-if="innovateList.length !== 0">
        <li class="rank_item" v-for="item in innovateList">
          {{ item }}
        </li>
      </ul>
      <div class="empty_img" v-else>
        <img src="@/static/home/index/img-empty.png" alt="" />
        <div class="nodata">暂无数据</div>
      </div>
    </div>
    <div class="ranking">
      <div class="ranking_title">
        <img src="@/static/home/index/icon-list02.png" alt="" />
        <span class="title">&nbsp;浏览记录</span>
        <span class="more">更多</span>
      </div>
      <ul v-if="followList.length !== 0">
        <li class="rank_item" v-for="item in followList">
          {{ item }}
        </li>
      </ul>
      <div class="empty_img" v-else>
        <img src="@/static/home/index/img-empty.png" alt="" />
        <div class="nodata">暂无浏览记录</div>
      </div>
    </div>
    <div class="ranking">
      <div class="ranking_title">
        <img src="@/static/home/index/icon-list02.png" alt="" />
        <span class="title">&nbsp;我的关注</span>
        <span class="more">更多</span>
      </div>
      <ul v-if="followList.length !== 0">
        <li class="rank_item" v-for="item in followList">
          {{ item }}
        </li>
      </ul>
      <div class="empty_img" v-else>
        <img src="@/static/home/index/img-empty.png" alt="" />
        <div class="nodata">暂无关注数据</div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      searchValue: "",
      followList: [],
      innovateList: [
        "山煤国际能源集团股份有限公司",
        "山煤国际能源集团股份有限公司",
        "山煤国际能源集团股份有限公司",
      ],
    };
  },
  components: {},
  methods: {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.home {
  // height: calc(100% - 80px);
  .home_main {
    // height: 100%;
    width: 100%;
    background-color: #ebebeb;
    display: flex;
    .home_con {
      background-color: #ebebeb;
      padding-left: 30px;
      width: calc(100% -80px);
      flex: 1;
      .nav_bread {
        height: 50px;
        padding: 20px 3px;
        background-color: #ebebeb;
      }
      .home_search {
        // width: 1820px;
        width: calc(100% -80px);
        height: 308px;
        position: relative;
        background: url("~@/static/home/index/img-index01.png") no-repeat;
        background-size: 100%;
        .search_tab {
          position: absolute;
          top: 50px;
          left: 50px;

          span {
            color: #fff;
            font-family: "jiangcheng";
            display: inline-block;
            width: 140px;
            height: 54px;
            border-radius: 27px;
            background-color: #4079ff;
            text-align: center;
            line-height: 54px;
            font-size: 18px;
            margin-right: 10px;
          }
        }
        .search {
          position: absolute;
          top: 150px;
          left: 50px;
          width: 700px;
          height: 54px;
          background-color: #4079ff !important;
          :deep(.ant-input-group .ant-input) {
            height: 54px;
            font-size: 16px;
            border: 2px solid #4079ff;
            border-radius: 8px;
          }
          :deep(.ant-input-search-button) {
            height: 54px;
            width: 120px;
            background-color: #4079ff !important;
            color: #fff;
            font-size: 18px;
          }
        }
        .search_info {
          position: absolute;
          bottom: 30px;
          left: 50px;
          width: 700px;
          // height: 54px;
          .search_tips {
            width: 24%;
            display: inline-block;
            text-align: center;
            .num {
              color: #4079ff;
              font-family: "jiangcheng";
              font-size: 24px;
            }
          }
          .split {
            width: 2px;
            display: inline-block;
            height: 25px;
            background-color: #ccc;
          }
        }
      }
      .home_list {
        padding: 20px;
        display: flex;
        justify-content: space-evenly;
        background-color: #fff;
        .ranking {
          width: 420px;
          height: 487px;
          border-radius: 4px;
          border: 1px solid #e5e5e5;
          padding: 25px 30px;
          .empty_img {
            text-align: center;
            margin: 50% 0;
            transform: translateY(-50%);
            .nodata {
              color: #bbbbbb;
              font-size: 20px;
            }
          }

          .title {
            font-size: 20px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #1c1c28;
            line-height: 28px;
          }
          .more {
            float: right;
            color: #bbbbbb;
          }
          .rank_item {
            height: 45px;
            line-height: 45px;
            color: #555770;
          }
          li::marker {
            color: #ccc;
            border-radius: 50%;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
