<template>
  <div class="RightTopContainer">
    <ContentTop
      title="百姓健身房人流量排行"
      :type="2"
      :topOptionsProps="sportInfo"
    />
    <div class="searchIpt">
      <input type="text" placeholder="搜索" />
      <icon name="align-left" class="text-icon" />
    </div>
    <div class="rank-list" style="margin-top: 14px">
      <rank-list :listHeight="250" :tableTitle="tableTitle" />
    </div>
  </div>
</template>
              
              <script>
import ContentTop from "@/components/contentTop";
import rankList from "@/components/rankList";
export default {
  components: {
    ContentTop,
    rankList,
  },
  data() {
    return {
      tableTitle: [
        {
          title: "排名",
          width: "100",
        },
        {
          title: "场地名",
          val: "first",
          width: "150",
        },
        {
          title: "服务人次",
          val: "second",
          width: "150",
        },
      ],
      sportInfo: {
        selects: [
          {
            name: "one",
            options: [
              {
                value: 1,
                label: "鹿城区",
              },
              {
                value: 2,
                label: "鹿城区1",
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
              
              <style lang="scss" scoped>
@import "../../../assets/scss/index.scss";
.RightTopContainer {
  .searchIpt {
    width: 100%;
    height: 40px;
    margin: 18px 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    input {
      flex: 1;
      padding-left: 40px;
      line-height: 30px;
      background: rgba(86, 148, 255, 0.2);
      border-radius: 2px;
      //backdrop-filter: blur(20px);
      font-size: 14px;
      color: rgba(255, 255, 255, 0.56);
      border: none;
    }

    input::placeholder {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.56);
    }

    .text-icon {
      position: absolute;
      left: 10px;
      top: 10px;
      color: #fff;
    }

    .rank-radio {
      //width:100px;
    }
  }
}
</style>
              