diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index bfe12967be33f997b787c58fbf50302aabe4bea7..1bfc5aeeea308e066898de831f952d2ca68ecb5c 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -201,6 +201,9 @@ div{
   color: #8890a7;
   line-height: 24px!important;
 }
+.el-tabs__nav-scroll .el-tabs__item {
+  line-height: 40px!important;
+}
 .el-tabs__item:hover {
   color: #687087;
 
diff --git a/src/components/commodity.vue b/src/components/commodity.vue
index 74f2430acb591265c40b9837d0ee3c1d637eaa3a..6e6df248436590f57e8ebde63e707a0443c20223 100644
--- a/src/components/commodity.vue
+++ b/src/components/commodity.vue
@@ -119,7 +119,9 @@ export default {
   }),
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    handleChange() {}
+  },
   mounted() {}
 };
 </script>
diff --git a/src/components/dialog-action.vue b/src/components/dialog-action.vue
new file mode 100644
index 0000000000000000000000000000000000000000..648604911ede69a277c30b87c8e76478fcedc74a
--- /dev/null
+++ b/src/components/dialog-action.vue
@@ -0,0 +1,98 @@
+<template>
+  <transition name="mask-bg-fade">
+    <el-dialog
+      :visible.sync="show"
+      width="400px"
+      top="25vh"
+      class="user-dialog"
+    >
+      <span slot="title">
+        <b class="iconLeft"></b>
+        <span style=" display: inline-block;vertical-align: middle;">
+          {{ confirmOptions.title || "提示" }}
+        </span>
+      </span>
+      <span>{{ confirmOptions.message || "" }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          class="form_c"
+          type="defalut"
+          size="mini"
+          @click="hideModel"
+          >{{ confirmOptions.btnCancelText || "取消" }}</el-button
+        >
+        <el-button
+          class="form_t"
+          type="primary"
+          size="mini"
+          @click="confirmSubmit"
+          >{{ confirmOptions.btnSubmitText || "确定" }}</el-button
+        >
+      </span>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "dialogAction",
+  props: {
+    confirmOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    showModel() {
+      this.show = true;
+    },
+    hideModel() {
+      this.show = false;
+    },
+    confirmSubmit() {
+      typeof this.confirmOptions.confirmSubmit === "function" &&
+        this.confirmOptions.confirmSubmit();
+    },
+  },
+};
+</script>
+<style>
+.el-dialog__header {
+  border-bottom: 1px solid #edf0ff;
+  padding: 20px 20px 16px !important;
+  font-family: "MicrosoftYaHei";
+  font-size: 16px;
+  color: #1d1e20;
+  font-weight: 800;
+}
+.el-dialog__header .iconLeft {
+  width: 4px;
+  height: 16px;
+  background-color: #0367f6;
+  border-radius: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 3px;
+}
+.el-icon-close:before {
+  font-weight: 800 !important;
+}
+.el-dialog__body {
+  padding: 49px 20px !important;
+}
+</style>
+<style scoped>
+.group-dialog.el-dialog__wrapper {
+  width: 100% !important;
+  left: 0 !important;
+  overflow: hidden;
+}
+.user-dialog {
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/servive-info.vue b/src/components/servive-info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be7454e0e8cac307ad660345dfdfdd96dc51b631
--- /dev/null
+++ b/src/components/servive-info.vue
@@ -0,0 +1,673 @@
+<template>
+  <el-tabs
+    v-model="serviceTabsActiveName"
+    type="card"
+    @tab-click="handleClick"
+    :stretch="true"
+    style="margin-top: 20px;"
+  >
+    <el-tab-pane label="服务详情信息" name="first">
+      <ul class="service_info">
+        <li
+          class="fwxqxx_item"
+          v-for="(item, index) in fwxqxxDatas"
+          :key="'fwxqxx_' + index"
+        >
+          <h3 class="fwxqxx_title" v-text="'· ' + item.name"></h3>
+          <servive-step
+            v-if="item.type == 'step'"
+            style="margin: 0 20px;"
+          ></servive-step>
+          <p
+            v-else-if="item.type == 'text'"
+            class="fwxqxx_text"
+            v-text="item.value"
+          ></p>
+          <ul v-else-if="item.type == 'list'">
+            <li
+              v-for="(v, i) in item.value"
+              :key="'fwxqxx_li_' + index + '_' + i"
+            >
+              <p class="fwxqxx_text">
+                <span v-text="v.name + '：'"></span>
+                <span v-text="v.value"></span>
+              </p>
+            </li>
+          </ul>
+          <el-table
+            v-else-if="item.type == 'table'"
+            class="fwxqxx_table"
+            :data="item.value.datas"
+            border
+          >
+            <el-table-column
+              type="index"
+              :index="(index) => index + 1"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              v-for="(v, i) in item.value.columns"
+              :key="'table_column_' + index + '_' + i"
+              :prop="v.prop"
+              :label="v.label"
+              :align="v.align || 'left'"
+            ></el-table-column>
+          </el-table>
+          <el-table
+            v-else-if="item.type == 'table2'"
+            class="fwxqxx_table fwxqxx_table_2"
+            :data="item.value.datas"
+            border
+          >
+            <el-table-column prop="name" label="" align="right" width="200">
+              <template slot-scope="scope">
+                <span v-text="scope.row.name + '：'"></span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="value" label="">
+              <template slot-scope="scope">
+                <pre
+                  v-if="scope.row.type == 'code'"
+                  v-html="scope.row.value"
+                ></pre>
+                <span v-else v-text="scope.row.value"></span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </li>
+      </ul>
+    </el-tab-pane>
+    <el-tab-pane label="规格定价" name="second">
+      <div class="service_info">
+        <div class="ggdj_header">
+          <span>购买方式：</span>
+          <el-button-group>
+            <el-button type="danger">
+              按月
+            </el-button>
+            <el-button type="default">
+              按年
+            </el-button>
+          </el-button-group>
+        </div>
+        <el-table class="ggdj_table" :data="ggdjData" border>
+          <el-table-column prop="gg" label="规格"></el-table-column>
+          <el-table-column prop="ggsm" label="规格说明"></el-table-column>
+        </el-table>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="提供机构" name="third">
+      <div class="service_info">
+        <p class="tgjg_dw" v-text="tgjgData.name"></p>
+        <div class="tgjg_img">
+          <img :src="tgjgData.img" width="100%" />
+        </div>
+        <div class="tgjg_lxfs">
+          <p>联系人：<span v-text="tgjgData.lxr"></span></p>
+          <p>联系电话：<span v-text="tgjgData.lxdh"></span></p>
+        </div>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="服务评价信息" name="fourth">
+      <div class="service_info">
+        <div class="fwpjxx_score">
+          <div class="fwpjxx_score_left">
+            <p v-text="ffpjxxData.baseInfo.score + '分'"></p>
+            <p>满分5分</p>
+            <p v-text="'共' + ffpjxxData.baseInfo.total + '个评分'"></p>
+          </div>
+          <ul class="fwpjxx_score_right">
+            <li
+              class="fwpjxx_score_item"
+              v-for="(item, index) in ffpjxxData.baseInfo.starInfo"
+              :key="'star_info_' + index"
+            >
+              <el-rate
+                :value="item.star"
+                disabled
+                text-color="#ff9900"
+                score-template="{value}"
+              >
+              </el-rate>
+              <el-progress
+                :percentage="item.percent"
+                :show-text="false"
+              ></el-progress>
+            </li>
+          </ul>
+        </div>
+        <ul class="fwpjxx_items">
+          <li
+            class="fwpjxx_item"
+            v-for="(item, index) in ffpjxxData.ffpjxxList"
+            :key="'fwpjxx_' + index"
+          >
+            <el-avatar :size="60" :src="item.img"> </el-avatar>
+            <div class="fwpjxx_content">
+              <p>
+                <span v-text="item.name"></span>
+                <el-rate
+                  :value="item.star"
+                  disabled
+                  text-color="#ff9900"
+                  score-template="{value}"
+                >
+                </el-rate>
+                <span v-text="item.time"></span>
+              </p>
+              <p v-text="item.description"></p>
+            </div>
+          </li>
+        </ul>
+        <div class="fwpjxx_pages">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="10"
+            :total="ffpjxxData.baseInfo.total"
+          ></el-pagination>
+        </div>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+// @ is an alias to /src
+import Commodity from "@/components/commodity.vue";
+import BlockRadius from "@/components/block-radius";
+import serviveStep from "@/components/servive-step";
+export default {
+  components: {
+    Commodity,
+    BlockRadius,
+    serviveStep,
+  },
+  data: () => ({
+    serviceTabsActiveName: "first",
+    fwxqxxDatas: [
+      {
+        name: "获取流程",
+        type: "step",
+      },
+      {
+        name: "服务说明",
+        type: "text",
+        value:
+          "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务",
+      },
+      {
+        name: "服务属性",
+        type: "list",
+        value: [
+          {
+            name: "大小",
+            value: "66kb",
+          },
+          {
+            name: "API",
+            value: "Java",
+          },
+          {
+            name: "用途",
+            value: "即用型",
+          },
+          {
+            name: "空间范围（WGS84）",
+            value: "未设置",
+          },
+          {
+            name: "标签",
+            value: "T003 智能地图 T001",
+          },
+          {
+            name: "制作单位",
+            value: "应急管理厅",
+          },
+          {
+            name: "离线模式",
+            value: "禁用",
+          },
+          {
+            name: "附加代码",
+            value: "无",
+          },
+        ],
+      },
+      {
+        name: "字段说明",
+        type: "table",
+        value: {
+          datas: [
+            {
+              zdmc: "排名",
+              zdbm: "grade",
+              zdlx: "string",
+              zdms: "企业水路货物周转量排名",
+              slz: "1",
+            },
+            {
+              zdmc: "同比增长",
+              zdbm: "increase",
+              zdlx: "string",
+              zdms: "同比增长量信息",
+              slz: '"100%"',
+            },
+          ],
+          columns: [
+            {
+              prop: "zdmc",
+              label: "字段名称",
+            },
+            {
+              prop: "zdbm",
+              label: "字段编码",
+              align: "center",
+            },
+            {
+              prop: "zdlx",
+              label: "字段类型",
+              align: "center",
+            },
+            {
+              prop: "zdms",
+              label: "字段描述",
+            },
+            {
+              prop: "slz",
+              label: "示例值",
+              align: "center",
+            },
+          ],
+        },
+      },
+      {
+        name: "接口详情信息",
+        type: "table2",
+        value: {
+          datas: [
+            {
+              name: "接口地址",
+              value: "/cigservice/baseservice/fillder/turnover",
+              type: "text",
+            },
+            {
+              name: "请求方式",
+              value: "GET",
+              type: "text",
+            },
+            {
+              name: "编码格式",
+              value: "UTF-8",
+              type: "text",
+            },
+            {
+              name: "接口编码",
+              value: "turnover",
+              type: "text",
+            },
+            {
+              name: "接口描述",
+              value: "水路货运周转量排名",
+              type: "text",
+            },
+            {
+              name: "请求参数",
+              value: "无请求参数",
+              type: "text",
+            },
+            {
+              name: "响应参数",
+              value: "无响应参数",
+              type: "text",
+            },
+            {
+              name: "响应示例",
+              value: `
+                {
+                  success: 1,
+                  data: [
+                    {
+                      data: [
+                        { 
+                          grade: "19", 
+                          increase: "100%"
+                        }
+                      ],
+                      column: [
+                        { 
+                          title: "排名", 
+                          key: "grade"
+                        },
+                        { 
+                          title: "同比增长",
+                           key: "increase"
+                        },
+                      ],
+                    },
+                  ],
+                }
+              `,
+              type: "code",
+            },
+            {
+              name: "请求示例NodeJs",
+              value: `
+                var http = require("http");
+                var options = {
+                  "method": "GET",
+                  "hostname": "www.giscloud.cx",
+                  "port": "80",
+                  "path": "/cigservice/baseservice/fillder/turnover",
+                  "headers": {
+                    "Content-Type":"application/x-www-form-urlencoded",
+                    "charset":"utf-8"
+                  }
+                };
+                var req = http.request(options, function (res) {
+                  var chunks = [];
+                  res.on("data", function (chunk) {
+                  chunks.push(chunk);
+                  });
+                  res.on("end", function () {
+                    var body = Buffer.concat(chunks);
+                    console.log(body.toString());
+                  });
+                });
+                req.end();
+              `,
+              type: "code",
+            },
+          ],
+        },
+      },
+      {
+        name: "微服务响应列表",
+        type: "table",
+        value: {
+          datas: [
+            {
+              name: "apaas-mapvideos",
+              description: "地图视频融合应用服务",
+            },
+            {
+              name: "apaas-mapvideos",
+              description: "地图视频融合应用服务",
+            },
+          ],
+          columns: [
+            {
+              prop: "name",
+              label: "*微服务名称",
+            },
+            {
+              prop: "description",
+              label: "微服务描述",
+              align: "center",
+            },
+          ],
+        },
+      },
+    ], // 服务详情信息
+    ggdjData: [
+      {
+        gg: "访问次数：20/日 访问量：100/日",
+        ggsm:
+          "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。",
+      },
+      {
+        gg: "访访问次数：200/日 访问量：1000/日",
+        ggsm:
+          "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。",
+      },
+      {
+        gg: "访问次数：无上限 访问量",
+        ggsm: "",
+      },
+    ], // 规格定价
+    tgjgData: {
+      name: "贵州省交通运输厅",
+      img:
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      lxr: "张先生",
+      lxdh: "010-66666666",
+    }, // 提供机构
+    ffpjxxData: {
+      baseInfo: {
+        score: 3.5,
+        total: 23,
+        starInfo: [
+          {
+            star: 5,
+            percent: 40,
+          },
+          {
+            star: 4,
+            percent: 30,
+          },
+          {
+            star: 3,
+            percent: 20,
+          },
+          {
+            star: 2,
+            percent: 10,
+          },
+          {
+            star: 1,
+            percent: 0,
+          },
+        ],
+      },
+      ffpjxxList: [
+        {
+          name: "禺彊",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 5,
+          description: "这个应用非常实用，可以应用到多个业务领域！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "海纳",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 5,
+          description:
+            "赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+        {
+          name: "左宜",
+          img:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          star: 3,
+          description: "赞！",
+          time: " 2019-12-12",
+        },
+      ],
+    }, // 服务评价信息
+  }),
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.service_info {
+  width: 80%;
+  padding: 10px 20px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  background-color: #eee;
+}
+.service_info .fwxqxx_item {
+  margin-bottom: 20px;
+}
+.service_info .fwxqxx_item > .fwxqxx_title {
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 20px;
+  margin-bottom: 5px;
+}
+.service_info .fwxqxx_item > .fwxqxx_text {
+  font-size: 16px;
+  line-height: 24px;
+  color: #333;
+}
+.service_info .fwxqxx_item > .fwxqxx_table {
+  width: 100%;
+}
+.service_info .ggdj_header {
+  margin-bottom: 10px;
+}
+.service_info .ggdj_table {
+  width: 100%;
+}
+.service_info .tgjg_dw {
+  font-size: 20px;
+  line-height: 30px;
+  margin-bottom: 10px;
+}
+.service_info .tgjg_img {
+  width: 400px;
+  margin-bottom: 10px;
+}
+.service_info .tgjg_lxfs {
+  font-size: 16px;
+  line-height: 24px;
+}
+.service_info .fwpjxx_score {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 10px 0;
+}
+.service_info .fwpjxx_score > .fwpjxx_score_left {
+  flex-shrink: 0;
+  margin-right: 20px;
+}
+.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(1) {
+  font-size: 32px;
+  font-weight: bold;
+}
+.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(2) {
+  font-size: 14px;
+  color: #333;
+}
+.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(3) {
+  font-size: 18px;
+  color: #ccc;
+}
+.service_info .fwpjxx_score > .fwpjxx_score_right {
+  flex-grow: 1;
+}
+.service_info .fwpjxx_score_item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  max-width: 480px;
+}
+.service_info .fwpjxx_score_item > .el-progress {
+  flex-grow: 1;
+  margin-left: 10px;
+}
+.service_info .fwpjxx_item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-top: 20px;
+}
+.service_info .fwpjxx_item > .el-avatar {
+  flex-shrink: 0;
+  margin-right: 20px;
+}
+.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 18px;
+  color: #999;
+}
+.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) > .el-rate {
+  margin: 0 60px 0 30px;
+}
+.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(2) {
+  font-size: 18px;
+  color: #666;
+}
+.service_info .fwpjxx_pages {
+  text-align: center;
+  margin: 20px 0 10px;
+}
+</style>
+
+<style>
+.fwpjxx_score_item .el-progress-bar__outer {
+  background: #fff;
+}
+.fwxqxx_table_2 .el-table__header-wrapper {
+  display: none;
+}
+</style>
diff --git a/src/components/servive-step.vue b/src/components/servive-step.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b6734f7d335d84c3c3c152979bd494c5a699df48
--- /dev/null
+++ b/src/components/servive-step.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="service_step">
+    <div class="step_bg"></div>
+    <ul class="step_items">
+      <li class="step_item">
+        <div class="step_icon">
+            <span>1</span>
+        </div>
+        <p class="step_title">服务申请</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>2</span>
+        </div>
+        <p class="step_title">审核确认</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>3</span>
+        </div>
+        <p class="step_title">费用支付</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>4</span>
+        </div>
+        <p class="step_title">服务获取</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.service_step {
+  position: relative;
+  min-height: 48px;
+}
+.service_step > .step_bg {
+  position: absolute;
+  top: 23px;
+  right: 24px;
+  left: 24px;
+  border: 1px solid #1abc9c;
+}
+.service_step > .step_items {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  text-align: center;
+}
+.service_step .step_item > .step_icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #1abc9c;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+}
+.service_step .step_item > .step_title {
+  font-size: 12px;
+  line-height: 24px;
+  color: #1abc9c;
+}
+</style>
diff --git a/src/components/side-nav-bar.vue b/src/components/side-nav-bar.vue
index 768a8d84ad0ab507a92d4bdd770e15704c5e8887..d66d85469e78735932005b02467329cd82bea8a9 100644
--- a/src/components/side-nav-bar.vue
+++ b/src/components/side-nav-bar.vue
@@ -9,14 +9,16 @@
       <span v-text="title"></span>
     </h3>
     <ul class="side_nav_bar_list">
