OpenPlatForm/pages/domain/seekApi.vue

<template>
  <div class="api-box">
    <div class="apiBox-head">
      <div class="api-title">API市场</div>
      <div class="seek-input">
        <el-input placeholder="搜索接口连接/方法名/接口中文名" v-model="input2">
        </el-input>
        <span class="seek-slod">搜索</span>
      </div>
    </div>

    <div class="api-boxs">
      <div class="box-head-title">
        <ul class="ul-list">
          <li :class="{ itemColor: isList === '1' }" @click="isList = '1'">
            全部
          </li>
          <li :class="{ itemColor: isList === '2' }" @click="isList = '2'">
            节日活动类
          </li>
          <li :class="{ itemColor: isList === '3' }" @click="isList = '3'">
            工具类
          </li>
          <li :class="{ itemColor: isList === '4' }" @click="isList = '4'">
            特色版块类
          </li>
          <li :class="{ itemColor: isList === '5' }" @click="isList = '5'">
            数据搜索类
          </li>
          <li :class="{ itemColor: isList === '6' }" @click="isList = '6'">
            入库类
          </li>
          <li :class="{ itemColor: isList === '7' }" @click="isList = '7'">
            开源类
          </li>
        </ul>
        <div class="btn-test" @click="onSkip('/domain/debugApi')">接口测试</div>
      </div>

      <div>
        <div v-for="(item, index) in apiData" :key="index">
          <div class="for-title">{{ item.title }}</div>
          <div class="data-box">
            <div
              class="data-item"
              v-for="(data, i) in item.data"
              :key="i"
              :class="{ backColor: data.state }"
            >
              <div v-if="data.hot" class="new-content">
                <img class="huo-png" src="@/static/img/huo.png" alt="" />
                <span>HOT</span>
              </div>

              <div v-if="data.new" class="new-content">
                <span>NEW</span>
              </div>

              <img :src="data.img" alt="" />
              <div class="data-box">
                <div class="data-1">{{ data.title }}</div>
                <div class="data-2">{{ data.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input2: "",
      isList: "1",
      apiData: [
        {
          title: "节日活动类",
          data: [
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",
              state: true,
              new: true,
              img: require("@/static/img/beiyong1.png"),
            },
          ],
        },
        {
          title: "工具类",
          data: [
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              new: false,
              hot: true,
              img: require("@/static/img/beiyong1.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              new: false,
              hot: true,

              img: require("@/static/img/beiyong2.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              new: false,
              hot: false,
              img: require("@/static/img/beiyong3.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              new: false,
              hot: true,
              img: require("@/static/img/beiyong4.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong1.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong2.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong3.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong4.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong1.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong2.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong3.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong4.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              new: true,
              img: require("@/static/img/beiyong1.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong2.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong3.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong4.png"),
            },
          ],
        },
        {
          title: "特色版块类",
          data: [
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong1.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              new: true,
              img: require("@/static/img/beiyong2.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              new: true,
              img: require("@/static/img/beiyong3.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong4.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong1.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong2.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong3.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong4.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong1.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              new: true,
              img: require("@/static/img/beiyong2.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong3.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong4.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong1.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong2.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              img: require("@/static/img/beiyong3.png"),
            },
            {
              type: 1,
              title: "京东商品转链",
              content: "京东商品转链返回京东推广短链接",

              hot: true,

              img: require("@/static/img/beiyong4.png"),
            },
          ],
        },
      ],
    };
  },
  methods:{
    onSkip: function(path){
      this.$router.push(path)
    }
  }
};
</script>


<style lang="scss" scoped>
.api-box {
  width: 1200px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;

  .apiBox-head {
    height: 184px;
    width: 100%;
    background: url("../../static/img/index-bar.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    flex-direction: column;

    .api-title {
      color: #fff;
      font-weight: bold;
      font-size: 40px;
      margin-top: 40px;
    }
    .seek-input {
      width: 350px;
      height: 34px;
      display: flex;
      background: #fff;
      border-radius: 17px;
      margin-top: 18px;
      overflow: hidden;
      .seek-slod {
        background: #1890ff;
        color: #fff;
        width: 70px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        border-radius: 17px;
        padding: 0;
        margin: 0;
        cursor: pointer;
      }
    }
  }
  .api-boxs {
    min-height: 777px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .box-head-title {
      width: 100%;
      display: flex;
      height: 80px;
      .ul-list {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 23px 0 0px 0;
        color: #333333;
        font-size: 16px;
        height: 16px;
        line-height: 16px;
        margin-right: auto;
        li {
          margin-right: 40px;
          height: 16px;
          padding-bottom: 8px;
          cursor: pointer;
          border-bottom: 4px solid transparent;
          transition: border-color 0.3s;
        }
        .itemColor {
          border-bottom: 4px solid #2f89fc;
          transition: border-color 0.3s;
        }
      }
      .btn-test {
        width: 104px;
        height: 33px;
        background: linear-gradient(180deg, #1890ff 0%, #2f89fc 100%);
        box-shadow: 0px 2px 10px 0px rgba(24, 144, 255, 0.2);
        border-radius: 17px;
        line-height: 33px;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        margin: 20px 0 0 0;
        cursor: pointer;
      }
    }
  }
}

.for-title {
  margin: 0px 0 30px;
  padding-left: 12px;
  border-left: 4px solid #1890ff;
  font-size: 20px;
  line-height: 20px;
  height: 20px;
}

.data-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.data-item {
  flex-shrink: 0;
  width: 275px;
  height: 90px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #eeeeee;
  margin-bottom: 20px;
  padding: 20px 15px;
  box-sizing: border-box;
  display: flex;
  cursor: pointer;
  position: relative;
  .data-box {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    padding: 4px 0;
    .data-1 {
      color: #333333;
      font-size: 16px;
    }
    .data-2 {
      color: #999999;
      font-size: 12px;
      margin-top: auto;
    }
  }
  .new-content {
    width: 65px;
    height: 20px;
    background: #ff4242;
    border-radius: 0px 14px 0px 14px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    color: #fff;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    span {
      margin-left: 0px;
    }
    .huo-png {
      vertical-align: 0px;
    }
  }
}

.backColor {
  background: #2f89fc;
  box-shadow: 0px 3px 10px 0px rgba(24, 144, 255, 0.3);
  .data-box {
    .data-1 {
      color: #fff;
    }
    .data-2 {
      color: #97c4fd;
    }
  }
}
</style>