From 630763848a857445992dfe4831984394a1de2d82 Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Mon, 27 Apr 2020 12:04:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=EF=BC=8C=E6=8B=89=E4=B8=80?=
 =?UTF-8?q?=E4=B8=8B=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/block-radius.vue |  2 +-
 src/pages/fwzc_fwcs.vue         | 90 ++++++++++++++++++++++++++++-----
 2 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/src/components/block-radius.vue b/src/components/block-radius.vue
index 9c6e8c1..2548bf2 100644
--- a/src/components/block-radius.vue
+++ b/src/components/block-radius.vue
@@ -19,7 +19,7 @@ export default {
 .block_radius {
     background-color: #fff;
     border-radius: 10px;
-    padding: 10px;
+    padding: 20px;
 }
 </style>
 
diff --git a/src/pages/fwzc_fwcs.vue b/src/pages/fwzc_fwcs.vue
index 71293c6..0520771 100644
--- a/src/pages/fwzc_fwcs.vue
+++ b/src/pages/fwzc_fwcs.vue
@@ -1,14 +1,32 @@
 <template>
   <div class="fwcs">
+    <el-breadcrumb separator="/" class="bread_crumb">
+      <el-breadcrumb-item :to="{ path: '/' }">服务注册</el-breadcrumb-item>
+      <el-breadcrumb-item>服务测试</el-breadcrumb-item>
+    </el-breadcrumb>
     <block-radius>
       <el-row>
-        <el-button>默认按钮</el-button>
-        <el-button>默认按钮</el-button>
-        <el-button>默认按钮</el-button>
-        <el-button>默认按钮</el-button>
-        <el-button>默认按钮</el-button>
+        <el-button
+          v-for="item in btnList"
+          :key="item.id"
+          @click="clickBtn(item.id)"
+          :class="activeBtn == item.id ? 'fwcs_btn_act':'fwcs_btn_dis'"
+        >{{ item.text }}</el-button>
       </el-row>
       <div class="gray_line"></div>
+      <div class="fwcs_fwdz">服务地址：</div>
+      <div class="fwcs_fwdz_inner">
+        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
+          <el-select v-model="select" slot="prepend" placeholder="请选择">
+            <el-option
+              v-for="item in optionType"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-input>
+      </div>
     </block-radius>
   </div>
 </template>
@@ -20,13 +38,26 @@ export default {
     blockRadius
   },
   data: () => ({
-    activeName: "second"
+    btnList: [
+      { icon: "", text: "数据服务", id: 0 },
+      { icon: "", text: "时空服务", id: 1 },
+      { icon: "", text: "视频服务", id: 2 },
+      { icon: "", text: "感知服务", id: 3 },
+      { icon: "", text: "综合服务", id: 4 }
+    ],
+    activeBtn: 0,
+    input3: "",
+    select: "GET",
+    optionType: [
+      { label: "GET", value: "GET" },
+      { label: "POST", value: "POST" }
+    ]
   }),
   computed: {},
   watch: {},
   methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
+    clickBtn(val) {
+      this.activeBtn = val;
     }
   },
   mounted() {}
@@ -36,11 +67,44 @@ export default {
 <style scoped>
 .fwcs {
 }
+.bread_crumb {
+  margin: 20px;
+  font-size: 14px;
+}
+.fwcs_btn_act {
+  background-color: #e56600;
+  color: #ffffff;
+}
+.fwcs_btn_dis {
+  background-color: #e3e5ef;
+  color: #8890a7;
+}
 .gray_line {
-    width: 98%;
-    margin: 20px auto;
-    height: 1px;
-    background-color: #DCDFE6;
+  width: 100%;
+  margin: 20px auto;
+  height: 1px;
+  background-color: #dcdfe6;
+}
+.fwcs_fwdz {
+  color: #58617a;
+  margin: 20px;
+  font-size: 14px;
+}
+.input-with-select {
+  width: 70%;
+}
+</style>
+<style>
+.bread_crumb .el-breadcrumb__inner {
+  color: #b4c0f5 !important;
+}
+.bread_crumb .is-link {
+  color: #626de9 !important;
+}
+.fwcs_fwdz_inner .el-select .el-input {
+  width: 130px;
+  background-color: #0f2683;
+  color: #ffffff;
+  border-radius: 4px 0px 0px 4px;
 }
 </style>
-
-- 
2.26.0