diff --git a/src/views/dataBasePlatform/dataService/apiManagement/index.vue b/src/views/dataBasePlatform/dataService/apiManagement/index.vue
index eba8b89..e933bfc 100644
--- a/src/views/dataBasePlatform/dataService/apiManagement/index.vue
+++ b/src/views/dataBasePlatform/dataService/apiManagement/index.vue
@@ -23,14 +23,14 @@
             <div class="dataBox">
               API名称
               <el-input v-model="qlCode" style="width: 200px" placeholder="请输入API名称">
-                <template #suffix>
+                <!-- <template #suffix>
                   <el-icon class="el-input__icon searchBtn"><search /></el-icon>
-                </template>
+                </template> -->
               </el-input>
             </div>
             <div>
               状态
-              <el-select v-model="addForm.p1" style="width: 200px">
+              <el-select v-model="searchState" style="width: 200px">
                 <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -68,9 +68,13 @@
           </el-table-column>
           <el-table-column prop="p4" label="标签"> </el-table-column>
           <el-table-column prop="p5" label="存放路径"> </el-table-column>
-          <el-table-column prop="p6" label="状态"> </el-table-column>
+          <el-table-column prop="p6" label="状态">
+            <template #default="{ row }">
+              <div>{{ stateType.find(item => item.value == row.p6)?.label || row.p6 }}</div>
+            </template>
+          </el-table-column>
           <el-table-column prop="p7" label="创建人"> </el-table-column>
-          <el-table-column prop="p8" label="创建时间" min-width="100"> </el-table-column>
+          <el-table-column prop="p8" label="创建时间" min-width="120"> </el-table-column>
           <el-table-column prop="p9" label="标签"> </el-table-column>
 
           <el-table-column label="操作" min-width="200">
@@ -115,7 +119,7 @@
 
         <el-row>
           <el-col :span="24">
-            <el-form-item label="标签名称" prop="title">
+            <el-form-item label="目录" prop="title">
               <el-input v-model="addForm.name" placeholder="请输入" clearable />
             </el-form-item>
           </el-col>
@@ -123,15 +127,51 @@
 
         <el-row>
           <el-col :span="24">
-            <el-form-item label="标签描述" prop="">
-              <el-input
-                v-model="addForm.p1"
-                :autosize="{ minRows: 2, maxRows: 4 }"
-                type="textarea"
-                placeholder="请输入"
-                maxlength="300"
-                show-word-limit
-              />
+            <el-form-item label="API ID" prop="">
+              <el-input v-model="addForm.p1" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="API名称" prop="">
+              <el-input v-model="addForm.p2" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="请求方式" prop="">
+              <el-input v-model="addForm.p3" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="标签" prop="">
+              <el-input v-model="addForm.p4" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="存放路径" prop="">
+              <el-input v-model="addForm.p5" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="状态" prop="">
+              <!-- <el-input v-model="addForm.p5" placeholder="请输入" clearable /> -->
+              <el-select v-model="addForm.p6" style="width: 100%">
+                <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
             </el-form-item>
           </el-col>
         </el-row>
@@ -258,6 +298,7 @@
 const { dialogConfig, addForm, rules } = toRefs(dataList);
 
 const searchTree = ref('');
