初始静态项目

4 anni fa · 660933366a
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,13 @@
 # editorconfig.org
 root = true

 [*]
 indent_style = space
 indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

 [*.md]
 trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,90 @@
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template
 # Logs
 /logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

 # Runtime data
 pids
 *.pid
 *.seed
 *.pid.lock

 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov

 # Coverage directory used by tools like istanbul
 coverage

 # nyc test coverage
 .nyc_output

 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt

 # Bower dependency directory (https://bower.io/)
 bower_components

 # node-waf configuration
 .lock-wscript

 # Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release

 # Dependency directories
 node_modules/
 jspm_packages/

 # TypeScript v1 declaration files
 typings/

 # Optional npm cache directory
 .npm

 # Optional eslint cache
 .eslintcache

 # Optional REPL history
 .node_repl_history

 # Output of 'npm pack'
 *.tgz

 # Yarn Integrity file
 .yarn-integrity

 # dotenv environment variables file
 .env

 # parcel-bundler cache (https://parceljs.org/)
 .cache

 # next.js build output
 .next

 # nuxt.js build output
 .nuxt

 # Nuxt generate
 dist

 # vuepress build output
 .vuepress/dist

 # Serverless directories
 .serverless

 # IDE / Editor
 .idea

 # Service worker
 sw.*

 # macOS
 .DS_Store

 # Vim swap files
 *.swp
