OpenPlatForm/pages/domain/detail.vue

<template>
  <div class="detail-box">
    <div class="elMenu-box">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-submenu index="1">
          <template slot="title">
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>

    <div class="detail-right">
      <div class="right-head">
        <div class="head-item1">
          <div class="auto-item">嗨</div>
          <div class="auto-text">
            <div class="text-1">Google App</div>
            <div class="text-2">这是一个全新的app</div>
            <div class="text-3">123948人正在使用中</div>
          </div>
          <div class="auto-right">
            <div class="div1">SDK下载</div>
            <div class="div2">接口测试</div>
            <div class="div3">申请接入</div>
          </div>
        </div>
        <div class="head-item2">
          <div class="item-div1">
            <span class="span1">应用场景：</span>
            <span class="span2">可用于导购平台的高佣转链工具</span>
          </div>
          <div class="item-div2">
            <span class="span1">应用场景：</span>
            <span class="span2"
              >高效转链接口将您的pid信息、商品地址及优惠券信息进行转链，转链后的结果可进行推广或完成订单，接口支持授权淘宝账号下所有PID进行转链。由于接口特殊性，请适量缓存已转链的链接，以达最佳效率。（接联盟通知，v1.2.0官方比价订单佣金调整正式生效时间推迟至7月22日）</span
            >
          </div>
        </div>
      </div>
      <div class="right-baran">
        <span style="margin-right: auto"
          >调用接口推荐使用SDK(省去验签环节和请求编码环节，帮助您高效快速接入</span
        >

        <span style="color: #1890ff; cursor: pointer">SDK下载</span>
      </div>
      <div class="right-content">
        <div class="content-head">
          <span :class="{ element: elementId === 1 }" @click="elementId = 1"
            >接口说明</span
          >
          <span :class="{ element: elementId === 2 }" @click="elementId = 2"
            >更新日志</span
          >
        </div>

        <ApiExplain v-if="elementId === 1" />

        <ApiSteps v-if="elementId === 2" />
        
      </div>
    </div>
  </div>
</template>

<script>
import ApiExplain from "@/components/domain/apiExplain";
import ApiSteps from "@/components/domain/apiSteps";


export default {
  components: {
    ApiExplain,ApiSteps
  },
  data() {
    return {
      elementId: 1,
    };
  },
};
</script>


<style lang="scss" scoped>
.detail-box {
  display: flex;
  .elMenu-box {
    width: 250px;
    height: 837px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
  }

  .detail-right {
    width: 930px;
    margin-left: auto;
    .right-head {
      width: 930px;
      min-height: 272px;
      background: #ffffff;
      border-radius: 14px;
      padding: 20px 20px 16px 20px;
      box-sizing: border-box;
      display: flex;
      flex-flow: column;
      .head-item1 {
        display: flex;
        margin-bottom: 20px;
        .auto-item {
          width: 90px;
          height: 90px;
          background: #2f89fc;
          border-radius: 14px;
          text-align: center;
          line-height: 90px;
          font-size: 32px;
          color: #fff;
          margin-right: 20px;
        }
        .auto-text {
          flex-flow: column;
          display: flex;
          .text-1 {
            color: #333333;
            font-size: 24px;
          }
          .text-2 {
            color: #999999;
            font-size: 14px;
          }
          .text-3 {
            color: #1890ff;
            font-size: 14px;
            margin-top: auto;
          }
        }
        .auto-right {
          margin-left: auto;
          display: flex;
          align-items: center;
          div {
            width: 96px;
            height: 40px;
            border-radius: 6px;
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            cursor: pointer;
          }
          .div1,
          .div2 {
            border: 1px solid #dddddd;
            color: #999999;
          }
          .div2 {
            margin: 0 20px;
          }
          .div3 {
            background: #1890ff;
            color: #fff;
          }
        }
      }
      .head-item2 {
        width: 100%;
        padding: 20px;
        min-height: 126px;
        background: #f7f8fa;
        border-radius: 14px;
        box-sizing: border-box;
        font-size: 14px;
        .span1 {
          color: #333333;
        }
        .span2 {
          color: #999999;
          flex: 1;
        }
        .item-div1 {
          margin-bottom: 5px;
          display: flex;
        }
        .item-div2 {
          line-height: 21px;
          display: flex;
        }
      }
    }

    .right-baran {
      width: 930px;
      height: 56px;
      background: #fffcec;
      border-radius: 14px;
      border: 1px solid #feeebb;
      margin: 20px 0;
      color: #6a3904;
      font-size: 14px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
    }
    .right-content {
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
      background: #ffffff;
      border-radius: 14px;
      .content-head {
        color: #333333;
        font-size: 16px;
        padding-bottom: 8px;
        margin-bottom: 18px;
        span {
          padding-bottom: 8px;
          margin-right: 60px;
          border-bottom: 4px solid transparent;
        }
        .element {
          border-bottom: 4px solid #2f89fc;
          transition: border-color 1s;
        }
      }
    }
  }
}
</style>