+const searchState = ref('');
 const treeData = [
   {
     label: '排水',
@@ -382,7 +423,7 @@
         p3: '002',
         p4: 1,
         p5: 1,
-        p6: '12',
+        p6: 1,
         p7: '34',
         p8: '2022-06-01 12:00:00',
         p9: '',
@@ -399,7 +440,7 @@
         p3: '2022',
         p4: 1,
         p5: 1,
-        p6: '202',
+        p6: 1,
         p7: '34',
         p8: '2022-06-01 12:00:00',
         p9: '',

diff --git a/src/views/dataBasePlatform/dataService/apiManagement/index.vue b/src/views/dataBasePlatform/dataService/apiManagement/index.vue
index eba8b89..e933bfc 100644
--- a/src/views/dataBasePlatform/dataService/apiManagement/index.vue
+++ b/src/views/dataBasePlatform/dataService/apiManagement/index.vue
@@ -23,14 +23,14 @@
             <div class="dataBox">
               API名称
               <el-input v-model="qlCode" style="width: 200px" placeholder="请输入API名称">
-                <template #suffix>
+                <!-- <template #suffix>
                   <el-icon class="el-input__icon searchBtn"><search /></el-icon>
-                </template>
+                </template> -->
               </el-input>
             </div>
             <div>
               状态
-              <el-select v-model="addForm.p1" style="width: 200px">
+              <el-select v-model="searchState" style="width: 200px">
                 <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -68,9 +68,13 @@
           </el-table-column>
           <el-table-column prop="p4" label="标签"> </el-table-column>
           <el-table-column prop="p5" label="存放路径"> </el-table-column>
-          <el-table-column prop="p6" label="状态"> </el-table-column>
+          <el-table-column prop="p6" label="状态">
+            <template #default="{ row }">
+              <div>{{ stateType.find(item => item.value == row.p6)?.label || row.p6 }}</div>
+            </template>
+          </el-table-column>
           <el-table-column prop="p7" label="创建人"> </el-table-column>
-          <el-table-column prop="p8" label="创建时间" min-width="100"> </el-table-column>
+          <el-table-column prop="p8" label="创建时间" min-width="120"> </el-table-column>
           <el-table-column prop="p9" label="标签"> </el-table-column>
 
           <el-table-column label="操作" min-width="200">
@@ -115,7 +119,7 @@
 
         <el-row>
           <el-col :span="24">
-            <el-form-item label="标签名称" prop="title">
+            <el-form-item label="目录" prop="title">
               <el-input v-model="addForm.name" placeholder="请输入" clearable />
             </el-form-item>
           </el-col>
@@ -123,15 +127,51 @@
 
         <el-row>
           <el-col :span="24">
-            <el-form-item label="标签描述" prop="">
-              <el-input
-                v-model="addForm.p1"
-                :autosize="{ minRows: 2, maxRows: 4 }"
-                type="textarea"
-                placeholder="请输入"
-                maxlength="300"
-                show-word-limit
-              />
+            <el-form-item label="API ID" prop="">
+              <el-input v-model="addForm.p1" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="API名称" prop="">
+              <el-input v-model="addForm.p2" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="请求方式" prop="">
+              <el-input v-model="addForm.p3" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="标签" prop="">
+              <el-input v-model="addForm.p4" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="存放路径" prop="">
+              <el-input v-model="addForm.p5" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="状态" prop="">
+              <!-- <el-input v-model="addForm.p5" placeholder="请输入" clearable /> -->
+              <el-select v-model="addForm.p6" style="width: 100%">
+                <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
             </el-form-item>
           </el-col>
         </el-row>
@@ -258,6 +298,7 @@
 const { dialogConfig, addForm, rules } = toRefs(dataList);
 
 const searchTree = ref('');
+const searchState = ref('');
 const treeData = [
   {
     label: '排水',
@@ -382,7 +423,7 @@
         p3: '002',
         p4: 1,
         p5: 1,
-        p6: '12',
+        p6: 1,
         p7: '34',
         p8: '2022-06-01 12:00:00',
         p9: '',
@@ -399,7 +440,7 @@
         p3: '2022',
         p4: 1,
         p5: 1,
-        p6: '202',
+        p6: 1,
         p7: '34',
         p8: '2022-06-01 12:00:00',
         p9: '',
diff --git a/src/views/dataBasePlatform/dataService/apiMarket/index.vue b/src/views/dataBasePlatform/dataService/apiMarket/index.vue
index 9f1d35d..17b774e 100644
--- a/src/views/dataBasePlatform/dataService/apiMarket/index.vue
+++ b/src/views/dataBasePlatform/dataService/apiMarket/index.vue
@@ -1,10 +1,645 @@
 <template>
-  <div class="apiMarket publicContainer">apiMarket</div>
+  <div class="apiMarket publicContainer">
+    <div class="dataTitle">API市场</div>
+    <el-divider />
+    <div class="dataContent">
+      <el-row class="dataTop">
+        <el-col :span="16" class="dataLeft">
+          <div class="dataBox">
+            <el-input v-model="qlCode" style="width: 200px" placeholder="请输入关键字">
+              <template #suffix>
+                <el-icon class="el-input__icon searchBtn"><search /></el-icon>
+              </template>
+            </el-input>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <el-button type="primary" icon="search">查询</el-button>
+          <el-button type="primary" icon="Refresh" plain>重置</el-button>
+          <!-- <el-button type="primary" icon="Plus" @click="addInfo">新增</el-button>
+          <el-button type="primary" plain>批量删除</el-button> -->
+        </el-col>
+      </el-row>
+
+      <!-- 表单 -->
+      <div class="dataForm" v-setHeight="{ bottom: 60 }">
+        <div class="apiBox" v-for="(item, index) in tableData" :key="index">
+          <div class="apiLeft">
+            <img :src="tj_icon" alt="" class="apiImg" />
+          </div>
+          <div class="apiRight">
+            <div class="rightTop">
+              <div class="apiTitle">API ID: {{ item.code }}</div>
+              <div class="apiTitle">API名称: {{ item.name }}</div>
+              <div class="apiTitle">API标签: {{ item.p1 }}</div>
+              <div class="apiTitle">认证方式: {{ item.p2 }}</div>
+            </div>
+            <div class="rightBottom">
+              <el-button type="primary" plain>API 详情</el-button>
+              <el-button type="primary" plain @click="addInfo(item)">申请调用</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <pagination
+        class="pagingPosition"
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- 新增 及 修改 -->
+    <el-dialog v-model="dialogConfig.open" :show-close="true" class="dia" destroy-on-close width="800px">
+      <template #header>
+        <div class="diaHeader">
+          {{ dialogConfig.title }}
+        </div>
+      </template>
+      <el-form :model="addForm" :rules="rules" label-width="auto" ref="ruleAddFormRef">
+        <!-- <el-row>
+          <el-col :span="24">
+            <el-form-item label="桥梁编号" prop="title">
+              <el-input v-model="addForm.code" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row> -->
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="申请人" prop="title">
+              <el-input v-model="addForm.name" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="最大请求量" prop="">
+              <el-input v-model="addForm.p1" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="期限" prop="">
+              <!-- <el-input v-model="addForm.p5" placeholder="请输入" clearable /> -->
+              <el-select v-model="addForm.p2" style="width: 100%">
+                <el-option v-for="item in stationType" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="关联应用" prop="">
+              <!-- <el-input v-model="addForm.p5" placeholder="请输入" clearable /> -->
+              <el-select v-model="addForm.p3" style="width: 100%">
+                <el-option v-for="item in stateType1" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="申请原因" prop="">
+              <el-input
+                v-model="addForm.p4"
+                :autosize="{ minRows: 2, maxRows: 4 }"
+                type="textarea"
+                placeholder="请输入"
+                maxlength="300"
+                show-word-limit
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row class="diaCheck">
+          <el-button type="primary" @click="submitForm(ruleAddFormRef)">确 定</el-button>
+          <el-button class="cancel" @click="close">取 消</el-button>
+        </el-row>
+      </el-form>
+    </el-dialog>
+  </div>
 </template>
 
-<script setup name="apiMarket"></script>
+<script setup name="apiMarket">
+import tj_icon from '@/assets/images/order/tj_icon.png';
+import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
+import { onMounted, reactive, toRefs } from 'vue';
+
+const { proxy } = getCurrentInstance();
+
+const stationType = ref([
+  {
+    id: 1,
+    value: 1,
+    label: '一周',
+  },
+  {
+    id: 2,
+    value: 2,
+    label: '一个月',
+  },
+  {
+    id: 3,
+    value: 3,
+    label: '三个月',
+  },
+  {
+    id: 4,
+    value: 4,
+    label: '半年',
+  },
+  {
+    id: 5,
+    value: 5,
+    label: '一年',
+  },
+]);
+const stateType = ref([
+  {
+    id: 1,
+    value: 1,
+    label: '待上线',
+  },
+  {
+    id: 2,
+    value: 2,
+    label: '已上线',
+  },
+  {
+    id: 3,
+    value: 3,
+    label: '已下线',
+  },
+]);
+const stateType1 = ref([
+  {
+    id: 1,
+    value: 1,
+    label: '应用1',
+  },
+  {
+    id: 2,
+    value: 2,
+    label: '应用2',
+  },
+  {
+    id: 3,
+    value: 3,
+    label: '应用3',
+  },
+  {
+    id: 4,
+    value: 4,
+    label: '应用4',
+  },
+]);
+
+const ruleAddFormRef = ref();
+const total = ref(0);
+const loading = ref(false);
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+});
+const qlCode = ref('');
+const tableData = ref([]);
+const multipleSelection = ref([]); // 多选数据
+const dataList = reactive({
+  dialogConfig: {
+    title: '',
+    open: false,
+  },
+  addForm: {
+    id: undefined,
+    code: '',
+    name: '',
+    p1: '',
+    p2: '',
+    p3: '',
+    p4: '',
+    p5: '',
+    p6: '',
+    p7: '',
+    p8: '',
+    p9: '',
+    info: '',
+    handlePicList: [],
+  },
+  rules: {
+    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
+  },
+});
+
+const { dialogConfig, addForm, rules } = toRefs(dataList);
+
+// 新增和编辑
+const addInfo = row => {
+  dialogConfig.value.open = true;
+  // addForm.value = row;
+  dialogConfig.value.title = '申请调用';
+  // if (row.id) {
+  //   addForm.value = row;
+  //   dialogConfig.value.title = '编辑API管理';
+  // } else {
+  //   addForm.value = {
+  //     id: undefined,
+  //     code: '',
+  //     name: '',
+  //     p1: '',
+  //     p2: '',
+  //     p3: '',
+  //     p4: '',
+  //     p5: '',
+  //     p6: '',
+  //     p7: '',
+  //     p8: '',
+  //     p9: '',
+  //     info: '',
+  //     handlePicList: [],
+  //   };
+  //   dialogConfig.value.title = '新增API管理';
+  // }
+};
+// 新增和编辑 提交
+const submitForm = formRef => {
+  if (!formRef) return;
+  formRef.validate(valid => {
+    if (valid) {
+      console.log('---------', addForm.value);
+      // addInfo(addForm.value).then(response => {
+      //   proxy.$modal.msgSuccess('新增成功');
+      //   getInfoList();
+      // });
+      dialogConfig.value.open = false;
+    }
+  });
+};
+
+const close = () => {
+  dialogConfig.value.open = false;
+};
+
+// table多选
+const handleSelectionChange = val => {
+  console.log('🚀 ~ handleSelectionChange ~ val:', val);
+  multipleSelection.value = val;
+};
+
+// 新增和编辑
+
+// 删除
+const deleteInfo = () => {};
+
+// 获取表单数据
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    tableData.value = [
+      {
+        id: '001',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '001',
+        p3: '002',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+      {
+        id: '002',
+        code: '123456789',
+        date: '2022-06-01 12:00:00',
+        name: '桥梁名称',
+        p1: '1',
+        p2: '20',
+        p3: '2022',
+        p4: 1,
+        p5: 1,
+        p6: 1,
+        p7: '34',
+        p8: '2022-06-01 12:00:00',
+        p9: '',
+        info: '',
+        handlePicList: [],
+      },
+    ];
+    total.value = tableData.value.length;
+    loading.value = false;
+  }, 500);
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
 
 <style lang="scss" scoped>
 .apiMarket {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  //   border: 1px solid red;
+  // background: #fff;
+  .dataTitle {
+    position: relative;
+    padding-left: 10px;
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      content: '';
+      width: 5px;
+      height: 14px;
+      background: #2561ef;
+      border-radius: 3px;
+    }
+  }
+  .dataContent {
+    height: calc(100% - 35px);
+    .dataTop {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      .dataLeft {
+        display: flex;
+        .dataBox {
+          margin-right: 20px;
+        }
+      }
+    }
+    .dataForm {
+      // border: 1px solid red;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      overflow-y: auto;
+      .apiBox {
+        border: 1px solid #ccc;
+        padding: 20px 30px;
+        // margin-bottom: 30px;
+        // margin-right: 40px;
+        margin: 0px 20px 30px 20px;
+        border-radius: 20px;
+        // height: 160px;
+        display: flex;
+        .apiLeft {
+          margin-right: 20px;
+          .apiImg {
+            width: 100px;
+            height: 100px;
+          }
+        }
+        .apiRight {
+          .apiTitle {
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
 }
+.el-divider {
+  margin: 10px 0 15px 0;
+}
+.searchBtn {
+  cursor: pointer;
+  &:hover {
+    color: #2561ef;
+  }
+}
+.pagingPosition {
+  position: absolute !important;
+  right: 0px;
+  bottom: 0px;
+}
+
+// .dia{
+//   height: 800px !important;
+// }
 </style>