--- a/README.md
+++ b/README.md
@@ -0,0 +1,21 @@
 # OpenPlatForm

 ## Build Setup

 ```bash
 # install dependencies
 $ npm install

 # serve with hot reload at localhost:3000
 $ npm run dev

 # build for production and launch server
 $ npm run build
 $ npm run start

 # generate static project
 $ npm run generate
 ```

 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
 `
--- a/api/webServiceDistrict.js
+++ b/api/webServiceDistrict.js
@@ -0,0 +1,41 @@
 import request from '@/plugins/axios'

 // 获取验证码
 export const districtList = ( data ) => {
    return new Promise((resolve ,reject)=>{
        request({
            url:'/api/base/user/register',
            method:'POST'
        }).then(res=>{
            console.log(res)
        })
    })
    

    // if ( id ) {
    //     return new Promise((resolve, reject) => {
    //         request({
    //             url: `/ws/district/v1/getchildren?key=RCVBZ-QXOEX-GP24X-7E52T-Z2XWJ-ZUFJ5&id=${id}`,
    //             method: 'GET',
    //         }).then((result) => {
    //             resolve(result.data[0])
    //         }).catch((err) => {

    //         });
    //     })
    // } else {
    //     return new Promise((resolve, reject) => {
    //         request({
    //             url: `/ws/district/v1/getchildren?key=RCVBZ-QXOEX-GP24X-7E52T-Z2XWJ-ZUFJ5`,
    //             method: 'GET',
    //         }).then((result) => {
    //             resolve(result.data[0])
    //         }).catch((err) => {

    //         });
    //     })
    // }


 }

--- a/assets/README.md
+++ b/assets/README.md
@@ -0,0 +1,7 @@
 # ASSETS

 **This directory is not required, you can delete it if you don't want to use it.**

 This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.

 More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
--- a/components/README.md
+++ b/components/README.md
@@ -0,0 +1,7 @@
 # COMPONENTS

 **This directory is not required, you can delete it if you don't want to use it.**

 The components directory contains your Vue.js Components.

 _Nuxt.js doesn't supercharge these components._
--- a/components/domain/apiAdd.vue
+++ b/components/domain/apiAdd.vue
@@ -0,0 +1,193 @@
 <template>
  <div class="components-add">
    <div class="add-api-box">
      <div class="add-head">
        <span>添加API</span>
        <i class="el-icon-close" @click="onClose"></i>
      </div>

      <div class="tab-content">
        <div class="tab-box" ref="tabItem">
          <div @click="changeTab(0, $event)">全部</div>
          <div @click="changeTab(1, $event)">基础工具API</div>
          <div @click="changeTab(2, $event)">搜索相关API</div>
          <div @click="changeTab(3, $event)">特色栏目API</div>
          <div @click="changeTab(4, $event)">入库更新API</div>
          <div ref="tabLine" class="tab-line"></div>
        </div>
        <div class="content-box">
          <div
            class="content-item"
            v-for="(item, index) in 20"
            :key="index"
          >
          </div>
        </div>
      </div>
    </div>
  </div>
 </template>

 <script>
 export default {
  data() {
    return {
      setWidth: 0,
    };
  },
  created() {
    document.body.style.overflow = "hidden";
  },

  destroyed() {
    document.body.style.overflow = "auto";
  },

  mounted() {
    this.setWidth = this.$refs.tabItem.children[0].offsetWidth;
    this.$refs.tabLine.style.width = this.setWidth + "px";
    this.$refs.tabLine.style.transform = `translateX(${this.offSet}px)`;
    this.$refs.tabLine.style.transition = "transform  .5s ,width .5s ";
  },

  methods: {
    changeTab: function (value, e) {
      let offSet = 0;
      for (let i = 0; i < value; i++) {
        offSet = offSet + this.$refs.tabItem.children[i].offsetWidth + 50;
      }
      let width = e.target.offsetWidth; // 当前元素的宽
      this.$refs.tabLine.style.transform = `translateX(${offSet}px)`;
      this.$refs.tabLine.style.width = width + "px";
      this.$refs.tabLine.style.transition = "transform  .5s , width .5s ";
    },

    onClose(){
        this.$emit('onClose')
    }
  },
 };
 </script>


 <style lang="scss" scoped>
 .components-add {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;

  .add-api-box {
    width: 1080px;
    height: 690px;
    background: #ffffff;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
    .add-head {
      width: 100%;
      height: 64px;
      background: #fafafa;

      padding: 0 20px;
      box-sizing: border-box;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      span {
        padding-left: 15px;
        border-left: 4px solid #1890ff;
        display: inline-block;
        line-height: 19px;
        height: 19px;
        font-size: 19px;
      }
      .el-icon-close {
        font-size: 16px;
        width: 30px;
        cursor: pointer;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }
    }
    .tab-content {
      height: 546px;
      width: 100%;
      overflow-y: auto;
      padding-bottom: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #eeeeee;

      .tab-box {
        height: 96px;
        background: #fff;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        position: relative;
        align-items: center;
        div {
          margin-right: 50px;
          color: #333333;
          font-size: 20px;
          position: relative;
          cursor: pointer;
        }

        .tab-line {
          position: absolute;
          width: 0;
          height: 4px;
          bottom: 25px;
          left: 21px;
          background-color: #1890ff;
          transform: translateX(0);
        }
      }
      .content-box {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        padding: 0 20px 0 20px;
        box-sizing: border-box;
        justify-content: space-between; /* 横向中间自动空间 */

        .content-item {
          width: 330px;
          height: 130px;
          background: #ffffff;
          border-radius: 14px;
          border: 1px solid #dddddd;
          margin-bottom: 20px;
        }
      }
    }

    .tab-content::-webkit-scrollbar {
      //   width: 6px;
      //   height: 60px;
      //   background: #d8d8d8;
      //   border-radius: 3px;
      background: #fff;
      width: 6px;
    }
    .tab-content::-webkit-scrollbar-thumb {
      width: 6px;
      height: 60px;
      background: #d8d8d8;
      border-radius: 3px;
    }
  }
 }
 </style>
--- a/components/domain/apiExplain.vue
+++ b/components/domain/apiExplain.vue
@@ -0,0 +1,334 @@
 <template>
  <div class="apiExplain-box">
    <div class="version-font">接口版本号：V1.1.0</div>

    <div class="openapi-box">
      <span>请求地址：</span>
      <span style="color: #1890ff"
        >https://openapi.dataoke.com/api/dels/jd/goods/get-details
      </span>
      <span class="copy-box">复制</span>
    </div>

    <div class="openapi-box" style="margin-top: 10px">
      <span>请求方式：</span>
      <span>GET</span>
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        公共参数:
      </div>
      <el-table
        :data="tableData1"
        border
        style="width: 100%; font-size: 14px; color: #5f6279"
      >
        <el-table-column prop="name" label="名称" width="166">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="166">
        </el-table-column>
        <el-table-column prop="state" label="必须" width="166">
          <template slot-scope="scope">
            <span :style="scope.row.state ? 'color:#FF4242' : ''">
              {{ scope.row.state ? "是" : "否" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="说明"></el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 30px">
      <div style="color: #333333; font-size: 14px">请求参数:</div>
      <div style="color: #1890ff; font-size: 12px; margin-bottom: 10px">
        注：请求参数须区分大小写
      </div>
      <el-table
        :data="tableData1"
        border
        style="width: 100%; font-size: 14px; color: #5f6279"
      >
        <el-table-column prop="name" label="名称" width="166">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="166">
        </el-table-column>
        <el-table-column prop="state" label="必须" width="166">
          <template slot-scope="scope">
            <span :style="scope.row.state ? 'color:#FF4242' : ''">
              {{ scope.row.state ? "是" : "否" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="说明"></el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        返回数据:
      </div>
      <el-table
        :data="tableData1"
        border
        style="width: 100%; font-size: 14px; color: #5f6279"
      >
        <el-table-column prop="name" label="名称" width="166">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="166">
        </el-table-column>
        <el-table-column prop="state" label="必须" width="166">
          <template slot-scope="scope">
            <span :style="scope.row.state ? 'color:#FF4242' : ''">
              {{ scope.row.state ? "是" : "否" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="说明"></el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        调用示例:
      </div>
      <div class="dome-box">
        <div class="dome-head">
          <span>JAVA</span>
        </div>
        <div class="dome-content">
          <div>
            <span class="span1">String url =</span
            ><span class="span2"
              >"https://openapi.dataoke.com/api/dels/jd/goods/get-details"</span
            >
            <span class="span1">;</span>
          </div>
          <div>
            <span class="span1">String appKey =</span
            ><span class="span2"> "xxx"</span>
            <span class="span1">;</span>
          </div>
          <div>
            <span class="span1">String appSecret =</span
            ><span class="span2"> "xxx"</span>
            <span class="span1">;</span>
          </div>

          <div>
            <span
              class="span1"
              v-html="'TreeMap<String, String> paraMap = '"
            ></span
            ><span class="span3">new</span>
            <span class="span1">TreeMap();</span>
          </div>

          <div>
            <span class="span1">paraMap.put(</span
            ><span class="span2">"version"</span>
            <span class="span1">,</span>
            <span class="span2">"v1.0.0"</span>
            <span class="span1">);</span>
          </div>

          <div>
            <span class="span1">paraMap.put(</span
            ><span class="span2">"skuIds"</span>
            <span class="span1">,</span>
            <span class="span2">"66847984668"</span>
            <span class="span1">);</span>
          </div>

          <div>
            <spa class="span1"
              >String data = ApiClient.sendReq(url, appSecret, paraMap);</spa
            >
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        返回示例:
      </div>
      
        <json-viewer
        style="line-height:23px"
          v-if="jsonData"
          :value="jsonData"
          :expand-depth="15"
          expanded
          preview-mode
        ></json-viewer>
 
    </div>

    <div style="margin-top: 30px">
      <div style="margin-bottom: 10px; color: #333333; font-size: 14px">
        错误码列表:
      </div>
      <div class="dome3-box">
        <el-table
          :data="tableData1"
          border
          style="width: 100%; font-size: 14px; color: #5f6279"
        >
          <el-table-column prop="name" label="名称" width="166">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="166">
          </el-table-column>
          <el-table-column prop="state" label="必须" width="166">
            <template slot-scope="scope">
              <span :style="scope.row.state ? 'color:#FF4242' : ''">
                {{ scope.row.state ? "是" : "否" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="explain" label="说明"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
 </template>


 <script>
 export default {
  data() {
    return {
      tableData1: [
        {
          name: "cid1",
          type: "Number",
          state: true,
          explain:
            "商品skuId，多个使用逗号分隔，最多支持10个skuId同时查询（需使用半角状态下的逗号）",
        },
        {
          name: "cid1",
          type: "Number",
          state: true,
          explain:
            "商品skuId，多个使用逗号分隔，最多支持10个skuId同时查询（需使用半角状态下的逗号）",
        },
        {
          name: "cid1",
          type: "Number",
          state: true,
          explain:
            "商品skuId，多个使用逗号分隔，最多支持10个skuId同时查询（需使用半角状态下的逗号）",
        },
        {
          name: "cid1",
          type: "Number",
          state: true,
          explain:
            "商品skuId，多个使用逗号分隔，最多支持10个skuId同时查询（需使用半角状态下的逗号）",
        },
      ],
      jsonData: {
        requestId: "cee418c825e8478db614aa685de7b7d7",
        time: 1612402161867,
        code: 0,
        msg: "成功",
        data: [
          {
            test1: "dddd",
            cid1: 1316,
            cid1Name: "美妆护肤",
            cid2: 1381,
            cid2Name: "面部护肤",
            cid3: 1392,
            cid3Name: "面膜",
            skuId: 66847984668,
            skuName:
              "形象美竹炭去黑头面膜收缩毛孔提靓肤色面膜补水保湿面膜面膜 120g",
            originPrice: 99,
            actualPrice: 49,
            picMain:
              "https://img14.360buyimg.com/pop/jfs/t1/106347/1/15742/194927/5e7597ebEd2f8bc11/94742e99ff105c51.jpg",
            smallImages: [
              "https://img14.360buyimg.com/pop/jfs/t1/106347/1/15742/194927/5e7597ebEd2f8bc11/94742e99ff105c51.jpg",
              "https://img14.360buyimg.com/pop/jfs/t1/110368/38/9708/221874/5e7597ebE08973056/3b63323523abdea5.jpg",
              "https://img14.360buyimg.com/pop/jfs/t1/90164/40/15872/185094/5e7597eaE190414e9/ed723e0838e165e7.jpg",
              "https://img14.360buyimg.com/pop/jfs/t1/87125/25/16010/83185/5e7597eaE628e10a0/a9c16b418e3faae1.jpg",
              "https://img14.360buyimg.com/pop/jfs/t1/97943/14/15722/204557/5e7590f0E56d934c6/9a57303d20b8e20f.jpg",
            ],
          },
        ],
      },
    };
  },
 };
 </script>

 <style lang="scss" scoped>
 .apiExplain-box {
  .version-font {
    width: 890px;
    height: 39px;
    background: #f7f8fa;
    border-radius: 14px;
    padding: 10px 20px;
    font-size: 14px;
    color: #1890ff;
    box-sizing: border-box;
    margin-bottom: 30px;
  }
  .openapi-box {
    font-size: 14px;
    color: #333333;
    .copy-box {
    }
  }

  .dome-box {
    width: 890px;
    height: 266px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #dddddd;
    box-sizing: border-box;
    line-height: 25px;
    .dome-head {
      color: #333333;
      font-size: 16px;
      height: 48px;
      line-height: 48px;
      box-sizing: border-box;
      border-bottom: solid #e6e6e6 1px;
      padding: 0 20px;

      span {
        border-bottom: #2f89fc solid 4px;
        display: inline-block;
        box-sizing: border-box;
        height: 48px;
      }
    }
    .dome-content {
      font-size: 14px;
      padding: 20px;
      .span1 {
        color: #5f6279;
      }
      .span2 {
        color: #ff4242;
      }
      .span3 {
        color: #67ba6a;
      }
    }
  }
  .dome2-box {
    width: 890px;
    height: 846px;
    background: #f5f8f7;
    border-radius: 14px;
    border: 1px solid #67ba6a;
    line-height: 22px;
  }
 }
 </style>
--- a/components/domain/apiSteps.vue
+++ b/components/domain/apiSteps.vue
@@ -0,0 +1,133 @@
 <template>
  <div class="steps-box">
    <div v-for="(item, index) in setpsData" :key="index">
      <div class="for-item">
        <span class="item-time">{{ item.time }}</span>
        <span class="item-yuan"  :class="{'itemCotnent-top': index === 0 }"></span>
        <span class="item-title">{{ item.title }}</span>
        <span style="color: #2f89fc">查看该版本</span>
        <span class="item-border"></span>
      </div>
      <div v-html="item.content" class="item-content" :class="{'itemCotnent-bottom': index === setpsData.length - 1}"></div>
    </div>
  </div>
 </template>

 <script>
 export default {
  data() {
    return {
      setpsData: [
        {
          title: "版本：V1.2.0.3212",
          content: `工具箱<br />
 优化虚拟定位功能<br />
 优化下载中心下载应用逻辑<br />
 优化投屏工具的稳定性<br />
 修复IPA签名失败和个人签名登录失败的问题<br />
 主程序<br />
 设置界面增加关闭验机选项`,
          time: "2020-12-23",
        },
        {
          title: "版本：V1.2.0.31",
          content: `工具箱<br />
 优化虚拟定位功能<br />
 优化下载中心下载应用逻辑<br />
 优化投屏工具的稳定性<br />
 修复IPA签名失败和个人签名登录失败的问题<br />
 主程序<br />
 设置界面增加关闭验机选项`,
          time: "2020-12-23",
        },
        {
          title: "版本：V1.2.0.31",
          content: `工具箱<br />
 优化虚拟定位功能<br />
 优化下载中心下载应用逻辑<br />
 优化投屏工具的稳定性<br />
 修复IPA签名失败和个人签名登录失败的问题<br />
 主程序<br />
 设置界面增加关闭验机选项`,
          time: "2020-12-22",
        },
        {
          title: "版本：V1.2.0.31",
          content: `工具箱<br />
 优化虚拟定位功能<br />
 优化下载中心下载应用逻辑<br />
 优化投屏工具的稳定性<br />
 修复IPA签名失败和个人签名登录失败的问题<br />
 主程序<br />
 设置界面增加关闭验机选项`,
          time: "2020-12-23",
        },
        {
          title: "版本：V1.2.0.32",
          content: `工具箱<br />
 优化虚拟定位功能<br />
 优化下载中心下载应用逻辑<br />
 优化投屏工具的稳定性<br />
 修复IPA签名失败和个人签名登录失败的问题<br />
 主程序<br />
 设置界面增加关闭验机选项`,
          time: "2020-12-23",
        },
      ],
    };
  },
 };
 </script>

 <style lang="scss" scoped>
 .steps-box {
  display: flex;
  flex-flow: column;
  font-size: 14px;
  .for-item {
    display: flex;
    align-items: center;
    .item-time {
      color: #333333;
    }
    .item-yuan {
      margin: 0 18px;
      width: 20px;
      height: 20px;
      background: #f7f8fa;
      border: 4px solid #c2cad4;
      border-radius: 50%;
    }
    .itemCotnent-top {
 
        background: #F7F8FA;
        border: 4px solid #2F89FC;
    }


    .item-title {
      color: #333333;
      margin-right: 10px;
    }
    .item-border {
      border-top: 1px solid #e5e5e5;
      width: 100%;
      flex: 1;
      margin-left: 20px;
    }
  }
    .item-content {
        margin-left: 107px;
        color: #999999;
        font-size: 12px;
        
        line-height: 20px;
        border-left: 6px solid #F7F8FA;
        padding: 5px 0 30px 25px;
    }
    .itemCotnent-bottom {
        border: none;
    }
    
 }
 </style>
--- a/components/domain/header.vue
+++ b/components/domain/header.vue
@@ -0,0 +1,152 @@
 <template>
    <div class="management-head-box">
      <div class="management-head">
        <img src="@/static/img/head-title.png" alt="" />
        <span class="management-font" @click="onSkip('/domain/control/myApp')">控制台</span>
        <div class="input-box">
          <div class="item-input">
            <el-input
              v-model="searchValue"
              size="mini"
              placeholder="输入关键词搜索"
            ></el-input>
            <div class="item-button">
              <div class="primary-button">搜索</div>
            </div>
          </div>
        </div>
        <div class="management-list">
          <span>服务支持</span>
          <span>应用中心</span>
          <span @click="onSkip('/domain/detail')">文档中心</span>
          <span @click="onSkip('/domain/seekApi')">API市场</span>
        </div>
        <div class="lingdang-box">
          <img src="@/static/img/lingdang.png" alt="" />
        </div>

        <div class="avatar">
          <img src="@/static/img/touxiang/5.png" alt="" />
        </div>

        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              Mickey<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item></el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>回到首页</el-dropdown-item>
              <el-dropdown-item>退出登陆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
 </template>

 <script>
 export default {
  data(){
    return {
      searchValue:''
    }
  
  },  
  methods: {
      onSkip: function(path){
          this.$router.push(path)
      }
    },
 }
 </script>


 <style lang="scss" scoped>
 .management-head-box {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  .management-head {
    width: 1200px;
    height: 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .management-font {
      min-width: 80px;
      box-sizing: border-box;
      color: #4f4f4f;
      font-size: 18px;
      height: 19px;
      line-height: 19px;
      margin-left: 12px;
      padding-left: 24px;
      border-left: 1px solid #dddddd;
      cursor: pointer;
    }
    .input-box {
      width: 225px;
      height: 34px;
      background: #f7f8fa;
      margin-left: 40px;
      overflow: hidden;
      border-radius: 6px;
      .item-input {
        width: 225px;
        height: 34px;
        box-sizing: border-box;
        border-radius: 6px;
        display: flex;
        background: #f7f8fa;
        margin: 0 auto;
        align-items: center;
        font-size: 14px;
        .item-button {
          width: 70px;
          height: 100%;
        }
      }
    }

    .management-list {
      margin-left: auto;
      display: flex;
      color: #333333;
      font-size: 14px;
      span {
        margin: 0 15px;
        min-width: 56px;
        cursor: pointer;
      }
    }
    .lingdang-box {
      width: 20px;
      height: 20px;
      margin: 0 15px;
    }

    .avatar {
      min-width: 34px;
      min-height: 34px;
      max-width: 34px;
      max-height: 34px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .el-dropdown-link {
      color: #333333;
      font-size: 14px;
    }
  }
 }
 </style>
--- a/components/domain/updateLog.vue
+++ b/components/domain/updateLog.vue
@@ -0,0 +1,16 @@
 <template>
    <div>
        更新日志
    </div>
 </template>

 <script>
 export default {
    
 }
 </script>


 <style lang="scss" scoped>

 </style>
--- a/components/index/banner.vue
+++ b/components/index/banner.vue
@@ -0,0 +1,87 @@
 <template>
    <div class="index-banner-box">
        <div class="banner-title">成为智莺云开发者，共享千万商机</div>
        <div class="banner-content">提供适应多场景的api接口，为应用服务提供多样化的解决方案</div>
        <div class="banner-bottom"><span>成为开发者</span></div>
    </div>
 </template>

 <script>
 export default {
  name: "page-banner",
    
 }
 </script>

 <style lang="scss" scoped>

 .index-banner-box {
    width: 100vw;
    height: 440px;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url('../../static/img/index-bar.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-flow: column;
    align-items: center;
    .banner-title {
        color: #FFF;
        margin: 110px 0 17px;
        color: #FFF;
        font-size: 45px;
        font-weight: bold;   
    }

    .banner-content {
        color: #FFF;
        font-size: 22px;
    }

   .banner-bottom{
        width: 308px;
        height: 64px;
        background: #FFFFFF;
        box-shadow: 0px 10px 20px 0px rgba(0, 60, 201, 0.3);
        border-radius: 32px;
        color: #2590FF;
        font-size: 22px;
        line-height: 64px;
        text-align: center;
        margin-top: 50px;
        cursor: pointer;
    }


         .banner-bottom> span {
        -webkit-line-clamp: 2;
        background-image: -webkit-linear-gradient(left, #2f71ff, rgb(224, 130, 96));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        display: inline-block;
        }

        .banner-bottom:active > span {
        transform: scale(0.98);
        }

        .banner-bottom:hover > span {
        background-image: -webkit-linear-gradient(left, #2f71ff, rgb(224, 130, 96));
        animation: move 2s linear infinite;
        }

        @keyframes move {
        0% {
        }
        100% {
            background-position: 200px 100px;
        }
        }


 }


 </style>
--- a/components/index/footer.vue
+++ b/components/index/footer.vue
@@ -0,0 +1,192 @@
 <template>
  <div class="index-footer-box">
    <div class="footer-top">
      <div class="data-table">
        <div v-for="(item, index) in tableData" :key="index" class="data-tr">
          <a
            :class="index == '0' ? 'data-th' : 'data-td'"
            v-for="(list, i) in item"
            :key="i"
            href="#"
            >{{ list.title }}</a
          >
        </div>
      </div>
      <div class="footer-code">
        <div style="margin-right:40px">
          <div>联系我们</div>
          <img style="margin-top:10px" src="@/static/img/qiye.png" alt="" />
        </div>
        <div>
          <img src="@/static/img/weixin.png" alt="" />
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <div>© 2008-2020 珠海方诺信息科技有限公司 版权所有 粤ICP备13020798号</div>
      <div style="margin-bottom: 10px;">粤公网安备 44049002000552号</div>
    </div>
  </div>
 </template>

 <script>
 export default {
  name: "index-footer",
  data() {
    return {
      tableData: [
        [
          {
            title: "新手指南",
          },
          {
            title: "服务支持",
          },
          {
            title: "常见问题",
          },
          {
            title: "用户中心",
          },
          {
            title: "关于智莺",
          },
        ],
        [
          {
            title: "新手指南",
          },
          {
            title: "客服在线",
          },
          {
            title: "智莺系统免费吗",
          },
          {
            title: "会员管理",
          },
          {
            title: "智莺首页",
          },
        ],
        [
          {
            title: "快速选购",
          },
          {
            title: "购买咨询",
          },
          {
            title: "如何购买插件",
          },
          {
            title: "网站管理",
          },
          {
            title: "联系我们",
          },
        ],
        [
          {
            title: "互动专区",
          },
          {
            title: "联系智莺",
          },
          {
            title: "有几种模式可选",
          },
          {
            title: "插件订单",
          },
          {
            title: "人才招聘",
          },
        ],
        [
          {
            title: "有问必答",
          },
          {
            title: "帮助中心",
          },
          {
            title: "如何选购版本",
          },
          {
            title: "主机域名",
          },
          {
            title: "帮助中心",
          },
        ],
      ],
    };
  },
 };
 </script>


 <style lang="scss" scoped>
 a {
  text-decoration: none;
  color: black;
 }

 .index-footer-box {
  width: 1200px;
  margin: 220px auto 0;
  display: flex;
  flex-flow: column;
  padding-bottom: 30px;
  .footer-top {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    .data-table {
      font-size: 13px;

      display: flex;
      flex-flow: column;

      .data-tr {
        margin-bottom: 20px;
        .data-th {
          color: #333333;
          font-weight: bold;
          margin-right: 40px;
          width: 91px;
          display: inline-block;
        }

        .data-td {
          color: #666666;
          margin-right: 40px;
          width: 91px;
          display: inline-block;
        }
      }

      .data-th:last-child,
      .data-td:last-child,
      .data-tr:last-child {
        margin: 0;
      }
    }
  }

  .footer-bottom {
    text-align: center;
    color: #666666;
    font-size: 14px;
    margin-top: 50px;
  }
  .footer-code {
    display: flex;
    align-items: flex-end
  }



 }
 </style>
--- a/components/index/head.vue
+++ b/components/index/head.vue
@@ -0,0 +1,223 @@
 <template>
  <div class="index-head-box">
    <div class="flex-item">
      <!-- 首页标题logo -->
      <div class="list-item-box1">
        <div class="item-img">
          <img src="@/static/img/head-title.png" alt="" />
        </div>
        <!-- 搜索 -->
        <div class="item-input">
          <el-input
            v-model="searchValue"
            size="mini"
            placeholder="输入关键词搜索"
          ></el-input>
          <div class="item-button">
            <div class="primary-button">搜索</div>
          </div>
        </div>
        <!-- 注册登陆按钮 -->
        <div class="button-box">
          <div class="head-left-button">
            <div class="primary-button2" @click="onLogin">登陆</div>
          </div>
          <div class="head-right-button">
            <div class="primary-button" @click="onSign">注册</div>
          </div>
        </div>
      </div>

      <div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <div
            class="menu-block"
            v-for="(item, index) in menuData"
            :key="index"
          >
            <el-menu-item :index="item.mark" v-if="!item.slot">{{
              item.title
            }}</el-menu-item>

            <el-submenu :index="item.mark" v-else>
              <template slot="title">{{ item.title }}</template>
              <el-menu-item
                v-for="(list, i) in item.chlid"
                :key="i"
                :index="list.mark"
                >{{ list.title }} {{ i }}</el-menu-item
              >
            </el-submenu>
          </div>
        </el-menu>
      </div>
    </div>
  </div>
 </template>

 <script>
 export default {
  name: "page-head",
  data() {
    return {
      searchValue: "",
      activeIndex: "",
      menuData: [
        {
          title: "方案解决",
          mark: "scheme",
          slot: true,
          chlid: [
            {
              title: "选项",
              mark: "scheme1",
              slot: false,
            },
            {
              title: "选项",
              mark: "scheme2",
              slot: false,
            },
            {
              title: "选项",
              mark: "scheme3",
              slot: false,
            },
          ],
        },
        {
          title: "应用市场",
          mark: "market",
          slot: false,
        },
        {
          title: "文档中心",
          mark: "document",
          slot: true,
          chlid: [
            {
              title: "选项",
              mark: "document1",
              slot: false,
            },
            {
              title: "选项",
              mark: "document2",
              slot: false,
            },
            {
              title: "选项",
              mark: "document3",
              slot: false,
            },
          ],
        },
        {
          title: "帮助支持",
          mark: "support",
          slot: true,
          chlid: [
            {
              title: "选项",
              mark: "support1",
              slot: false,
            },
            {
              title: "选项",
              mark: "support2",
              slot: false,
            },
            {
              title: "选项",
              mark: "support3",
              slot: false,
            },
          ],
        },
        {
          title: "开发者",
          mark: "developer",
          slot: false,
        },
        {
          title: "控制台",
          mark: "control",
          slot: false,
        },
      ],
    };
  },
  methods: {
    handleSelect: function () {},
    onLogin: function () {
      this.$router.push("/login");
    },
    onSign: function () {
      this.$router.push("/sign");
    },
  },
 };
 </script>

 <style lang="scss" scoped>
 .el-menu-demo {
  display: flex;
 }

 .index-head-box {
  height: 136px;
  width: 100vw;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  padding: 24px 0 20px;
 }
 .flex-item {
  width: 1200px;
  height: 100%;
  display: flex;
  flex-flow: column; //垂直排列
  justify-content: space-between; //两端对齐
 }

 .list-item-box1 {
  display: flex;
 }

 .item-input {
  width: 350px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  background: #f7f8fa;
  margin: 0 auto;
  align-items: center;
  font-size: 14px;
 }

 .item-button {
  width: 70px;
  height: 100%;
 }

 .button-box {
  display: flex;
 }

 .head-left-button,
 .head-right-button {
  width: 70px;
  height: 34px;
  display: flex;
 }
 .head-left-button {
  margin-right: 9px;
 }
 </style>
--- a/components/index/product.vue
+++ b/components/index/product.vue
@@ -0,0 +1,150 @@
 <template>
  <div class="index-product-box">
    <div class="flex-item">
      <div class="product-title-box">
        <div class="title-font1">使用我们强大的 API 和智莺四大业务云</div>
        <div class="title-font2">
          经过多年的深耕，不断积累和各头部用户的深入合作的经验。并结合当前主流的导购应用设计，为您的导购事业保驾护航
        </div>
      </div>

      <div class="data-box">
        <div
          v-for="(item, index) in pageData"
          :key="index"
          class="data-item"
          :class="{ isDataColor: isDataStatus === item.id }"
          @click="isDataStatus = item.id"
        >
          <img class="item-img" :src="item.img" alt="" />
          <div class="item-title">{{ item.title }}</div>
          <div class="item-content">{{ item.content }}</div>
        </div>
      </div>
    </div>
  </div>
 </template>

 <script>
 export default {
  name: "page-product",
  data() {
    return {
      isDataStatus: "1",
      pageData: [
        {
          img: require("@/static/img/item-1.png"),
          title: "标准API",
          content:
            "通过有赞云开放的标准化API，可为有赞商家迅速搭建标准化场景应用",
          id: "1",
        },
        {
          img: require("@/static/img/item-2.png"),
          title: "页面定制",
          content:
            "可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验",
          id: "2",
        },
        {
          img: require("@/static/img/item-3.png"),
          title: "扩展点应用",
          content: "开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑",
          id: "3",
        },
        {
          img: require("@/static/img/item-4.png"),
          title: "四端定制",
          content: "支持PC，H5，小程序，App四端定制基于多端的业务场景",
          id: "4",
        },
      ],
    };
  },
 };
 </script>

 <style lang="scss" scoped>
 .index-product-box {
  display: flex;
  width: 100vw;
  justify-content: center;
  .flex-item {
    width: 1200px;
    height: 100%;
    flex-flow: column; //垂直排列
    .product-title-box {
      justify-content: space-between; //两端对齐
      flex-flow: column; //垂直排列
      display: flex;
      height: 237px;
      box-sizing: border-box;
      padding: 67px 0 80px;
      text-align: center;
      margin: 0 auto;
      width: 630px;
      .title-font1 {
        color: #333333;
        font-size: 26px;
        font-weight: bold;
      }
      .title-font2 {
        color: #999999;
        font-size: 16px;
        line-height: 21px;
      }
    }
    .data-box {
      display: flex;
      .data-item {
        margin-right: 20px;
        width: 284px;
        height: 375px;
        box-sizing: border-box;
        border-radius: 22px;
        border: 2px solid #1d8aff;
        text-align: center;
        padding: 73px 32px 44px;
        cursor: pointer;
        background: #fff;
        transition: background-color 0.4s;
        .item-title {
          color: #333333;
          margin: 37px 0 12px;
          font-size: 22px;
          line-height: 22px;
          transition: color 0.4s;
        }
        .item-content {
          color: #999999;
          font-size: 16px;
          line-height: 30px;
          transition: color 0.4s;
        }
        .item-img {
          width: 90px;
          height: 90px;
        }
      }
      .data-item:last-child {
        margin: 0;
      }

      .isDataColor {
        background-color: #1890ff;
        transition: box-shadow background-color 0.4s;
        box-shadow: 0px 0px 20px 0px rgba(24, 144, 255, 0.4);

        .item-title {
          color: #ffffff;
          transition: color 0.4s;
        }
        .item-content {
          color: #a2d2ff;
          transition: color 0.4s;
        }
      }
    }
  }
 }
 </style>
--- a/components/index/scene.vue
+++ b/components/index/scene.vue
@@ -0,0 +1,86 @@
 <template>
  <div class="page-scene-box">
    <div class="flex-box">
      <div class="scene-title">业务场景</div>

      <div class="scene-content-box1">
        <div class="item-font">
          <div class="font1">
            创建标准化应用<br />
            在云应用市场获得销售收入
          </div>
          <div class="font2">
            为多家知名品牌提供了个性化定制服务。有开放的能力让神码可做的解决方案、产品形态更丰富，而通过应用市场获得的稳定客源，帮助神码这支创业团队持续盈利
          </div>
        </div>
        <img src="@/static/img/shouru.png" alt="" />
      </div>

      <div class="scene-content-box1">
        <img src="@/static/img/xuqiu.png" alt="" />
        <div class="item-font">
          <div class="font1">
            自主开发或与客户合作<br />帮助他们解决个性化需求
          </div>
          <div class="font2">
            为客户提供了一整套线上线下SAAS化剧院票务选座方案，支持场馆类型多样化、选座设置、场次设置、核销设置、售票设置等，后台包含门票销售管理模块、剧院运营管理、领导决策分析模块
          </div>
        </div>
      </div>
    </div>
  </div>
 </template>

 <script>
 export default {
  name: "page-scene",
 };
 </script>

 <style lang="scss" scoped>
 .page-scene-box {
    display: flex;
    width: 100vw;
    justify-content: center;
  .flex-box {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    .scene-title {
      color: #333333;
      font-size: 26px;
      font-weight: bold;
      height: 192px;
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

    .scene-content-box1 {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      height: 427px;
      align-items: center;
      .item-font {
        width: 585px;
        .font1 {
          color: #333333;
          font-weight: bold;
          line-height: 35px;
          font-size: 26px;
          margin-bottom: 10px;
        }
        .font2 {
          font-size: 16px;
          color: #999999;
          line-height: 32px;
        }
      }
    }
  }
 }
 </style>
--- a/components/index/step.vue
+++ b/components/index/step.vue
@@ -0,0 +1,116 @@
 <template>
  <div class="index-stop-box">
    <div class="width-stop"></div>
    <div class="stop-title">操作步骤</div>
    <div class="stop-list">
      <div v-for="(item, index) in stepData" :key="index" class="stop-item">
        <div class="stop-num">{{ item.stop }}</div>
        <div class="div-radius"></div>
        <div class="item-title">{{ item.title }}</div>
        <div class="item-content">{{ item.content }}</div>
      </div>
    </div>
  </div>
 </template>



 <script>
 export default {
  name: "page-step",
  data() {
    return {
      stepData: [
        {
          stop: 1,
          title: "成为开发者",
          content: "注册智莺库账号成为智莺开发者账户",
        },
        {
          stop: 2,
          title: "创建应用",
          content: "创建应用，获取所创建应用的APIkey",
        },
        {
          stop: 3,
          title: "开发测试",
          content: "模拟接口调用，测试调用效果，测试运行",
        },
        {
          stop: 4,
          title: "发布上线",
          content: "按开发接入文档规范进行接入并测试完成上线",
        },
      ],
    };
  },
 };
 </script>


 <style lang="scss" scoped>
 .index-stop-box {
  display: flex;
  justify-content: center;
  flex-flow: column; //垂直排列
  text-align: center;
  position: relative;
  .width-stop {
    position: absolute;
    width: 100vw;
    background: #1890ff;
    height: 1px;
    z-index: -1;
    top: 300px;
  }

  .stop-title {
    padding: 80px 0 58px;
    color: #333333;
    font-size: 26px;
    font-weight: bold;
  }

  .stop-list {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    .stop-item {
      width: 220px;
      flex-flow: column; //垂直排列
      display: flex;
      align-items: center;
      .stop-num {
        width: 77px;
        height: 77px;
        line-height: 77px;
        color: #fff;
        background: #1890ff;
        box-shadow: 0px 0px 20px 0px rgba(24, 144, 255, 0.4);

        border-radius: 50%;
        font-size: 30px;
        margin-bottom: 40px;
      }
      .div-radius {
        width: 20px;
        height: 20px;
        background: #1890ff;
        border-radius: 50%;
        margin-bottom: 30px;
      }
      .item-title {
        color: #333333;
        font-size: 26px;
        margin-bottom: 18px;
      }
      .item-content {
        color: #999999;
        font-size: 16px;
        line-height: 30px;
      }
    }
  }
 }
 </style>
--- a/components/index/swiper.vue
+++ b/components/index/swiper.vue
@@ -0,0 +1,278 @@
 <template>
  <div class="swiper-box">
    <div class="swiper-title">他们为何选择智莺</div>

    <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          :class="{ test: ls_id == banner.id }"
          v-for="(banner, index) in banners"
          :key="index"
        >
          <img class="swiper-img" :src="banner.src" />
        </div>
      </div>
    </div>

    <div class="swiper-text">
      <img class="left-1" src="@/static/img/left-1.png" alt="" />

      <div class="font-swiper" v-if="ls_id">
        {{ banners[ls_id].content }}
      </div>

      <img class="right-1" src="@/static/img/right-1.png" alt="" />
    </div>
  </div>
 </template>


 <script>
 export default {
  name: "index-swiper",
  data() {
    const that = this;
    return {
      ls_id: null,
      banners: [
        {
          src: require("../../static/img/touxiang/1.png"),
          link: "",
          id: "1",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑1",
        },
        {
          src: require("../../static/img/touxiang/2.png"),
          link: "",
          id: "2",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑2",
        },
        {
          src: require("../../static/img/touxiang/3.png"),
          link: "",
          id: "3",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑3",
        },
        {
          src: require("../../static/img/touxiang/4.png"),
          link: "",
          id: "4",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑4",
        },
        {
          src: require("../../static/img/touxiang/5.png"),
          link: "",
          id: "5",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑5",
        },
        {
          src: require("../../static/img/touxiang/6.png"),
          link: "",
          id: "6",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑6",
        },
        {
          src: require("../../static/img/touxiang/7.png"),
          link: "",
          id: "7",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑7",
        },
        {
          src: require("../../static/img/touxiang/8.png"),
          link: "",
          id: "8",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑8",
        },
        {
          src: require("../../static/img/touxiang/9.png"),
          link: "",
          id: "9",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑9",
        },
        {
          src: require("../../static/img/touxiang/10.png"),
          link: "",
          id: "10",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑10",
        },
        {
          src: require("../../static/img/touxiang/11.png"),
          link: "",
          id: "11",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑11",
        },
        {
          src: require("../../static/img/touxiang/12.png"),
          link: "",
          id: "12",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑12",
        },
        {
          src: require("../../static/img/touxiang/13.png"),
          link: "",
          id: "13",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑13",
        },
        {
          src: require("../../static/img/touxiang/14.png"),
          link: "",
          id: "14",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑14",
        },
        {
          src: require("../../static/img/touxiang/15.png"),
          link: "",
          id: "15",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑15",
        },
        {
          src: require("../../static/img/touxiang/16.png"),
          link: "",
          id: "16",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑16",
        },
      ],
      swiperOption: {
        slidesPerView: "7",
        grabCursor: true,
        observer: true,
        observeParents: true,
        on: {
          init(even) {
            that.ls_id = even.activeIndex + 4;
          },
          slideChange(even) {
            that.ls_id = even.activeIndex + 4;
          },
          tap(even) {
            console.log(even.activeIndex);
            console.log("onTap", this);
          },
        },
      },
    };
  },
 };
 </script>

 <style lang="scss" scoped>
 .swiper-box {
  width: 100vw;
  height: 630px;
  box-sizing: border-box;
  background: #f9f9f9;

  .swiperWrap {
    height: 255px;
    width: 1200px;
    .swiper-wrapper {
      align-items: center;
    }
  }

  .swiper-slide {
    width: 100px !important;
    height: 100px !important;
    transition: width 0.3s, height 0.3s;

    border-radius: 50%;
    overflow: hidden;
    margin-right: 73px;
    .swiper-img {
      width: 100%;
      height: 100%;
      opacity: 0.5;
    }
  }

  .test {
    width: 160px !important;
    height: 160px !important;
    transition: width 0.3s, height 0.3s;
    .swiper-img {
      opacity: 1;
      transition: opacity 0.3s;
    }
  }

  .swiper-slide:last-child {
    margin: 0;
  }
  .swiper-title {
    padding-top: 80px;
    font-size: 26px;
    color: #333333;
    text-align: center;
    font-weight: bold;
  }

  .swiper-text {
    width: 1200px;
    width: 1200px;
    height: 191px;
    background: #1890ff;
    box-shadow: 0px 0px 20px 0px rgba(24, 144, 255, 0.4);
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .font-swiper {
      line-height: 50px;
      font-size: 22px;
      color: #fff;
      text-align: center;
      width: 1125px;
    }
  }
  .swiper-text::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-color: transparent;
    margin-bottom: -10px;
    border-bottom-width: 25px;
    border-bottom-color: currentColor;
    color: #1890ff;
  }

  .left-1 {
    position: absolute;
    left: -100px;
    top: 0;
 
  }
  .right-1 {
    position: absolute;
    right: -100px;
    top: 0;
  }
 }
 </style>
--- a/layouts/README.md
+++ b/layouts/README.md
@@ -0,0 +1,7 @@
 # LAYOUTS

 **This directory is not required, you can delete it if you don't want to use it.**

 This directory contains your Application Layouts.

 More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -0,0 +1,9 @@
 <template>
  <div>
    <Nuxt />
  </div>
 </template>

 <style>
 
 </style>
--- a/middleware/README.md
+++ b/middleware/README.md
@@ -0,0 +1,8 @@
 # MIDDLEWARE

 **This directory is not required, you can delete it if you don't want to use it.**

 This directory contains your application middleware.
 Middleware let you define custom functions that can be run before rendering either a page or a group of pages.

 More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
--- a/middleware/metaTitle.js
+++ b/middleware/metaTitle.js
@@ -0,0 +1,6 @@

 export default ({ store, route, redirect }) => {
    route.matched.forEach((item, index) => {
        item.meta.title = route.meta[index].title
    })
 }
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -0,0 +1,63 @@
 export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: '智莺开放平台',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/img/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'element-ui/lib/theme-chalk/index.css',
    "swiper/swiper-bundle.min.css",
    './static/css/app.scss',
    './static/css/common.scss',
    "vue-json-viewer/style.css"
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/element-ui',
    "@/plugins/vue-swiper.js",
    '@/plugins/route.js',
    '@/plugins/viewer.js'
  ],



  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ["@nuxtjs/axios"],

  axios: {
    proxy: true
  },
  proxy: {
    "/ws": "https://apis.map.qq.com"
  },

  router: {
    middleware: ['metaTitle']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^element-ui/],
    vendor: ["axios"]
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,24 @@
 {
  "name": "OpenPlatForm",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "core-js": "^3.9.1",
    "element-ui": "^2.15.1",
    "nuxt": "^2.15.3",
    "swiper": "^6.5.7",
    "vue-awesome-swiper": "^4.1.1",
    "vue-json-viewer": "^2.2.18"
  },
  "devDependencies": {
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.1"
  }
 }
--- a/pages/domain.vue
+++ b/pages/domain.vue
@@ -0,0 +1,123 @@
 <template>
  <div class="control">
    <Header />

    <div class="nuxt-child">
      <nuxt-child keep-alive />

    </div>

    <!-- 页面浮动功能点 -->
    <div class="suspension-box">
      <el-tooltip effect="dark" content="投诉建议" placement="left">
        <div class="item">
          <i class="iconfont MinIcontousu"></i>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" placement="left">
        <div slot="content">
          <img class="tooltip-img" src="@/static/img/boos.png" alt="" />
          <p class="tooltip-p">扫码添加专属客服</p>
        </div>
        <div class="item">
          <i class="iconfont MinIconlianxi"></i>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="回到顶部" placement="left">
        <div class="item" @click="onScrollInto">
          <i class="iconfont MinIconhuidaodingbu"></i>
        </div>
      </el-tooltip>
    </div>
  </div>
 </template>


 <script>
 import Header from "@/components/domain/header";

 export default {
  meta: { title: "控制台" },

  components: {
    Header,
  },
  methods: {
    // 回到顶部
    onScrollInto: function () {
      // 控制回到该元素可见范围内
      // document.getElementById("target").scrollIntoView();
      // 带过渡效果的回到顶部
      const upRoll = setInterval(() => {
        const top = document.documentElement.scrollTop; // 每次获取页面被卷去的部分
        const speed = top / 10; // 每次滚动多少 （步长值）
        if (document.documentElement.scrollTop !== 0) {
          document.documentElement.scrollTop -= speed; // 不在顶部 每次滚动到的位置
        } else {
          clearInterval(upRoll); // 回到顶部清除定时器
        }
      }, 20);
    },

  },
 };
 </script>

 <style lang="scss" scoped>
 .control {
  width: 100%;
  // min-height: calc(100vh - 80px);
  min-height: 100vh;
  background: #f7f8fa;
 }

 .suspension-box {
  position: fixed;
  width: 52px;
  right: 20px;
  top: 60%;
  z-index: 99;
  .item {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dddddd;
    box-shadow: 0px 2px 10px 0px rgba(51, 51, 51, 0.1);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.6s, box-shadow 0.6s;
    i {
      font-size: 25px;
      color: #515151;
      transition: color 0.6s;
    }
  }
  .item:hover {
    background-color: #1890ff;
    box-shadow: 0px 2px 10px 0px rgba(24, 144, 255, 0.6);
    transition: background-color 0.6s, box-shadow 0.6s;
    i {
      color: #fff;
      transition: color 0.6s;
    }
  }
 }
 .tooltip-img {
  width: 112px;
  height: 112px;
 }
 .tooltip-p {
  text-align: center;
 }

 .nuxt-child {
  width: 1200px;
  margin: 20px auto 0;
  padding-bottom: 20px;
 }


 </style>
--- a/pages/domain/AppDetail.vue
+++ b/pages/domain/AppDetail.vue
@@ -0,0 +1,447 @@
    <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>
--- a/pages/domain/control.vue
+++ b/pages/domain/control.vue
@@ -0,0 +1,100 @@
 <template>
  <div class="control">
    <div class="navigation-box">
      <el-menu
        class="el-menu-vertical-demo"
        :default-active="defaultActive"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
      >
        <el-menu-item index="/domain/control/myApp">
          <span class="svg-box">
            <i class="iconfont MinIconmy" style="color: #1890ff"></i>
          </span>
          <span slot="title">我的应用</span>
        </el-menu-item>

        <el-submenu index="/domain/control/information">
          <template slot="title">
            <span class="svg-box">
              <i class="iconfont MinIconapp" style="color: #1890ff"></i>
            </span>
            <span>用户中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/domain/control/information">账号信息</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/domain/control/registration">实名认证</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/domain/control/password">修改密码</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>

    <div class="content-box">
      <nuxt-child keep-alive />
    </div>
  </div>
 </template>

 <script>
 export default {
  asyncData({ route }) {
    return {
      defaultActive: route.path,
    };
  },
  data(){
      return {
          defaultActive : '/domain/control/myApp'
      }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push({
        path: key,
        params: { data: "query" },
      });
    },
    handleOpen: function () {},
    handleClose: function () {},
  },
 };
 </script>


 <style lang="scss" scoped>
 .control {
  width: 100%;
  display: flex;
  padding-bottom: 40px;
  flex-wrap: wrap;
  .navigation-box {
    width: 250px;
    height: 837px;
    background: #fff;
    margin-right: 20px;
    border-radius: 14px;
    overflow: hidden;
  }

  .content-box {
    width: 100%;
    flex: 1;
    display: flex;
    flex-flow: column;
    overflow: hidden;
  }
 }

 .svg-box {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: 0px;
 }
 </style>
--- a/pages/domain/control/information.vue
+++ b/pages/domain/control/information.vue
@@ -0,0 +1,186 @@
 <template>
  <div>
    <div class="bulletin-box">
      <div class="bulletin-left">公告</div>
      <div
        v-swiper:mySwiper="swiperOption"
        class="swiperWrap"
        style="height: 32px"
      >
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(banner, index) in banners"
            :key="index"
          >
            {{ banner.content }}
          </div>
        </div>
      </div>
    </div>

    <div class="information-box">
      <div class="information-head">
        <span>账号信息</span>
      </div>
      <div>
        <el-form label-position="top" inline :model="formLabelAlign">
          <div class="form-Text">
            <el-form-item label="账号名称">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="绑定邮箱">
              <el-input v-model="formLabelAlign.mail"></el-input>
            </el-form-item>

            <el-form-item label="绑定手机">
              <el-input v-model="formLabelAlign.phone"></el-input>
            </el-form-item>
            <el-form-item label="QQ账号">
              <el-input v-model="formLabelAlign.qq"></el-input>
            </el-form-item>
          </div>
          <div class="avatar-uploader-box">
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <span class="pencil-box">
                  <i class="iconfont MinIconicon-pencil"></i>
                </span>

                <img
                  src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3796860614,110950961&fm=26&gp=0.jpg"
                  class="avatar"
                />
              </el-upload>
            </el-form-item>
          </div>
          <el-button class="primary-button" type="primary" @click="onSubmit"
            >保存修改</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
 </template>


 <script>
 export default {
  meta:{ title:'账号信息'},
  data() {
    return {
      formLabelAlign: {
        name: "",
        phone: "",
        mail: "",
        qq: "",
      },
      banners: [
            {
          content:
            "您目前还没完成实名认证，部分功能不可使用，请尽快进行实名认证1",
        },
        {
          content:
            "您目前还没完成实名认证，部分功能不可使用，请尽快进行实名认证2",
        },
        {
          content:
            "您目前还没完成实名认证，部分功能不可使用，请尽快进行实名认证3",
        },
        {
          content:
            "您目前还没完成实名认证，部分功能不可使用，请尽快进行实名认证4",
        },
      ],
      swiperOption: {
        direction: "vertical",
        autoplay: true,
        loop: true,
      },
    };
  },
  methods: {
    handleAvatarSuccess: function () {},
    beforeAvatarUpload: function () {},
    onSubmit: function () {},
  },
 };
 </script>

 <style lang="scss" scoped>


 .information-box {
  padding: 20px;
  background: #fff;
  border-radius: 14px;
 }

 .information-head {
  height: 26px;
  font-size: 20px;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 35px;
  span {
    height: 20px;
    line-height: 20px;
    padding-left: 20px;
    border-left: 4px solid #1890ff;
  }
 }
 .avatar-uploader-box {
  float: left;
  margin-left: 7px;
  position: relative;
  .el-form-item {
    width: 100% !important;
    text-align: center;
  }
 }

 .el-form--inline .el-form-item {
  width: 48%;
  color: #5f6279;
  font-size: 14px;
 }

 .form-Text {
  float: left;
  width: calc(100% - 170px);
 }

 .avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
 }

 .pencil-box {
  position: absolute;
  width: 32px;
  height: 32px;
  background: #1890ff;
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 16px;
  right: 16px;
 }

 .primary-button {
  margin: 0 auto;
  width: 96px;
 }
 </style>
--- a/pages/domain/control/myApp.vue
+++ b/pages/domain/control/myApp.vue
@@ -0,0 +1,243 @@
 <template>
  <div>
    <div class="bulletin-box">
      <div class="bulletin-left">公告</div>
      <div
        v-swiper:mySwiper="swiperOption"
        class="swiperWrap"
        style="height: 32px"
      >
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(banner, index) in banners"
            :key="index"
          >
            {{ banner.content }}
          </div>
        </div>
      </div>
    </div>

    <div class="app-box">
      <div class="app-head">
        <span class="head-title">我的应用</span>
        <div class="found-app">
          <div class="primary-button">创建应用</div>
        </div>

        <div class="item-input">
          <el-input
            v-model="searchValue"
            size="mini"
            placeholder="输入关键词搜索"
          ></el-input>
          <div class="item-button">
            <div class="primary-button">搜索</div>
          </div>
        </div>
      </div>

      <div class="app-content">
        <div class="content-box">
          <div class="left-font" style="background: #2f89fc">嗨</div>
          <div class="content-font">
            <p class="p1">Google App</p>
            <p class="p2">创建于2020-12-12</p>
            <p class="p3">应用内包含25个API</p>
          </div>
          <div class="right-details">
            <div class="primary-button">查看详情</div>
          </div>
        </div>

        <div class="content-box">
          <div class="left-font" style="background: #f06292">GO</div>
          <div class="content-font">
            <p class="p1">Google App</p>
            <p class="p2">创建于2020-12-12</p>
            <p class="p3">应用内包含25个API</p>
          </div>
          <div class="right-details">
            <div class="primary-button">查看详情</div>
          </div>
        </div>
        <div class="content-box">
          <div class="left-font" style="background: #6fa5b1">智</div>
          <div class="content-font">
            <p class="p1">Google App</p>
            <p class="p2">创建于2020-12-12</p>
            <p class="p3">应用内包含25个API</p>
          </div>
          <div class="right-details">
            <div class="primary-button">查看详情</div>
          </div>
        </div>
        <div class="content-box">
          <div class="left-font" style="background: #ff4646">莺</div>
          <div class="content-font">
            <p class="p1">Google App</p>
            <p class="p2">创建于2020-12-12</p>
            <p class="p3">应用内包含25个API</p>
          </div>
          <div class="right-details">
            <div class="primary-button">查看详情</div>
          </div>
        </div>
      </div>

      <div class="app-bottom">已全部加载完毕</div>
    </div>
  </div>
 </template>


 <script>
 export default {
  meta: { title: "我的应用" },
  data() {
    return {
      searchValue: "",
      banners: [
        {
          content:
            "[12-11] 重磅消息！智莺上线Api市场专区！免费提供多样玩法专题，助力流量变现",
        },
        {
          content:
            "[12-12] 重磅消息！智莺上线Api市场专区！免费提供多样玩法专题，助力流量变现",
        },
        {
          content:
            "[12-13] 重磅消息！智莺上线Api市场专区！免费提供多样玩法专题，助力流量变现",
        },
        {
          content:
            "[12-14] 重磅消息！智莺上线Api市场专区！免费提供多样玩法专题，助力流量变现",
        },
      ],
      swiperOption: {
        direction: "vertical",
        autoplay: true,
        loop: true,
      },
    };
  },

  methods: {
    handleSelect(key, keyPath) {
      this.$router.push({
        path: key,
        params: { data: "query" },
      });
    },
    handleOpen: function () {},
    handleClose: function () {},
  },
 };
 </script>

 <style lang="scss" scoped>
 .app-box {
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  height: 100%;
 }

 .app-head {
  width: 100%;
  height: 34px;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  .head-title {
    color: #333333;
    padding: 0 20px;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    border-left: 4px solid #1890ff;
    box-sizing: border-box;
  }
  .found-app {
    width: 76px;
    height: 34px;
    font-size: 14px;
  }
  .item-input {
    width: 350px;
    height: 34px;
    box-sizing: border-box;
    border-radius: 6px;
    display: flex;
    background: #f7f8fa;
    margin-left: auto;
    align-items: center;
    font-size: 14px;
    .item-button {
      width: 70px;
      height: 100%;
    }
  }
 }

 .app-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .content-box {
    width: 48.8%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #eeeeee;
    height: 130px;
    margin-bottom: 20px;
    padding: 20px;
    display: flex;
    .left-font {
      width: 90px;
      height: 90px;
      text-align: center;
      line-height: 90px;
      font-size: 32px;
      color: #fff;
      border-radius: 14px;
      margin-right: 20px;
    }
    .content-font {
      .p1 {
        color: #333333;
        font-size: 20px;
        line-height: 26px;
        margin: 0 0 4px;
      }
      .p2 {
        color: #1890ff;
        margin: 0;
        font-size: 14px;
      }
      .p3 {
        margin: 20px 0 0 0;
        color: #999999;
        font-size: 16px;
        line-height: 21px;
      }
    }
    .right-details {
      width: 98px;
      height: 34px;
      margin: auto 0 0 auto;
      font-size: 14px;
    }
  }
 }

 .app-bottom {
  text-align: center;
  font-size: 16px;
  color: #999999;
 }
 </style>
--- a/pages/domain/control/password.vue
+++ b/pages/domain/control/password.vue
@@ -0,0 +1,155 @@
 <template>
  <div>
    <div class="bulletin-box">
      <div class="bulletin-left">公告</div>
      <div
        v-swiper:mySwiper="swiperOption"
        class="swiperWrap"
        style="height: 32px"
      >
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(banner, index) in banners"
            :key="index"
          >
            {{ banner.content }}
          </div>
        </div>
      </div>
    </div>
    <div class="password-box">
      <div class="password-head">
        <span>修改密码</span>
      </div>

      <div>
        <el-form label-position="top" inline :model="formLabelAlign">
          <div class="form-Text">
            <el-form-item label="手机号码">
              <el-input
                v-model="formLabelAlign.phone"
                placeholder="138****3293"
              ></el-input>
            </el-form-item>
            <el-form-item label="获取验证码">
              <el-input
                v-model="formLabelAlign.code"
                placeholder="请输入获取到的验证码"
              >
                <span slot="suffix" class="right-font" @click="getCode"
                  >获取验证码</span
                >
              </el-input>
            </el-form-item>

            <el-form-item label="输入新密码">
              <el-input
                v-model="formLabelAlign.newPassword"
                placeholder="不少于十位数"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认新密码">
              <el-input
                v-model="formLabelAlign.confirmPas"
                placeholder="再次输入新密码"
              ></el-input>
            </el-form-item>
          </div>

          <el-button class="primary-button" type="primary" @click="onSubmit"
            >确认修改</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
 </template>


 <script>
 export default {
  meta:{title:'修改密码'},
  data() {
    return {
      formLabelAlign: {
        phone: "",
        code: "",
        newPassword: "",
        confirmPas: "",
      },
      banners: [
        {
          content:
            "您目前还没完成实名认证，部分功能不可使用，请尽快进行实名认证1",
        },
        {
          content:
            "您目前还没完成实名认证，部分功能不可使用，请尽快进行实名认证2",
        },
        {
          content:
            "您目前还没完成实名认证，部分功能不可使用，请尽快进行实名认证3",
        },
        {
          content:
            "您目前还没完成实名认证，部分功能不可使用，请尽快进行实名认证4",
        },
      ],
      swiperOption: {
        direction: "vertical",
        autoplay: true,
        loop: true,
      },
    };
  },
  methods: {
    handleAvatarSuccess: function () {},
    beforeAvatarUpload: function () {},
    onSubmit: function () {},
    getCode: function () {
      console.log("获取验证码");
    },
  },
 };
 </script>

 <style lang="scss" scoped>
 .password-box {
  background: #fff;
  padding: 20px;
  border-radius: 14px;
 }
 .password-head {
  height: 26px;
  font-size: 20px;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 35px;
  span {
    height: 20px;
    line-height: 20px;
    padding-left: 20px;
    border-left: 4px solid #1890ff;
  }
 }

 .el-form--inline .el-form-item {
  width: 48%;
  color: #5f6279;
  font-size: 14px;
 }

 .primary-button {
  margin: 20px auto 0;
  width: 96px;
 }

 .right-font {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  padding-right: 10px;
 }
 </style>
--- a/pages/domain/control/registration/from.vue
+++ b/pages/domain/control/registration/from.vue
@@ -0,0 +1,751 @@
 <template>
  <div class="from-box">
    <div class="from-title">实名认证</div>
    <div class="head-content">
      <p class="content-p">开发者实名认证信息资料填写规范如下：</p>
      <div class="content-div">
        1. 保证所填写的全部信息真实且与实际信息对应，否则出示驳回意见。<br />
        2.与入件资质相关字段填写正确，特别的：企业名称、注册地址、统一社会信用代码、营业期限、法人代表人姓名、证件号码、证件有效期要与上传的证件照片保持一致，否则出示驳回意见。<br />
        3. 相关资质上传要求如下，如若不符，出示驳回意见。<br />
        【1】图片清晰且边框完整；<br />
        【2】提供资质附件如为复印件，须加盖公章。<br />
      </div>
      <img class="jinggao" src="@/static/icons/svg/jinggao.svg" alt="" />
    </div>

    <div style="margin-top: 28px">
      <el-form
        label-position="top"
        :model="realForm"
        :rules="rules"
        ref="realForm"
        label-width="100px"
        class="demo-ruleForm"
        inline
      >
        <el-form-item label="公司/个人标识" prop="mark">
          <el-radio-group v-model="realForm.mark">
            <el-radio label="公司"></el-radio>
            <el-radio label="个人"></el-radio>
          </el-radio-group>
          <div class="p-div">
            公司认证能够获得更多功能和权限，建议进行公司认证
          </div>
        </el-form-item>
        <el-form-item label="境内/境外标识" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="境内"></el-radio>
            <el-radio label="境外"></el-radio>
          </el-radio-group>
          <div class="p-div">暂不支持境外</div>
        </el-form-item>
        <!-- 个人资料填写 -->
        <transition name="el-fade-in">
          <div v-show="realForm.mark === '个人'" class="transition-box">
            <el-form-item label="联系地址" prop="region">
              <el-cascader :props="AddressProps" v-model="realForm.address1" placeholder="请选择您的联系地址"></el-cascader>
            </el-form-item>

            <el-form-item style="padding-top: 40px" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入您的详细地址，以便有需要时给您寄送书面文件"
              ></el-input>
            </el-form-item>

            <el-form-item label="联系人姓名" required>
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人证件类型" prop="region">
              <el-select placeholder="请选择证件类型" v-model="ruleForm.name">
                <el-option
                  v-for="(item, index) in certificate"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="联系人证件号码" required>
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="证件有效期" required>
              <div class="picker-box">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.date1"
                  ></el-date-picker>
                </el-form-item>

                <div class="line" :span="2" style="margin-right: 10px">至</div>

                <el-form-item prop="date2">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.date2"
                  ></el-date-picker>
                </el-form-item>
                <div>
                  <el-checkbox v-model="checked">长期</el-checkbox>
                </div>
              </div>

              <div class="p-div1" style="float: left">
                请仔细核对，需与证件上的时间一致
              </div>
            </el-form-item>
          </div>
        </transition>
        <!-- 企业资料填写 -->

        <transition name="el-fade-in">
          <div v-show="realForm.mark === '公司'" class="transition-box">
            <el-form-item label="企业登记类型" prop="mark">
              <el-radio-group v-model="realForm.enterprise">
                <el-radio label="企业三证"></el-radio>
                <el-radio label="三证合一"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              :label="
                realForm.enterprise === '企业三证'
                  ? '营业执照注册号'
                  : '统一社会信用代码'
              "
              required
            >
              <el-input
                v-model="ruleForm.name"
                :placeholder="
                  realForm.enterprise === '企业三证'
                    ? '请输入营业执照上的注册号'
                    : '请输入营业执照上的统一社会信用代码并逐字核对'
                "
              ></el-input>
            </el-form-item>

            <el-form-item label="企业地址" prop="region">
              <el-cascader :props="AddressProps" v-model="realForm.address2" placeholder="请选择省/市/区"></el-cascader>
            </el-form-item>

            <el-form-item style="padding-top: 40px" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入营业执照上的公司地址并逐字核对"
              ></el-input>
            </el-form-item>

            <el-form-item label="企业名称" required>
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入营业执照上的企业名称并逐字核对"
              ></el-input>
            </el-form-item>

            <el-form-item label="企业简称" required>
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入企业简称"
              ></el-input>
            </el-form-item>

            <el-form-item label="营业执照" required
              ><el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                ></i> </el-upload
            ></el-form-item>

            <el-form-item label="营业执照示例">
              <div class="avatar-uploader">
                <img src="@/static/img/zhizhao.png" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="营业期限" required>
              <div class="picker-box">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.date1"
                  ></el-date-picker>
                </el-form-item>
                <div class="line" :span="2" style="margin-right: 10px">至</div>
                <el-form-item prop="date2">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.date2"
                  ></el-date-picker>
                </el-form-item>
                <div>
                  <el-checkbox v-model="checked">长期</el-checkbox>
                </div>
              </div>
              <div class="p-div1" style="float: left">
                请仔细核对，需与营业执照上的时间一致
              </div>
            </el-form-item>
            <transition name="el-fade-in">
              <!-- 企业三证 -->
              <el-form-item
                label="组织机构代码"
                required
                v-show="realForm.enterprise === '企业三证'"
              >
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入9位组织机构代码"
                ></el-input>
              </el-form-item>
            </transition>
            <transition name="el-fade-in">
              <div v-show="realForm.enterprise === '企业三证'">
                <el-form-item label="组织机构代码证" required
                  ><el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i
                      v-else
                      class="el-icon-plus avatar-uploader-icon"
                    ></i> </el-upload
                ></el-form-item>
                <el-form-item label="营业期限" required>
                  <div class="picker-box">
                    <el-form-item prop="date1">
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date1"
                      ></el-date-picker>
                    </el-form-item>

                    <div class="line" :span="2" style="margin-right: 10px">
                      至
                    </div>

                    <el-form-item prop="date2">
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date2"
                      ></el-date-picker>
                    </el-form-item>
                    <div>
                      <el-checkbox v-model="checked">长期</el-checkbox>
                    </div>
                  </div>
                  <div class="p-div1" style="float: left">
                    请仔细核对，需与营业执照上的时间一致
                  </div>
                </el-form-item>
              </div>
            </transition>

            <div>
              <el-form-item label="法人/实际控制人姓名" required>
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="法人/实际控制人证件类型" prop="region">
                <el-select placeholder="请选择证件类型" v-model="ruleForm.name">
                  <el-option
                    v-for="(item, index) in certificate"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="请输入证件上的号码并确认核对" required>
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>

              <el-form-item label="证件有效期" required>
                <div class="picker-box">
                  <el-form-item prop="date1">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.date1"
                    ></el-date-picker>
                  </el-form-item>

                  <div class="line" :span="2" style="margin-right: 10px">
                    至
                  </div>

                  <el-form-item prop="date2">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.date2"
                    ></el-date-picker>
                  </el-form-item>
                  <div>
                    <el-checkbox v-model="checked">长期</el-checkbox>
                  </div>
                </div>
                <div class="p-div1" style="float: left">
                  请仔细核对，需与营业执照上的时间一致
                </div>
              </el-form-item>
            </div>
          </div>
        </transition>

        <div class="upload-box">
          <el-form-item label="证件照正面" required
            ><el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i> </el-upload
          ></el-form-item>

          <el-form-item label="证件照正面" required
            ><el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i> </el-upload
          ></el-form-item>

          <el-form-item label="证件照正面" required
            ><el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i> </el-upload
          ></el-form-item>
          <el-form-item label="证件照正面示例">
            <img src="@/static/img/zhengmian.png" alt="" />
          </el-form-item>
          <el-form-item label="证件照背面示例">
            <img src="@/static/img/fanmian.png" alt="" />
          </el-form-item>
          <el-form-item label="手持证件照示例">
            <img src="@/static/img/shouchi.png" alt="" />
          </el-form-item>
        </div>
        <div class="replenish">
          <el-form-item label="补充信息">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">上传文件</div>
              <div class="el-upload__tip" slot="tip">
                请仔细核对，需a请上传认证审核的补充文件
                必须为彩色图片（文档请截图后上传），最多5张，单张小于2M，格式为bmp、png、jpeg、jpg或gif证件上的时间一致
              </div>
            </el-upload>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="网站ICP备案号">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入网站经营许可证编号"
            ></el-input>
          </el-form-item>

          <el-form-item label="公司网站">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入公司地址。以http(s)://开头"
            ></el-input>
          </el-form-item>
          <el-form-item label="常用联系人姓名" required>
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入联系人姓名用于平台相关事宜通知"
            ></el-input>
          </el-form-item>

          <el-form-item label="联系人手机号码" required>
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入联系人手机号码用于接受相关事宜"
            ></el-input>
          </el-form-item>
          <el-form-item label="客服电话" required>
            <el-input
              v-model="ruleForm.name"
              placeholder="接收通知，若应用上架应用市场会对外展示"
            ></el-input>
          </el-form-item>
        </div>

        <div class="agreement-bar">
          <el-checkbox v-model="checked">我已阅读</el-checkbox
          ><span>《智莺支付开户及服务协议》</span
          ><span>《智莺支付隐私政策》</span
          ><span>《智莺开放平台服务协议》</span>
        </div>

        <div class="button-box">
          <el-button>返回</el-button>

          <el-button type="primary" @click="onSubmit('realForm')"
            >提交</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
 </template>

 <script>
 import { districtList } from "@/api/webServiceDistrict";

 export default {
  meta: { title: "实名认证" },
  data() {
    return {
      options: [], // 地址
      certificate: [
        // 证件
        {
          name: "居民身份证",
          id: "1",
        },
        {
          name: "临时身份证",
          id: "2",
        },
        {
          name: "军官证",
          id: "3",
        },
        {
          name: "武警警官证",
          id: "4",
        },
        {
          name: "士兵证",
          id: "5",
        },
        {
          name: "军队学员证",
          id: "6",
        },
        {
          name: "军队文职干部证",
          id: "7",
        },
        {
          name: "军队离退休干部证",
          id: "8",
        },
        {
          name: "军队职工证",
          id: "9",
        },
        {
          name: "护照",
          id: "10",
        },
        {
          name: "港澳同胞回乡证",
          id: "11",
        },
        {
          name: "港澳居民来往内地通行证",
          id: "12",
        },
        {
          name: "中华人民共和国来往港澳通行证",
          id: "13",
        },
        {
          name: "外国人居留证",
          id: "14",
        },
        {
          name: "外国人出入境证",
          id: "15",
        },
        {
          name: "外交官证",
          id: "16",
        },
        {
          name: "领事馆证",
          id: "17",
        },
        {
          name: "海员证",
          id: "18",
        },
      ],
      AddressProps: {
        // 异步加载地区名称
        lazy: true,
        async lazyLoad(node, resolve) {
        const { level } = node;
          if (level === 0) {
            let nodes = await districtList();
            nodes.forEach((element) => {
              element.label = element.name || element.fullname;
              element.leaf = level >= 2;
              element.value = element.id;
            });
            resolve(nodes);
          } else {
            let nodes = await districtList(node.data.id);
            nodes.forEach((element) => {
              element.label = element.name || element.fullname;
              element.leaf = level >= 2;
              element.value = element.id;
            });
            resolve(nodes);
          }
        },
      },
      checked: false,
      imageUrl: "",
      realForm: {
        mark: "个人",
        enterprise: "企业三证",
        address1: null,
      },
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],

        mark: [
          {
            required: true,
            message: "请选择实名认证标识： 公司/个人标识",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    handleAvatarSuccess: function () {},
    beforeAvatarUpload: function () {},
    // 表单提交
    onSubmit: function (formName) {
      console.log(this.realForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {},
 };
 </script>

 <style lang="scss" scoped>
 .from-box {
  padding: 20px 20px 40px 20px;

  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 14px;
  .from-title {
    color: #333333;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    border-left: 4px solid #1890ff;
    padding-left: 10px;
  }
  .head-content {
    background: #fffcec;
    border: 1px solid #feeebb;
    padding: 12px 124px 12px 12px;
    position: relative;
    margin-top: 28px;
    box-sizing: border-box;
    .content-p {
      color: #6a3904;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      padding-bottom: 5px;
    }
    .content-div {
      color: #a07d49;
      font-size: 12px;
      line-height: 18px;
    }
    .jinggao {
      position: absolute;
      width: 115px;
      height: 115px;
      right: -1px;
      bottom: -2px;
    }
  }
 }

 .el-form-item {
  width: 48%;
 }

 .replenish {
  .el-form-item {
    width: 100%;
  }
 }

 .p-div {
  color: #999999;
  font-size: 12px;
  line-height: 12px;
  margin-top: 9px;
  height: 12px;
 }
 .p-div1 {
  color: #999999;
  font-size: 12px;
  line-height: 12px;
  height: 12px;
 }

 .el-cascader,
 .el-select {
  width: 100%;
 }

 .upload-box {
  .el-form-item {
    width: 31.8%;
  }
  .el-form-item__content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 170px;
  }
 }

 .picker-box {
  display: flex;
  width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
  line-height: 40px;
  color: #999999;
  font-size: 14px;
  .el-input__inner {
    width: 92%;
  }
  .line {
    width: 30px;
    text-align: center;
  }
 }
 .agreement-bar {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #333333;

  span {
    color: #1890ff;
    cursor: pointer;
  }
 }

 .button-box {
  text-align: center;
  margin-top: 20px;
 }
 </style>
--- a/pages/domain/control/registration/index.vue
+++ b/pages/domain/control/registration/index.vue
@@ -0,0 +1,108 @@
 <template>
  <div class="registration-box">
    <div class="registration-head">
      <span>实名认证</span>
    </div>

    <div class="select-box">
      <div
        class="select-div select-1"
        :class="{ selectLabel: selectLabel === '1' }"
        @click="selectLabel = '1'"
      >
        <img src="@/static/icons/svg/shenfenzheng.svg" alt="" />
        <div>个人认证</div>
      </div>
      <div
        class="select-div select-2"
        :class="{ selectLabel: selectLabel === '2' }"
        @click="selectLabel = '2'"
      >
        <img src="@/static/icons/svg/yinyezhizhao.svg" alt="" />
        <div>企业认证</div>
      </div>
    </div>

    <div class="nextStep" @click="tapNextStep">
      <div class="primary-button">确认选择，下一步</div>
    </div>
  </div>
 </template>


 <script>
 export default {
  meta: { title: "实名认证" },
  data() {
    return {
      selectLabel: "",
    };
  },
  methods: {
    tapNextStep: function () {
      if (this.selectLabel === "") {
        this.$message.warning("请先选择认证方式");
        return;
      }
      this.$router.push("/domain/control/registration/from");
    },
  },
 };
 </script>

 <style lang="scss" scoped>
 .registration-box {
  width: 100%;
  background: #fff;
  padding: 20px 20px 30px 20px;
  border-radius: 14px;
  box-sizing: border-box;
  overflow: hidden;
  .registration-head {
    height: 26px;
    font-size: 20px;
    color: #333333;
    display: flex;
    align-items: center;
    margin-bottom: 35px;
    span {
      height: 20px;
      line-height: 20px;
      padding-left: 20px;
      border-left: 4px solid #1890ff;
    }
  }
  .select-box {
    display: flex;
    justify-content: center;
    .select-div {
      width: 200px;
      height: 192px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #dddddd;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #333333;
      font-size: 16px;
      img {
        margin-bottom: 15px;
      }
    }
    .select-2 {
      margin-left: 20px;
    }
    .selectLabel {
      border: 1px solid #1890ff;
    }
  }
  .nextStep {
    width: 160px;
    font-size: 16px;
    height: 40px;
    margin: 40px auto 0;
  }
 }
 </style>
--- a/pages/domain/debugApi.vue
+++ b/pages/domain/debugApi.vue
@@ -0,0 +1,304 @@
 <template>
  <div class="debugApi-box">
    <div class="apiBox-head">
      <div class="api-title">API市场</div>
      <div class="seek-input">
        <el-input placeholder="搜索接口连接/方法名/接口中文名"> </el-input>
        <span class="seek-slod">搜索</span>
      </div>
    </div>

    <div class="debug-html">
      <div class="flex-left">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          label-position="top"
        >
          <div class="left-title">接口测试</div>

          <el-form-item label="接口" prop="name">
            <span class="left-float">查看该接口文档</span>

            <el-select v-model="ruleForm.name" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="请求方式" prop="name">
            <el-select v-model="ruleForm.name" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="left-title" style="margin-top: 30px">请求参数</div>
          <el-form-item label="APIKEY" prop="name">
            <el-input placeholder="请输入内容"></el-input>
          </el-form-item>

          <div class="key-for">
            <el-form-item label="KEY" style="margin-right: 20px">
              <el-input placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="value" style="margin-right: 20px">
              <el-input placeholder="请输入内容"></el-input>
            </el-form-item>
            <div
              class="span-icon el-icon-remove"
              style="margin-right: 12px"
            ></div>
            <div class="span-icon el-icon-circle-plus"></div>
          </div>

          <el-button class="onSubmit" type="primary" @click="onSubmit"
            >提交测试</el-button
          >
        </el-form>
      </div>

      <div class="flex-right">
        <div class="rigth-title">输出参数</div>
        <div>
          <json-viewer
            v-if="jsonData"
            :value="jsonData"
            :expand-depth="5"
            expanded
            copyable
            boxed
            sort
          ></json-viewer>
        </div>
      </div>
    </div>
  </div>
 </template>

 <script>
 export default {
  data() {
    return {
      ruleForm: {
        name: "",
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      jsonData: {
        total: 25,
        limit: 10,
        skip: 0,
        links: {
          previous: undefined,
          next: function () {},
        },
        data: [
          {
            id: "5968fcad629fa84ab65a5247",
            firstname: "Ada",
            lastname: "Lovelace",
            awards: null,
            known: ["mathematics", "computing"],
            position: {
              lat: 44.563836,
              lng: 6.495139,
            },
            description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
            chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
            the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
            and published the first algorithm intended to be carried out by such a machine.
            As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
            bornAt: "1815-12-10T00:00:00.000Z",
            diedAt: "1852-11-27T00:00:00.000Z",
          },
          {
            id: "5968fcad629fa84ab65a5246",
            firstname: "Grace",
            lastname: "Hopper",
            awards: [
              "Defense Distinguished Service Medal",
              "Legion of Merit",
              "Meritorious Service Medal",
              "American Campaign Medal",
              "World War II Victory Medal",
              "National Defense Service Medal",
              "Armed Forces Reserve Medal",
              "Naval Reserve Medal",
              "Presidential Medal of Freedom",
            ],
            known: null,
            position: {
              lat: 43.614624,
              lng: 3.879995,
            },
            description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
            was an American computer scientist and United States Navy rear admiral.
            One of the first programmers of the Harvard Mark I computer,
            she was a pioneer of computer programming who invented one of the first compiler related tools.
            She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
            an early high-level programming language still in use today.`,
            bornAt: "1815-12-10T00:00:00.000Z",
            diedAt: "1852-11-27T00:00:00.000Z",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit: function () {},
  },
 };
 </script>


 <style lang="scss" scoped>
 .debugApi-box {
  width: 1200px;
  border-radius: 14px;
  overflow: hidden;
  .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;
      }
    }
  }

  .debug-html {
    display: flex;
    margin-top: 20px;
    width: 100%;
    align-items: baseline;
    .flex-left {
      width: 468px;
      min-height: 585px;
      background: #ffffff;
      border-radius: 14px;
      box-sizing: border-box;
      padding: 20px;
      .left-title {
        color: #333333;
        font-size: 20px;
        height: 20px;
        line-height: 20px;
        padding-left: 12px;
        border-left: 4px solid #1890ff;
        margin-bottom: 20px;
      }
      .left-float {
        position: absolute;
        z-index: 99;
        right: 0;
        top: -40px;
        color: #1890ff;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .flex-right {
      width: 712px;
      min-height: 710px;
      background: #ffffff;
      border-radius: 14px;
      margin-left: auto;
      box-sizing: border-box;
      padding: 20px;
      .rigth-title {
        color: #333333;
        font-size: 20px;
        height: 20px;
        line-height: 20px;
        padding-left: 12px;
        border-left: 4px solid #1890ff;
        margin-bottom: 20px;
      }
    }
    .key-for {
      display: flex;
      .span-icon {
        color: #1890ff;
        cursor: pointer;
        line-height: 11px;
        margin-top: 53px;
        font-size: 16px;
      }
    }

    .onSubmit {
      margin: 20px auto 0;
      display: block;
    }
  }
 }


 </style>