-      <li
+      <router-link
+        tag="li"
+        active-class="current"
         v-for="(nav, index) in navList"
         :class="{ current: $route.path.indexOf(nav.path) > -1 }"
         :key="'nav' + index"
-        @click="navAction(nav)"
+        :to="nav.path"
       >
         <span v-text="nav.name"></span>
-      </li>
+      </router-link>
     </ul>
   </div>
 </template>
@@ -39,9 +41,6 @@ export default {
     },
   },
   methods: {
-    navAction(nav) {
-      this.$router.push(nav.path);
-    },
     titleAction() {
       if (this.titlePath) {
         this.$router.push(this.titlePath);
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index 7699d39746ca1ae211a692d4edc23fa4f7e0f84c..1e88d1f0ec411921e592a359ebccd8916732d545 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -115,15 +115,17 @@
             <span v-if="item.type === 'Button'">
               <b v-for="(btn, key) in item.btnList" :key="key">
                 <em
+                  class="action"
                   v-if="btn.label == '分配'||btn.label == '已分配'"
                 >
                   <em v-if="btn.label == '分配'&&scope.row.state == 0"  style="color: #0f2683" @click="handleClick(btn.type, scope.row)">{{ btn.label }}</em>
                   <em v-if="btn.label == '已分配'&&scope.row.state == 1">{{ btn.label }}</em>
                 </em>
                 <em
+                  class="action"
                   v-else
                   :class="btn.type"
-                  style="color: #0f2683"
+                  :style="{color: btn.label=='删除' ? '#830f53' : '#0f2683'}"
                   @click="handleClick(btn.type, scope.row)"
                 >{{ btn.label }}</em>
                 <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{ btn.line }}</em>
@@ -601,6 +603,10 @@ export default {
 }
 em {
   font-style: normal;
+  user-select: none;
+}
+em.action {
+  cursor: pointer;
 }
 .ces-table .el-table--mini td,
 .ces-table .el-table--mini th {
diff --git a/src/pages/example_commodity.vue b/src/pages/example_commodity.vue
index 81affe1131df9558a47eb9fbdd819382f1dba764..7401bba1e5fa0ab35058185f7bdbd6b0eb870e3a 100644
--- a/src/pages/example_commodity.vue
+++ b/src/pages/example_commodity.vue
@@ -2,7 +2,10 @@
   <div class="com_ex">
     <block-radius>
       <h3>按原型大致做了一下，调优等后续</h3>
+
       <Commodity :datas="datas" />
+  
+      <servive-info></servive-info>
     </block-radius>
   </div>
 </template>
@@ -11,10 +14,12 @@
 // @ is an alias to /src
 import Commodity from "@/components/commodity.vue";
 import BlockRadius from "@/components/block-radius";
+import serviveInfo from "@/components/servive-info";
 export default {
   components: {
     Commodity,
-    BlockRadius
+    BlockRadius,
+    serviveInfo,
   },
   data: () => ({
     datas: {
@@ -24,22 +29,21 @@ export default {
       updated: "2020-03-12 18:31:12",
       dataField: "经济建设",
       serviceType: "综合应用服务",
-      resourceSummary:
-        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
       openLevel: "共享",
       views: "99999",
       numberOfAcquisitions: "99999",
-      specifications:
-        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问"
-    }
+      specifications: "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
+    },
   }),
   mounted() {},
-  methods: {}
+  methods: {},
 };
 </script>
+
 <style scoped>
 .com_ex {
   margin-top: 100px;
   padding: 20px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/fwgl.vue b/src/pages/fwgl.vue
index 2677bb2a59b9e28e7123d260bf2bf31b06d06176..7d72508ef57f4efffda28a9ac784a1733c92b3dd 100644
--- a/src/pages/fwgl.vue
+++ b/src/pages/fwgl.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="fwgl_container">
-    <side-nav-bar :nav-list="navList" title-path="/fwgl"></side-nav-bar>
+    <side-nav-bar :nav-list="navList" :title-path="navList[0].path"></side-nav-bar>
     <div class="main_container">
       <router-view
         :key="'type_' + $route.params && $route.params.type"
diff --git a/src/pages/fwglList.vue b/src/pages/fwglList.vue
index 7d856ffae2061268c4a4db4b3a1320747b104a6a..fe95a6baaf18ab7d2a8c567c885e7c89059a9939 100644
--- a/src/pages/fwglList.vue
+++ b/src/pages/fwglList.vue
@@ -8,37 +8,47 @@
       <ces-table
         class="r_yhgl_table"
         size="mini"
+        url="tableData"
+        detailsUrl="/fwgl/servicedetail/"
         :border="false"
         :headers="headers"
-        url="tableData"
         :searchShow="true"
         :autoAdd="false"
-        :isDialog="true"
-        :confirmOptions="confirmOptions"
-        detailsUrl="/fwgl/servicedetail/"
-        @primary-edit="editItem"
-        @sold-out="soldOutItem"
         :emptyText="emptyText"
         :stripe="true"
         :pageSizeShow="true"
         :filterList="filterList"
+        :isIndex="false"
+        @action-delete="deleteItem"
+        @action-edit="editItem"
+        @action-sold-out="soldOutItem"
+        @action-cancel="cancelItem"
+        @action-examine="examineItem"
+        @action-detail="detailItem"
       ></ces-table>
     </div>
+    <dialog-action
+      ref="myConfirm"
+      :confirm-options="confirmOptions"
+    ></dialog-action>
   </div>
 </template>
 
 <script>
 import cesTable from "@/components/table-um";
+import dialogAction from "@/components/dialog-action";
+
 export default {
   data: () => ({
     headers: [],
     url: "",
     detailsUrl: "ss/",
     confirmOptions: {
-      title: "提示", //提示
-      message: "确认删除该条数据？", //""
-      btnCancelText: "取消", //取消
-      btnSubmitText: "确定", //确定
+      title: "",
+      message: "",
+      btnCancelText: "",
+      btnSubmitText: "",
+      item: null,
     },
     emptyText: "暂时没数据",
     filterList: [
@@ -79,55 +89,95 @@ export default {
   }),
   components: {
     cesTable,
+    dialogAction,
   },
   methods: {
+    deleteItem(item) {
+      this.confirmOptions.title = "";
+      this.confirmOptions.message = "是否删除该条服务？";
+      this.confirmOptions.btnCancelText = "";
+      this.confirmOptions.btnSubmitText = "";
+      this.confirmOptions.confirmSubmit = () => {
+        console.log("deleteItem - " + item.name);
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
     editItem(item) {
       this.$router.push("/fwgl/serviceedit/" + item.id);
     },
     soldOutItem(item) {
-      console.log(item);
+      this.confirmOptions.title = "是否删除该条服务？";
+      this.confirmOptions.message =
+        "下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。";
+      this.confirmOptions.btnCancelText = "";
+      this.confirmOptions.btnSubmitText = "发送通知";
+      this.confirmOptions.confirmSubmit = () => {
+        console.log("soldOutItem - " + item.name);
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+    cancelItem(item) {
+      console.log("cancelItem - " + item.name);
+    },
+    examineItem(item) {
+      console.log("examineItem - " + item.name);
+    },
+    detailItem(item) {
+      console.log("detailItem - " + item.name);
+    },
+    confirmSubmit(item) {
+      console.log(item.name);
     },
   },
   mounted() {
-    this.headers = [];
-
-    this.headers.push(
-      { label: "服务名称", prop: "name", type: "href", align: "left" },
-      { label: "服务url", prop: "date", type: "href", align: "center" },
-      { label: "开放程度", prop: "address", type: "href", align: "center" },
-      { label: "服务描述", prop: "address", type: "href", align: "left" },
-      { label: "注册发布时间", prop: "address", type: "href", align: "center" },
-      { label: "服务类型", prop: "address", type: "href", align: "center" }
-    );
-
     switch (parseInt(this.$route.params.type)) {
       case 0:
-        this.headers.push({
-          label: "操作",
-          type: "Button",
-          align: "center",
-          width: 240,
-          btnList: [
-            {
-              type: "primary-edit",
-              label: "编辑",
-              line: "|",
-            },
-            {
-              type: "sold-out",
-              label: "申请下架",
-              line: "|",
-            },
-            {
-              type: "primary-del",
-              label: "删除",
-            },
-          ],
-        });
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务url", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          {
+            label: "注册发布时间",
+            prop: "address",
+            type: "",
+            align: "center",
+          },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 240,
+            btnList: [
+              {
+                type: "action-edit",
+                label: "编辑",
+                line: "|",
+              },
+              {
+                type: "action-sold-out",
+                label: "申请下架",
+                line: "|",
+              },
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
         break;
       case 1:
-        this.headers.push(
-          { label: "申请状态", prop: "address", type: "href", align: "center" },
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          { label: "申请时间", prop: "address", type: "", align: "left" },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
           {
             label: "操作",
             type: "Button",
@@ -135,22 +185,28 @@ export default {
             width: 160,
             btnList: [
               {
-                type: "sold-out",
+                type: "action-cancel",
                 label: "取消",
                 line: "|",
               },
               {
-                type: "primary-del",
+                type: "action-delete",
                 label: "删除",
               },
             ],
-          }
-        );
+          },
+        ];
         break;
       case 2:
-        this.headers.push(
-          { label: "审批时间", prop: "address", type: "href", align: "center" },
-          { label: "审批状态", prop: "address", type: "href", align: "center" },
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "address", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "请求方式", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          { label: "审批时间", prop: "address", type: "", align: "center" },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          { label: "审批状态", prop: "address", type: "", align: "center" },
           {
             label: "操作",
             type: "Button",
@@ -158,17 +214,78 @@ export default {
             width: 160,
             btnList: [
               {
-                type: "sold-out",
+                type: "action-examine",
                 label: "审批",
                 line: "|",
               },
               {
-                type: "primary-del",
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
+        break;
+      case 3:
+        this.headers = [
+          { label: "工作区域", prop: "name", type: "href", align: "left" },
+          { label: "网络环境", prop: "name", type: "", align: "center" },
+          { label: "CPU（核）", prop: "name", type: "", align: "center" },
+          { label: "内存（GB）", prop: "name", type: "", align: "center" },
+          { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
+          { label: "实例数（个）", prop: "name", type: "", align: "center" },
+          { label: "申请时间", prop: "name", type: "", align: "center" },
+          { label: "申请状态", prop: "name", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-detail",
+                label: "查看详情",
+              },
+            ],
+          },
+        ];
+        break;
+      default:
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务url", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          {
+            label: "注册发布时间",
+            prop: "address",
+            type: "",
+            align: "center",
+          },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-edit",
+                label: "编辑",
+                line: "|",
+              },
+              {
+                type: "action-sold-out",
+                label: "申请下架",
+                line: "|",
+              },
+              {
+                type: "action-delete",
                 label: "删除",
               },
             ],
-          }
-        );
+          },
+        ];
         break;
     }
   },