OpenPlatForm/pages/domain/AppDetail.vue

    <template>
  <div class="app-detail">
    <div class="detail-title">
      <span>我的应用</span>
    </div>
    <div class="detail-header-box">
      <div class="detail-header-item">
        <div class="item1">嗨</div>
        <div class="item2">
          <div class="div1">Google App</div>
          <div class="div2">这是一个全新的app</div>
          <div class="div3">
            <span style="background: #deedff; color: #2f89fc">电脑版网站</span>
            <span style="background: #ffeeee; color: #ff4c4c">H5移动网站</span>
            <span style="background: #e8f7f7; color: #1ab1b0">iOS客户端</span>
            <span style="background: #fff2ec; color: #ff7742"
              >Android客户端</span
            >
            <span style="background: #ebf7e8; color: #3ab11a">微信小程序</span>
          </div>
        </div>
        <div class="item3">
          <div>管理应用</div>
        </div>
      </div>

      <div class="detail-buttom-box">
        <div class="button-box">
          <div class="button-item1">
            <span class="span1">APP_KEY：</span>
            <span class="span2">604c2475ad4f9</span>
            <span class="span3">复制</span>
          </div>
          <div class="button-item1" style="margin: 20px 0">
            <span class="span1">APP_SECRET：</span>
            <span class="span2">cf8062d60e74de8edd3ac32ccd3b7bab</span>
            <i
              class="el-icon-view"
              style="margin-right: 10px; font-size: 12px; color: #999999"
            ></i>
            <span class="span3">重置</span>
            <span class="span3" style="margin-left: 10px">复制</span>
          </div>
          <div class="button-item1">
            <span class="span1">PID：</span>
            <span class="span2">未绑定</span>
            <span class="span3">绑定</span>
          </div>
        </div>

        <div class="button-box" style="margin-left: auto">
          <div class="button-item1">
            <span class="span1">API请求速度：</span>
            <span class="span2">600次 / 分钟</span>
            <span class="span4"
              >当前应用内的所有API每分钟请求总和不得超过600次</span
            >
          </div>
          <div class="button-item1" style="margin: 20px 0">
            <span class="span1">API请求量：</span>
            <span class="span2">30万次/天</span>
            <span class="span3">申请提量</span>
          </div>
          <div class="button-item1">
            <span class="span1">URL：</span>
            <span class="span2">未设置</span>
            <span class="span3">设置</span>
          </div>
        </div>
      </div>
    </div>

    <div class="banner-text">
      <span
        >调用接口推荐使用SDK(省去验签环节和请求编码环节，帮助您高效快速接入</span
      >
      <span style="color: #1890ff; margin-left: auto">SDK下载</span>
    </div>

    <div class="detail-title2">
      <div>
        <div style="color: #333333; font-size: 20px">我的API</div>
        <div style="color: #999999; font-size: 14px">
          您可以选择任意API在此应用中使用，每个应用中所有API的数据请求频率和数量，将以应用规格为准
        </div>
      </div>

      <div class="title-btn">添加API</div>
    </div>

    <div class="myApi-box">
      <el-table :data="tableData" stripe :border="false" style="width: 100%">
        <el-table-column prop="name" label="API名称" align="center" width="260">
          <template slot-scope="scope">
            <div class="scope-name-box">
              <div class="scope-name"></div>
              <div>{{ scope.row.name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" align="center" label="API" width="440">
          <template slot-scope="scope">
            <div class="scope-name-box">
              <div>{{ scope.row.content }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="operation" align="center" label="操作">
          <template slot-scope="scope">
            <div class="scope-box">
              <div @click="handleClick(scope.row)">接口文档</div>
              <div @click="handleClick(scope.row)" style="margin: 0 20px">
                接口测试
              </div>
              <div @click="handleClick(scope.row)" style="color: #ff4242">
                移除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="detail-title">
      <span>推荐API</span>
    </div>

    <div class="recommend-box">
      <div class="recommend-item" v-for="(item, index) in 10" :key="index">
        <div class="item-1"></div>
        <div class="item-2">一个接口</div>
        <div class="item-3">这是一个接口的简单描述</div>
        <div class="item-4">申请接入</div>
      </div>
    </div>

    <div class="detail-title2" style="margin-top: 20px">
      <div>
        <div style="color: #333333; font-size: 20px">使用方法</div>
        <div style="color: #999999; font-size: 14px">
          为规范使用和保障数据安全，API调用需要通过验签规则，我们为您准备了各语言的验签及调用示例：
        </div>
      </div>
    </div>

    <div class="detail-border">
      <span>PythonSDK及调用示例</span>
      <span>java调用示例</span>
      <span>php调用示例</span>
      <span>更多示例</span>
    </div>

    <ApiAdd @onClose="onClose" v-if="isApiAdd" />
  </div>
</template>


<script>
 
import ApiAdd from '@/components/domain/apiAdd';
export default {
  components: {
    ApiAdd
  },
  data() {
    return {

      isApiAdd: true,
      tableData: [
        {
          name: "我的收藏",
          content:
            "https://openapi.zhiying.com/api.goods/gets/get-collection-list",
          operation: "操作",
        },
        {
          name: "我的收藏",
          content:
            "https://openapi.zhiying.com/api.goods/gets/get-collection-list",
          operation: "操作",
        },
        {
          name: "我的收藏",
          content:
            "https://openapi.zhiying.com/api.goods/gets/get-collection-list",
          operation: "操作",
        },
      ],
    };
  },
  methods:{
    onClose: function(){
        this.isApiAdd = false
    }
  }
};
</script>

<style lang="scss" scoped>
.app-detail {
  background: #fff;
  padding: 0 20px 70px;
  border-radius: 12px;
  .detail-title {
    height: 63px;
    line-height: 63px;
    font-size: 20px;
    span {
      padding-left: 12px;
      height: 20px;
      line-height: 20px;
      border-left: 4px solid #1890ff;
    }
  }

  .detail-title2 {
    height: 42px;
    padding-left: 12px;
    border-left: 4px solid #1890ff;
    display: flex;
    align-items: center;
    .title-btn {
      padding: 5px 15px;
      font-size: 16px;
      color: #fff;
      margin-left: auto;
      background: #1890ff;
      border-radius: 6px;
      cursor: pointer;
    }
  }
  .detail-header-box {
    width: 100%;
    height: 297px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #dddddd;
    padding: 0 20px 26px;
    box-sizing: border-box;
    .detail-header-item {
      padding: 20px 0px 30px;
      height: 141px;
      box-sizing: border-box;
      border-bottom: solid 1px #e1e1e1;
      display: flex;
      .item1 {
        width: 90px;
        height: 90px;
        background: #2f89fc;
        border-radius: 14px;
        text-align: center;
        color: #fff;
        line-height: 90px;
        font-size: 32px;
        margin-right: 12px;
      }
      .item2 {
        display: flex;
        flex-flow: column;
        .div1 {
          color: #333333;
          font-size: 24px;
        }
        .div2 {
          color: #999999;
          font-size: 14px;
        }
        .div3 {
          margin-top: auto;
          span {
            font-size: 12px;
            margin-right: 10px;
            padding: 5px 10px;
            display: inline-block;
            border-radius: 6px;
          }
        }
      }
      .item3 {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        div {
          width: 96px;
          height: 40px;
          background: #1890ff;
          border-radius: 6px;
          color: #fff;
          font-size: 16px;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
      }
    }

    .detail-buttom-box {
      display: flex;
      padding: 20px 20px 0px;
      box-sizing: border-box;
      .button-box {
        display: flex;
        flex-flow: column;
        .button-item1 {
          display: flex;
          align-items: center;
          .span1 {
            text-align: right;
            color: #5f6279;
            font-size: 14px;
            width: 100px;
          }
          .span2 {
            text-align: left;
            margin-right: 10px;
            color: #999999;
            font-size: 14px;
          }
          .span3 {
            padding: 5px 10px;
            color: #2f89fc;
            font-size: 12px;
            background: #deedff;
            line-height: 12px;
            border-radius: 6px;
            cursor: pointer;
          }
          .span4 {
            color: #1890ff;
            font-size: 14px;
          }
        }
      }
    }
  }
  .banner-text {
    display: flex;
    height: 56px;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1px solid #feeebb;
    background: #fffcec;
    color: #6a3904;
    padding: 16px 20px;
    font-size: 14px;
    margin: 20px 0;
  }
  .detail-border {
    width: 100%;
    line-height: 57px;
    height: 57px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #dddddd;
    margin-top: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    span {
      margin-right: 60px;
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .myApi-box {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #dddddd;
    padding: 20px;
    margin-top: 20px;
    .scope-name-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      font-size: 14px;
      color: #999999;

      .scope-name {
        width: 40px;
        height: 40px;
        background: linear-gradient(180deg, #ffc298 0%, #ff4747 100%);
        border-radius: 6px;
        margin-right: 10px;
      }
    }
    .scope-box {
      display: flex;
      width: 100%;
      justify-content: center;
      color: #1890ff;
      div {
        cursor: pointer;
      }
    }
  }
  .recommend-box {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    justify-content: space-between; /* 横向中间自动空间 */

    .recommend-item {
      width: 215px;
      height: 264px;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #dddddd;
      box-sizing: border-box;
      margin-bottom: 20px;
      display: flex;
      flex-flow: column;
      align-items: center;
      .item-1 {
        width: 90px;
        height: 90px;
        background: linear-gradient(180deg, #ffc298 0%, #ff4747 100%);
        border-radius: 14px;
        margin: 30px 0 20px;
      }
      .item-2 {
        color: #333333;
        font-size: 16px;
      }
      .item-3 {
        color: #999999;
        font-size: 12px;
        margin: 5px 20px;
        line-height: 12px;
      }
      .item-4 {
        width: 122px;
        height: 31px;
        border-radius: 8px;
        border: 1px solid #1890ff;
        color: #1890ff;
        font-size: 14px;
        line-height: 31px;
        text-align: center;
        margin-top: 15px;
        cursor: pointer;
      }
    }
  }
}
</style>