feixinyun/components/DocumentContent.vue

<template>
  <div class="document-content">
    <p class="headline">请求参数说明</p>
    <div class="content-box">
      <p class="subhead">
        备注：请求头里面需要设置传输格式：Content-type:application/json
      </p>
      <div class="table-box">
        <table class="table">
          <tr>
            <th>参数名称</th>
            <th>参数说明</th>
            <th>备注</th>
          </tr>
          <tr v-for="item in tableList" :key="item.key">
            <td>{{ item.key }}</td>
            <td>{{ item.explain }}</td>
            <td :class="{ 'required-color': item.required }">
              <p>{{ item.required ? "*必填" : "选填" }}</p>
              <p>{{ item.remark }}</p>
            </td>
          </tr>
        </table>
      </div>

      <div class="param-explain">
        <p class="explain-title">请求参数信息说明：</p>
        <div class="explain-value">
          <p>{</p>
          <p>"sign": "de7cb2fb99756c06214fc78252d36484",</p>
          <p>"timestamp": "1520496753938",</p>
          <p>"phone": "15100000055,15100000044",</p>
          <p>"extend": "123",</p>
          <p>"appcode": "test",</p>
          <p>"appkey": "test",</p>
          <p>"msg": "你好，测试"</p>
          <p>}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {} from "vue";

// table 数据

const tableList = ref([
  {
    key: "appkey",
    required: true,
    explain: "应用key",
    remark: "由供应商提供",
  },
  {
    key: "appcode",
    required: true,
    explain: "应用代码",
    remark: "由供应商提供",
  },
  {
    key: "sign",
    required: true,
    explain: "签名验证MD5（appkey+appsecret+timestamp）",
    remark:
      "秘钥appsecret由供应商提供由应用key+秘钥+时间戳经过md5加密后的32位16进制小写字符串（拼接过程不包括+）",
  },
  {
    key: "uid",
    required: false,
    explain: "String",
    remark: "多个号码用半角英文逗号隔开,一次最多不能超过1000个",
  },
  {
    key: "phone",
    required: true,
    explain: "手机号码",
    remark: "由供应商提供",
  },
  {
    key: "msg",
    required: true,
    explain: "下发短信内容",
    remark: "短信内容长度不超过1000个字（包括1000字）,每个英文或阿拉伯字符算1个字",
  },
  {
    key: "timestamp",
    required: true,
    explain: "时间戳",
    remark: "时间戳(精确到毫秒)，当前时间5分钟内请求有效",
  },
  {
    key: "extend",
    required: true,
    explain:
      "扩展号，该参数是显示在接收手机上的主叫尾号，可用于上行信息匹配，若不填写则认为不进行扩展（不填写不影响发送）",
    remark:
      "可为空数字，如：001,119等通道本身主叫号加上用户自己分配扩展号的总长度不能超过20位",
  },
]);

const param = {
  sign: "de7cb2fb99756c06214fc78252d36484",
  timestamp: "1520496753938",
  phone: "15100000055,15100000044",
  extend: "123",
  appcode: "test",
  appkey: "test",
  msg: "你好，测试",
};
</script>

<style scoped lang="scss">
.document-content {
  width: 100%;
  .headline {
    font-size: 32px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: var(--size-20);
  }
  .content-box {
    padding-top: 30px;
    .subhead {
      font-size: var(--size-16);
      color: var(--color-02);
    }
    .table-box {
      width: 893px;
      padding: var(--size-20) 0;
      .table {
        width: 100%;
        tr th,
        tr td {
          padding: var(--size-14);
        }
        tr th {
          background: #ebf2fc;
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: 700;
          color: #006efe;
        }
        tr td {
          font-size: 14px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #666666;
          line-height: 22px;
        }
        .required-color {
          color: var(--color-09);
        }
      }
    }
    .param-explain {
        padding: var(--size-10) 0 var(--size-40);
      .explain-title {
        font-size: 24px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: left;
        color: #1a1a1a;
      }
      .explain-value { 
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #666666;
        line-height: 24px;
      }
    }
  }
}

table,
th,
td {
  border: 1px solid #e6e6e6;
  border-collapse: collapse; /* 移除单元格之间的间隔 */
}
</style>