--- a/pages/domain/detail.vue
+++ b/pages/domain/detail.vue
@@ -0,0 +1,257 @@
 <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>
--- a/pages/domain/seekApi.vue
+++ b/pages/domain/seekApi.vue
@@ -0,0 +1,542 @@
 <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>
--- a/pages/domain/setApp.vue
+++ b/pages/domain/setApp.vue
@@ -0,0 +1,180 @@
 <template>
  <div class="setApp">
    <div class="setApp-box">
      <span>您最多可以创建10个应用，如需创建更多应用，请</span
      ><span style="color: #1890ff; cursor: pointer">联系客服</span>
    </div>
    <div class="setApp-body">
      <div class="body-title">创建应用</div>

      <el-form
        class="setApp-content"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="应用名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入应用的名称"
          ></el-input>
          <div class="content-color">
            您的站点，APP等名称，也可自定义，供您进行用途识别
          </div>
        </el-form-item>

        <el-form-item label="应用类型" prop="name">
          <div class="formItem">
            <el-checkbox
              v-for="(item, index) in appType"
              :key="index"
              v-model="item.state"
              >{{ item.name }}</el-checkbox
            >
          </div>
        </el-form-item>

        <el-form-item label="应用描述">
          <el-input
            class="textarea"
            type="textarea"
            placeholder="请输入应用的名称"
            v-model="ruleForm.textarea"
            show-word-limit
          >
          </el-input>
        </el-form-item>

        <el-form-item label="网站URL">
          <el-input
            type="text"
            placeholder="请输入网站URL"
            v-model="ruleForm.textarea"
            show-word-limit
          >
          </el-input>
          <div class="content-color">
            您的应用访问地址或者下载地址，请以http(s)开头
          </div>
        </el-form-item>

        <el-form-item label="应用图标">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">上传文件</div>
          </el-upload>
        </el-form-item>

        <div style="margin-top:40px">
          <el-button style="width: 100%" type="primary">立即创建</el-button>
        </div>
      </el-form>
    </div>
  </div>
 </template>

 <script>
 export default {
  data() {
    return {
      appType: [
        {
          name: "电脑版网站",
          id: 1,
          state: false,
        },
        {
          name: "H5移动网站",
          id: 2,
          state: false,
        },
        {
          name: "iOS客户端",
          id: 3,
          state: false,
        },
        {
          name: "Android客户端",
          id: 4,
          state: false,
        },
        {
          name: "微信小程序",
          id: 5,
          state: false,
        },
        {
          name: "其他",
          id: 6,
          state: false,
        },
      ],
      ruleForm: {
        name: "",
        textarea: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
 };
 </script>



 <style lang="scss" scoped>
 .setApp-box {
  width: 1200px;
  height: 56px;
  background: #fffcec;
  border-radius: 14px;
  border: 1px solid #feeebb;
  text-align: center;
  line-height: 56px;
  color: #6a3904;
  font-size: 14px;
  margin-bottom: 20px;
 }

 .setApp-body {
  width: 1200px;
  min-height: 806px;
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
  box-sizing: border-box;
  .body-title {
    color: #333333;
    font-size: 20px;
    padding-left: 12px;
    height: 20px;
    line-height: 20px;
    border-left: #1890ff 4px solid;
  }
 }

 .setApp-content {
  width: 435px;
  margin: 0 auto;
  .content-color {
    color: #999999;
    font-size: 12px;
    line-height: 26px;
  }
  .formItem {
    clear: both;
  }
  .textarea {
    height: 150px;
  }
 }
 </style>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -0,0 +1,33 @@
 <template>
  <div>
    <PageHead />
    <PageBanner />
    <PageProduct />
    <PageScene />
    <PageSwiper />
    <PageStep />
    <PageFooter />
  </div>
 </template>

 <script>
 import PageHead from "@/components/index/head";
 import PageFooter from "@/components/index/footer";
 import PageBanner from "@/components/index/banner";
 import PageProduct from "@/components/index/product";
 import PageStep from "@/components/index/step";
 import PageSwiper from "@/components/index/swiper";
 import PageScene from "@/components/index/scene";



 export default {
  components: {
    PageHead,PageFooter,PageBanner,PageProduct,PageStep,PageSwiper,PageScene
  },
 };
 </script>


 <style lang="scss">
 </style>
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -0,0 +1,166 @@
 <template>
  <div class="big-box">
    <!-- 标题 -->
    <div class="head-bar">
      <img class="favicon-svg" src="../static/img/login-title.png" alt="" />
    </div>

    <div class="login-box">
      <div class="login-input">
        <span class="left-font">手机号码</span>
        <el-input
          size="mini"
          placeholder="输入您的手机号"
          clearable
          v-model="formLoginData.phone"
        >
        </el-input>
      </div>

      <div class="login-input">
        <span class="left-font">验证码</span>
        <el-input
          size="mini"
          placeholder="输入验证码"
          clearable
          v-model="formLoginData.code"
        >
          <span slot="append" class="right-font">获取验证码</span>
        </el-input>
      </div>

      <div class="form-footer-login">
        
        <span @click="linkSign">注册账号</span>
        <span>密码登陆</span>
      </div>

 
      <!-- 登陆按钮 -->
      <div
        class="button-box"
        style="margin-top: 60px"
      >
        <div class="primary-button">登陆</div>
      </div>

    </div>




    <!-- 页脚 -->
    <footer class="footer">
      Copyright © 2008-2019 珠海方诺信息科技有限公司 版权所有 粤ICP备13020798号
    </footer>
  </div>
 </template>

 <script>
 export default {
  name: "Login",
  data() {
    return {
      formLoginData: {
        phone: "", // 手机号
        code: "", // 验证码
        name: "", // 个人昵称
        password: "", // 密码
        confirmPassword: "", // 确认密码
        isGetCode: false, // 获取验证码
        state: "sign", // 登陆或注册
        isCode: true, //  是否验证码登陆
        read: false, // 是否阅读
      },
    };
  },
  methods: {
    linkSign: function() {
      this.$router.push('/sign')
    }
  },
 };
 </script>

 <style lang="scss" scoped>
 .big-box {
  width: 100vw;
  height: 100vh;
  background-image: url("../static/img/login.png");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  display: flex;
  flex-flow: column;
  user-select: none;

  .head-bar {
    color: #fff;
    font-size: 35px;
    margin: 90px auto 0;
    letter-spacing: 4px;
    .favicon-svg {
      vertical-align: -11px;
    }
  }

  .login-box {
    margin: 37px auto 0;
    width: 550px;
    box-shadow: 0px 2px 20px 0px rgba(0, 71, 137, 0.3);
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    padding: 40px;
    .login-input {
      display: flex;
      width: 100%;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #dddddd;
      padding: 12px 0;
      box-sizing: border-box;
      height: 54px;
      align-items: center;
      margin-bottom: 20px;
      .left-font {
        width: 88px;
        text-align: center;
        color: #333333;
        font-size: 14px;
        border-right: 1px solid #dddddd;
        height: 30px;
        line-height: 30px;
      }
      .right-font {
        color: #1890ff;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .form-footer-login {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      padding: 0 16px;
      color: #999999;
      font-size: 14px;
      span {
        cursor: pointer;
      }
    }
    .button-box {
      height: 54px;
    }
  }

  .footer {
    color: #fff;
    opacity: 0.7;
    font-size: 14px;
    text-align: center;
    width: 100vw;
    position: absolute;
    bottom: 100px;
  }
 }
 </style>
--- a/pages/sign.vue
+++ b/pages/sign.vue
@@ -0,0 +1,214 @@
 <template>
  <div class="big-box">
    <!-- 标题 -->
    <div class="head-bar">
      <img class="favicon-svg" src="../static/img/login-title.png" alt="" />

    </div>

    <div class="login-box">
      <div class="login-input">
        <span class="left-font">手机号码</span>
        <el-input
          size="mini"
          placeholder="输入您的手机号"
          clearable
          v-model="formLoginData.phone"
        >
        </el-input>
      </div>

      <div class="login-input">
        <span class="left-font">验证码</span>
        <el-input
          size="mini"
          placeholder="输入验证码"
          clearable
          v-model="formLoginData.code"
        >
          <span slot="append" class="right-font">获取验证码</span>
        </el-input>
      </div>

      <div class="login-input">
        <span class="left-font">个人昵称</span>
        <el-input
          size="mini"
          placeholder="输入昵称，以后可修改"
          clearable
          v-model="formLoginData.name"
        >
        </el-input>
      </div>

      <div class="login-input">
        <span class="left-font">设置密码</span>
        <el-input
          size="mini"
          placeholder="不少于8位"
          clearable
          v-model="formLoginData.name"
        >
        </el-input>
      </div>

      <div class="login-input">
        <span class="left-font">确认密码</span>
        <el-input
          size="mini"
          placeholder="确认密码"
          clearable
          v-model="formLoginData.name"
        >
        </el-input>
      </div>

      <!--  -->
      <div class="form-footer-sign">
        <el-checkbox v-model="formLoginData.read">
          <span class="sign-span-1">已阅读并同意</span>
        </el-checkbox>
        <span class="sign-span-2" @click="onAgreement">《用户使用协议》</span>
      </div>

      <!-- 登陆按钮 -->

      <div class="button-box" style="margin-top: 18px">
        <div class="primary-button">注册</div>
      </div>
      <div class="form-state" @click="linkLogin">已有账号，立即登录</div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      Copyright © 2008-2019 珠海方诺信息科技有限公司 版权所有 粤ICP备13020798号
    </footer>
  </div>
 </template>

 <script>
 export default {
  name: "Login",
  data() {
    return {
      formLoginData: {
        phone: "", // 手机号
        code: "", // 验证码
        name: "", // 个人昵称
        password: "", // 密码
        confirmPassword: "", // 确认密码
        isGetCode: false, // 获取验证码
        state: "sign", // 登陆或注册
        isCode: true, //  是否验证码登陆
        read: false, // 是否阅读
      },
    };
  },
  methods: {
    //  用户协议
    onAgreement: function () {
      this.$message("开发中~");
    },
    linkLogin: function () {
      this.$router.push("/login");
    },
  },
 };
 </script>

 <style lang="scss" scoped>
 .big-box {
  width: 100vw;
  height: 100vh;
  background-image: url("../static/img/login.png");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  display: flex;
  flex-flow: column;
  user-select: none;
  .head-bar {
    color: #fff;
    font-size: 35px;
    margin: 90px auto 0;
    letter-spacing: 4px;
    .favicon-svg {
      vertical-align: -11px;
    }
  }

  .login-box {
    margin: 37px auto 0;
    width: 550px;
    box-shadow: 0px 2px 20px 0px rgba(0, 71, 137, 0.3);
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    padding: 40px;
    .login-input {
      display: flex;
      width: 100%;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #dddddd;
      padding: 12px 0;
      box-sizing: border-box;
      height: 54px;
      align-items: center;
      margin-bottom: 20px;
      .left-font {
        width: 88px;
        text-align: center;
        color: #333333;
        font-size: 14px;
        border-right: 1px solid #dddddd;
        height: 30px;
        line-height: 30px;
      }
      .right-font {
        color: #1890ff;
        font-size: 14px;
        cursor: pointer;
      }
    }

    .form-footer-sign {
      display: flex;
      justify-content: center;
      font-size: 14px;
      align-items: center;
      .el-checkbox {
        display: flex;
        align-items: center;
      }
      .sign-span-1 {
        color: #000000;
        opacity: 0.65;
      }
      .sign-span-2 {
        color: #1890ff;
        cursor: pointer;
      }
    }
    .button-box {
      height: 54px;
    }
    .form-state {
      color: #1890ff;
      font-size: 13px;
      display: flex;
      justify-content: center;
      margin-top: 20px;
      cursor: pointer;
    }
  }

  .footer {
    color: #fff;
    opacity: 0.7;
    font-size: 14px;
    text-align: center;
    width: 100vw;
    margin-top: 150px;
  }
 }
 </style>
--- a/plugins/README.md
+++ b/plugins/README.md
@@ -0,0 +1,7 @@
 # PLUGINS

 **This directory is not required, you can delete it if you don't want to use it.**

 This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.

 More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
--- a/plugins/axios.js
+++ b/plugins/axios.js
@@ -0,0 +1,59 @@
 import axios from 'axios'

 import { Message, Notification } from 'element-ui' // 这里使用了element-ui的消息提示方法，也可自行定义 

 axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
 axios.defaults.headers.post['Content-Type'] = 'text/plain;charset=UTF-8'

 let service = axios.create({
    baseURL: 'https://open.izhyin.com',//域名信息-测试
    timeout: 10000
 })

 // 请求拦截 可在请求头中加入token等
 service.interceptors.request.use(config => {

    return config
 }, error => {
    return Promise.reject(error)
 })

 // 响应拦截 对响应消息作初步的处理
 service.interceptors.response.use(resp => {
    if (resp.status != 200) {
        Message({
            type: 'error',
            message: resp.data.msg,
            duration: 5000
        })
    }
    return { status: resp.data.status, data: resp.data.result, msg: resp.data.message }

 }, error => {
 
    if (error.response) {
        switch (error.response.status) {
            case 400: {
                if (error.response && error.response.data && error.response.data.message) {
                    Notification.error({
                        title: '400错误',
                        message: error.response.data.msg,
                        duration: 5000,
                        closable: true
                    })
                }
                break
            }
            case 403: {
                Notification.error({
                    title: '403错误',
                    message: error.response.data.msg,
                    duration: 5000,
                    closable: true
                })
            }
        }
    }
 })

 export default service
--- a/plugins/element-ui.js
+++ b/plugins/element-ui.js
@@ -0,0 +1,5 @@
 import Vue from 'vue'
 import Element from 'element-ui'
 import locale from 'element-ui/lib/locale/lang/en'

 Vue.use(Element, { locale })
--- a/plugins/route.js
+++ b/plugins/route.js
@@ -0,0 +1,15 @@

 export default ({
  app
 }) => {
  app.router.beforeEach((to, from, next) => {


    console.log(to.path)
    if (to.path === '/domain' || to.path === '/domain/control' || to.path === '/domain/' || to.path === '/domain/control/') {
      next('/domain/control/myApp')
      return
    }
    next()
  })
 }
--- a/plugins/viewer.js
+++ b/plugins/viewer.js
@@ -0,0 +1,4 @@
 import Vue from 'vue'
 import JsonViewer from 'vue-json-viewer/ssr'
 
 Vue.use(JsonViewer)
--- a/plugins/vue-swiper.js
+++ b/plugins/vue-swiper.js
@@ -0,0 +1,4 @@
 import Vue from 'vue'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 
 Vue.use(VueAwesomeSwiper)
--- a/static/README.md
+++ b/static/README.md
@@ -0,0 +1,11 @@
 # STATIC

 **This directory is not required, you can delete it if you don't want to use it.**

 This directory contains your static files.
 Each file inside this directory is mapped to `/`.
 Thus you'd want to delete this README.md before deploying to production.

 Example: `/static/robots.txt` is mapped as `/robots.txt`.

 More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
--- a/static/css/app.scss
+++ b/static/css/app.scss
@@ -0,0 +1,334 @@
@import "./iconfont";

 body {
    width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
 }

 a {
    text-decoration: none;
 }
 .login-box {
    .el-input__inner {
        border: none !important;
        font-size: 14px;
    }
    .el-input-group__append {
        background: none;
        border: none;
    }
 }

 // 公共蓝色 - button
 .primary-button {
    background: #1890ff;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
    user-select: none;
 }
 .primary-button:hover {
    background: #3399f8;
 }
 .primary-button:active {
    background: #0886fc;
 }

 // 公共灰色 - button
 .primary-button2 {
    background: #f7f8fa;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #333333;
    justify-content: center;
    user-select: none;
 }
 .primary-button2:hover {
    background: #dfdfdf;
 }
 .primary-button2:active {
    background: #d9dbe0;
 }

 .item-input {
    .el-textarea__inner,
    .el-input__inner {
        background: transparent;
        border: none;
    }
 }

 .index-head-box {
    .el-menu.el-menu--horizontal {
        border: none;
    }

    .el-submenu__icon-arrow {
        right: 4px;
        font-size: 15px;
    }
    .el-menu-item,
    .el-submenu__title {
        font-size: 16px;
        color: #333333;
        height: 20px;
        line-height: 20px;
    }

    .el-submenu__title,
    .el-menu-item:focus,
    .el-menu-item:hover {
        background-color: transparent;
    }
 }

 .control {
    .el-menu {
        border: none;
    }

    .is-opened {
        border: none !important;
    }

    .el-menu--inline {
        border: none !important;
    }

    .el-submenu__title {
        padding: 0 30px !important;
        font-size: 16px;
        height: 61px;
        line-height: 61px;
        width: 100%;
        border-left: #fff solid 4px;

        box-sizing: border-box;
    }
    .el-menu-item {
        padding: 0 30px !important;
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        height: 61px;
        line-height: 61px;
        border-left: #fff solid 4px;
    }
    .is-active {
        border-left: #1890ff solid 4px;
    }
 }

 .information-head,
 .password-box {
    .el-form--inline .el-form-item__label {
        padding: 0;
    }
 }

 .from-box {
    .el-form-item__content {
        line-height: 14px;
    }
    .el-form--label-top .el-form-item__label {
        padding-bottom: 0;
    }
 }

 .picker-box {
    .el-input__inner {
        width: 100%;
    }
    .el-date-editor.el-input {
        width: 162px !important;
    }

    .el-form-item .el-form-item {
        margin: 0px !important;
    }
 }

 .upload-box {
    .el-form-item__content {
        display: flex !important;
        justify-content: center;
        align-items: center;
        height: 170px;
        border: 0.5px solid #dcdde5;
        border-radius: 14px;
    }
    .el-upload {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #eff7ff;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #eff7ff;
        .el-icon-plus {
            color: #2f89fc;
            font-size: 30px;
            font-weight: bold;
        }
    }
 }

 .replenish,
 .setApp {
    .el-upload-dragger {
        height: 42px;
        display: flex;
        width: 162px;
        justify-content: center;
        align-items: center;
    }
    .el-icon-upload {
        font-size: 18px;
        line-height: 42px !important;
        height: 42px !important;
        margin: 0 5px 0 0;
    }
 }

 .agreement-bar {
    .el-checkbox__input {
        vertical-align: -2px;
    }
 }

 .from-box {
    .el-form-item {
        margin-bottom: 14px;
    }
 }

 .transition-box {
    .avatar-uploader {
        display: flex !important;
        justify-content: center;
        align-items: center;
        height: 170px;
        border: 0.5px solid #dcdde5;
        border-radius: 14px;
        .el-upload {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #eff7ff;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #eff7ff;
            .el-icon-plus {
                color: #2f89fc;
                font-size: 30px;
                font-weight: bold;
            }
        }
    }
 }

 .api-box,
 .apiBox-head {
    .el-input__inner::placeholder {
        color: #1890ff;
        font-size: 14px;
    }
    /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder {
        color: #1890ff;
        font-size: 14px;
    }
    /* 火狐 */
    .el-input__inner:-moz-placeholder {
        color: #1890ff;
        font-size: 14px;
    }
    /*ie*/
    .el-input__inner:-ms-input-placeholder {
        color: #1890ff;
        font-size: 14px;
    }
    .el-input {
        box-sizing: border-box;
        width: calc(100% - 70px);
    }

    .el-textarea__inner,
    .el-input__inner {
        background: transparent;
        border: none;
        height: 34px;
        line-height: 34px;
    }
 }

 .demo-ruleForm {
    .el-form-item__label {
        padding: 0;
    }
    .el-select {
        width: 100%;
    }
    .el-form-item {
        position: relative;
        margin-bottom: 10px;
    }
 }

 .jv-container .jv-code.open {
    background: #f5f8f7;
    border-radius: 14px;
    border: 1px solid #67ba6a;
 }

 .jv-container.boxed {
    border: none !important;
 }

 .jv-container.boxed:hover {
    border: none !important;
    box-shadow: none !important;
 }

 .el-table th {
    background: #f8fbff;
 }

 .el-table td,
 .el-table th {
    padding: 9px 0;
 }

 .setApp {
    .el-form-item {
        margin-bottom: 10px;
    }
    .el-form-item__error {
        display: none !important;
    }

 }
 .app-detail {
    .el-table td, .el-table th.is-leaf {
        border: none;
        line-height: 57px;
        height: 57px;
        padding: 0;
    }
 }

 .el-textarea__inner {
    resize: none;
    height: 100%;
 }
--- a/static/css/common.scss
+++ b/static/css/common.scss
@@ -0,0 +1,53 @@
 

 .page-enter-active, .page-leave-active {
  transition: opacity .4s;
 }

 /* .page-enter-active, .page-leave-active::after {
  content: '';
  width: 100px;
  height: 100px;
  background: red;
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto auto;
 } */


 .page-enter, .page-leave-active {
  opacity: .5;
 }


 .bulletin-box {
  background: #fff;
  border-radius: 14px;
  height: 56px;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .bulletin-left {
    height: 32px;
    line-height: 32px;
    width: 72px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background: #ff6262;
    border-radius: 8px;
  }
  .swiperWrap {
    flex: 1;
    width: 100%;
    height: 32px !important;
    line-height: 32px !important;
    margin-left: 16px;
  }
 }
--- a/static/css/iconfont.scss
+++ b/static/css/iconfont.scss
@@ -0,0 +1,52 @@
@font-face {font-family: "iconfont";
  src: url('../iconfont/iconfont.eot?t=1619157981964'); /* IE9 */
  src: url('../iconfont/iconfont.eot?t=1619157981964#iefix') format('embedded-opentype'), 
  url('../iconfont/iconfont.woff?t=1619157981964') format('woff'),
  url('../iconfont/iconfont.ttf?t=1619157981964') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../iconfont/iconfont.svg?t=1619157981964#iconfont') format('svg'); /* iOS 4.1- */
 }

 .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

 .MinIconicon-pencil:before {
  content: "\e670";
 }

 .MinIconfavicon1:before {
  content: "\e611";
 }

 .MinIconlianxi:before {
  content: "\e60f";
 }

 .MinIconmy:before {
  content: "\e610";
 }

 .MinIconapi:before {
  content: "\e60a";
 }

 .MinIconfavicon:before {
  content: "\e60b";
 }

 .MinIcontousu:before {
  content: "\e60c";
 }

 .MinIconhuidaodingbu:before {
  content: "\e60d";
 }

 .MinIconapp:before {
  content: "\e60e";
 }

--- a/BIN
+++ b/BIN
--- a/static/iconfont/iconfont.svg
+++ b/static/iconfont/iconfont.svg
@@ -0,0 +1,53 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!--
 2013-9-30: Created.
 -->
 <svg>
 <metadata>
 Created by iconfont
 </metadata>
 <defs>

 <font id="iconfont" horiz-adv-x="1024" >
  <font-face
    font-family="iconfont"
    font-weight="500"
    font-stretch="normal"
    units-per-em="1024"
    ascent="896"
    descent="-128"
  />
    <missing-glyph />
    
    <glyph glyph-name="icon-pencil" unicode="&#58992;" d="M295.581-35.441l-203.327 203.326 562.027 562.032 203.326-203.326-562.026-562.032zM988.662 752.958l-108.018 108.012c-26.32 26.32-70.852 24.462-99.462-4.153l-101.48-101.48 203.326-203.326 101.48 101.479c28.604 28.616 30.469 73.149 4.154 99.468v0zM73.373 135.898l-71.887-262.098 262.070 71.888-190.183 190.21zM73.373 135.898z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="favicon1" unicode="&#58897;" d="M877.177692 176.567184l-1.093879 222.24601 135.79186-110.142286zM875.518014 290.028827l-1.093879 110.142286 135.79186-110.142286zM129.077706 269.660048a392.136714 380.179487 90 1 1 760.358974 0 392.136714 380.179487 90 1 1-760.358974 0ZM0 662.173962h504.919398a392.853393 392.853393 0 0 0 392.815673-392.853394h-504.881678A392.853393 392.853393 0 0 0 0 662.173962zM275.431155 896l409.412456-242.313029a435.17519 435.17519 0 0 0 153.143042-586.319074l-478.025065 282.937428a352.643915 352.643915 0 0 0-124.211832 475.196068zM509.370353 269.697768m-132.585663 0a132.585663 132.585663 0 1 1 265.171326 0 132.585663 132.585663 0 1 1-265.171326 0Z"  horiz-adv-x="1056" />

    
    <glyph glyph-name="lianxi" unicode="&#58895;" d="M520.055451-87.040082c-46.796706 0-81.715037 39.799387-115.30217 78.30171-15.940235 18.329563-37.887924 43.38338-49.902833 47.445239-91.135818 30.754072-169.266861 85.674495-225.757416 158.651416-58.299617 75.195583-89.121955 163.839672-89.121955 256.44322 0 60.00628 12.834108 118.374163 38.229257 173.158054a439.499921 439.499921 0 0 0 103.765126 140.560785A482.746768 482.746768 0 0 0 334.848354 861.659887 514.900304 514.900304 0 0 0 521.250115 895.997952c64.511871 0 127.282945-11.537044 186.40176-34.338065a484.86303 484.86303 0 0 0 152.848761-94.139545 441.308984 441.308984 0 0 0 103.765126-140.560785 408.609316 408.609316 0 0 0 38.229257-173.158054c0-93.047281-31.061271-182.066836-89.838754-257.398952-57.207352-73.113454-135.884528-127.897344-227.566478-158.412483-11.741843-3.925325-33.791932-28.876742-50.005233-47.103906-33.826066-38.36579-68.846796-77.926244-115.029103-77.926244z m1.058131 911.870176c-225.620882 0-409.189582-166.399667-409.189582-371.028591 0-154.145825 107.007786-293.785012 266.205334-347.715571 30.481006-10.342379 55.056957-38.399923 81.100638-68.232397 13.17544-15.086903 26.86288-30.788205 39.458055-41.471917 13.448506-11.400511 19.797294-12.253842 21.367424-12.253842 1.058131 0 7.304519 0.614399 21.23089 12.287975 12.697575 10.649579 26.385014 26.248481 39.696988 41.301251 26.146081 29.627674 50.995098 57.685218 81.237171 67.754531 160.358079 53.486826 268.082664 193.467346 268.082663 348.43237 0 204.526524-183.534566 370.926191-409.189581 370.926191zM521.215982 220.159304c-129.84294 0-235.519529 103.696859-235.519529 231.150471 0 19.421828 15.974368 35.088996 35.771661 35.088996 19.797294 0 35.737529-15.667169 35.737529-35.088996 0-88.746489 73.625453-161.006611 164.044472-161.006612s164.044472 72.260122 164.044472 161.006612c0 19.421828 15.940235 35.088996 35.737528 35.088996 19.797294 0 35.737529-15.667169 35.737529-35.088996 0-127.453612-105.676589-231.150471-235.519529-231.150471z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="my" unicode="&#58896;" d="M475.7504 871.68h169.984c47.5136 0 86.016-38.5024 86.016-85.9648v-169.984c0-139.264-113.8688-257.1776-253.0816-259.7376a257.8432 257.8432 0 0 0-262.6048 262.656C218.624 757.76 336.5376 871.68 475.7504 871.68z m94.6688-940.032a273.92 273.92 0 0 0-80.5376 194.4064 273.3568 273.3568 0 0 0 69.7344 183.04 903.424 903.424 0 0 1-85.7088 3.8912c-476.9792 0-472.2176-332.1856-472.2176-332.1856-4.6592-29.7984 15.7696-54.5792 43.264-54.5792H576a275.6608 275.6608 0 0 0-5.5808 5.376zM964.4032 99.6352l35.0208 21.9136a15.36 15.36 0 0 1 6.8096 16.4864l-17.1008 75.1104a15.36 15.36 0 0 1-13.312 11.8784l-41.1136 4.608a15.4624 15.4624 0 0 0-10.3424 5.6832l-6.8608 8.6528a15.4112 15.4112 0 0 0-3.2768 11.3664l4.7616 40.96a15.36 15.36 0 0 1-8.6528 15.6672l-69.4272 33.4336a15.36 15.36 0 0 1-17.5616-3.0208l-29.184-29.2352a15.36 15.36 0 0 0-10.9056-4.5568h-11.008a15.36 15.36 0 0 0-10.9056 4.5568l-29.184 29.2352a15.36 15.36 0 0 1-17.5616 3.0208l-69.4784-33.4336a15.36 15.36 0 0 1-8.6016-15.616l4.7104-41.0624a15.36 15.36 0 0 0-3.2768-11.3664l-6.8608-8.6016a15.36 15.36 0 0 0-10.3424-5.6832l-41.1136-4.608a15.36 15.36 0 0 1-13.312-11.8784l-17.1008-75.1104a15.36 15.36 0 0 1 6.8096-16.4864l35.0208-21.9136a15.36 15.36 0 0 0 6.8096-9.6256l2.4576-10.752a15.4112 15.4112 0 0 0-1.9456-11.6736l-22.0672-34.9184a15.36 15.36 0 0 1 1.024-17.8176l48.0768-60.2624a15.36 15.36 0 0 1 17.1008-4.9664l39.0144 13.7216a15.4112 15.4112 0 0 0 11.776-0.6144l9.9328-4.7616a15.36 15.36 0 0 0 7.8336-8.8576l13.568-39.0144a15.36 15.36 0 0 1 14.592-10.3424h77.056a15.36 15.36 0 0 1 14.5408 10.3424l13.568 39.0144a15.4112 15.4112 0 0 0 7.8848 8.8576l9.9328 4.7616a15.36 15.36 0 0 0 11.776 0.6144l38.9632-13.7216a15.36 15.36 0 0 1 17.152 4.9664l48.128 60.2624a15.36 15.36 0 0 1 0.9728 17.8176l-22.016 34.9184a15.36 15.36 0 0 0-2.048 11.6736l2.4576 10.752a15.36 15.36 0 0 0 6.8096 9.6256z m-174.2336-47.9232a74.3424 74.3424 0 0 0-25.088 146.432 74.2912 74.2912 0 1 0 25.088-146.432z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="api" unicode="&#58890;" d="M660.8384 802.9184l-14.5408 8.192-385.7408-211.7632a70.4512 70.4512 0 0 1-36.5568-61.7984v-203.008l171.008-100.352V432.5376c0 25.088 13.312 48.3328 34.9696 61.0304l381.44 222.4128 103.7312-59.904c21.8112-12.544 35.328-35.9424 35.328-61.184v-420.352c0-25.2928-13.5168-48.5376-35.328-61.2352L550.912-96.768a70.8608 70.8608 0 0 0-70.6048 0l-364.032 210.176a70.656 70.656 0 0 0-35.328 61.184V594.944c0 25.2928 13.4656 48.5376 35.328 61.2352L480.256 866.304a70.8608 70.8608 0 0 0 70.6048 0l109.9264-63.3856z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="favicon" unicode="&#58891;" d="M877.177692 176.567184l-1.093879 222.24601 135.79186-110.142286zM875.518014 290.028827l-1.093879 110.142286 135.79186-110.142286zM129.077706 269.660048a392.136714 380.179487 90 1 1 760.358974 0 392.136714 380.179487 90 1 1-760.358974 0ZM0 662.173962h504.919398a392.853393 392.853393 0 0 0 392.815673-392.853394h-504.881678A392.853393 392.853393 0 0 0 0 662.173962zM275.431155 896l409.412456-242.313029a435.17519 435.17519 0 0 0 153.143042-586.319074l-478.025065 282.937428a352.643915 352.643915 0 0 0-124.211832 475.196068zM509.370353 269.697768m-132.585663 0a132.585663 132.585663 0 1 1 265.171326 0 132.585663 132.585663 0 1 1-265.171326 0Z"  horiz-adv-x="1056" />

    
    <glyph glyph-name="tousu" unicode="&#58892;" d="M921.6 376.866133c-20.48 0-34.133333-13.653333-34.133333-34.133333v-307.2c0-40.96-27.306667-68.266667-68.266667-68.266667H136.533333c-40.96 0-68.266667 27.306667-68.266666 68.266667v682.666667c0 40.96 27.306667 68.266667 68.266666 68.266666h307.2c20.48 0 34.133333 13.653333 34.133334 34.133334s-13.653333 34.133333-34.133334 34.133333H136.533333c-75.093333 0-136.533333-61.44-136.533333-136.533333v-682.666667c0-75.093333 61.44-136.533333 136.533333-136.533333h682.666667c75.093333 0 136.533333 61.44 136.533333 136.533333v307.2c0 20.48-13.653333 34.133333-34.133333 34.133333zM996.693333 779.639467l-95.573333 95.573333c-27.306667 27.306667-68.266667 27.306667-95.573333 0l-409.6-409.6c-13.653333-6.826667-20.48-27.306667-20.48-40.96l-6.826667-177.493333 177.493333 6.826666c13.653333 0 34.133333 6.826667 47.786667 20.48l409.6 409.6c13.653333 13.653333 20.48 27.306667 20.48 47.786667-6.826667 13.653333-13.653333 34.133333-27.306667 47.786667z m-122.88 68.266666l-27.306666-27.306666 27.306666 27.306666z m-334.506666-525.653333l-95.573334-6.826667 6.826667 102.4 409.6 409.6 95.573333-95.573333-416.426666-409.6z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="huidaodingbu" unicode="&#58893;" d="M276.099657 428.8512a590.613943 590.613943 0 0 0 219.428572 460.653714 25.161143 25.161143 0 0 0 35.6352-2.633143l1.930971-2.018742 10.005943-9.333029a661.035886 661.035886 0 0 0 88.444343-101.141943 608.343771 608.343771 0 0 0 95.232-202.927543c13.341257-52.136229 19.485257-105.852343 18.285714-159.626971 1.170286-1.111771 2.194286-2.311314 3.130514-3.598629 74.459429-101.931886 93.505829-198.012343 54.330515-285.169371a24.927086 24.927086 0 0 0-37.098058-10.0352l-0.4096 0.380343-71.562971 52.136228c-10.122971-25.863314-21.767314-52.077714-34.962286-78.584685a24.663771 24.663771 0 0 0-7.840914-9.216l0.175543-41.106286a24.7808 24.7808 0 0 0-24.429714-25.044114l-0.526629 0.292571-20.011886 0.058514a130.516114 130.516114 0 0 0-40.579657-94.471314c-10.561829-10.4448-22.528-19.426743-35.518171-26.624-4.388571-2.4576-8.923429-4.622629-13.575315-6.524343a59.392 59.392 0 0 0-5.763657-2.018743l-1.170285-0.351085-1.170286-0.292572-1.053257-0.234057a20.2752 20.2752 0 0 0-12.434286 0.760686l-1.462857 0.497371-0.760686 0.321829a124.138057 124.138057 0 0 0-81.568914 130.018743h-3.393829a25.453714 25.453714 0 0 0-25.248914 24.663771v0.643657l-0.234057 36.571429-6.114743-0.058515a25.453714 25.453714 0 0 0-22.557257 15.184458l-0.292572 0.292571c-11.995429 28.291657-22.528 56.1152-31.656228 83.470629l-72.265143-52.370286-0.4096-0.380343a25.278171 25.278171 0 0 0-37.244343 10.4448c-40.082286 87.595886-22.001371 183.383771 51.2 284.496457a24.634514 24.634514 0 0 0 13.5168 9.333029v3.540114z m462.116572-97.4848l-0.117029-0.702171a732.832914 732.832914 0 0 0-27.355429-116.033829c0.292571-0.292571 0.585143-0.585143 1.082515-0.702171l0.4096-0.380343 54.652343-39.965257 0.468114 1.960228a215.215543 215.215543 0 0 1-29.257143 155.765029l0.117029 0.058514z m-236.544-397.604571l0.731428-0.4096 0.643657 0.292571 1.375086 0.702171 0.702171 0.4096c9.069714 5.002971 17.349486 11.234743 24.722286 18.519772a81.334857 81.334857 0 0 1 25.834057 58.806857l-94.559085 0.555886a73.9328 73.9328 0 0 1 40.462628-78.994286l0.087772 0.087771z m-69.485715 139.732114l0.087772-10.532572 168.053028-0.848457v10.532572l-10.415543-0.175543-27.209142-0.292572-18.197943-0.2048-29.052343-0.292571h-0.877714l-82.388115 1.813943zM509.893486 834.267429C314.368 651.410286 274.958629 417.792 391.811657 128l1.316572-3.218286 121.621942-3.013485 4.593372 0.029257 29.198628 0.4096 26.858058 0.380343 24.517485 0.351085 20.0704 0.380343 0.702172 1.462857a630.286629 630.286629 0 0 1 58.514285 430.665143l-1.024 4.096a557.787429 557.787429 0 0 1-87.420342 186.046172 607.524571 607.524571 0 0 1-78.204343 90.024228l-0.6144 0.643657-2.048-1.960228z m-78.204343-275.192686a106.847086 106.847086 0 1 0 0.760686-150.206172 106.261943 106.261943 0 0 0-0.848458 150.206172h0.087772z m35.693714-35.781486a56.349257 56.349257 0 1 1 79.286857-0.4096 56.027429 56.027429 0 0 1-79.345371 0.526629l0.058514-0.117029zM280.693029 352.109714l-0.497372-0.936228a220.247771 220.247771 0 0 1-34.377143-167.467886l0.526629-1.930971 54.184228 39.380114 0.380343 0.380343a24.751543 24.751543 0 0 0 5.061486 2.720914 835.291429 835.291429 0 0 0-25.278171 127.7952v0.058514z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="app" unicode="&#58894;" d="M71.399424 832.512h283.648c39.0144-0.512 70.4-32.3584 70.4-71.3728v-283.648c0-39.6288-32.1536-71.8336-71.8336-71.8336h-283.648A71.8336 71.8336 0 0 0 0.026624 479.3856v283.648A71.3728 71.3728 0 0 0 71.399424 832.512zM71.399424 312.576h282.624c47.616 0 71.424-23.808 71.424-71.3728v-282.624c0-47.616-23.808-71.424-71.3728-71.424h-282.624C23.783424-112.8448 0.026624-89.0368 0.026624-41.472v282.624c0 47.616 23.808 71.424 71.3728 71.424zM591.386624 312.576h299.1616a54.784 54.784 0 0 0 54.784-54.8352v-315.7504a54.784 54.784 0 0 0-54.784-54.784h-315.7504a54.784 54.784 0 0 0-54.784 54.784v299.2128c0 39.424 31.8976 71.3728 71.3216 71.3728zM482.330624 670.3104L682.164224 870.1952c33.6384 33.6384 67.2768 33.6384 100.9664 0l199.8336-199.8848c33.6384-33.6384 33.6384-67.2768 0-100.9152l-199.8336-199.8848c-33.6896-33.6384-67.328-33.6384-100.9664 0L482.330624 569.3952c-33.6384 33.6384-33.6384 67.2768 0 100.9152z"  horiz-adv-x="1024" />

    


  </font>
 </defs></svg>
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/static/icons/svg/favicon.svg
+++ b/static/icons/svg/favicon.svg
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="28.002" height="27" viewBox="0 0 28.002 27"><defs><style>.cls-2{fill:#fff}</style></defs><g transform="translate(-114 -87.064)"><path d="M137.255 106.137l-.029-5.892 3.6 2.92z" fill="#c0dff9"/><path class="cls-2" d="M137.211 103.129l-.029-2.92 3.6 2.92z"/><ellipse class="cls-2" cx="10.079" cy="10.396" rx="10.079" ry="10.396" transform="translate(117.422 93.273)"/><path d="M114 93.263h13.386a10.415 10.415 0 0 1 10.414 10.415h-13.385A10.415 10.415 0 0 1 114 93.263z" fill="#f1f5f8" opacity=".8"/><path class="cls-2" d="M121.302 87.064l10.854 6.424a11.537 11.537 0 0 1 4.06 15.544l-12.673-7.501a9.349 9.349 0 0 1-3.293-12.598z"/><circle cx="3.515" cy="3.515" r="3.515" transform="translate(123.989 100.153)" fill="#0186fa"/></g></svg>
--- a/static/icons/svg/jinggao.svg
+++ b/static/icons/svg/jinggao.svg
@@ -0,0 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="118px" height="114px" viewBox="0 0 118 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>编组</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.200000003">
        <g id="控制台-用户中心-实名认证-个人填写资料" transform="translate(-1425.000000, -196.000000)" fill="#FF0707" fill-rule="nonzero">
            <g id="编组" transform="translate(650.000000, 154.000000)">
                <g transform="translate(775.000000, 42.000000)" id="形状">
                    <path d="M65.2086349,95.8501677 C63.4976042,97.6936339 61.4280036,98.6104186 59.0227262,98.6104186 C56.6171779,98.6104186 54.4977269,97.6936339 52.7776203,95.8501677 C50.9984518,93.9973866 50.1451718,91.7835097 50.1451718,89.140422 C50.1451718,86.5558433 50.998452,84.2690486 52.7776203,82.4305308 C54.4977269,80.5141467 56.6171779,79.5925591 59.0227262,79.5925591 C61.4280036,79.5925591 63.493134,80.5140012 65.2086349,82.4305308 C66.9922736,84.2690486 67.8455537,86.5558433 67.8455537,89.140422 C67.8455537,91.7835095 66.9922736,93.9973866 65.2086349,95.8501677 Z M52.6687082,32.5605906 C54.3252828,30.6538124 56.4539452,29.668913 59.0227263,29.668913 C61.6005834,29.668913 63.72464,30.5905006 65.3858203,32.5605906 C66.9922736,34.4672232 67.8455538,36.8713268 67.8455538,39.7678074 C67.8455538,42.2254713 64.4053406,60.5116788 63.2116425,73.8093495 L54.9016771,73.8093495 C53.925803,60.5067303 50.1453073,42.2205228 50.1453073,39.7678074 C50.1453073,36.9344931 51.0031932,34.5305352 52.6687082,32.5605906 Z M115.577496,94.7383535 L69.2798339,7.9398512 C63.6111223,-2.64661707 54.3797389,-2.64661707 48.7157683,7.9398512 L2.4179704,94.7383535 C-3.24613558,105.320019 1.38317009,114 12.7295341,114 L105.320524,114 C116.607962,114 121.250678,105.320164 115.577496,94.7383535 Z"></path>
                </g>
            </g>
        </g>
    </g>
 </svg>
--- a/static/icons/svg/shenfenzheng.svg
+++ b/static/icons/svg/shenfenzheng.svg
@@ -0,0 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="148px" height="95px" viewBox="0 0 148 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>编组</title>
    <defs>
        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
            <stop stop-color="#DBECF1" offset="0%"></stop>
            <stop stop-color="#FAECF5" offset="52.229021%"></stop>
            <stop stop-color="#DBECF0" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="控制台-用户中心-实名认证-选择身份" transform="translate(-911.000000, -202.000000)" fill-rule="nonzero">
            <g id="编组-5" transform="translate(885.000000, 172.000000)">
                <g id="编组" transform="translate(26.000000, 30.000000)">
                    <path d="M148,90.1354109 C148,92.8220493 145.817448,95 143.125134,95 L4.87365176,95 C2.18181187,95 0,92.8215763 0,90.1354109 L0,4.86337792 C0,2.1774085 2.1820082,0 4.87365176,0 L143.127562,0 C144.420023,0 145.659531,0.512428746 146.573325,1.42452387 C147.487119,2.33661898 148,3.5736413 148,4.86337792 L148,90.1354109 L148,90.1354109 Z" id="路径" fill="url(#linearGradient-1)"></path>
                    <path d="M13,14 L24,14 L24,19.5205733 L13,19.5205733 L13,14 Z M13,27.7397134 L24,27.7397134 L24,33.2602866 L13,33.2602866 L13,27.7397134 Z M13,41.4794266 L24,41.4794266 L24,47 L13,47 L13,41.4794266 Z" id="形状" fill="#92B4C5"></path>
                    <path d="M128.074209,32.5788989 C128.242384,32.6755239 128.40935,32.7794874 128.576316,32.8944589 L129.078423,33.2381501 L129.088102,33.8472542 C129.11593,35.6121885 128.906618,37.1080405 128.448067,38.256532 C128.025813,39.3096217 127.403926,40.0960755 126.566677,40.5718616 C125.996816,42.6278938 125.331372,44.5298152 124.380393,46.1284079 C123.292696,47.9691743 121.854128,49.386748 119.817872,50.1475166 C118.909239,50.4838693 116.586237,50.6392031 114.350347,50.6061794 C112.194311,50.5743788 110.029805,50.359113 109.170778,49.957936 C107.322056,49.0980962 106.022626,47.649945 105.03898,45.8495409 C104.195682,44.3096572 103.594363,42.5178147 103.069268,40.6256781 C102.201772,40.1694615 101.553267,39.3866772 101.116494,38.3262488 C100.637375,37.1679725 100.420803,35.6476584 100.448631,33.8472542 L100.45589,33.235704 L100.959208,32.8944589 C101.083947,32.8070284 101.212313,32.7250064 101.343955,32.6486156 C100.776513,25.5754246 100.991875,22.9592123 103.588314,19.9711774 C108.655362,15.7759421 120.271583,15.9227142 125.405176,19.7253342 C128.906618,23.064399 129.149807,26.8046408 128.074209,32.5788989 L128.074209,32.5788989 Z M117.431955,53.0364803 L117.506969,54.6583118 L116.559619,56.2422272 L117.880827,65.0314284 L123.308425,53.2444075 L131.568391,52.9582019 C135.834488,57.0384657 138.571275,66.6508137 137.898572,72.9192045 L91.852313,72.9192045 C91.9660433,67.4152516 92.967838,58.0108307 98.3905963,53.2297303 L105.854451,53.299447 L112.842816,64.9592655 L114.157974,56.2422272 L113.206995,54.6583118 L113.280798,53.0364803 C115.092014,52.936186 115.623159,52.936186 117.431955,53.0364803 L117.431955,53.0364803 Z M123.615738,30.0678732 C120.330868,30.7173397 115.444094,31.2848583 111.583313,29.0893928 C110.09635,28.2430071 107.920955,29.9761407 106.141196,29.7987911 C105.574368,30.9331505 105.169461,32.1430084 104.938559,33.3922608 L104.738926,34.4539122 L103.682686,34.3499486 C103.475143,34.3325255 103.266281,34.3587621 103.069268,34.4270039 C102.971696,34.4589505 102.876311,34.4973574 102.783732,34.5419754 C102.80914,35.7173752 102.973686,36.6934095 103.27495,37.4236005 C103.539918,38.0657283 103.907727,38.4840288 104.390475,38.6356933 L105.007523,38.8301663 L105.175699,39.4563938 C105.695954,41.3962314 106.274285,43.2247669 107.089756,44.7132804 C107.845941,46.0966073 108.813859,47.1949517 110.152005,47.8175099 C110.714607,48.0780303 112.507674,48.2260256 114.383015,48.2541568 C116.374505,48.2847344 118.363576,48.1771015 119.02055,47.9337044 C120.497834,47.3796398 121.561333,46.3143191 122.385273,44.9199844 C123.270918,43.4180167 123.904904,41.513649 124.459037,39.4258163 L124.616323,38.8289431 L125.203123,38.6210161 C125.667724,38.4546743 126.028273,38.0278123 126.287191,37.3783459 C126.575146,36.6542702 126.734853,35.6941363 126.76268,34.5407523 C126.679211,34.500225 126.59311,34.4654901 126.504972,34.4367887 C126.312841,34.3683333 126.109641,34.3372094 125.906073,34.3450562 L124.876451,34.4123267 L124.687707,33.3885915 C124.473218,32.2396674 124.112918,31.1235388 123.615738,30.0678732 L123.615738,30.0678732 Z M28,14 L59.8190807,14 L59.8190807,19.5247456 L28,19.5247456 L28,14 Z M28,27.7500975 L59.8190807,27.7500975 L59.8190807,33.2748431 L28,33.2748431 L28,27.7500975 Z M28,41.500195 L59.8190807,41.500195 L59.8190807,47.0249407 L28,47.0249407 L28,41.500195 Z M44.8804826,77.4728082 L92.7306982,77.4728082 L92.7306982,83 L44.8804826,83 L44.8804826,77.4728082 Z" id="形状" fill="#D5DAE3"></path>
                    <polygon id="路径" fill="#92B4C5" points="14 78 42 78 42 83 14 83"></polygon>
                </g>
            </g>
        </g>
    </g>
 </svg>
--- a/static/icons/svg/yinyezhizhao.svg
+++ b/static/icons/svg/yinyezhizhao.svg
@@ -0,0 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="148px" height="95px" viewBox="0 0 148 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>编组 2</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="控制台-用户中心-实名认证-选择身份" transform="translate(-1131.000000, -206.000000)">
            <g id="编组-3" transform="translate(1105.000000, 172.000000)">
                <g id="编组-2" transform="translate(26.000000, 34.000000)">
                    <path d="M148,90.1354109 C148,92.8220493 145.817448,95 143.125134,95 L4.87365176,95 C2.18181187,95 0,92.8215763 0,90.1354109 L0,4.86337792 C0,2.1774085 2.1820082,0 4.87365176,0 L143.127562,0 C144.420023,0 145.659531,0.512428746 146.573325,1.42452387 C147.487119,2.33661898 148,3.5736413 148,4.86337792 L148,90.1354109 L148,90.1354109 Z" id="路径" fill="#F3F0E1" fill-rule="nonzero"></path>
                    <g id="编组" transform="translate(63.000000, 15.000000)" fill-rule="nonzero">
                        <path d="M21,21.5616438 C21,24.0273973 18.8175676,26 16.25,26 L6.75000001,26 C4.18243244,26 2,24.0273973 2,21.5616438 L2,21.4383562 C2,18.9726028 4.18243244,17 6.75000001,17 L16.25,17 C18.8175676,17 21,18.9726027 21,21.5616438 Z" id="路径" fill="#D74515"></path>
                        <path d="M0,11.5 C0,17.8888889 5.11111111,23 11.5,23 C17.8888889,23 23,17.8888889 23,11.5 C23,5.11111114 17.8888889,0 11.5,0 C5.11111111,0 0,5.2388889 0,11.5" id="路径" fill="#E7B120"></path>
                        <path d="M2,11.5 C2,16.75 6.24999999,21 11.5,21 C16.75,21 21,16.75 21,11.5 C21,6.25000002 16.75,2 11.5,2 C6.24999999,2 2,6.24999999 2,11.5" id="路径" fill="#E94915"></path>
                        <path d="M12.5106383,5.3181818 L11.7446808,4.9090909 L10.9787234,5.3181818 L11.106383,4.5 L10.4680851,3.95454545 L11.2340425,3.8181818 L11.6170213,3 L12,3.8181818 L13.0212766,3.8181818 L12.3829787,4.36363635 L12.5106383,5.3181818 L12.5106383,5.3181818 Z M7.53191488,6.4090909 L6.89361702,6.13636362 L6.38297871,6.4090909 L6.51063828,5.72727272 L6,5.3181818 L6.63829787,5.18181817 L6.89361702,4.5 L7.14893617,5.18181817 L7.9148936,5.3181818 L7.40425532,5.72727272 L7.53191488,6.4090909 L7.53191488,6.4090909 Z M17.6170213,6.4090909 L17.106383,6.13636362 L16.5957447,6.4090909 L16.7234043,5.72727272 L16.212766,5.18181817 L16.8510638,5.04545452 L17.106383,4.36363635 L17.3617021,5.04545452 L18,5.18181817 L17.4893617,5.72727272 L17.6170213,6.4090909 L17.6170213,6.4090909 Z M14.4255319,9 L13.9148936,8.72727272 L13.4042553,9 L13.5319149,8.3181818 L13.0212766,7.77272725 L13.6595745,7.63636362 L13.9148936,6.95454545 L14.1702128,7.63636362 L14.8085106,7.77272725 L14.2978723,8.3181818 L14.4255319,9 L14.4255319,9 Z M10.212766,9 L9.70212766,8.59090907 L9.06382977,9 L9.19148936,8.3181818 L8.68085105,7.77272725 L9.31914892,7.63636362 L9.57446807,6.95454545 L9.82978722,7.63636362 L10.4680851,7.77272725 L10.0851064,8.3181818 L10.212766,9 Z" id="形状" fill="#EDB623"></path>
                        <polygon id="路径" fill="#E19B19" points="4 17 19 17 18.5 15 4.75000001 15"></polygon>
                        <polygon id="路径" fill="#E5B522" points="7 14.8888889 7.88607594 13 16.1139241 13 17 15 7 14.8888889"></polygon>
                    </g>
                    <text id="营业执照" font-family="MicrosoftYaHei, Microsoft YaHei" font-size="16" font-weight="normal" fill="#AD9B58">
                        <tspan x="42" y="64">营业执照</tspan>
                    </text>
                    <path d="M141,84.7498853 C141,87.0971588 139.023906,89 136.58627,89 L11.4126306,89 C8.97542426,89 7,87.0967456 7,84.7498853 L7,10.2490565 C7,7.90236743 8.97560202,6 11.4126306,6 L136.588468,6 C137.75867,6 138.880927,6.4477009 139.708281,7.24458401 C140.535635,8.04146711 141,9.12223398 141,10.2490565 L141,84.7498853 L141,84.7498853 Z" id="路径" stroke="#D8C686" stroke-width="2" fill-rule="nonzero"></path>
                </g>
            </g>
        </g>
    </g>
 </svg>
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN
--- a/BIN
+++ b/BIN