diff --git a/src/assets/imgs/home_tool_ic_dmxs.png b/src/assets/imgs/home_tool_ic_dmxs.png
new file mode 100644
index 0000000000000000000000000000000000000000..f01d5a67950a7125bfa3e82c9c49455b71eb4ec3
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_dmxs.png differ
diff --git a/src/assets/imgs/home_tool_ic_jxxs.png b/src/assets/imgs/home_tool_ic_jxxs.png
new file mode 100644
index 0000000000000000000000000000000000000000..200a7473fb59a3c373234bd9605f55cdd147fd4f
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_jxxs.png differ
diff --git a/src/assets/imgs/list_ic_hot.png b/src/assets/imgs/list_ic_hot.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b5592c27971a6bdd0a56970e64f6fc7ac3e5466
Binary files /dev/null and b/src/assets/imgs/list_ic_hot.png differ
diff --git a/src/assets/imgs/list_ic_topone.png b/src/assets/imgs/list_ic_topone.png
new file mode 100644
index 0000000000000000000000000000000000000000..256716532fb40ab475cd03e0a3482e075522a8cf
Binary files /dev/null and b/src/assets/imgs/list_ic_topone.png differ
diff --git a/src/assets/imgs/list_ic_topthree.png b/src/assets/imgs/list_ic_topthree.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c434e8e80e80570613974bf58d6e4cc739e0814
Binary files /dev/null and b/src/assets/imgs/list_ic_topthree.png differ
diff --git a/src/assets/imgs/list_ic_toptwo.png b/src/assets/imgs/list_ic_toptwo.png
new file mode 100644
index 0000000000000000000000000000000000000000..099d86c00c983317b68b40edec545c743d9bb059
Binary files /dev/null and b/src/assets/imgs/list_ic_toptwo.png differ
diff --git a/src/assets/imgs/progress_ic_bushudata.png b/src/assets/imgs/progress_ic_bushudata.png
new file mode 100644
index 0000000000000000000000000000000000000000..903a93227c4c6ae4622a95b8332b6e548de00420
Binary files /dev/null and b/src/assets/imgs/progress_ic_bushudata.png differ
diff --git a/src/assets/imgs/progress_ic_jingxiang.png b/src/assets/imgs/progress_ic_jingxiang.png
new file mode 100644
index 0000000000000000000000000000000000000000..635a81c03bd3ba60e2efcccd0cdee0035748470c
Binary files /dev/null and b/src/assets/imgs/progress_ic_jingxiang.png differ
diff --git a/src/assets/imgs/progress_ic_xinxitx.png b/src/assets/imgs/progress_ic_xinxitx.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcd45cec07ba9c1b58ed1360187c461553b72651
Binary files /dev/null and b/src/assets/imgs/progress_ic_xinxitx.png differ
diff --git a/src/components/app-build-step.vue b/src/components/app-build-step.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51422948d78d09353e79c38505a5f577d93b3a11
--- /dev/null
+++ b/src/components/app-build-step.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="app_build_step" v-show="isActive">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "appBuildStep",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    step: {
+      type: Number,
+      required: true,
+    },
+    activeIcon: {
+      type: String,
+      default: () => "",
+    },
+  },
+  data: () => ({}),
+  computed: {
+    isActive() {
+      return this.$parent.activeStep === this.step;
+    },
+  },
+  mounted() {
+    console.log();
+  },
+};
+</script>
diff --git a/src/components/app-build-steps.vue b/src/components/app-build-steps.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a7cd2d327282dc15e17d5ed6067d63384b18fedc
--- /dev/null
+++ b/src/components/app-build-steps.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="app_build_steps">
+    <ul class="steps_header">
+      <template v-for="(item, index) in steps">
+        <li
+          class="step_line left"
+          :class="{
+            active: item.step <= activeStep,
+          }"
+          v-if="item.step > 0"
+          :key="'line_left_' + index"
+        ></li>
+        <li
+          class="step_item"
+          :class="{
+            active: item.step <= activeStep,
+            current: item.step === activeStep,
+          }"
+          :key="'step_' + index"
+        >
+          <div class="step_icon_active" v-if="item.step <= activeStep">
+            <div class="icon_container">
+              <img :src="item.activeIcon" />
+            </div>
+          </div>
+          <div class="step_icon" v-else></div>
+          <div class="step_info">
+            <p class="step_state">
+              <span v-show="item.step > activeStep">
+                待进行
+              </span>
+              <span v-show="item.step === activeStep">
+                进行中
+              </span>
+              <span v-show="item.step < activeStep">
+                已完成
+              </span>
+            </p>
+            <p class="step_name" v-text="item.title"></p>
+          </div>
+        </li>
+        <li
+          class="step_line right"
+          :class="{
+            active: item.step <= activeStep,
+          }"
+          v-if="item.step < steps.length - 1"
+          :key="'line_right_' + index"
+        ></li>
+      </template>
+    </ul>
+
+    <div class="steps_container">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "appBuildSteps",
+  props: {
+    activeStep: {
+      type: Number,
+      default: () => "",
+    },
+  },
+  data: () => ({
+    steps: [],
+  }),
+  computed: {},
+  methods: {
+    getSteps() {
+      this.steps = this.$slots.default
+        .filter(
+          (vnode) =>
+            vnode.tag &&
+            vnode.componentOptions &&
+            vnode.componentOptions.Ctor.options.name === "appBuildStep"
+        )
+        .map((vnode) => vnode.componentInstance);
+    },
+  },
+  mounted() {
+    this.getSteps();
+  },
+};
+</script>
+
+<style scoped>
+.steps_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+.steps_header > .step_line {
+  flex-grow: 1;
+  height: 4px;
+  background-color: #e3e5ef;
+}
+.steps_header > .step_line.right {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.steps_header > .step_line.active {
+  background-color: #515fe7;
+}
+.steps_header > .step_item {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: #bcc1d0;
+}
+.steps_header > .step_item > .step_icon {
+  width: 30px;
+  height: 30px;
+  background-color: #bcc1d0;
+  border: 7px solid #e3e5ef;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.steps_header > .step_item > .step_icon_active {
+  padding: 10px;
+  background-color: #515fe7;
+  border-radius: 50%;
+}
+.steps_header > .step_item > .step_icon_active > .icon_container {
+  width: 60px;
+  height: 60px;
+  border: 3px solid #8390ee;
+  box-sizing: border-box;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.steps_header > .step_item > .step_info {
+  margin: 0 15px;
+}
+.steps_header > .step_item .step_state {
+  font-size: 18px;
+  line-height: 34px;
+}
+.steps_header > .step_item .step_name {
+  font-size: 14px;
+  line-height: 24px;
+}
+.steps_header > .step_item.active .step_state {
+  color: #242c43;
+}
+.steps_header > .step_item.active .step_name {
+  color: #8890a7;
+}
+
+.steps_container {
+  border-top: 2px solid #f4f7fc;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/components/infoList.vue b/src/components/infoList.vue
index e943ea626bd9366e75ae2a5a6f5fe152de681168..dcf922b2b7f6a8daf07b2a39e0560703966b25d0 100644
--- a/src/components/infoList.vue
+++ b/src/components/infoList.vue
@@ -6,8 +6,11 @@
         {{ item.title }}
       </p>
       <p v-if="!(item.prop && item.prop == 'title')">
-        <span v-html="item.info" style="white-space:pre-wrap;"></span>
-        <span v-if="item.type && item.type == 'down'" class="filebtn"
+        <span v-if="item.type == 'url'" style="white-space:pre-wrap;"
+          >访问地址: <a :href="item.info" target="_blank">{{ item.info }}</a></span
+        >
+        <span v-else v-html="item.info" style="white-space:pre-wrap;"></span>
+        <span v-if="item.type && item.type == 'down'" class="filebtn" @click="download(item.url)"
           >下载文件</span
         >
       </p>
@@ -25,12 +28,20 @@ export default {
   },
   props: ["list_arr"],
   mounted() {
-    console.log(this.$solts);
+    console.log(this.$slots);
   },
+  methods:{
+      download(val){
+          this.$emit('download',val)
+      }
+  }
 };
 </script>
 
 <style scoped>
+a {
+  text-decoration: none;
+}
 .list p {
   line-height: 32px;
   color: #8890a7;
@@ -44,13 +55,13 @@ export default {
 .outlist .list:nth-last-of-type(1) {
   margin: 0;
 }
-.service_title {
+.list .service_title {
   font-size: 16px;
   font-weight: bold;
   color: #58617a;
   text-align: left;
   height: 40px;
-  line-height: 40px;
+  line-height: 34px;
   margin-top: -10px;
   margin-bottom: 20px;
   margin-left: -10px;
diff --git a/src/components/service-header.vue b/src/components/service-header.vue
index e7dd52ed315db643185571fa6ef5f6e15dae0942..25f2d4bec349f83184a9a1d49f662877eb23e843 100644
--- a/src/components/service-header.vue
+++ b/src/components/service-header.vue
@@ -4,11 +4,12 @@
     <div class="info">
       <p class="info_title">
         <span>{{ data.name }}</span>
-        <span class="bs" v-if="data.yydetail" @click="subevent(0)">一键部署</span>
+        <span class="bs" v-if="data.aqdetail" @click="subevent(0)">一键部署</span>
         <span class="info_fix" v-if="data.yydetail" @click="subevent(1)">我要编辑</span>
         <span class="right gap" v-if="data.yydetail">|</span>
         <span class="right underline" v-if="data.yydetail" @click="subevent(2)" title="申请下线至开发者应用">申请下线</span>
         <span class="right undersell" v-if="data.yydetail" @click="subevent(3)">申请下架</span>
+        <span class="right undersell undermy" v-if="data.bsdetail" @click="subevent(4)">申请密钥</span>
         <span class="info_fix" v-if="data.fixed">我要修改</span>
       </p>
       <div class="info_detail">
@@ -30,7 +31,7 @@
               :href="item.text"
               >{{ item.text }}</a
             >
-            <span v-else>{{ item.text }}</span>
+            <span v-else  :style="item.color ? { color: item.color } : {}">{{ item.text }}</span>
           </label>
         </p>
       </div>
@@ -52,13 +53,15 @@ export default {
   methods: {
       subevent(val){
           if(val == 0){
-              this.$emit('deploy')
+              this.$emit('deploy',this.data)
           }else if(val == 1){
               this.$emit('editapp')
           }else if(val == 2){
               this.$emit('unline',0)
           }else if(val == 3){
               this.$emit('unsell',1)
+          }else if(val == 4){
+              this.$emit('applymy',1)
           }
       }
   },
@@ -148,6 +151,10 @@ export default {
     cursor: pointer;
     text-align: center;
 }
+.undermy{
+    background-color: #515fe7;
+    color: #e6ebfe;
+}
 .info_detail {
   width: 100%;
   height: 96px;
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index cb62474673663d4de3ef423b640f5aa4bfc4dafe..2454bcbc90a43ad7b40cbb565c24435cdffd0d55 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -176,6 +176,18 @@
             >
               <div slot="reference" class="overlit">{{ scope.row[item.prop] }}</div>
             </el-popover>
+            <!-- 排名图标替换 -->
+            <span v-else-if="item.type === 'rank'"> 
+              <img src="../assets/imgs/list_ic_topone.png" alt="" v-if="scope.row[item.prop]==1"> 
+              <img src="../assets/imgs/list_ic_toptwo.png" alt="" v-if="scope.row[item.prop]==2"> 
+              <img src="../assets/imgs/list_ic_topthree.png" alt="" v-if="scope.row[item.prop]==3"> 
+              {{ [1,2,3].indexOf(scope.row[item.prop])!==-1?'':scope.row[item.prop] }}
+            </span>
+            <!-- 服务添加图标 -->
+            <span v-else-if="item.type === 'hot'" :style="scope.row['hot']?{marginLeft:'-12px'}:{}">
+              <img src="../assets/imgs/list_ic_hot.png" alt="" v-if="scope.row['hot']">
+              {{ scope.row[item.prop] }}
+            </span>
             <!-- others -->
             <span v-else>{{ scope.row[item.prop] }}</span>
           </template>
diff --git a/src/pages/app_build.vue b/src/pages/app_build.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e9ffda7f489356439682b5f13d10cec1a870041
--- /dev/null
+++ b/src/pages/app_build.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="app_build-container">
+    <div class="sevice_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
+        <el-breadcrumb-item>应用构建（镜像形式）</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <app-build-steps :active-step="step">
+      <app-build-step
+        title="上传应用镜像"
+        :step="0"
+        :active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
+      >
+        <h3 style="margin: 30px 0;">上传应用镜像</h3>
+        <div class="step_action">
+          <el-button type="primary" @click="nextStep">
+            下一步
+          </el-button>
+        </div>
+      </app-build-step>
+      <app-build-step
+        title="上传部署文件"
+        :step="1"
+        :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
+      >
+        <h3 style="margin: 30px 0;">上传部署文件</h3>
+        <div class="step_action">
+          <el-button type="primary" plain @click="preStep">
+            上一步
+          </el-button>
+          <el-button type="primary" @click="nextStep">
+            下一步
+          </el-button>
+        </div>
+      </app-build-step>
+      <app-build-step
+        title="应用基础信息填写"
+        :step="2"
+        :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
+      >
+        <h3 style="margin: 30px 0;">用基础信息填写</h3>
+        <div class="step_action">
+          <el-button type="primary" plain @click="preStep">
+            上一步
+          </el-button>
+          <el-button type="primary" @click="sunbmitAction">
+            提交
+          </el-button>
+        </div>
+      </app-build-step>
+    </app-build-steps>
+  </div>
+</template>
+
+<script>
+import appBuildSteps from "@/components/app-build-steps";
+import appBuildStep from "@/components/app-build-step";
+
+export default {
+  components: {
+    appBuildSteps,
+    appBuildStep,
+  },
+  data: () => ({
+    step: 0,
+  }),
+  methods: {
+    preStep() {
+      this.step--;
+    },
+    nextStep() {
+      this.step++;
+    },
+    sunbmitAction() {
+      console.log("submit action");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app_build-container {
+  max-width: 1200px;
+  margin: -157px auto 20px;
+}
+.app_build-container > .app_build_steps {
+  border-radius: 12px;
+  background-color: #fff;
+  padding: 30px;
+}
+.step_action {
+  text-align: right;
+}
+.step_action > .el-button {
+  min-width: 124px;
+  height: 44px;
+  margin-right: 30px;
+}
+.step_action > .el-button--primary {
+  color: #fff;
+  background-color: #0f2683;
+  border-color: #0f2683;
+}
+.step_action > .el-button--primary.is-plain {
+  color: #0f2683;
+  background-color: #e1e4fb;
+  border-color: #e1e4fb;
+}
+</style>
+
+<style>
+.app_build-container .sevice_breadcrumb {
+  padding: 0 20px;
+}
+.app_build-container .sevice_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
+  color: #626de9;
+}
+.app_build-container
+  .sevice_breadcrumb
+  > .el-breadcrumb
+  .el-breadcrumb__item:last-child
+  .el-breadcrumb__inner {
+  color: #b4c0f5;
+}
+</style>
diff --git a/src/pages/app_detail.vue b/src/pages/app_detail.vue
index 99b159bc8f6272e18428b1d3e47254c3c872d667..74325a95e4e864d61a4382105a25c1fc2ec4d7bc 100644
--- a/src/pages/app_detail.vue
+++ b/src/pages/app_detail.vue
@@ -149,6 +149,7 @@ export default {
         first: [],
         second: [],
         yydetail: true,
+        aqdetail: true,
       },
       now_service: 0,
       header_arr: [
diff --git a/src/pages/apply_app_detail.vue b/src/pages/apply_app_detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..316c943000334368bf28d209c994fcb608ca10fa
--- /dev/null
+++ b/src/pages/apply_app_detail.vue
@@ -0,0 +1,377 @@
+<template>
+  <div class="detail_contain">
+    <p class="now_page_title">我的应用  /  我部署的应用  /   <span>应用详情</span></p>
+    <div class="info_contain">
+      <service-header
+        :data="service_header_arr"
+        @applymy="applymy"
+        @deploy="deploy"
+      ></service-header>
+      <div class="type_box">
+        <div class="type_title">
+          <div
+            v-for="(item, index) in service_arr"
+            :key="index + 1000"
+            class="type_select"
+            @click="now_service = index"
+            :style="
+              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
+            "
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="type_box_select">
+          <info-list
+            :list_arr="
+              now_service == 0
+                ? list_arr
+                : servicead_arr
+            "
+          >
+            <div class="appcode" v-html="appcode" slot="app_code"></div>
+            <process-card :data="approval_arr3" slot="approval"></process-card>
+          </info-list>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import serviceHeader from "../components/service-header";
+import infoList from "../components/infoList";
+import tableUm from "../components/table-um";
+import processCard from "../components/process-card";
+import { getRole } from "../utils/common";
+export default {
+  props: {},
+  components: {
+    serviceHeader,
+    infoList,
+    tableUm,
+    processCard,
+  },
+  data() {
+    return {
+      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
+      approval_arr: [
+        {
+          title: "一级审批",
+          result: "审批通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "同意",
+            },
+          ],
+        },
+        {
+          title: "二级审批",
+          result: "审批通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "同意",
+            },
+          ],
+        },
+      ],
+      approval_arr1: [
+        {
+          title: "一级审批",
+          result: "审批通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "同意",
+            },
+          ],
+        },
+        {
+          title: "二级审批",
+          result: "审批未通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "不同意，驳回。",
+            },
+          ],
+        },
+      ],
+      approval_arr2: [
+        {
+          title: "一级审批",
+          result: "审批未通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "不同意，驳回。",
+            },
+          ],
+        },
+      ],
+      approval_arr3:[
+        {
+            title: "一级审批",
+            result: "审批中",
+        },
+      ],
+      service_arr: ["基本信息", "申请审批信息"],
+      service_header_arr: {
+        id:"",
+        name: "",
+        first: [],
+        second: [],
+        aqdetail: true,
+      },
+      now_service: 0,
+      list_arr: [
+        {
+          title: "应用简介：",
+          info: "",
+        },
+        {
+          title: "功能简介：",
+          info: "",
+        },
+        {
+          title: "应用场景：",
+          info: "",
+        },
+        {
+          title: "应用参数：",
+          info: "",
+          type: "solt",
+          solt_name: "app_code",
+        },
+        {
+          title: "联系人：",
+          info: "",
+        },
+        {
+          title: "联系电话：",
+          info: "",
+        },
+      ],
+      servicead_arr: [
+        {
+          title: "申请信息",
+          prop:"title",
+        },
+        {
+          title: "应用场景：",
+          info: "",
+        },
+        {
+          title: "申请文件：",
+          info: "",
+          url:"",
+          type:"down"
+        },
+        {
+          title: "申请规格：",
+          info: "",
+        },
+        {
+          title: "审批信息",
+          prop:"title",
+        },
+        {
+          title: "",
+          type: "solt",
+          solt_name: "approval",
+        },
+      ],
+      appcode:"",
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+    this.now_user = this.$store.state.role;
+    getRole().then((data) => {
+      this.now_user = data;
+      this.$store.commit("rolefun", data);
+      this.getServiceInfo();
+      this.getServiceBaseInfo();
+      this.getServiceapplyInfo();
+      
+    });
+  },
+  mounted() {},
+  methods: {
+    getServiceapplyInfo() {
+      this.$http
+        .get("/static/applyappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.servicead_arr[1], "info", data.appapplyinfo.scene);
+          this.$set(this.servicead_arr[2], "info", data.appapplyinfo.filename);
+          this.$set(this.servicead_arr[2], "url", data.appapplyinfo.fileurl);
+          this.$set(this.servicead_arr[3], "info", data.appapplyinfo.size);
+        })
+        .catch(function(response) {});
+    },
+    getServiceBaseInfo() {
+      this.$http
+        .get("/static/applyappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
+          this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
+          this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
+          this.$set(this.list_arr[4], "info", data.appbaseinfo.person);
+          this.$set(this.list_arr[5], "info", data.appbaseinfo.phone);
+          
+          this.appcode = data.appbaseinfo.appcode;
+        })
+        .catch(function(response) {});
+    },
+    deploy(val){
+        console.log(val);
+    },
+    getServiceInfo() {
+      this.$http
+        .get("/static/applyappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.service_header_arr, "id", data.appInfo.id);
+          this.$set(this.service_header_arr, "name", data.appInfo.name);
+          this.$set(this.service_header_arr, "first", data.appInfo.first);
+          this.$set(this.service_header_arr, "second", data.appInfo.second);
+        })
+        .catch(function(response) {
+        });
+    },
+    applymy(val) {
+      console.log(val);
+      this.tipsOptions = {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      };
+      this.tipsOptions.message =
+        "申请密钥需要向组织管理员发送通知，由组织管理员在密钥管理中设置应用的密钥。";
+      this.tipsOptions.btnSubmitText = "发送通知";
+      this.tipsOptions.confirmSubmit = () => {
+        console.log("deleteItem - ");
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.detail_contain {
+  width: 100%;
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+.info_contain {
+  padding: 25px 20px;
+  background-color: #fff;
+  width: 100%;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+}
+.now_page_title {
+  margin: 15px 0;
+  color: #898d9e;
+}
+.now_page_title span {
+  color: #242c43;
+}
+.type_box {
+  width: 100%;
+}
+.type_title {
+  width: 100%;
+  height: 65px;
+  line-height: 65px;
+  border-bottom: 2px solid #f4f7fc;
+}
+.type_select {
+  float: left;
+  width: auto;
+  margin-right: 40px;
+  height: 65px;
+  cursor: pointer;
+}
+.type_box_select {
+  padding: 30px 10px 10px 10px;
+  width: 100%;
+}
+.appcode {
+  white-space: pre-wrap;
+  width: 100%;
+  background-color: #f8f9fd;
+  border-radius: 8px;
+  padding: 24px;
+  color: #58617a;
+}
+</style>
diff --git a/src/pages/approval_app_detail.vue b/src/pages/approval_app_detail.vue
index dc9c8c89aa8772696ad888684edd97afd0248821..17adb68b3852718b656723ffac230fd812de59c2 100644
--- a/src/pages/approval_app_detail.vue
+++ b/src/pages/approval_app_detail.vue
@@ -1,294 +1,314 @@
 <template>
   <div class="detail_contain">
-    <p class="now_page_title">我的应用 / 应用仓库 / <span>应用详情</span></p>
+    <p class="now_page_title">
+      应用管理  /  应用审批管理  /  
+      <span>应用审批</span>
+    </p>
     <div class="info_contain">
-      <service-header
-        :data="service_header_arr"
-        @deploy="deploy"
-        @editapp="editapp"
-        @unline="unline"
-        @unsell="unsell"
-      ></service-header>
+      <service-header :data="service_header_arr"></service-header>
       <div class="type_box">
         <div class="type_title">
           <div
-            v-for="(item, index) in service_arr[now_user]"
-            :key="index + 1000"
+            v-for="(item,index) in service_arr"
+            :key="index+1000"
             class="type_select"
-            @click="now_service = index"
-            :style="
-              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
-            "
-          >
-            {{ item }}
-          </div>
+            @click="now_service=index"
+            :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}"
+          >{{item}}</div>
         </div>
         <div class="type_box_select">
-          <info-list :list_arr="list_arr" v-if="now_service == 0">
-            <div class="appcode" v-html="appcode" slot="app_code"></div>
+          <info-list :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
+            <table-um :headers="header_arr" url="params_arr" slot="zd_table"></table-um>
+            <process-card type="approval" :data="approval_arr[now_user]" slot="sp_card"></process-card>
+            <div class="info_contain1" slot="sp_result">
+                <el-form ref="form" :rules="rules" :model="form" label-width="0px">
+                <el-form-item prop="result">
+                    <p class="formname">审批结果：</p>
+                    <el-select v-model="form.result" placeholder="请选择">
+                        <el-option
+                        v-for="item in resultoptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item prop="option">
+                    <p class="formname">审批意见：</p>
+                    <el-input v-model="form.option" placeholder="请输入审批意见，不少于10个字"></el-input>
+                </el-form-item>
+                <el-form-item class="btnsty">
+                    <el-button @click="onSubmit('form')" class="right">提交</el-button>
+                    <el-button class="right">取消</el-button>
+                </el-form-item>
+                </el-form>
+            </div>
+
           </info-list>
         </div>
       </div>
     </div>
-    <dialog-action
-      ref="myConfirm"
-      :confirmOptions="tipsOptions"
-    ></dialog-action>
   </div>
 </template>
 
 <script>
+import serviceHeader from "../components/service-header";
 import infoList from "../components/infoList";
 import tableUm from "../components/table-um";
-import serviceHeader from "../components/service-header";
-import dialogAction from "@/components/dialog-action";
-import uploadFile from "@/components/upload_file";
-import { getRole } from "../utils/common";
+import processCard from "../components/process-card";
+import {getRole} from "../utils/common"
 export default {
+  props: {},
   components: {
+    serviceHeader,
     infoList,
     tableUm,
-    serviceHeader,
-    dialogAction,
-    uploadFile,
+    processCard
   },
   data() {
     return {
-      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
-      buy_style: 0,
-      oldpag_name: "镜像文件002.rar",
-      imgList: [],
-      imgList1: [],
-      form: {
-        name: "",
-        fileList: "",
-        taps: "",
-      },
-      fileList: "",
-      rules: {
-        name: [{ required: true, message: "请输入镜像名称", trigger: "blur" }],
-        taps: [{ required: true, message: "请输入镜像标签", trigger: "blur" }],
+      form:{
+          result:'',
+          option:''
       },
-      tipsOptions: {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
+      now_user: 1, //0：普通用户，1：组织管理员，2：超级管理员
+      rules:{
+          result:[
+              { required: true, message: '请选择意见', trigger: 'change' },
+          ],
+          option:[
+              { required: true, message: '请输入意见', trigger: 'blur' },
+              {
+                  min: 10, message: '长度大于10个字符', trigger: 'blur'
+              }
+          ]
       },
-      service_arr: [
-        ["基本信息", "运行状态"],
-        ["基本信息", "运行状态"],
-        ["基本信息", "运行状态","服务访问排名"],
+      resultvalue: "",
+      resultoptions: [
+        {
+          label: "通过",
+          value: 1
+        },
+        {
+          label: "不通过",
+          value: 0
+        }
       ],
-      service_header_arr: {
-        name: "",
-        first: [],
-        second: [],
-        bsdetail: true,
-      },
-      now_service: 0,
+      approval_arr:[
+          [],
+          [],
+          [
+                {
+                    title:'一级审批',
+                    result:'审批通过',
+                    arr:[
+                        {
+                            title:'审批时间：',
+                            info:'2020-02-28 15:23:45'
+                        },
+                        { 
+                            title:'审批单位：',
+                            info:'某某某城管局'
+                        },
+                        {
+                            title:'审批人：',
+                            info:'张先生'
+                        },
+                        {
+                            title:'审批意见：',
+                            info:'同意'
+                        },
+                    ]
+                },       
+            ],
+        ],
       header_arr: [
         {
-          prop: "jxmc",
-          label: "镜像名称",
-          minWidth: "33.33%",
-          align: "center",
+          prop: "zdmc",
+          label: "字段名称",
+          minWidth: "20%",
+          align: "left"
         },
         {
-          prop: "bbh",
-          label: "版本号",
-          minWidth: "33.33%",
-          align: "center",
+          prop: "zdbm",
+          label: "字段编码",
+          width: "100px",
+          align: "center"
         },
         {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          minWidth: "33.33%",
-          btnList: [
-            {
-              type: "actiondelete",
-              label: "删除",
-            },
-          ],
+          prop: "zdlx",
+          label: "字段类型",
+          width: "100px",
+          align: "center"
+        },
+        {
+          prop: "zdsm",
+          label: "字段说明",
+          minWidth: "30%",
+          align: "left"
         },
+        {
+          prop: "zdsl",
+          label: "字段示例数值",
+          width: "120px",
+          align: "left"
+        }
       ],
 
+      service_header_arr: {
+        name: "",
+        pic:"",
+        first: [],
+        second: [],
+      },
+      service_arr: ["应用申请信息", "应用审批"],
+      now_service: 0,
+      servicead_arr: [
+        [],
+        [
+            {
+            title: "一级审批：",
+            prop: "title",
+            type: "solt",
+            solt_name: "sp_result"
+            },
+        ],
+        [
+            {
+                title: "审批信息：",
+                prop: "title",
+                type: "solt",
+                solt_name: "sp_card"
+            },
+            {
+                title: "二级审批：",
+                prop: "title",
+                type: "solt",
+                solt_name: "sp_result"
+            },
+        ],
+      ],
       list_arr: [
         {
-          title: "应用简介：",
-          info: "",
+          title: "申请单位：",
+          info: ""
         },
         {
-          title: "功能简介：",
-          info: "",
+          title: "申请人：",
+          info: ""
         },
         {
-          title: "应用场景：",
-          info: "",
+          title: "申请人联系电话：",
+          info: ""
         },
         {
-          title: "应用参数：",
+          title: "场景描述：",
+          info: ""
+        },
+        {
+          title: "申请文件：",
           info: "",
-          type: "solt",
-          solt_name: "app_code",
+          url:"",
+          type: "down"
         },
-      ],
-      appcode: "",
-      addImageFlag: false,
+        {
+          title: "申请时间：",
+          info: ""
+        }
+      ]
     };
   },
   watch: {},
+  computed: {},
   created() {
     this.now_user = this.$store.state.role;
     getRole().then((data) => {
       this.now_user = data;
+      console.log(data);
       this.$store.commit("rolefun", data);
-      this.getServiceInfo();
-      this.getServiceBaseInfo();
+      this.getheaderinfo();
+      this.getapplyinfo();
     });
   },
   mounted() {},
   methods: {
-    getNewList(val) {
-      console.log(val);
-      this.form.fileList = "";
-      this.form.fileList = url
-        .map((v, k) => {
-          return v.url;
-        })
-        .join(";");
-      console.log(this.form.fileList);
-    },
-    getNewList1(val) {
-      console.log(val);
-      this.fileList = "";
-      this.fileList = url
-        .map((v, k) => {
-          return v.url;
-        })
-        .join(";");
-      console.log(this.fileList);
-    },
-    addImage() {
-      this.addImageFlag = true;
-    },
-    actiondelete() {
-      this.tipsOptions = {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      };
-      this.tipsOptions.message = "是否删除该数据";
-      this.tipsOptions.confirmSubmit = () => {
-        console.log("deleteItem - ");
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
-    },
-    deploy() {
-      console.log("0000");
-    },
-    editapp() {
-      console.log("11111");
-    },
-    unline(val) {
-      console.log(val);
-      this.tipsOptions = {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      };
-      this.tipsOptions.message =
-        "该操作会将该应用从应用商店的平台应用区域下线至开发者应用区域，下线前需向超级管理员发送通知，超级管理员通过后此应用将下线至开发者应用区域。";
-      this.tipsOptions.btnSubmitText = "发送通知";
-      this.tipsOptions.position = "left";
-      this.tipsOptions.confirmSubmit = () => {
-        console.log("deleteItem - ");
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
-    },
-    unsell(val) {
-      console.log(val);
-      this.tipsOptions = {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      };
-      this.tipsOptions.message =
-        "申请下架应用需要向组织管理员发送通知，组织管理员通过下架请求后该应用将从应用商店下架。";
-      this.tipsOptions.btnSubmitText = "发送通知";
-      this.tipsOptions.confirmSubmit = () => {
-        console.log("deleteItem - ");
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
-    },
-    getServiceInfo() {
-      this.$http
-        .get("/static/appdetail.json")
+      getapplyinfo(){
+        this.$http
+        .get("/static/approvalappdetail.json")
         .then((response) => {
           let data = response.data.data;
-          this.$set(this.service_header_arr, "name", data.appInfo.name);
-          this.$set(this.service_header_arr, "first", data.appInfo.first);
-          this.$set(this.service_header_arr, "second", data.appInfo.second);
+          this.$set(this.list_arr[0], "info", data.appbaseinfo.company);
+          this.$set(this.list_arr[1], "info", data.appbaseinfo.person);
+          this.$set(this.list_arr[2], "info", data.appbaseinfo.phone);
+          this.$set(this.list_arr[3], "info", data.appbaseinfo.desc);
+          this.$set(this.list_arr[4], "info", data.appbaseinfo.filename);
+          this.$set(this.list_arr[4], "url", data.appbaseinfo.fileurl);
+          this.$set(this.list_arr[5], "info", data.appbaseinfo.time);
         })
         .catch(function(response) {});
-    },
-
-    getServiceBaseInfo() {
-      this.$http
-        .get("/static/appdetail.json")
+      },
+      getheaderinfo(){
+        this.$http
+        .get("/static/approvalappdetail.json")
         .then((response) => {
           let data = response.data.data;
-          this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
-          this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
-          this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
-          this.appcode = data.appbaseinfo.appcode;
+          this.$set(this.service_header_arr, "name", data.appInfo.name);
+          this.$set(this.service_header_arr, "first", data.appInfo.first);
+          this.$set(this.service_header_arr, "second", data.appInfo.second);
         })
         .catch(function(response) {});
-    },
-  },
+      },
+      onSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      }
+  }
 };
 </script>
 
+
 <style>
-.savebtn .el-button {
-  float: right;
-  margin-left: 20px;
-  letter-spacing: 2px;
+.type_box_select .el-form {
+  width: 1022px;
+}
+.info_contain1 .el-input__inner{
+  background-color: #f7f8f9;
+  width: 1022px;
 }
-.savebtn .el-button:nth-of-type(1) {
-  background-color: #0f2683;
-  color: #f8f9fd;
+.info_contain1 .el-input{
+  width: 1022px;
+}
+
+.btnsty .el-button{
+    background-color: #c3caf8;
+    color: #0f2683;
 }
-.savebtn .el-button:nth-of-type(2) {
-  background-color: #c3caf8;
-  color: #0f2683;
+.btnsty .el-button:nth-of-type(1){
+    background-color: #0f2683;
+    color: #f8f9fd;
 }
 </style>
 <style scoped>
 .detail_contain {
   width: 100%;
-  padding: 0 20px;
   height: calc(100% - 55px);
+  padding: 0 20px;
 }
 .info_contain {
   padding: 25px 20px;
   background-color: #fff;
   width: 100%;
+  min-height: calc(100% - 20px);
   box-shadow: 0px 3px 6px 0px #f4f7fc;
   border-radius: 12px;
-  min-height: calc(100% - 20px);
   margin-bottom: 20px;
+  position: relative;
 }
 .now_page_title {
   margin: 15px 0;
@@ -317,31 +337,19 @@ export default {
   padding: 30px 10px 10px 10px;
   width: 100%;
 }
-
-.savebtn {
-  margin-top: 50px;
-  overflow: hidden;
-}
-.appcode {
-  white-space: pre-wrap;
-  width: 100%;
-  background-color: #f8f9fd;
-  border-radius: 8px;
-  padding: 24px;
+.formname{
   color: #58617a;
 }
-.addimage {
-  display: inline-block;
-  color: #f8f9fd;
-  font-size: 16px;
-  width: 124px;
-  height: 44px;
-  line-height: 44px;
-  text-align: center;
-  background-color: #0f2683;
-  border-radius: 8px;
-  margin-top: 20px;
-  cursor: pointer;
+.right{
+  float: right;
+  margin-left: 20px;
+}
+.btnsty{
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+}
+.info_contain1{
+    margin-bottom: 70px;
 }
-
 </style>
diff --git a/src/pages/approval_service_detail.vue b/src/pages/approval_service_detail.vue
index 4ea9c95ab77759bfd63300b7dfbeeda2a0efaf88..63972ab769f1583f93b025e0c7bd8e454331d309 100644
--- a/src/pages/approval_service_detail.vue
+++ b/src/pages/approval_service_detail.vue
@@ -17,12 +17,12 @@
           >{{item}}</div>
         </div>
         <div class="type_box_select">
-          <info-list :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
+          <info-list @download="download" :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
             <table-um :headers="header_arr" url="params_arr" slot="zd_table"></table-um>
             <process-card type="approval" :data="approval_arr[now_user]" slot="sp_card"></process-card>
             <div class="info_contain1" slot="sp_result">
                 <el-form ref="form" :rules="rules" :model="form" label-width="0px">
-                <el-form-item>
+                <el-form-item prop="result">
                     <p class="formname">审批结果：</p>
                     <el-select v-model="form.result" placeholder="请选择">
                         <el-option
@@ -38,7 +38,7 @@
                     <el-input v-model="form.option" placeholder="请输入审批意见，不少于10个字"></el-input>
                 </el-form-item>
                 <el-form-item class="btnsty">
-                    <el-button @click="onSubmit" class="right">提交</el-button>
+                    <el-button @click="onSubmit('form')" class="right">提交</el-button>
                     <el-button class="right">取消</el-button>
                 </el-form-item>
                 </el-form>
@@ -72,7 +72,11 @@ export default {
       },
       now_user: 1, //0：普通用户，1：组织管理员，2：超级管理员
       rules:{
+          result:[
+              { required: true, message: '请选择意见', trigger: 'change' },
+          ],
           option:[
+              { required: true, message: '请输入意见', trigger: 'blur' },
               {
                   min: 10, message: '长度大于10个字符', trigger: 'blur'
               }
@@ -90,6 +94,7 @@ export default {
         }
       ],
       approval_arr:[
+          [],
           [],
           [
                 {
@@ -114,53 +119,7 @@ export default {
                         },
                     ]
                 },       
-            ],
-          [
-                {
-                    title:'一级审批',
-                    result:'审批通过',
-                    arr:[
-                        {
-                            title:'审批时间：',
-                            info:'2020-02-28 15:23:45'
-                        },
-                        { 
-                            title:'审批单位：',
-                            info:'某某某城管局'
-                        },
-                        {
-                            title:'审批人：',
-                            info:'张先生'
-                        },
-                        {
-                            title:'审批意见：',
-                            info:'同意'
-                        },
-                    ]
-                },       
-                {
-                    title:'二级审批',
-                    result:'审批通过',
-                    arr:[
-                        {
-                            title:'审批时间：',
-                            info:'2020-02-28 15:23:45'
-                        },
-                        { 
-                            title:'审批单位：',
-                            info:'某某某城管局'
-                        },
-                        {
-                            title:'审批人：',
-                            info:'张先生'
-                        },
-                        {
-                            title:'审批意见：',
-                            info:'同意'
-                        },
-                    ]
-                },       
-            ],
+            ]
         ],
       header_arr: [
         {
@@ -223,6 +182,7 @@ export default {
       service_arr: ["服务申请信息", "服务审批"],
       now_service: 0,
       servicead_arr: [
+        [],
         [
             {
             title: "一级审批：",
@@ -239,26 +199,12 @@ export default {
                 solt_name: "sp_card"
             },
             {
-                title: "一级审批：",
-                prop: "title",
-                type: "solt",
-                solt_name: "sp_result"
-            },
-        ],
-        [
-            {
-                title: "审批信息：",
-                prop: "title",
-                type: "solt",
-                solt_name: "sp_card"
-            },
-            {
-                title: "三级审批：",
+                title: "二级审批：",
                 prop: "title",
                 type: "solt",
                 solt_name: "sp_result"
             },
-        ],
+        ]
       ],
       list_arr: [
         {
@@ -288,6 +234,7 @@ export default {
         {
           title: "申请文件：",
           info: "xxxx文件名称.txt",
+          url:'www.baidu.com',
           type: "down"
         },
         {
@@ -312,8 +259,18 @@ export default {
   created() {},
   mounted() {},
   methods: {
-      onSubmit(){
-          console.log('1111');
+      onSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      download(val){
+        console.log(val);
       }
   }
 };
diff --git a/src/pages/deploy_app_detail.vue b/src/pages/deploy_app_detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..60f19f6cd611a4ef2975063b1c3c7ede9151f963
--- /dev/null
+++ b/src/pages/deploy_app_detail.vue
@@ -0,0 +1,865 @@
+<template>
+  <div class="detail_contain">
+    <p class="now_page_title">我的应用 / 应用仓库 / <span>应用详情</span></p>
+    <div class="info_contain">
+      <service-header
+        :data="service_header_arr"
+        @applymy="applymy"
+      ></service-header>
+      <div class="type_box">
+        <div class="type_title">
+          <div
+            v-for="(item, index) in service_arr[now_user]"
+            :key="index + 1000"
+            class="type_select"
+            @click="now_service = index"
+            :style="
+              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
+            "
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="type_box_select">
+          <div v-if="now_service == 0||now_service==2" class="info_contain2">
+            <info-list :list_arr="now_service == 0?list_arr:fwfw_arr">
+              <div class="appcode" v-html="appcode" slot="app_code"></div>
+              <div slot="use_know0">
+                访问地址:
+                <a :href="list_arr[4].url" target="_blank">{{
+                  list_arr[4].url
+                }}</a>
+              </div>
+              <div slot="use_know1" class="use_know">
+                <p>
+                  <span>主机名或IP地址</span
+                  ><span>{{ list_arr[4].url.ip }}</span>
+                </p>
+                <p>
+                  <span>端口</span><span>{{ list_arr[4].url.port }}</span>
+                </p>
+                <p>
+                  <span>用户名</span><span>{{ list_arr[4].url.user }}</span>
+                </p>
+                <p>
+                  <span>密码</span
+                  ><span>{{
+                    showPass ? list_arr[4].url.password : this.list_arr[4].url1
+                  }}</span>
+                  <i @click="showpass" class="el-icon-view"></i>
+                </p>
+              </div>
+              <div slot="use_know2" class="use_know2">
+                <p>
+                  {{ list_arr[4].url.text }}
+                  <span @click="gotoview(list_arr[4].url.url)">浏览文件</span>
+                </p>
+              </div>
+              <table-um
+              slot="fw_table"
+              :headers="header_fw_arr"
+              url="fw_rank_arr"
+              :stripe="true"
+              :paginationShow="true"
+              @detail="detail"
+            ></table-um>
+            </info-list>
+
+            <div
+              @click="public_form = true"  
+              v-if="public&&now_service == 0"
+              class="addimage"
+              title="将该应用以服务的形式发布至服务超市"
+            >
+              服务发布
+            </div>
+            <el-form
+              :model="formInline"
+              label-width="0px"
+              :rules="rules1"
+              ref="ruleForm"
+              v-if="public_form"
+            >
+              <el-form-item prop="area">
+                <p class="formname">服务领域：</p>
+                <el-select v-model="formInline.area" placeholder="请选择">
+                  <el-option
+                    v-for="item in area_arr"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="resource">
+                <p class="formname">开放程度：</p>
+                <el-radio-group v-model="formInline.resource">
+                  <el-radio label="共享"></el-radio>
+                  <el-radio label="受限"></el-radio>
+                  <el-radio label="敏感"></el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item>
+                <div class="savebtn">
+                  <div class="btnsty" @click="public_form = false">取消</div>
+                  <div class="btnsty" @click="saveInfo('ruleForm')">保存</div>
+                </div>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div v-if="now_service == 1&&image_arr.length">
+            <p class="service_title"><span></span>应用概况</p>
+            <div class="service_title_card">
+              <nor-card title="应用状态" class="service_card">
+                <template>
+                  <div style="height:115px;padding-top:10px;">
+                    <example-icon style="margin:10px auto;"></example-icon>
+                    <p
+                      style="color: #58617a;font-size: 16px;text-align:center;"
+                    >
+                      {{ yx_state.state }}
+                    </p>
+                  </div>
+                </template>
+              </nor-card>
+              <nor-card title="平均响应时间" class="service_card">
+                <template>
+                  <div style="height:115px;" class="service_num">
+                    <p>{{ yx_state.averageTime }}</p>
+                    <p>最大响应时间：{{ yx_state.maxTime }}</p>
+                  </div>
+                </template>
+              </nor-card>
+              <nor-card title="吞吐率" class="service_card">
+                <template>
+                  <div style="height:115px;" class="service_num">
+                    <p>{{ yx_state.averageTraffic }}</p>
+                    <p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
+                  </div>
+                </template>
+              </nor-card>
+              <nor-card title="资源使用" class="service_card">
+                <template>
+                  <div
+                    style="height:115px;padding-top:30px;"
+                    class="service_num"
+                  >
+                    <p>{{ yx_state.memory }}</p>
+                  </div>
+                </template>
+              </nor-card>
+            </div>
+            <p class="service_title" style="margin-top:20px;">
+              <span></span>应用设置
+            </p>
+            <div class="addimage">多版本回滚</div>
+            <p class="imagebox" >
+              <span
+                @click="image_select = index"
+                :style="
+                  image_select == index
+                    ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
+                    : {}
+                "
+                v-for="(item, index) in image_arr"
+                :key="index + 6000"
+                >{{ item.name }}</span
+              >
+            </p>
+            <table-um
+            v-for="(item, index) in image_arr"
+            :key="index+7000"
+            v-show="image_select == index"
+              :headers="header_image_arr"
+              :datas="image_arr[index].data"
+              :stripe="true"
+              :paginationShow="true"
+              @update="update"
+              @rollback="rollback"
+              @grouppublic="grouppublic"
+              @online="online"
+            ></table-um>
+          </div>
+
+          
+        </div>
+      </div>
+    </div>
+    <dialog-action
+      ref="myConfirm"
+      :confirmOptions="tipsOptions"
+    ></dialog-action>
+  </div>
+</template>
+
+<script>
+import infoList from "../components/infoList";
+import tableUm from "../components/table-um";
+import serviceHeader from "../components/service-header";
+import dialogAction from "@/components/dialog-action";
+import uploadFile from "@/components/upload_file";
+import norCard from "@/components/card";
+import exampleIcon from "@/pages/example_icon";
+import Topology from "@/components/topology.vue";
+import { getRole } from "../utils/common";
+export default {
+  components: {
+    infoList,
+    tableUm,
+    serviceHeader,
+    dialogAction,
+    uploadFile,
+    norCard,
+    Topology,
+    exampleIcon,
+  },
+  data() {
+    return {
+      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
+      buy_style: 0,
+      image_select: 0,
+      oldpag_name: "镜像文件002.rar",
+      imgList: [],
+      imgList1: [],
+      yx_state: {
+        state: "",
+        averageTime: "",
+        maxTime: "",
+        averageTraffic: "",
+        maxTraffic: "",
+        memory: "",
+      },
+      image_arr: [],
+      area_arr: [
+        {
+          label: "经济建设",
+          value: 0,
+        },
+        {
+          label: "城市管理",
+          value: 1,
+        },
+        {
+          label: "城市建设",
+          value: 2,
+        },
+        {
+          label: "道路交通",
+          value: 3,
+        },
+        {
+          label: "环境资源",
+          value: 4,
+        },
+        {
+          label: "民生服务",
+          value: 5,
+        },
+        {
+          label: "空间地理",
+          value: 6,
+        },
+        {
+          label: "文化休闲",
+          value: 7,
+        },
+        {
+          label: "社会团体",
+          value: 8,
+        },
+        {
+          label: "教育机构",
+          value: 9,
+        },
+        {
+          label: "其他",
+          value: 10,
+        },
+      ],
+      form: {
+        name: "",
+        fileList: "",
+        taps: "",
+      },
+      formInline: {
+        area: "",
+        resource: "",
+      },
+      fileList: "",
+      rules: {
+        name: [{ required: true, message: "请输入镜像名称", trigger: "blur" }],
+        taps: [{ required: true, message: "请输入镜像标签", trigger: "blur" }],
+      },
+      rules1: {
+        area: [
+          { required: true, message: "请选择服务领域", trigger: "change" },
+        ],
+        resource: [
+          { required: true, message: "请选择开放程度", trigger: "change" },
+        ],
+      },
+      header_image_arr:[
+          {
+              prop:'vision',
+              label:'版本号',
+              minWidth: "20%",
+              align: "center",
+          },
+          {
+              prop:'state',
+              label:'状态',
+              minWidth: "20%",
+              align: "center",
+          },
+          {
+              prop:'date',
+              label:'在线日期',
+              minWidth: "30%",
+              align: "center",
+          },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            minWidth: "30%",
+            btnList: [
+                {
+                    type: "update",
+                    label: "升级",
+                },
+                {
+                    type: "rollback",
+                    label: "回退",
+                },
+                {
+                    type: "grouppublic",
+                    label: "蓝绿发布",
+                },
+                {
+                    type: "online",
+                    label: "下线",
+                },
+            ],
+        },
+      ],
+      header_fw_arr:[
+          {
+              prop:'rank',
+              label:'服务排名',
+              width: "150px",
+              align: "center",
+              type:'rank',
+          },
+          {
+              prop:'name',
+              label:'服务名称',
+              minWidth: "40%",
+              align: "left",
+              type:'hot',
+          },
+          {
+              prop:'address',
+              label:'服务地址',
+              minWidth: "60%",
+              align: "left",
+          },
+          {
+              prop:'times',
+              label:'外部调用次数(次)',
+              width: "250px",
+              align: "center",
+          },
+          {
+              prop:'time',
+              label:'平均调用时长(h)',
+              width: "250px",
+              align: "center",
+          },
+          {
+            label: "操作",
+            type: "Button",
+            width: "250px",
+            align: "center",
+            btnList: [
+                {
+                    type: "detail",
+                    label: "查看监控日志",
+                },
+            ],
+        },
+      ],
+      tipsOptions: {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      },
+      service_arr: [
+        ["基本信息", "运行状态"],
+        ["基本信息", "运行状态"],
+        ["基本信息", "运行状态", "服务访问排名"],
+      ],
+      service_header_arr: {
+        name: "",
+        first: [],
+        second: [],
+        bsdetail: true,
+      },
+      now_service: 0,
+      header_arr: [
+        {
+          prop: "jxmc",
+          label: "镜像名称",
+          minWidth: "33.33%",
+          align: "center",
+        },
+        {
+          prop: "bbh",
+          label: "版本号",
+          minWidth: "33.33%",
+          align: "center",
+        },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          minWidth: "33.33%",
+          btnList: [
+            {
+              type: "actiondelete",
+              label: "删除",
+            },
+          ],
+        },
+      ],
+
+      list_arr: [
+        {
+          title: "应用简介：",
+          info: "",
+        },
+        {
+          title: "功能简介：",
+          info: "",
+        },
+        {
+          title: "应用场景：",
+          info: "",
+        },
+        {
+          title: "应用参数：",
+          info: "",
+          type: "solt",
+          solt_name: "app_code",
+        },
+        {
+          title: "使用说明：",
+          url: "",
+          url1: "",
+          type: "solt",
+          solt_name: "use_know",
+        },
+      ],
+      fwfw_arr:[
+        {
+          title: "访问排名",
+          info: "",
+          prop:"title",
+          type: "solt",
+          solt_name: "fw_table",
+        },
+      ],
+      appcode: "",
+      showPass: false,
+      public: false,
+      public_form: false,
+    };
+  },
+  watch: {},
+  created() {
+    this.now_user = this.$store.state.role;
+    getRole().then((data) => {
+      this.now_user = data;
+      this.$store.commit("rolefun", data);
+      this.getServiceInfo();
+      this.getServiceBaseInfo();
+      this.getServiceyxztInfo();
+      this.getImageInfo();
+    });
+  },
+  mounted() {},
+  methods: {
+      detail(val){
+        console.log(val);
+      },
+      update(val){
+          console.log(val);
+      },
+      rollback(val){
+          console.log(val);
+      },
+      grouppublic(val){
+          console.log(val);
+      },
+      online(val){
+          console.log(val);
+      },
+    getImageInfo() {
+      this.$http
+        .get("/static/deployappdetail.json")
+        .then((response) => {
+          console.log(response);
+          let data = response.data.data;
+          this.image_arr = data.imagearr;
+        })
+        .catch(function(response) {});
+    },
+    getServiceyxztInfo() {
+      this.$http
+        .get("/static/servicedetail1.json")
+        .then((response) => {
+          console.log(response);
+          let data = response.data.data;
+          this.yx_state = data.serviceyxzt;
+        })
+        .catch(function(response) {});
+    },
+    saveInfo(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    gotoview(url) {
+      console.log(url);
+    },
+    showpass() {
+      this.showPass = !this.showPass;
+    },
+    applymy(val) {
+      console.log(val);
+      this.tipsOptions = {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      };
+      this.tipsOptions.message =
+        "申请密钥需要向组织管理员发送通知，由组织管理员在密钥管理中设置应用的密钥。";
+      this.tipsOptions.btnSubmitText = "发送通知";
+      this.tipsOptions.confirmSubmit = () => {
+        console.log("deleteItem - ");
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+    getNewList(val) {
+      console.log(val);
+      this.form.fileList = "";
+      this.form.fileList = url
+        .map((v, k) => {
+          return v.url;
+        })
+        .join(";");
+      console.log(this.form.fileList);
+    },
+    getNewList1(val) {
+      console.log(val);
+      this.fileList = "";
+      this.fileList = url
+        .map((v, k) => {
+          return v.url;
+        })
+        .join(";");
+      console.log(this.fileList);
+    },
+    actiondelete() {
+      this.tipsOptions = {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      };
+      this.tipsOptions.message = "是否删除该数据";
+      this.tipsOptions.confirmSubmit = () => {
+        console.log("deleteItem - ");
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+    deploy() {
+      console.log("0000");
+    },
+    editapp() {
+      console.log("11111");
+    },
+    getServiceInfo() {
+      this.$http
+        .get("/static/deployappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.service_header_arr, "name", data.appInfo.name);
+          this.$set(this.service_header_arr, "first", data.appInfo.first);
+          this.$set(this.service_header_arr, "second", data.appInfo.second);
+        })
+        .catch(function(response) {});
+    },
+
+    getServiceBaseInfo() {
+      this.$http
+        .get("/static/deployappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
+          this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
+          this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
+          this.$set(
+            this.list_arr[4],
+            "solt_name",
+            "use_know" + data.appbaseinfo.state
+          );
+          if (data.appbaseinfo.state == 0) {
+            this.$set(this.list_arr[4], "url", data.appbaseinfo.url);
+          } else if (data.appbaseinfo.state == 1) {
+            this.$set(this.list_arr[4], "url", data.appbaseinfo.url1);
+            var temp = "";
+            data.appbaseinfo.url1.password.split("").forEach((e) => {
+              temp = temp + "*";
+            });
+            this.$set(this.list_arr[4], "url1", temp);
+          } else if (data.appbaseinfo.state == 2) {
+            this.$set(this.list_arr[4], "url", data.appbaseinfo.url2);
+            this.public = data.appbaseinfo.public;
+          }
+          this.appcode = data.appbaseinfo.appcode;
+        })
+        .catch(function(response) {});
+    },
+  },
+};
+</script>
+
+<style>
+.savebtn .el-button {
+  float: right;
+  margin-left: 20px;
+  letter-spacing: 2px;
+}
+.savebtn .el-button:nth-of-type(1) {
+  background-color: #0f2683;
+  color: #f8f9fd;
+}
+.savebtn .el-button:nth-of-type(2) {
+  background-color: #c3caf8;
+  color: #0f2683;
+}
+.info_contain2 .el-input__inner {
+  background-color: #f7f8f9;
+  width: 1022px;
+}
+</style>
+<style scoped>
+.detail_contain {
+  width: 100%;
+  padding: 0 20px;
+  height: calc(100% - 55px);
+}
+.info_contain {
+  padding: 25px 20px;
+  background-color: #fff;
+  width: 100%;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+  min-height: calc(100% - 20px);
+  margin-bottom: 20px;
+}
+.now_page_title {
+  margin: 15px 0;
+  color: #898d9e;
+}
+.now_page_title span {
+  color: #242c43;
+}
+.type_box {
+  width: 100%;
+}
+.type_title {
+  width: 100%;
+  height: 65px;
+  line-height: 65px;
+  border-bottom: 2px solid #f4f7fc;
+}
+.type_select {
+  float: left;
+  width: auto;
+  margin-right: 40px;
+  height: 65px;
+  cursor: pointer;
+}
+.type_box_select {
+  padding: 30px 10px 10px 10px;
+  width: 100%;
+}
+
+.savebtn {
+  margin-top: 50px;
+  overflow: hidden;
+  float: right;
+}
+.savebtn div {
+  float: left;
+  width: 124px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  margin-left: 20px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.savebtn div:nth-of-type(1) {
+  background-color: #e1e4fb;
+  color: #0f2683;
+}
+.savebtn div:nth-of-type(2) {
+  background-color: #0f2683;
+  color: #f8f9fd;
+}
+.appcode {
+  white-space: pre-wrap;
+  width: 100%;
+  background-color: #f8f9fd;
+  border-radius: 8px;
+  padding: 24px;
+  color: #58617a;
+}
+.addimage {
+  display: inline-block;
+  color: #f8f9fd;
+  font-size: 16px;
+  width: 124px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  background-color: #0f2683;
+  border-radius: 8px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+  cursor: pointer;
+}
+.use_know p {
+  height: 44px;
+  line-height: 44px;
+  color: #1a2236;
+}
+.use_know p:nth-of-type(2n) {
+  background-color: #f8f9fd;
+}
+.use_know p span {
+  display: inline-block;
+}
+.use_know p span:nth-of-type(1) {
+  width: 150px;
+  font-weight: 600;
+}
+.use_know p span:nth-of-type(2) {
+  width: 250px;
+  color: #58617a;
+}
+.el-icon-view {
+  cursor: pointer;
+}
+.use_know2 p {
+  color: #242c43;
+}
+.use_know2 p span {
+  width: 76px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background-color: #515fe7;
+  border-radius: 8px;
+  display: inline-block;
+  color: #e6ebfe;
+  cursor: pointer;
+}
+.formname {
+  color: #8890a7;
+}
+.service_title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #58617a;
+  text-align: left;
+  height: 40px;
+  line-height: 40px;
+  margin-top: -10px;
+  margin-bottom: 20px;
+}
+.service_title span {
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background-color: #515fe7;
+  border-radius: 2px;
+  float: left;
+  margin-top: 13px;
+  margin-right: 15px;
+}
+.service_title_card {
+  width: 100%;
+  overflow: hidden;
+}
+.service_card {
+  width: calc((100% - 120px) / 4);
+  margin-right: 40px;
+  float: left;
+}
+.service_title_card .service_card:nth-last-of-type(1) {
+  margin-right: 0px;
+}
+.service_num {
+  text-align: center;
+  padding-top: 10px;
+}
+.service_num p:nth-of-type(1) {
+  font-size: 36px;
+  color: #3f4f9c;
+  margin-bottom: 10px;
+}
+.service_num p:nth-of-type(2) {
+  font-size: 16px;
+  color: #58617a;
+}
+.imagebox {
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.imagebox span {
+  width: 165px;
+  height: 34px;
+  padding: 0 10px;
+  line-height: 34px;
+  text-align: center;
+  margin-right: 10px;
+  background-color: #f7f8f9;
+  border-radius: 6px;
+  color: #6573ae;
+  cursor: pointer;
+  float: left;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1; /*设置p元素最大4行，父元素需填写宽度才明显*/
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 241f68ee4be1b78db9587d1cbbd78b6f81614e32..8c5414c9eba5471e47c6893beb159cddd33008a5 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="index_container">
-    <div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/services_shop' || $route.fullPath == '/fwzc/fwcs'"></div>
+    <div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/services_shop' || $route.fullPath == '/fwzc/fwcs' || $route.fullPath == '/app_build'"></div>
     <router-view/>
   </div>
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index 3e105c672986948724b170fee2b94f2fb70e4fb9..95ac5432a93aba0854ddf3bd5763517da28ecdb7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -92,7 +92,17 @@ export default new Router({
               component: () => import("@/pages/app_edit"),
             },
             {
-              path: "/yygl/:level/:type/approvaldetail/:id", // 我部署的应用详情
+              path: "/yygl/:level/:type/deploydetail/:id", // 我部署的应用详情
+              name: "deploy_app_detail",
+              component: () => import("@/pages/deploy_app_detail"),
+            },
+            {
+              path: "/yygl/:level/:type/applydetail/:id", // 我申请的应用详情
+              name: "apply_app_detail",
+              component: () => import("@/pages/apply_app_detail"),
+            },
+            {
+              path: "/yygl/:level/:type/approvaldetail/:id", // 我申请的应用详情
               name: "approval_app_detail",
               component: () => import("@/pages/approval_app_detail"),
             },
@@ -181,6 +191,11 @@ export default new Router({
           name: "services_shop",
           component: () => import("@/pages/services_shop"),
         }, // 主页 - 服务超市
+        {
+          path: "/app_build",
+          name: "app_build",
+          component: () => import("@/pages/app_build"),
+        }, // 应用构建（镜像形式）
         {
           path: "/user", // 个人中心
           name: "user",
diff --git a/src/utils/common.js b/src/utils/common.js
index 4482fa0cca5df12570fbae815b294599a28caf77..8a7ce5a272fd741a8f7e425f3e88f28ed1c0c0b4 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -1,7 +1,7 @@
 function getRole(){
     return new Promise((resolve,reject)=>{
         if(true){
-            resolve(0)
+            resolve(2)
         }else{
             reject('error')
         }
diff --git a/static/applyappdetail.json b/static/applyappdetail.json
new file mode 100644
index 0000000000000000000000000000000000000000..e2668e51dc513c33a54c662645c0efce43f22e26
--- /dev/null
+++ b/static/applyappdetail.json
@@ -0,0 +1,52 @@
+{
+  "data": {
+    "appInfo": {
+      "id":"321321qeqweds",
+      "name": "Mapvideos",
+      "pic": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589794724576&di=d0bff81ff3bb08f3120b3eb2bac58024&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F21%2F20151121171107_zMZcy.thumb.700_0.jpeg",
+      "first": [
+        {
+          "name": "应用类型",
+          "text": "数据服务"
+        },
+        {
+          "name": "业务领域",
+          "text": "应急领域"
+        },
+        {
+          "name": "在线区域",
+          "text": "平台应用"
+        }
+      ],
+      "second": [
+        {
+          "name": "审批状态",
+          "text": "审批通过",
+          "color":"#515fe7"
+        },
+        {
+          "name": "所属组织",
+          "text": "北京比格大数据有限公司"
+        },
+        {
+          "name": "申请时间",
+          "text": "2020-02-28 17:59:30"
+        }
+      ]
+    },
+    "appbaseinfo":{
+        "intorduce":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+        "action":"<p>1、在地图上查找视频设备\n 2、在地图上定位视频设备位置；\n3、调用多路视频的实时视频数据；\n4、操作球机视频设备</p>",
+        "use":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+        "appcode":"<p>repository: 'hub.wodcloud.com/apaas/apaas-mapvideos'\ntag: '1.0.0'\n\nhost: 'mapvideo.wodcloud.local'</p>",
+        "person":"张三丰",
+        "phone":13255668899
+    },
+    "appapplyinfo":{
+        "scene":"申请mapvideos服务用于贵州省疫情监控决策指挥系统。",
+        "filename":"mapvideos申请书.docx",
+        "fileurl":"http://www.baidu.com",
+        "size":"申请获取应用镜像部署权限"
+    }
+  }
+}
diff --git a/static/approvalappdetail.json b/static/approvalappdetail.json
new file mode 100644
index 0000000000000000000000000000000000000000..37e618e815b29ceec05520e00cd0cdbb20fa4b33
--- /dev/null
+++ b/static/approvalappdetail.json
@@ -0,0 +1,117 @@
+{
+    "data":{
+        "appInfo":{
+            "name":"Mapvideos",
+            "pic":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589794724576&di=d0bff81ff3bb08f3120b3eb2bac58024&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F21%2F20151121171107_zMZcy.thumb.700_0.jpeg",
+            "first": [
+                {
+                    "name": "应用类型",
+                    "text": "业务应用"
+                },
+                {
+                    "name": "业务领域",
+                    "text": "应急领域"
+                },
+                {
+                    "name": "审批状态",
+                    "text": "待审批",
+                    "color":"#ef9433"
+                }
+            ],
+            "second": [
+                {
+                    "name": "在线区域",
+                    "text": "平台应用"
+                },
+                {
+                    "name": "申请类型",
+                    "text": "申请开发"
+                },
+                {
+                    "name":"所属组织",
+                    "text":"北京比格大数据"
+                }
+            ]
+        },
+        "appbaseinfo":{
+            "company":"北京比格大数据有限公司",
+            "person":"李子维",
+            "phone":13566445588,
+            "desc":"<p>申请贵州省行政区划地图服务用于贵州省疫情监控决策指挥系统。</p>",
+            "filename":"xxxx文件名称.txt",
+            "fileurl":"http://www.baidu.com",
+            "time":"2020-02-25 12:23:25"
+        },
+        "imagearr":[
+            {
+                "name":"apaas-mapvideos镜像1123123123123",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            },
+            {
+                "name":"apaas-mapvideos镜像2",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            },
+            {
+                "name":"apaas-mapvideos镜像3",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/static/data.json b/static/data.json
index 5e5d96cf2db9db2d2c2c330da01899b7eb4f591c..cb094b13818094b701cb0c655f439556c834b583 100644
--- a/static/data.json
+++ b/static/data.json
@@ -536,6 +536,44 @@
         "bbh":"1.0.2"
       }
     ],
+    "fw_rank_arr":[
+      {
+        "id":1,
+        "rank":1,
+        "name":"map",
+        "address":"http://www.baidu.com",
+        "times":45,
+        "time":0.5,
+        "hot":true
+      },
+      {
+        "id":2,
+        "rank":2,
+        "name":"map",
+        "address":"http://www.baidu.com",
+        "times":45,
+        "time":0.5,
+        "hot":true
+      },
+      {
+        "id":3,
+        "rank":3,
+        "name":"map",
+        "address":"http://www.baidu.com",
+        "times":45,
+        "time":0.5,
+        "hot":false
+      },
+      {
+        "id":4,
+        "rank":4,
+        "name":"map",
+        "address":"http://www.baidu.com",
+        "times":45,
+        "time":0.5,
+        "hot":false
+      }
+    ],
     "fhcstx": [
       {
         "id": 1,
diff --git a/static/deployappdetail.json b/static/deployappdetail.json
new file mode 100644
index 0000000000000000000000000000000000000000..8f1d704079a8a5c407f1e9ed0fe4681f03b1f4b9
--- /dev/null
+++ b/static/deployappdetail.json
@@ -0,0 +1,122 @@
+{
+    "data":{
+        "appInfo":{
+            "name":"Mapvideos",
+            "pic":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589794724576&di=d0bff81ff3bb08f3120b3eb2bac58024&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F21%2F20151121171107_zMZcy.thumb.700_0.jpeg",
+            "first": [
+                {
+                    "name": "业务类型",
+                    "text": "业务应用"
+                },
+                {
+                    "name": "业务领域",
+                    "text": "应急领域"
+                }
+            ],
+            "second": [
+                {
+                    "name": "上架区域",
+                    "text": "应用商店"
+                },
+                {
+                    "name": "部署区域",
+                    "text": "apaas"
+                },
+                {
+                    "name":"部署时间",
+                    "text":"2019-11-28"
+                }
+            ]
+        },
+        "appbaseinfo":{
+            "intorduce":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+            "action":"<p>1、在地图上查找视频设备\n 2、在地图上定位视频设备位置；\n3、调用多路视频的实时视频数据；\n4、操作球机视频设备</p>",
+            "use":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+            "appcode":"<p>repository: 'hub.wodcloud.com/apaas/apaas-mapvideos'\ntag: '1.0.0'\n\nhost: 'mapvideo.wodcloud.local'</p>",
+            "url":"http://www.baidu.com",
+            "url1":{
+                "ip":"localhost",
+                "port":1122,
+                "user":"root",
+                "password":"1231231"
+            },
+            "url2":{
+                "text":"xxxx使用说明.doc",
+                "url":"http://www.baidu.com"
+            },
+            "state":2,
+            "public":true
+        },
+        "imagearr":[
+            {
+                "name":"apaas-mapvideos镜像1123123123123",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            },
+            {
+                "name":"apaas-mapvideos镜像2",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            },
+            {
+                "name":"apaas-mapvideos镜像3",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            }
+        ]
+    }
+}
\ No newline at end of file