diff --git a/front/src/assets/home/duihao.png b/front/src/assets/home/duihao.png
new file mode 100644
index 00000000..8977090d
Binary files /dev/null and b/front/src/assets/home/duihao.png differ
diff --git a/front/src/assets/home/huishang.png b/front/src/assets/home/huishang.png
new file mode 100644
index 00000000..1964a911
Binary files /dev/null and b/front/src/assets/home/huishang.png differ
diff --git a/front/src/assets/home/huixia.png b/front/src/assets/home/huixia.png
new file mode 100644
index 00000000..c2a58c85
Binary files /dev/null and b/front/src/assets/home/huixia.png differ
diff --git a/front/src/assets/home/kong.png b/front/src/assets/home/kong.png
new file mode 100644
index 00000000..3918c6b9
Binary files /dev/null and b/front/src/assets/home/kong.png differ
diff --git a/front/src/assets/home/lanshang.png b/front/src/assets/home/lanshang.png
new file mode 100644
index 00000000..d5ca1f36
Binary files /dev/null and b/front/src/assets/home/lanshang.png differ
diff --git a/front/src/assets/home/lanxia.png b/front/src/assets/home/lanxia.png
new file mode 100644
index 00000000..88418c0b
Binary files /dev/null and b/front/src/assets/home/lanxia.png differ
diff --git a/front/src/assets/home/yuanjia.png b/front/src/assets/home/yuanjia.png
new file mode 100644
index 00000000..b4407eec
Binary files /dev/null and b/front/src/assets/home/yuanjia.png differ
diff --git a/front/src/assets/home/zhengjia.png b/front/src/assets/home/zhengjia.png
new file mode 100644
index 00000000..dfe15e00
Binary files /dev/null and b/front/src/assets/home/zhengjia.png differ
diff --git a/front/src/views/capacityOnTheShelf/Algorithm.vue b/front/src/views/capacityOnTheShelf/Algorithm.vue
index 78cf6caa..6a896068 100644
--- a/front/src/views/capacityOnTheShelf/Algorithm.vue
+++ b/front/src/views/capacityOnTheShelf/Algorithm.vue
@@ -7,17 +7,19 @@
 -->
 <template>
   <div class="box">
-    <div class="header">能力上架申请</div>
+    <!-- <div class="header">能力上架申请</div> -->
     <div class="top">
       <div
         v-for="(nav, index) in navList"
         :key="nav"
-        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : 'ff']"
       >
-        <span class="bg-box">
-          <span>{{ index + 1 }}</span>
-        </span>
-        <span>{{ nav.name }}</span>
+        <div class="wai">
+          <span class="bg-box">
+            <span>{{ index + 1 }}</span>
+          </span>
+          <span class="bg-name">{{ nav.name }}</span>
+        </div>
         <div class="line" v-if="index !== navList.length - 1"></div>
       </div>
     </div>
@@ -79,37 +81,10 @@
         :required="required"
         :notFilled="notFilled"
       ></put-on-the-shelf>
-      <!-- <algorithm-essential-information
-        v-if="showView === '基本信息' && refData.name"
-        :refData="refData"
-        :dataFrom="dataFrom"
-        :videoList="videoList"
-      ></algorithm-essential-information>
-      <algorithm-advantage
-        v-else-if="showView === '算法优势'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-advantage>
-      <algorithm-scenarios
-        v-else-if="showView === '应用场景'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-scenarios> -->
-      <!-- <algorithm-scenarios
-        v-else-if="showView === '应用场景'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-scenarios> -->
-      <!-- <algorithm-deployment-use
-        v-else-if="showView === '部署与使用'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-        :fileList="fileList"
-        :imgList="imgList"
-      ></algorithm-deployment-use> -->
+   
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
-      <button @click="close()">取消</button>
+     
       <a-popconfirm
         v-if="
           showView == '算法优势' &&
@@ -251,702 +226,695 @@
       >
         <button>提交</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="submit()">
+      <button v-else-if="服务商联系电话 === '部署与使用'" @click="submit()">
         提交
       </button>
+       <button @click="close()">取消</button>
     </div>
   </div>
 </template>
 <script setup>
-  // import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
-  // import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
-  // import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
-  import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
-  // import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
-  import { ref, onBeforeUnmount } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { getCategoryTree } from '@/api/personalCenter'
-  import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
-  import {
-    getUser,
-    getUserInfo,
-    selectOne,
-    updateRes,
-    relaunch,
-  } from '@/api/home'
-  import { message } from 'ant-design-vue'
-  import mybus from '@/myplugins/mybus'
-  const router = useRouter()
-  const showView = ref('基本信息')
-  const sfys = ref([
-    {
-      name: '算法优势',
-      list: [
-        {
-          name: '算法优势名称',
-          field: 'name',
-          type: 'input',
-          note1: '',
-        },
-        {
-          name: '算法优势描述',
-          field: 'desc',
-          type: 'textArea',
-          note1: '',
-        },
-      ],
-    },
-  ])
-  const yycj = ref([
-    {
-      name: '应用场景',
-      list: [
-        {
-          name: '应用场景名称',
-          field: 'name',
-          type: 'input',
-          note1: '',
-        },
-        {
-          name: '应用场景描述',
-          field: 'desc',
-          type: 'textArea',
-          note1: '',
-        },
-        {
-          name: '应用场景图片',
-          field: 'img',
-          type: 'image',
-          note1: '',
-        },
-      ],
-    },
-  ])
-  const bs = ref([
-    {
-      name: '计费标准信息',
-      list: [
-        {
-          name: '计费方式',
-          field: 'type',
-          type: 'radio',
-          options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
-          note1: '一次性买断',
-        },
-        {
-          name: '计费标准',
-          field: 'price',
-          type: 'input2',
-          // company: '元',
-          note1: '',
-        },
-        {
-          name: '计费标准描述',
-          field: 'desc',
-          type: 'textArea',
-          note1: '',
-        },
-      ],
-    },
-    {
-      name: '常见问题',
-      list: [
-        {
-          name: '问题',
-          field: 'question',
-          type: 'textArea',
-          note1: '',
-        },
-        {
-          name: '答复',
-          field: 'answer',
-          type: 'textArea',
-          note1: '',
-        },
-      ],
-    },
-  ])
-  let shiyongshouce = ref({})
-  const navList = ref([])
-  const navList2 = ref([])
-  const fileList = ref({})
-  const packageList = ref({})
-  const accessoryList = ref({})
-  const imgList = ref({})
-  const videoList = ref({})
-  const data = ref({})
-  const refData = ref({})
-  const submitFlag = ref(true)
-  const dataFrom = ref({
-    infoList: [
+// import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
+// import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
+// import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
+import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
+// import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
+import { ref, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { getCategoryTree } from '@/api/personalCenter'
+import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
+import {
+  getUser,
+  getUserInfo,
+  selectOne,
+  updateRes,
+  relaunch,
+} from '@/api/home'
+import { message } from 'ant-design-vue'
+import mybus from '@/myplugins/mybus'
+const router = useRouter()
+const showView = ref('基本信息')
+const sfys = ref([
+  {
+    name: '算法优势',
+    list: [
       {
-        attrType: '组件类型',
-        attrValue: '智能算法',
-        delFlag: 0,
+        name: '算法优势名称',
+        field: 'name',
+        type: 'input',
+        note1: '',
+      },
+      {
+        name: '算法优势描述',
+        field: 'desc',
+        type: 'textArea',
+        note1: '',
       },
     ],
-    delFlag: 0,
-    type: '组件服务',
-    deptId: '',
-  })
-  const required = ref([
-    '归属部门',
-    '部门联系人',
-    '部门联系人电话',
-    '应用领域',
-    '共享条件',
-    '算法名称',
-    '算法描述',
-    '图层名称',
-    '图层描述',
-    '组件名称',
-    '组件描述',
-    '组件地址',
-    '服务地址',
-    '服务接口',
-    '接口请求方式',
-    '算法类别',
-  ])
-  const notFilled = ref([])
-  getUser().then((res) => {
-    dataFrom.value.deptId = res.data.data.deptId
-  })
-  const close = () => {
-    window.close()
-  }
-  const back = () => {
-    navList.value.forEach((val, index) => {
-      if (val.key === showView.value && index > 0) {
-        showView.value = navList2.value[index - 1]
-        refData.value = data.value.filter(
-          (item) => item.name === showView.value
-        )[0]
-        console.log('表单数据=============>', dataFrom.value)
-      }
-    })
-  }
-  const next = () => {
-    notFilled.value = []
-    console.log(dataFrom.value, 'dataFrom.value.name')
-    if (!dataFrom.value.name) {
-      notFilled.value.push('算法名称')
-    }
-    if (!dataFrom.value.description) {
-      notFilled.value.push('算法描述')
-    }
-    if (!dataFrom.value.shareCondition) {
-      notFilled.value.push('共享条件')
-    }
-    if (!dataFrom.value.deptId) {
-      notFilled.value.push('归属部门')
-    }
-    if (!dataFrom.value.deptContacts) {
-      notFilled.value.push('部门联系人')
-    }
-    if (!dataFrom.value.deptPhone) {
-      notFilled.value.push('部门联系人电话')
-    }
-    if (
-      !dataFrom.value.infoList.filter(
-        (val) => val.attrType === '算法类别'
-      )[0] ||
-      !dataFrom.value.infoList.filter((val) => val.attrType === '算法类别')[0]
-        .attrValue
-    ) {
-      notFilled.value.push('算法类别')
-    }
-    if (
-      !dataFrom.value.infoList.filter(
-        (val) => val.attrType === '应用领域'
-      )[0] ||
-      !dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
-        .attrValue
-    ) {
-      console.log('应用领域==========>', dataFrom.value.infoList)
-      notFilled.value.push('应用领域')
-    }
-    if (notFilled.value.length > 0) {
-      message.warning('请填写必填字段')
-      console.log(notFilled.value)
-    } else {
-      let i = -1
-      navList.value.forEach((val, index) => {
-        if (val.key === showView.value && index < navList.value.length - 1) {
-          i = index + 1
-        }
-      })
-      if (i !== -1) {
-        showView.value = navList2.value[i]
-        refData.value = data.value.filter(
-          (item) => item.name === showView.value
-        )[0]
-        console.log('表单数据=============>', dataFrom.value, refData.value)
-      }
-    }
-  }
-  // 预览
-  const preview = () => {
-    notFilled.value = []
-    console.log(dataFrom.value, 'dataFrom.value.name')
-    if (
-      dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0] &&
-      dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0]
-        .attrValue == '调用接口'
-    ) {
-      if (
-        !dataFrom.value.infoList.filter(
-          (val) => val.attrType === '服务接口'
-        )[0] ||
-        !dataFrom.value.infoList.filter((val) => val.attrType === '服务接口')[0]
-          .attrValue
-      ) {
-        notFilled.value.push('服务接口')
-      }
-      if (!dataFrom.value.apiMethodType) {
-        notFilled.value.push('接口请求方式')
-      }
-    }
-    if (notFilled.value.length > 0) {
-      message.warning('请填写必填字段')
-      console.log(notFilled.value)
-    } else {
-      dataFrom.value.infoList = dataFrom.value.infoList.filter(
-        (item) => item.attrValue !== ''
-      )
-      console.log('预览==============>', dataFrom.value)
-      window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
-      const newpage = router.resolve({
-        path: '/details',
-      })
-      window.open(newpage.href, '_blank')
-    }
-  }
-  const submit = () => {
-    notFilled.value = []
-    console.log(dataFrom.value, 'dataFrom.value.name')
-    if (
-      dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0] &&
-      dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0]
-        .attrValue == '调用接口'
-    ) {
-      if (
-        !dataFrom.value.infoList.filter(
-          (val) => val.attrType === '服务接口'
-        )[0] ||
-        !dataFrom.value.infoList.filter((val) => val.attrType === '服务接口')[0]
-          .attrValue
-      ) {
-        notFilled.value.push('服务接口')
-      }
-      if (!dataFrom.value.apiMethodType) {
-        notFilled.value.push('接口请求方式')
-      }
-    }
-    if (notFilled.value.length > 0) {
-      message.warning('请填写必填字段')
-      console.log(notFilled.value)
-    } else {
-      console.log('提交数据=============>', dataFrom.value)
-      if (submitFlag.value) {
-        submitFlag.value = false
-        dataFrom.value.infoList = dataFrom.value.infoList.filter(
-          (item) => item.attrValue !== ''
-        )
-        if (resourceId) {
-          delete dataFrom.value.createDate
-          delete dataFrom.value.updateDate
-          dataFrom.value.infoList.map((del) => {
-            delete del.createDate
-            delete del.updateDate
-          })
-          updateRes(dataFrom.value).then((upres) => {
-            if (upres.data.code == 0) {
-              relaunch({ data: dataFrom.value, taskId: taskId }).then((res) => {
-                console.log('驳回================>', res)
-                if (res.data.code == 0) {
-                  message.success('重新发起流程成功！')
-                  submitFlag.value = true
-                  window.setTimeout(() => {
-                    window.close()
-                  }, 1000)
-                } else {
-                  message.error('重新发起流程失败！')
-                  submitFlag.value = true
-                }
-              })
-            } else {
-              message.error('数据更新失败！')
-              submitFlag.value = true
-            }
-          })
-        } else {
-          shangjiainsert(dataFrom.value).then((res) => {
-            const instanceId = res.data.data
-            dataFrom.value.id = res.data.data
-            getUser().then((res6) => {
-              getUserInfo(res6.data.data.id).then((res2) => {
-                const deptId = dataFrom.value.deptId
-                const userId = res2.data.data.id
-                const userName = res2.data.data.realName
-                const params = {
-                  instanceId: instanceId,
-                  deptId: deptId,
-                  userId: userId,
-                  userName: userName,
-                  resourceDTO: [dataFrom.value],
-                }
-                shangjiaapply(params).then((res3) => {
-                  console.log('res3', res3)
-                  if (res3.data.code == 0) {
-                    message.success('上架申请提交成功，请注意查看消息通知！')
-                    window.setTimeout(() => {
-                      window.close()
-                      submitFlag.value = true
-                    }, 1000)
-                  }
-                })
-              })
-            })
-          })
-        }
-      }
-    }
-  }
-  const init = () => {
-    getCategoryTree().then((res) => {
-      // console.clear()
-      res.data.data = res.data.data
-        .filter((item) => item.name === '组件服务一')[0]
-        .children.filter((item) => item.name === '智能算法')[0]
-      navList.value = []
-      navList2.value = []
-      res.data.data.children.forEach((val) => {
-        // console.log('val================>', val, echoData.value)
-        navList.value.push({
-          name: val.name,
-          key: val.name,
-        })
-        navList2.value.push(val.name)
-        if (val.name === '部署与使用') {
-          console.log(val, '部署与使用')
-          val.children.forEach((valChild) => {
-            if (valChild.name === '使用方式') {
-              valChild.children.forEach((valChilds) => {
-                if (valChilds.name === '使用方式') {
-                  valChilds.note1 = '调用接口'
-                }
-              })
-            }
-          })
-        }
-        // 回填数据
-        if (resourceId) {
-          val.children.map((item) => {
-            if (item.children.length > 0) {
-              item.children.map((child) => {
-                switch (child.name) {
-                  case '算法名称':
-                    child.note1 = echoData.value.name
-                    break
-                  case '算法描述':
-                    child.note1 = echoData.value.description
-                    break
-                  case '共享条件':
-                    child.note1 = echoData.value.shareCondition
-                    break
-                  case '归属部门':
-                    child.note1 = echoData.value.deptId
-                    break
-                  case '部门联系人':
-                    child.note1 = echoData.value.deptContacts
-                    break
-                  case '部门联系人电话':
-                    child.note1 = echoData.value.deptPhone
-                    break
-                  case '接口请求方式':
-                    child.note1 = echoData.value.apiMethodType
-                    break
-                  case '应用领域':
-                    if (
-                      echoData.value.infoList &&
-                      echoData.value.infoList.filter(
-                        (fil) => fil.attrType == child.name
-                      )[0]
-                    ) {
-                      child.note1 = echoData.value.infoList.filter(
-                        (fil) => fil.attrType == child.name
-                      )[0].attrValue
-                      child.note2 = echoData.value.infoList
-                        .filter((fil) => fil.attrType == child.name)[0]
-                        .attrValue.split(';')
-                    }
-                    break
-                  case '算法介绍视频':
-                    if (
-                      echoData.value.infoList &&
-                      echoData.value.infoList.filter(
-                        (fil) => fil.attrType == child.name
-                      )[0]
-                    ) {
-                      videoList.value = [
-                        {
-                          uid: echoData.value.infoList.filter(
-                            (fil) => fil.attrType == child.name
-                          )[0].id,
-                          name:
-                            echoData.value.infoList.filter(
-                              (fil) => fil.attrType == child.name
-                            )[0].note3 || '--',
-                          status: 'done',
-                          url: echoData.value.infoList.filter(
-                            (fil) => fil.attrType == child.name
-                          )[0].attrValue,
-                          thumbUrl: echoData.value.infoList.filter(
-                            (fil) => fil.attrType == child.name
-                          )[0].attrValue,
-                        },
-                      ]
-                    }
-                    break
-                  default:
-                    if (
-                      echoData.value.infoList &&
-                      echoData.value.infoList.filter(
-                        (fil) => fil.attrType == child.name
-                      )[0]
-                    ) {
-                      child.note1 = echoData.value.infoList.filter(
-                        (fil) => fil.attrType == child.name
-                      )[0].attrValue
-                    }
-                    break
-                }
-              })
-            }
-            console.log('item================>', item, echoData.value)
-          })
-        }
-      })
-      data.value = res.data.data.children
+  },
+])
+const yycj = ref([
+  {
+    name: '应用场景',
+    list: [
+      {
+        name: '应用场景名称',
+        field: 'name',
+        type: 'input',
+        note1: '',
+      },
+      {
+        name: '应用场景描述',
+        field: 'desc',
+        type: 'textArea',
+        note1: '',
+      },
+      {
+        name: '应用场景图片',
+        field: 'img',
+        type: 'image',
+        note1: '',
+      },
+    ],
+  },
+])
+const bs = ref([
+  {
+    name: '计费标准信息',
+    list: [
+      {
+        name: '计费方式',
+        field: 'type',
+        type: 'radio',
+        options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
+        note1: '一次性买断',
+      },
+      {
+        name: '计费标准',
+        field: 'price',
+        type: 'input2',
+        // company: '元',
+        note1: '',
+      },
+      {
+        name: '计费标准描述',
+        field: 'desc',
+        type: 'textArea',
+        note1: '',
+      },
+    ],
+  },
+  {
+    name: '常见问题',
+    list: [
+      {
+        name: '问题',
+        field: 'question',
+        type: 'textArea',
+        note1: '',
+      },
+      {
+        name: '答复',
+        field: 'answer',
+        type: 'textArea',
+        note1: '',
+      },
+    ],
+  },
+])
+let shiyongshouce = ref({})
+const navList = ref([])
+const navList2 = ref([])
+const fileList = ref({})
+const packageList = ref({})
+const accessoryList = ref({})
+const imgList = ref({})
+const videoList = ref({})
+const data = ref({})
+const refData = ref({})
+const submitFlag = ref(true)
+const dataFrom = ref({
+  infoList: [
+    {
+      attrType: '组件类型',
+      attrValue: '智能算法',
+      delFlag: 0,
+    },
+  ],
+  delFlag: 0,
+  type: '组件服务',
+  deptId: '',
+})
+const required = ref([
+  '归属部门',
+  '部门联系人',
+  '部门联系人电话',
+  '应用领域',
+  '共享条件',
+  '算法名称',
+  '算法描述',
+  '图层名称',
+  '图层描述',
+  '组件名称',
+  '组件描述',
+  '组件地址',
+  '服务地址',
+  '服务接口',
+  '接口请求方式',
+  '算法类别',
+])
+const notFilled = ref([])
+getUser().then((res) => {
+  dataFrom.value.deptId = res.data.data.deptId
+})
+const close = () => {
+  window.close()
+}
+const back = () => {
+  navList.value.forEach((val, index) => {
+    if (val.key === showView.value && index > 0) {
+      showView.value = navList2.value[index - 1]
       refData.value = data.value.filter(
         (item) => item.name === showView.value
       )[0]
-      console.log('所有编目结构==============>', data.value)
-    })
+      console.log('表单数据=============>', dataFrom.value)
+    }
+  })
+}
+const next = () => {
+  notFilled.value = []
+  console.log(dataFrom.value, 'dataFrom.value.name')
+  if (!dataFrom.value.name) {
+    notFilled.value.push('算法名称')
   }
-  const resourceId = router.currentRoute.value.query.id
-  const taskId = router.currentRoute.value.query.taskId
-  const echoData = ref({})
-  if (resourceId) {
-    // 回显数据
-    selectOne(resourceId).then((res) => {
-      echoData.value = res.data.data
-      dataFrom.value = echoData.value
-      init()
-      // console.log('驳回修改===================>', echoData.value)
-    })
+  if (!dataFrom.value.description) {
+    notFilled.value.push('算法描述')
+  }
+  if (!dataFrom.value.shareCondition) {
+    notFilled.value.push('共享条件')
+  }
+  if (!dataFrom.value.deptId) {
+    notFilled.value.push('归属部门')
+  }
+  if (!dataFrom.value.deptContacts) {
+    notFilled.value.push('部门联系人')
+  }
+  if (!dataFrom.value.deptPhone) {
+    notFilled.value.push('部门联系人电话')
+  }
+  if (
+    !dataFrom.value.infoList.filter((val) => val.attrType === '算法类别')[0] ||
+    !dataFrom.value.infoList.filter((val) => val.attrType === '算法类别')[0]
+      .attrValue
+  ) {
+    notFilled.value.push('算法类别')
+  }
+  if (
+    !dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0] ||
+    !dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
+      .attrValue
+  ) {
+    console.log('应用领域==========>', dataFrom.value.infoList)
+    notFilled.value.push('应用领域')
+  }
+  if (notFilled.value.length > 0) {
+    message.warning('请填写必填字段')
+    console.log(notFilled.value)
   } else {
-    init()
-  }
-  // 特殊字段处理
-  const refPutOnTheShelf = ref(null)
-  const changeSfys = (type) => {
-    console.log(refPutOnTheShelf, sfys.value)
-    refPutOnTheShelf.value.add('算法优势', true, type)
-  }
-  const changeYycj = (type) => {
-    console.log(refPutOnTheShelf)
-    refPutOnTheShelf.value.add('应用场景', true, type)
-  }
-  const changeBs = (type) => {
-    console.log(refPutOnTheShelf)
-    refPutOnTheShelf.value.add('计费标准信息', true)
-    refPutOnTheShelf.value.add('常见问题', true, type)
-  }
-  mybus.on('chageDataFrom', (obj) => {
-    if (obj.attrType == '技术文档' && obj.attrValue != null) {
-      shiyongshouce.value = obj
+    let i = -1
+    navList.value.forEach((val, index) => {
+      if (val.key === showView.value && index < navList.value.length - 1) {
+        i = index + 1
+      }
+    })
+    if (i !== -1) {
+      showView.value = navList2.value[i]
+      refData.value = data.value.filter(
+        (item) => item.name === showView.value
+      )[0]
+      console.log('表单数据=============>', dataFrom.value, refData.value)
     }
+  }
+}
+// 预览
+const preview = () => {
+  notFilled.value = []
+  console.log(dataFrom.value, 'dataFrom.value.name')
+  if (
+    dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0] &&
+    dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0]
+      .attrValue == '调用接口'
+  ) {
+    if (
+      !dataFrom.value.infoList.filter(
+        (val) => val.attrType === '服务接口'
+      )[0] ||
+      !dataFrom.value.infoList.filter((val) => val.attrType === '服务接口')[0]
+        .attrValue
+    ) {
+      notFilled.value.push('服务接口')
+    }
+    if (!dataFrom.value.apiMethodType) {
+      notFilled.value.push('接口请求方式')
+    }
+  }
+  if (notFilled.value.length > 0) {
+    message.warning('请填写必填字段')
+    console.log(notFilled.value)
+  } else {
     dataFrom.value.infoList = dataFrom.value.infoList.filter(
-      (item) => item.attrType !== obj.attrType
+      (item) => item.attrValue !== ''
     )
-    if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
-      obj.attrValue = ''
+    console.log('预览==============>', dataFrom.value)
+    window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
+    const newpage = router.resolve({
+      path: '/details',
+    })
+    window.open(newpage.href, '_blank')
+  }
+}
+const submit = () => {
+  notFilled.value = []
+  console.log(dataFrom.value, 'dataFrom.value.name')
+  if (
+    dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0] &&
+    dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0]
+      .attrValue == '调用接口'
+  ) {
+    if (
+      !dataFrom.value.infoList.filter(
+        (val) => val.attrType === '服务接口'
+      )[0] ||
+      !dataFrom.value.infoList.filter((val) => val.attrType === '服务接口')[0]
+        .attrValue
+    ) {
+      notFilled.value.push('服务接口')
     }
-    dataFrom.value.infoList.push(obj)
-    if (shiyongshouce.value.attrValue) {
-      dataFrom.value.infoList.map((syscitem, syscindex) => {
-        if (syscitem.attrType == '技术文档') {
-          dataFrom.value.infoList[syscindex] = shiyongshouce.value
-        }
+    if (!dataFrom.value.apiMethodType) {
+      notFilled.value.push('接口请求方式')
+    }
+  }
+  if (notFilled.value.length > 0) {
+    message.warning('请填写必填字段')
+    console.log(notFilled.value)
+  } else {
+    console.log('提交数据=============>', dataFrom.value)
+    if (submitFlag.value) {
+      submitFlag.value = false
+      dataFrom.value.infoList = dataFrom.value.infoList.filter(
+        (item) => item.attrValue !== ''
+      )
+      if (resourceId) {
+        delete dataFrom.value.createDate
+        delete dataFrom.value.updateDate
+        dataFrom.value.infoList.map((del) => {
+          delete del.createDate
+          delete del.updateDate
+        })
+        updateRes(dataFrom.value).then((upres) => {
+          if (upres.data.code == 0) {
+            relaunch({ data: dataFrom.value, taskId: taskId }).then((res) => {
+              console.log('驳回================>', res)
+              if (res.data.code == 0) {
+                message.success('重新发起流程成功！')
+                submitFlag.value = true
+                window.setTimeout(() => {
+                  window.close()
+                }, 1000)
+              } else {
+                message.error('重新发起流程失败！')
+                submitFlag.value = true
+              }
+            })
+          } else {
+            message.error('数据更新失败！')
+            submitFlag.value = true
+          }
+        })
+      } else {
+        shangjiainsert(dataFrom.value).then((res) => {
+          const instanceId = res.data.data
+          dataFrom.value.id = res.data.data
+          getUser().then((res6) => {
+            getUserInfo(res6.data.data.id).then((res2) => {
+              const deptId = dataFrom.value.deptId
+              const userId = res2.data.data.id
+              const userName = res2.data.data.realName
+              const params = {
+                instanceId: instanceId,
+                deptId: deptId,
+                userId: userId,
+                userName: userName,
+                resourceDTO: [dataFrom.value],
+              }
+              shangjiaapply(params).then((res3) => {
+                console.log('res3', res3)
+                if (res3.data.code == 0) {
+                  message.success('上架申请提交成功，请注意查看消息通知！')
+                  window.setTimeout(() => {
+                    window.close()
+                    submitFlag.value = true
+                  }, 1000)
+                }
+              })
+            })
+          })
+        })
+      }
+    }
+  }
+}
+const init = () => {
+  getCategoryTree().then((res) => {
+    // console.clear()
+    res.data.data = res.data.data
+      .filter((item) => item.name === '组件服务一')[0]
+      .children.filter((item) => item.name === '智能算法')[0]
+    navList.value = []
+    navList2.value = []
+    res.data.data.children.forEach((val) => {
+      // console.log('val================>', val, echoData.value)
+      navList.value.push({
+        name: val.name,
+        key: val.name,
       })
-    }
-    console.log('数据变更=================》', obj, dataFrom.value.infoList)
+      navList2.value.push(val.name)
+      if (val.name === '部署与使用') {
+        console.log(val, '部署与使用')
+        val.children.forEach((valChild) => {
+          if (valChild.name === '使用方式') {
+            valChild.children.forEach((valChilds) => {
+              if (valChilds.name === '使用方式') {
+                valChilds.note1 = '调用接口'
+              }
+            })
+          }
+        })
+      }
+      // 回填数据
+      if (resourceId) {
+        val.children.map((item) => {
+          if (item.children.length > 0) {
+            item.children.map((child) => {
+              switch (child.name) {
+                case '算法名称':
+                  child.note1 = echoData.value.name
+                  break
+                case '算法描述':
+                  child.note1 = echoData.value.description
+                  break
+                case '共享条件':
+                  child.note1 = echoData.value.shareCondition
+                  break
+                case '归属部门':
+                  child.note1 = echoData.value.deptId
+                  break
+                case '部门联系人':
+                  child.note1 = echoData.value.deptContacts
+                  break
+                case '部门联系人电话':
+                  child.note1 = echoData.value.deptPhone
+                  break
+                case '接口请求方式':
+                  child.note1 = echoData.value.apiMethodType
+                  break
+                case '应用领域':
+                  if (
+                    echoData.value.infoList &&
+                    echoData.value.infoList.filter(
+                      (fil) => fil.attrType == child.name
+                    )[0]
+                  ) {
+                    child.note1 = echoData.value.infoList.filter(
+                      (fil) => fil.attrType == child.name
+                    )[0].attrValue
+                    child.note2 = echoData.value.infoList
+                      .filter((fil) => fil.attrType == child.name)[0]
+                      .attrValue.split(';')
+                  }
+                  break
+                case '算法介绍视频':
+                  if (
+                    echoData.value.infoList &&
+                    echoData.value.infoList.filter(
+                      (fil) => fil.attrType == child.name
+                    )[0]
+                  ) {
+                    videoList.value = [
+                      {
+                        uid: echoData.value.infoList.filter(
+                          (fil) => fil.attrType == child.name
+                        )[0].id,
+                        name:
+                          echoData.value.infoList.filter(
+                            (fil) => fil.attrType == child.name
+                          )[0].note3 || '--',
+                        status: 'done',
+                        url: echoData.value.infoList.filter(
+                          (fil) => fil.attrType == child.name
+                        )[0].attrValue,
+                        thumbUrl: echoData.value.infoList.filter(
+                          (fil) => fil.attrType == child.name
+                        )[0].attrValue,
+                      },
+                    ]
+                  }
+                  break
+                default:
+                  if (
+                    echoData.value.infoList &&
+                    echoData.value.infoList.filter(
+                      (fil) => fil.attrType == child.name
+                    )[0]
+                  ) {
+                    child.note1 = echoData.value.infoList.filter(
+                      (fil) => fil.attrType == child.name
+                    )[0].attrValue
+                  }
+                  break
+              }
+            })
+          }
+          console.log('item================>', item, echoData.value)
+        })
+      }
+    })
+    data.value = res.data.data.children
+    refData.value = data.value.filter((item) => item.name === showView.value)[0]
+    console.log('所有编目结构==============>', data.value)
   })
-  mybus.on('chageFileList', (obj) => {
-    fileList.value = obj
-  })
-  mybus.on('chagePackageList', (obj) => {
-    packageList.value = obj
-  })
-  mybus.on('chageAccessory', (obj) => {
-    accessoryList.value = obj
-  })
-  mybus.on('chageImgList', (obj) => {
-    imgList.value = obj
-  })
-  mybus.on('chageVideoList', (obj) => {
-    videoList.value = obj
-  })
-  //datafrom外面数据
-  mybus.on('chageDataFromDwon', (obj) => {
-    switch (obj.attrType) {
-      case '算法名称':
-        dataFrom.value.name = obj.attrValue
-        break
-      case '算法描述':
-        dataFrom.value.description = obj.attrValue
-        break
-      case '共享条件':
-        dataFrom.value.shareCondition = obj.attrValue
-        break
-      case '共享类型':
-        dataFrom.value.shareType = obj.attrValue
-        break
-      case '服务接口':
-        dataFrom.value.apiUrl = obj.attrValue
-        break
-      case '接口请求方式':
-        dataFrom.value.apiMethodType = obj.attrValue
-        break
-      case '归属部门':
-        dataFrom.value.deptId = obj.attrValue
-        if (obj.attrValueTwo) {
-          dataFrom.value.deptName = obj.attrValueTwo.label
-        }
-        break
-      case '部门联系人':
-        dataFrom.value.deptContacts = obj.attrValue
-        break
-      case '部门联系人电话':
-        dataFrom.value.deptPhone = obj.attrValue
-        break
-    }
-    // console.log('dataFrom.value', dataFrom.value)
-  })
-  onBeforeUnmount(() => {
-    mybus.off('chageDataFrom')
-    mybus.off('chageFileList')
-    mybus.off('chageImgList')
-    mybus.off('chageDataFromDwon')
-    mybus.off('chageVideoList')
-    mybus.off('chagePackageList')
-    mybus.off('chageAccessory')
+}
+const resourceId = router.currentRoute.value.query.id
+const taskId = router.currentRoute.value.query.taskId
+const echoData = ref({})
+if (resourceId) {
+  // 回显数据
+  selectOne(resourceId).then((res) => {
+    echoData.value = res.data.data
+    dataFrom.value = echoData.value
+    init()
+    // console.log('驳回修改===================>', echoData.value)
   })
+} else {
+  init()
+}
+// 特殊字段处理
+const refPutOnTheShelf = ref(null)
+const changeSfys = (type) => {
+  console.log(refPutOnTheShelf, sfys.value)
+  refPutOnTheShelf.value.add('算法优势', true, type)
+}
+const changeYycj = (type) => {
+  console.log(refPutOnTheShelf)
+  refPutOnTheShelf.value.add('应用场景', true, type)
+}
+const changeBs = (type) => {
+  console.log(refPutOnTheShelf)
+  refPutOnTheShelf.value.add('计费标准信息', true)
+  refPutOnTheShelf.value.add('常见问题', true, type)
+}
+mybus.on('chageDataFrom', (obj) => {
+  if (obj.attrType == '技术文档' && obj.attrValue != null) {
+    shiyongshouce.value = obj
+  }
+  dataFrom.value.infoList = dataFrom.value.infoList.filter(
+    (item) => item.attrType !== obj.attrType
+  )
+  if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
+    obj.attrValue = ''
+  }
+  dataFrom.value.infoList.push(obj)
+  if (shiyongshouce.value.attrValue) {
+    dataFrom.value.infoList.map((syscitem, syscindex) => {
+      if (syscitem.attrType == '技术文档') {
+        dataFrom.value.infoList[syscindex] = shiyongshouce.value
+      }
+    })
+  }
+  console.log('数据变更=================》', obj, dataFrom.value.infoList)
+})
+mybus.on('chageFileList', (obj) => {
+  fileList.value = obj
+})
+mybus.on('chagePackageList', (obj) => {
+  packageList.value = obj
+})
+mybus.on('chageAccessory', (obj) => {
+  accessoryList.value = obj
+})
+mybus.on('chageImgList', (obj) => {
+  imgList.value = obj
+})
+mybus.on('chageVideoList', (obj) => {
+  videoList.value = obj
+})
+//datafrom外面数据
+mybus.on('chageDataFromDwon', (obj) => {
+  switch (obj.attrType) {
+    case '算法名称':
+      dataFrom.value.name = obj.attrValue
+      break
+    case '算法描述':
+      dataFrom.value.description = obj.attrValue
+      break
+    case '共享条件':
+      dataFrom.value.shareCondition = obj.attrValue
+      break
+    case '共享类型':
+      dataFrom.value.shareType = obj.attrValue
+      break
+    case '服务接口':
+      dataFrom.value.apiUrl = obj.attrValue
+      break
+    case '接口请求方式':
+      dataFrom.value.apiMethodType = obj.attrValue
+      break
+    case '归属部门':
+      dataFrom.value.deptId = obj.attrValue
+      if (obj.attrValueTwo) {
+        dataFrom.value.deptName = obj.attrValueTwo.label
+      }
+      break
+    case '部门联系人':
+      dataFrom.value.deptContacts = obj.attrValue
+      break
+    case '部门联系人电话':
+      dataFrom.value.deptPhone = obj.attrValue
+      break
+  }
+  // console.log('dataFrom.value', dataFrom.value)
+})
+onBeforeUnmount(() => {
+  mybus.off('chageDataFrom')
+  mybus.off('chageFileList')
+  mybus.off('chageImgList')
+  mybus.off('chageDataFromDwon')
+  mybus.off('chageVideoList')
+  mybus.off('chagePackageList')
+  mybus.off('chageAccessory')
+})
 </script>
 <style lang="less" scoped>
-  .box {
-    position: relative;
-    top: 0.64rem;
-    margin: 0.15rem 4rem;
-    padding: 0.1rem;
-    background: #fff;
-    .header {
-      font-size: 0.28rem;
-      font-weight: 600;
-    }
-    .vue-box {
-      padding: 0 1rem;
-    }
-    .top {
-      margin: 0.1rem 0.2rem 0;
-      padding: 0.15rem 0.3rem;
-      background: #edf4fc;
-      display: flex;
-      justify-content: space-between;
-      div {
-        font-size: 0.18rem;
-        color: #999;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+.box {
+  position: relative;
+  top: 0.64rem;
+  // margin: 0.15rem 3rem;
+  padding: 0.1rem;
+  background: #fff;
+  .header {
+    font-size: 0.28rem;
+    font-weight: 600;
+  }
+  .vue-box {
+    padding: 0 1rem;
+  }
+  .top {
+    font-size: 16px;
+    margin: 0.32px 0.4px 0;
+    padding: 24px 24pxs;
+    display: flex;
+    justify-content: center;
+    .ff {
+      color: #b3b3b3;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 0.45rem;
-          height: 0.45rem;
+          width: 32px;
+          height: 32px;
           border-radius: 50%;
-          border: 0.01rem solid rgb(214, 214, 214);
-          margin-right: 0.1rem;
+          // border: 0.01rem solid rgb(214, 214, 214);
+          margin: 0px 16px;
           transition: all 0.3s ease;
           span {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 0.3rem;
-            height: 0.3rem;
+            width: 32px;
+            height: 32px;
             border-radius: 50%;
-            border: 0.01rem solid #999;
+            border: 1px solid #d9d9d9;
           }
         }
-        .line {
-          margin-left: 0.1rem;
-          width: 1.3rem;
-          height: 0.01rem;
-          background: #999;
+        .bg-name {
+          color: #b3b3b3;
         }
       }
-      .finish {
-        color: #0087ff;
+      .line {
+        // margin-left: 16px;
+        width: 326px;
+        height: 2px;
+        background: #d9d9d9;
+      }
+    }
+    .finish {
+      color: #fff;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
-          background: #9ccefa;
-          color: #fff;
-          border: 0.01rem solid #9ccefa;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          // border: 0.01rem solid rgb(214, 214, 214);
+          margin: 0px 16px;
+          transition: all 0.3s ease;
           span {
-            background: #0087ff;
-            border: 0.01rem solid #0087ff;
+            background: #0058e1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid solid #0058e1;
           }
         }
-        .line {
-          background: #0087ff;
+        .bg-name {
+          color: #212121;
+          font-weight: bold;
         }
       }
-      .btn {
-        display: flex;
-        justify-content: space-around;
-        padding: 0.1rem 3.5rem 0;
-        button {
-          cursor: pointer;
-          font-size: 0.14rem;
-          width: 0.8rem;
-          height: 0.35rem;
-          text-align: center;
-          color: #fff;
-          border: 0.01rem solid #9ccefa;
-          span {
-            background: #0087ff;
-            border: 0.01rem solid #0087ff;
-          }
-        }
-        .line {
-          background: #0087ff;
-        }
-        button:nth-of-type(1) {
-          color: #0087ff;
-          background: #e1edfa;
-        }
-        button:nth-of-type(2) {
-          background: #01c5dc;
-        }
-      }
-      .first {
-        justify-content: space-around;
+      .line {
+        // margin-left: 16px;
+        width: 326px;
+        height: 2px;
+        background: #0058e1;
       }
     }
     .btn {
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
       padding: 0.1rem 3.5rem 0;
       button {
         cursor: pointer;
@@ -955,8 +923,13 @@
         height: 0.35rem;
         text-align: center;
         color: #fff;
-        border: none;
-        border-radius: 0.06rem;
+        border: 0.01rem solid #9ccefa;
+        span {
+          background: #0087ff;
+          border: 0.01rem solid #0087ff;
+        }
+      }
+      .line {
         background: #0087ff;
       }
       button:nth-of-type(1) {
@@ -968,7 +941,44 @@
       }
     }
     .first {
-      justify-content: space-around;
+      justify-content: center;
     }
   }
+  .btn {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.1rem 3.5rem 0;
+    button {
+      cursor: pointer;
+      font-size: 0.14rem;
+      width: 0.8rem;
+      height: 0.35rem;
+      text-align: center;
+      color: #fff;
+      border: none;
+      border-radius: 0.06rem;
+      background: #0087ff;
+      margin-right:12px;
+    }
+    button:nth-of-type(1) {
+        background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+      }
+      button:nth-of-type(2) {
+        width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+      }
+  }
+  .first {
+    justify-content: center;
+  }
+}
 </style>
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index 6dc48660..1ae9e7e4 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -8,41 +8,13 @@
 <template>
   <div class="put-on-the-shelf">
     <div v-for="title in props.refData.children" :key="title.id">
-      <div class="top">
+      <!-- <div class="top">
         <div></div>
         <div>{{ title.name }}</div>
         <div></div>
-      </div>
+      </div> -->
       <template v-if="title.isConfigure">
         <div class="bottom">
-          <!-- <div class="items" v-if="data[title.name].length > 0">
-            <div
-              class="item"
-              v-for="(val, index) in data[title.name]"
-              :key="'key1' + val.name + index"
-            >
-              <p>
-                <span>{{ title.name }}-{{ index + 1 }}</span>
-                <span></span>
-              </p>
-              <p
-                v-for="attr in props.configure.filter(
-                  (item, index2) => item.name === title.name
-                )[0].list"
-                :key="'key2' + attr.name + index2"
-              >
-                <span>{{ attr.name }}</span>
-                <span v-if="attr.type === 'image'">
-                  <a-image :width="85" :height="60" :src="val.img" />
-                </span>
-                <span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
-              </p>
-              <div class="del">
-                <i class="delImg" @click="del(title.name, index)"></i>
-                <div @click="del(title.name, index)">删除</div>
-              </div>
-            </div>
-          </div> -->
           <div
             v-for="(val, index) in data[title.name]"
             :key="'key1' + val.name + index"
@@ -75,7 +47,7 @@
               )[0].list"
               :key="'key2' + attr.name + index2"
             >
-              <span>{{ attr.name }}</span>
+              <span>{{ attr.name }} : </span>
               <a-input
                 disabled
                 v-model:value="val[attr.field]"
@@ -99,33 +71,16 @@
                 :placeholder="'请填写' + attr.name"
                 v-else-if="attr.type == 'textArea'"
               />
-              <!-- <a-radio-group
-                v-model:value="val[attr.field]"
-                :options="val.options"
-                @change="radioChange"
-                v-else-if="attr.type == 'radio'"
-              /> -->
               <div v-else-if="attr.type == 'radio'">
                 {{ val[attr.field] + (attr.company || '') }}
               </div>
               <span v-else-if="attr.type === 'image'">
                 <a-image :width="85" :height="60" :src="val.img" />
               </span>
-              <!-- <upload
-                :key="showKey"
-                type="图片"
-                btnName="上传图片"
-                :maxCount="1"
-                :data="val"
-                :list="[]"
-                tip="支持图片类型，大小不超过100M"
-                v-else-if="val.type == 'image'"
-              ></upload> -->
+             
             </div>
           </div>
-          <!-- <div class="add" @click="add(title.name)">
-            添加更多{{ title.name }}
-          </div> -->
+          
           <div style="font-size: 0.18rem; font-weight: 600">
             <span>{{ title.name }}-{{ data[title.name].length + 1 }}</span>
           </div>
@@ -136,7 +91,7 @@
             )[0].list"
             :key="'key3' + val.name + index"
           >
-            <span>{{ val.name }}</span>
+            <span>{{ val.name }}:</span>
             <a-input
               v-model:value="val.note1"
               :maxlength="24"
@@ -228,7 +183,7 @@
                 <b class="required" v-if="required.indexOf(item.name) > -1">
                   *
                 </b>
-                {{ item.name }}
+                {{ item.name }} :
               </div>
               <a-input
                 :maxLength="1000"
@@ -252,20 +207,32 @@
                 :options="item.options"
                 @change="changeIiem(item.name, item.note1)"
               />
-              <a-input
+              <!-- <a-input
                 v-else-if="item.type == 'AbilityType'"
                 :maxLength="1000"
                 v-model:value="item.note1"
                 :placeholder="'请输入' + item.name"
                 :disabled="true"
-              />
-              <a-input
+              /> -->
+              <span
+                v-else-if="item.type == 'AbilityType'"
+                style="font-weight: bold; color: #212121"
+              >
+                {{ item.note1 }}
+              </span>
+              <span
+                v-else-if="item.type == 'ComponentType'"
+                style="font-weight:bold;color:#212121}"
+              >
+                {{ item.note1 }}
+              </span>
+              <!-- <a-input
                 v-else-if="item.type == 'ComponentType'"
                 v-model:value="item.note1"
                 :maxLength="1000"
                 :placeholder="'请输入' + item.name"
                 :disabled="true"
-              />
+              /> -->
               <a-textarea
                 v-else-if="item.type == 'textArea'"
                 v-model:value="item.note1"
@@ -345,15 +312,29 @@
                   <VueTemplateDemo :dataFrom="props.dataFrom"></VueTemplateDemo>
                 </div>
               </div>
-              <upload
+              
+              <!-- <upload
                 v-else-if="item.type == 'video'"
                 type="视频"
-                btnName="上传视频"
+                btnName="请上传视频"
                 :maxCount="1"
                 :data="item"
                 :list="props.videoList"
                 tip="支持视频类型，大小不超过100M"
-              ></upload>
+              >
+           
+            </upload> -->
+
+        <upload v-else-if="item.type == 'video'"
+         type="视频"
+                btnName="请上传视频"
+                :maxCount="1"
+                :data="item"
+                :list="props.videoList"
+                tip="支持视频类型，大小不超过100M">
+        </upload>
+   
+
               <!-- <a-button
               v-else-if="item.type == 'AssociatedApplication'"
               @click="sourceClick"
@@ -393,11 +374,11 @@
                   {{ itemSelect.dictLabel }}
                 </a-select-option>
               </a-select>
-              <a-select
+              <!-- <a-select
                 v-else-if="item.type == 'select' && item.name !== '归属部门'"
                 style="width: 2.4rem"
                 v-model:value="item.note1"
-                :placeholder="'请选择' + item.name"
+                :placeholder="'请选择11' + item.name"
                 @change="changeIiem(item.name, item.note1)"
               >
                 <a-select-option
@@ -407,7 +388,27 @@
                 >
                   {{ itemSelect.dictLabel }}
                 </a-select-option>
-              </a-select>
+              </a-select> -->
+              <div
+                v-else-if="item.type == 'select' && item.name !== '归属部门'"
+                class="danxuan-Area"
+                id="danxuan-Area"
+              >
+                <div
+                  v-for="(itemSelect, indexSelect) in item.options"
+                  :key="indexSelect"
+                  :value="itemSelect.dictLabel"
+                  class="danxuan-Area-son"
+                  @click="danxuanArea(item, item.name, itemSelect.dictLabel)"
+                  :class="
+                    item.note1 && item.note1 === itemSelect.dictLabel
+                      ? 'danxuan-Area-down'
+                      : ''
+                  "
+                >
+                  {{ itemSelect.dictLabel }}
+                </div>
+              </div>
               <a-select
                 v-else-if="item.name === '归属部门'"
                 style="width: 2.4rem"
@@ -438,6 +439,7 @@
                   "
                 >
                   {{ itemson.dictLabel }}
+                  <div class="application-Area-son-son"></div>
                 </div>
               </div>
             </div>
@@ -516,906 +518,999 @@
   </div>
 </template>
 <script setup>
-  import VueTemplateDemo from '@/views/personalCenter/VueTemplateDemo'
-  import { placeHolderWords } from '@/utils/placeHolder'
-  import {
-    ref,
-    defineProps,
-    watch,
-    onMounted,
-    defineExpose,
-    defineEmits,
-  } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  import upload from '@/views/components/upload'
-  import { message } from 'ant-design-vue'
-  import { getUserInfo, getDeptAll } from '@/api/user'
-  import {
-    getCategoryTreePage,
-    queryApplicationRelByResourceId,
-    queryResourceRelByKeyId,
-    filesUpload,
-  } from '@/api/personalCenter'
-  import { useRouter } from 'vue-router'
-  const router = useRouter()
-  const abilityToType = router.currentRoute.value.query.abilityToType
-  const componentTypeValue = router.currentRoute.value.query.componentTypeValue
-  const changeField = ref([])
-  const props = defineProps({
-    // 展示数据
-    refData: { type: Object, default: null },
-    // 表单数据
-    dataFrom: { type: Array, default: null },
-    // 文件回显
-    fileList: { type: Array, default: null },
-    fileList2: { type: Array, default: null },
-    // 压缩包回显
-    packageList: { type: Array, default: null },
-    // 图片回显
-    imgList: { type: Array, default: null },
-    // 视频回显
-    videoList: { type: Array, default: null },
-    // 外部字段
-    externalField: { type: Array, default: null },
-    // 多条的配置
-    configure: { type: Array, default: null },
-    required: { type: Array, default: null },
-    notFilled: { type: Array, default: null },
-    // [{
-    //   name:'计费标准信息',
-    //   list:[
-    //     {
-    //       name:'计费方式',
-    //       type:'radio',
-    //       field:'type',
-    //       options:
-    //         {
-    //           name:'一次性买断',
-    //           value:'1'
-    //         },
-    //         {
-    //           name:'按调用次数',
-    //           value:'2'
-    //         },
-    //         {
-    //           name:'按并发路数',
-    //           value:'3'
-    //         },
-    //         {
-    //           name:'按年计费',
-    //           value:'4'
-    //         }
-    //       ],
-    //       note1:''
-    //     },
-    //     {
-    //       name:'计费标准',
-    //       field:'price',
-    //       type:'number',
-    //       company:'元',
-    //       note1: ''
-    //     },
-    //     {
-    //       name:'计费标准描述',
-    //       field:'desc',
-    //       type:'textArea',
-    //       note1:''
-    //     }
-    //   ]
-    // }]
-  })
-  const emit = defineEmits(['next', 'back', 'submit', 'preview'])
-  // console.log('props==========>', props)
-  const changeAdd = () => {
-    console.log('子组件方法触发~')
+import VueTemplateDemo from '@/views/personalCenter/VueTemplateDemo'
+import { placeHolderWords } from '@/utils/placeHolder'
+import {
+  ref,
+  defineProps,
+  watch,
+  onMounted,
+  defineExpose,
+  defineEmits,
+} from 'vue'
+import mybus from '@/myplugins/mybus'
+import upload from '@/views/components/upload'
+import { message } from 'ant-design-vue'
+import { getUserInfo, getDeptAll } from '@/api/user'
+import {
+  getCategoryTreePage,
+  queryApplicationRelByResourceId,
+  queryResourceRelByKeyId,
+  filesUpload,
+} from '@/api/personalCenter'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const abilityToType = router.currentRoute.value.query.abilityToType
+const componentTypeValue = router.currentRoute.value.query.componentTypeValue
+const changeField = ref([])
+//选取的数据
+const chooseField = ref([])
+const props = defineProps({
+  // 展示数据
+  refData: { type: Object, default: null },
+  // 表单数据
+  dataFrom: { type: Array, default: null },
+  // 文件回显
+  fileList: { type: Array, default: null },
+  fileList2: { type: Array, default: null },
+  // 压缩包回显
+  packageList: { type: Array, default: null },
+  // 图片回显
+  imgList: { type: Array, default: null },
+  // 视频回显
+  videoList: { type: Array, default: null },
+  // 外部字段
+  externalField: { type: Array, default: null },
+  // 多条的配置
+  configure: { type: Array, default: null },
+  required: { type: Array, default: null },
+  notFilled: { type: Array, default: null },
+  // [{
+  //   name:'计费标准信息',
+  //   list:[
+  //     {
+  //       name:'计费方式',
+  //       type:'radio',
+  //       field:'type',
+  //       options:
+  //         {
+  //           name:'一次性买断',
+  //           value:'1'
+  //         },
+  //         {
+  //           name:'按调用次数',
+  //           value:'2'
+  //         },
+  //         {
+  //           name:'按并发路数',
+  //           value:'3'
+  //         },
+  //         {
+  //           name:'按年计费',
+  //           value:'4'
+  //         }
+  //       ],
+  //       note1:''
+  //     },
+  //     {
+  //       name:'计费标准',
+  //       field:'price',
+  //       type:'number',
+  //       company:'元',
+  //       note1: ''
+  //     },
+  //     {
+  //       name:'计费标准描述',
+  //       field:'desc',
+  //       type:'textArea',
+  //       note1:''
+  //     }
+  //   ]
+  // }]
+})
+const emit = defineEmits(['next', 'back', 'submit', 'preview'])
+
+const changeAdd = () => {}
+const data = ref({
+  list: [],
+})
+const showKey = ref(0)
+const numType = ref('一次性买断')
+const radioChange = (e) => {
+  numType.value = e.target.value
+}
+const changeIiem = (name, value) => {
+  if (value && value !== '' && changeField.value.indexOf(name) == -1) {
+    changeField.value.push(name)
+  } else if (!value || value == '') {
+    if (changeField.value.indexOf(name) > -1) {
+      changeField.value.splice(changeField.value.indexOf(name), 1)
+    }
   }
-  const data = ref({
-    list: [],
-  })
-  const showKey = ref(0)
-  const numType = ref('一次性买断')
-  const radioChange = (e) => {
-    numType.value = e.target.value
-  }
-  const changeIiem = (name, value) => {
-    if (value && value !== '' && changeField.value.indexOf(name) == -1) {
-      changeField.value.push(name)
-    } else if (!value || value == '') {
-      if (changeField.value.indexOf(name) > -1) {
-        changeField.value.splice(changeField.value.indexOf(name), 1)
+}
+
+props.refData.children.map((item) => {
+  if (item.name == '基本信息') {
+    item.children.map((val) => {
+      if (val.name == '能力类型') {
+        val.note1 = abilityToType
       }
-    }
-  }
-  props.refData.children.map((item) => {
-    if (item.name == '基本信息') {
-      item.children.map((val) => {
-        if (val.name == '能力类型') {
-          val.note1 = abilityToType
-        }
-        if (val.name == '组件类型') {
-          val.note1 = componentTypeValue
-        }
-      })
-    }
-    if (
-      props.configure &&
-      props.configure.filter((val) => val.name === item.name).length > 0
-    ) {
-      item.isConfigure = true
-      data.value[item.name] = []
-    } else {
-      item.isConfigure = false
-    }
-  })
-  let arr = props.refData.children.filter((item) => {
-    if (props.configure) {
-      if (!item.isConfigure) {
-        return item
+      if (val.name == '组件类型') {
+        val.note1 = componentTypeValue
       }
-    } else {
+    })
+  }
+  if (
+    props.configure &&
+    props.configure.filter((val) => val.name === item.name).length > 0
+  ) {
+    item.isConfigure = true
+    data.value[item.name] = []
+  } else {
+    item.isConfigure = false
+  }
+})
+let arr = props.refData.children.filter((item) => {
+  if (props.configure) {
+    if (!item.isConfigure) {
       return item
     }
-  })
-  data.value.list = []
-  // 获取字典数据
-  arr.forEach((val) => {
-    val.children.forEach((item) => {
-      if (item.isLinkToDic === 'true' && item.linkValue) {
-        getCategoryTreePage({
-          page: 1,
-          limit: 20,
-          dictTypeId: item.linkValue,
-          deFlage: 0,
-        }).then((res) => {
-          if (item.type === 'radio') {
-            item.options = res.data.data.list.map((radio) => radio.dictLabel)
-          } else if (item.type === 'select' || item.type === 'checkBox') {
-            if (item.type === 'checkBox') {
-              if (!item.note2) {
-                item.note2 = []
-              }
+  } else {
+    return item
+  }
+})
+data.value.list = []
+// 获取字典数据
+arr.forEach((val) => {
+  val.children.forEach((item) => {
+    if (item.isLinkToDic === 'true' && item.linkValue) {
+      getCategoryTreePage({
+        page: 1,
+        limit: 20,
+        dictTypeId: item.linkValue,
+        deFlage: 0,
+      }).then((res) => {
+        if (item.type === 'radio') {
+          item.options = res.data.data.list.map((radio) => radio.dictLabel)
+        } else if (item.type === 'select' || item.type === 'checkBox') {
+          if (item.type === 'checkBox') {
+            if (!item.note2) {
+              item.note2 = []
             }
-            item.options = res.data.data.list
           }
-          data.value.list.push(item)
-        })
-      } else if (item.name === '归属部门') {
-        getDeptAll().then((res) => {
-          const dataList = []
-          res.data.data.forEach((element) => {
-            dataList.push({
-              value: element.id,
-              label: element.name,
-            })
-          })
-          item.options = dataList
-          if (!item.note1) {
-            getUserInfo().then(({ data: res1 }) => {
-              console.log(res1.data)
-              item.note1 = res1.data.deptId
-              item.note2 = item.options.filter(
-                (val) => val.value == item.note1
-              )[0]
-              console.log('默认部门=========>', item, res1.data)
-              data.value.list.push(item)
-            })
-          } else {
-            data.value.list.push(item)
-          }
-        })
-      }
-      // else if (item.name === '部门联系人') {
-      //   if (!item.note1) {
-      //     getUserInfo().then(({ data: res1 }) => {
-      //       console.log(res1.data)
-      //       item.note1 = res1.data.realName || ''
-      //     })
-      //     data.value.list.push(item)
-      //   } else {
-      //     data.value.list.push(item)
-      //   }
-      // } else if (item.name === '部门联系人电话') {
-      //   if (!item.note1) {
-      //     getUserInfo().then(({ data: res1 }) => {
-      //       console.log(res1.data)
-      //       item.note1 = res1.data.mobile || ''
-      //     })
-      //     data.value.list.push(item)
-      //   } else {
-      //     data.value.list.push(item)
-      //   }
-      // }
-      else if (item.name === '来源应用') {
-        queryApplicationRelByResourceId({
-          referenceId: 0,
-        }).then((res) => {
-          const dataList = []
-          res.data.data.notLinked.forEach((element) => {
-            dataList.push({
-              value: element.id,
-              label: element.name,
-            })
-          })
-          item.options = dataList
-          data.value.list.push(item)
-        })
-      } else {
+          item.options = res.data.data.list
+        }
         data.value.list.push(item)
-      }
-    })
-    console.log('props.dataFrom', data.value.list)
-  })
-  if (props.dataFrom) {
-    // console.log(props.dataFrom, data.value.list)
-    props.dataFrom.infoList.forEach((item) => {
-      if (
-        props.configure &&
-        props.configure.filter((val) => val.name === item.attrType).length > 0
-      ) {
-        data.value[item.attrType] = JSON.parse(item.attrValue)
-      } else if (item.attrType === '应用领域') {
-        props.refData.children.forEach((val) => {
-          val.children.forEach((child) => {
-            if (child.name === item.attrType) {
-              // 通过;分割成数组
-              child.note2 = item.attrValue.split(';')
-              showKey.value++
-              // console.log('应用领域', item, item.attrValue.split(';'), child)
-            }
+      })
+    } else if (item.name === '归属部门') {
+      getDeptAll().then((res) => {
+        const dataList = []
+        res.data.data.forEach((element) => {
+          dataList.push({
+            value: element.id,
+            label: element.name,
           })
         })
-        //  item.note1 = item.attrValue.split(';')
-      }
-    })
-  }
-  //显示富文本
-  let showText = ref(false)
-  const showTextFunction = () => {
-    console.log('点击富文本=========================>')
-    showText.value = true
-  }
-  mybus.on('showTextFunctionEmit', (show) => {
-    console.log('ssdcsd')
-    showText.value = show
-  })
-  mybus.off('func')
-  const add = (title, addFlag, type) => {
-    console.log(title, 'title')
-    let list = props.configure.filter((item) => item.name === title)[0].list
-    let flag = true
-    list.forEach((item) => {
-      // console.log(item)
-      if (item.type !== 'number' && !item.note1.length > 0) {
-        flag = false
-      } else if (item.type === 'number' && !item.note1 > 0) {
-        flag = false
-      }
-    })
-    if (flag) {
-      let obj = {}
-      let sfFlag = false
-      list.forEach((item) => {
-        if (item.type === 'input2') {
-          sfFlag = data.value[title].filter(
-            (val) => val.type === numType.value
-          )[0]
-          if (sfFlag) {
-            message.warning('已添加过该类型！')
-            return
-          }
-          obj[item.field] =
-            item.note1 +
-            (numType.value == '一次性买断'
-              ? '元'
-              : numType.value == '按调用次数'
-              ? '元/次'
-              : numType.value == '按并发路数'
-              ? '元/路'
-              : numType.value == '按年计费'
-              ? '元/年'
-              : '')
+        item.options = dataList
+        if (!item.note1) {
+          getUserInfo().then(({ data: res1 }) => {
+            item.note1 = res1.data.deptId
+            item.note2 = item.options.filter(
+              (val) => val.value == item.note1
+            )[0]
+
+            data.value.list.push(item)
+          })
         } else {
-          obj[item.field] = item.note1
+          data.value.list.push(item)
         }
       })
-      if (!sfFlag) {
-        data.value[title].push(obj)
-      }
-      // console.log(data.value[title])
-      mybus.emit('chageDataFrom', {
-        attrType: title,
-        attrValue: JSON.stringify(data.value[title]),
-        delFlag: 0,
-      })
-      list.forEach((item) => {
-        item.note1 = ''
-        showKey.value++
-      })
-      if (addFlag) {
-        if (type == '上一步') {
-          emit('back')
-        } else if (type == '下一步') {
-          emit('next')
-        } else if (type == '提交') {
-          emit('submit')
-        } else if (type == '预览') {
-          emit('preview')
-        }
-      }
-    } else {
-      if (!addFlag) {
-        message.warning('请填写完整')
-      } else {
-        list.forEach((item) => {
-          item.note1 = ''
-          showKey.value++
-        })
-        if (type == '上一步') {
-          emit('back')
-        } else if (type == '下一步') {
-          emit('next')
-        } else if (type == '提交') {
-          emit('submit')
-        } else if (type == '预览') {
-          emit('preview')
-        }
-      }
     }
-  }
-  const del = (title, index) => {
-    data.value[title].splice(index, 1)
+    // else if (item.name === '部门联系人') {
+    //   if (!item.note1) {
+    //     getUserInfo().then(({ data: res1 }) => {
+    //       console.log(res1.data)
+    //       item.note1 = res1.data.realName || ''
+    //     })
+    //     data.value.list.push(item)
+    //   } else {
+    //     data.value.list.push(item)
+    //   }
+    // } else if (item.name === '部门联系人电话') {
+    //   if (!item.note1) {
+    //     getUserInfo().then(({ data: res1 }) => {
+    //       console.log(res1.data)
+    //       item.note1 = res1.data.mobile || ''
+    //     })
+    //     data.value.list.push(item)
+    //   } else {
+    //     data.value.list.push(item)
+    //   }
+    // }
+    else if (item.name === '来源应用') {
+      queryApplicationRelByResourceId({
+        referenceId: 0,
+      }).then((res) => {
+        const dataList = []
+        res.data.data.notLinked.forEach((element) => {
+          dataList.push({
+            value: element.id,
+            label: element.name,
+          })
+        })
+        item.options = dataList
+        data.value.list.push(item)
+      })
+    } else {
+      data.value.list.push(item)
+    }
+  })
+})
+if (props.dataFrom) {
+  props.dataFrom.infoList.forEach((item) => {
+    if (
+      props.configure &&
+      props.configure.filter((val) => val.name === item.attrType).length > 0
+    ) {
+      data.value[item.attrType] = JSON.parse(item.attrValue)
+    } else if (item.attrType === '应用领域') {
+      props.refData.children.forEach((val) => {
+        val.children.forEach((child) => {
+          if (child.name === item.attrType) {
+            // 通过;分割成数组
+            child.note2 = item.attrValue.split(';')
+            showKey.value++
+          }
+        })
+      })
+      //  item.note1 = item.attrValue.split(';')
+    }
+  })
+}
+//显示富文本
+let showText = ref(false)
+const showTextFunction = () => {
+  showText.value = true
+}
+mybus.on('showTextFunctionEmit', (show) => {
+  showText.value = show
+})
+mybus.off('func')
+const add = (title, addFlag, type) => {
+  let list = props.configure.filter((item) => item.name === title)[0].list
+  let flag = true
+  list.forEach((item) => {
+    if (item.type !== 'number' && !item.note1.length > 0) {
+      flag = false
+    } else if (item.type === 'number' && !item.note1 > 0) {
+      flag = false
+    }
+  })
+  if (flag) {
+    let obj = {}
+    let sfFlag = false
+    list.forEach((item) => {
+      if (item.type === 'input2') {
+        sfFlag = data.value[title].filter(
+          (val) => val.type === numType.value
+        )[0]
+        if (sfFlag) {
+          message.warning('已添加过该类型！')
+          return
+        }
+        obj[item.field] =
+          item.note1 +
+          (numType.value == '一次性买断'
+            ? '元'
+            : numType.value == '按调用次数'
+            ? '元/次'
+            : numType.value == '按并发路数'
+            ? '元/路'
+            : numType.value == '按年计费'
+            ? '元/年'
+            : '')
+      } else {
+        obj[item.field] = item.note1
+      }
+    })
+    if (!sfFlag) {
+      data.value[title].push(obj)
+    }
+
     mybus.emit('chageDataFrom', {
       attrType: title,
       attrValue: JSON.stringify(data.value[title]),
       delFlag: 0,
     })
-  }
-  const ApplicationArea = (item, itemson) => {
-    // console.log('点击=========》', item, itemson)
-    // console.log(item, itemson)
-    if (item.note2.indexOf(itemson.dictLabel) === -1) {
-      item.note2.push(itemson.dictLabel)
+    list.forEach((item) => {
+      item.note1 = ''
+      showKey.value++
+    })
+    if (addFlag) {
+      if (type == '上一步') {
+        emit('back')
+      } else if (type == '下一步') {
+        emit('next')
+      } else if (type == '提交') {
+        emit('submit')
+      } else if (type == '预览') {
+        emit('preview')
+      }
+    }
+  } else {
+    if (!addFlag) {
+      message.warning('请填写完整')
     } else {
-      item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
+      list.forEach((item) => {
+        item.note1 = ''
+        showKey.value++
+      })
+      if (type == '上一步') {
+        emit('back')
+      } else if (type == '下一步') {
+        emit('next')
+      } else if (type == '提交') {
+        emit('submit')
+      } else if (type == '预览') {
+        emit('preview')
+      }
     }
-    // 多选判断是否为空
+  }
+}
+const del = (title, index) => {
+  data.value[title].splice(index, 1)
+  mybus.emit('chageDataFrom', {
+    attrType: title,
+    attrValue: JSON.stringify(data.value[title]),
+    delFlag: 0,
+  })
+}
+const ApplicationArea = (item, itemson) => {
+  if (item.note2.indexOf(itemson.dictLabel) === -1) {
+    item.note2.push(itemson.dictLabel)
+  } else {
+    item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
+  }
+  // 多选判断是否为空
+  if (item.note2.length !== 0 && changeField.value.indexOf('应用领域') == -1) {
+    changeField.value.push('应用领域')
+  } else if (item.note2.length == 0) {
+    if (changeField.value.indexOf('应用领域') > -1) {
+      changeField.value.splice(changeField.value.indexOf('应用领域'), 1)
+    }
+  }
+  mybus.emit('chageDataFrom', {
+    attrType: item.name,
+    attrValue: item.note2.join(';'),
+    delFlag: 0,
+  })
+}
+const danxuanArea = (item, itemSelect, indexSelect) => {
+
+  if(item.note1){
+ if(item.note1===indexSelect){
+  item.note1= null
+ }else{
+ item.note1=indexSelect
+ }
+  }else{
+    item.note1 = indexSelect
+  }
+  
+  changeIiem(itemSelect, indexSelect)
+}
+// 来源应用
+const visibleAssociatedApplication = ref(false)
+const visibleAssociatedApplicationOther = ref(false)
+const mockData = ref([])
+const mockDataOther = ref([])
+const titles = ref(['未关联的应用名称', '已关联的应用名称'])
+const titleName = ref('来源应用')
+const targetKeys = ref([])
+const targetKeysOther = ref([])
+// 上一步关联数据
+// const targetKeysBack = ref([])
+// 来源应用-back
+const sourceClick = () => {
+  mockData.value = []
+  visibleAssociatedApplication.value = true
+  props.dataFrom.infoList.forEach((val) => {
+    if (val.attrType === '来源应用' && val.attrValue != '') {
+      queryApplicationRelByResourceId({
+        referenceId: 0,
+      }).then((res) => {
+        res.data.data.notLinked.forEach((val, index) => {
+          mockData.value.push({
+            key: val.id,
+            title: val.name,
+            description: val.id,
+          })
+        })
+      })
+      targetKeys.value = []
+      val.attrValue.split(',').forEach((item) => {
+        targetKeys.value.push(item)
+      })
+    } else if (val.attrType === '来源应用' && val.attrValue == '') {
+      queryApplicationRelByResourceId({
+        referenceId: 0,
+      }).then((res) => {
+        res.data.data.notLinked.forEach((val, index) => {
+          mockData.value.push({
+            key: val.id,
+            title: val.name,
+            description: val.id,
+          })
+        })
+      })
+    }
+  })
+}
+// 关联组件
+const componentsClick = () => {
+  titles.value = ['未关联的组件名称', '已关联的组件名称']
+  titleName.value = '关联组件'
+  visibleAssociatedApplicationOther.value = true
+  mockDataOther.value = []
+  props.dataFrom.infoList.forEach((val) => {
+    if (val.attrType === '关联组件信息' && val.attrValue != '') {
+      queryResourceRelByKeyId({
+        keyId: 0,
+        type: '组件服务',
+        referenceName: '',
+      }).then((res) => {
+        res.data.data.notLinked.forEach((val, index) => {
+          mockDataOther.value.push({
+            key: val.id,
+            title: val.name,
+            description: val.name,
+          })
+        })
+      })
+      targetKeysOther.value = []
+      val.attrValue.split(',').forEach((item) => {
+        targetKeysOther.value.push(item)
+      })
+    } else if (val.attrType === '关联组件信息' && val.attrValue == '') {
+      queryResourceRelByKeyId({
+        keyId: 0,
+        type: '组件服务',
+        referenceName: '',
+      }).then((res) => {
+        res.data.data.notLinked.forEach((val, index) => {
+          mockDataOther.value.push({
+            key: val.id,
+            title: val.name,
+            description: val.name,
+          })
+        })
+      })
+    }
+  })
+}
+const selectedKeys = ref([])
+const selectedKeysOther = ref([])
+
+const handleChange = (nextTargetKeys, direction, moveKeys) => {
+  if (direction === 'right') {
+    targetKeys.value = moveKeys.filter((item, index) => index === 0)
+  }
+}
+const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {}
+const handleChangeOther = (nextTargetKeys, direction, moveKeys) => {}
+const handleSelectChangeOther = (sourceSelectedKeys, targetSelectedKeys) => {}
+
+const filterOptionTransfer = (inputValue, option) => {
+  return option.description.indexOf(inputValue) > -1
+}
+
+const handleOk = (e) => {
+  visibleAssociatedApplicationOther.value = false
+  visibleAssociatedApplication.value = false
+
+  data.value.list.map((item) => {
+    if (item.name === '来源应用') {
+      item.note1 = targetKeys.value + ''
+    } else if (item.name === '关联组件信息') {
+      item.note1 = targetKeysOther.value + ''
+    }
+  })
+}
+const handleCancel = (e) => {
+  visibleAssociatedApplicationOther.value = false
+  visibleAssociatedApplication.value = false
+}
+
+const showType = ref('')
+const showTypeClick = (e) => {
+  showType.value = e
+}
+showTypeClick('调用接口')
+
+watch(data.value.list, (newProps, oldProps) => {
+  newProps.forEach((val) => {
     if (
-      item.note2.length !== 0 &&
-      changeField.value.indexOf('应用领域') == -1
+      props.configure &&
+      props.configure.filter((item) => item.name === val.name).length > 0
     ) {
-      changeField.value.push('应用领域')
-      console.log('点击=========》1', changeField.value, item.note2)
-    } else if (item.note2.length == 0) {
-      if (changeField.value.indexOf('应用领域') > -1) {
-        changeField.value.splice(changeField.value.indexOf('应用领域'), 1)
-        console.log('点击=========》2', changeField.value, item.note2)
+      mybus.emit('chageDataFrom', {
+        attrType: val.name,
+        attrValue: val.note1,
+        delFlag: 0,
+      })
+    } else if (
+      props.externalField &&
+      props.externalField.indexOf(val.name) > -1
+    ) {
+      let note2 = {} //储存归属部门的名字
+      if (val.options) {
+        note2 = val.options.filter((item) => item.value == val.note1)[0]
       }
-    }
-    mybus.emit('chageDataFrom', {
-      attrType: item.name,
-      attrValue: item.note2.join(';'),
-      delFlag: 0,
-    })
-  }
-  // 来源应用
-  const visibleAssociatedApplication = ref(false)
-  const visibleAssociatedApplicationOther = ref(false)
-  const mockData = ref([])
-  const mockDataOther = ref([])
-  const titles = ref(['未关联的应用名称', '已关联的应用名称'])
-  const titleName = ref('来源应用')
-  const targetKeys = ref([])
-  const targetKeysOther = ref([])
-  // 上一步关联数据
-  // const targetKeysBack = ref([])
-  // 来源应用-back
-  const sourceClick = () => {
-    mockData.value = []
-    visibleAssociatedApplication.value = true
-    props.dataFrom.infoList.forEach((val) => {
-      if (val.attrType === '来源应用' && val.attrValue != '') {
-        queryApplicationRelByResourceId({
-          referenceId: 0,
-        }).then((res) => {
-          // console.log(res.data.data.notLinked)
-          res.data.data.notLinked.forEach((val, index) => {
-            mockData.value.push({
-              key: val.id,
-              title: val.name,
-              description: val.id,
-            })
+
+      mybus.emit('chageDataFromDwon', {
+        attrType: val.name,
+        attrValue: val.note1,
+        delFlag: 0,
+        attrValueTwo: note2,
+      })
+    } else {
+      if (val.name !== '应用领域' && val.name !== '发布端') {
+        if (val.name == '算法介绍视频') {
+          mybus.emit('chageDataFrom', {
+            attrType: val.name,
+            attrValue: val.note1,
+            delFlag: 0,
+            note3: val.note3,
           })
-        })
-        targetKeys.value = []
-        val.attrValue.split(',').forEach((item) => {
-          targetKeys.value.push(item)
-        })
-        console.log(targetKeys.value)
-        // console.log('wowowo')
-      } else if (val.attrType === '来源应用' && val.attrValue == '') {
-        queryApplicationRelByResourceId({
-          referenceId: 0,
-        }).then((res) => {
-          // console.log(res.data.data.notLinked)
-          res.data.data.notLinked.forEach((val, index) => {
-            mockData.value.push({
-              key: val.id,
-              title: val.name,
-              description: val.id,
-            })
+        } else {
+          mybus.emit('chageDataFrom', {
+            attrType: val.name,
+            attrValue: val.note1,
+            delFlag: 0,
           })
-        })
-      }
-    })
-  }
-  // 关联组件
-  const componentsClick = () => {
-    titles.value = ['未关联的组件名称', '已关联的组件名称']
-    titleName.value = '关联组件'
-    visibleAssociatedApplicationOther.value = true
-    mockDataOther.value = []
-    props.dataFrom.infoList.forEach((val) => {
-      if (val.attrType === '关联组件信息' && val.attrValue != '') {
-        queryResourceRelByKeyId({
-          keyId: 0,
-          type: '组件服务',
-          referenceName: '',
-        }).then((res) => {
-          // console.log(res.data.data.notLinked)
-          res.data.data.notLinked.forEach((val, index) => {
-            mockDataOther.value.push({
-              key: val.id,
-              title: val.name,
-              description: val.name,
-            })
-          })
-        })
-        targetKeysOther.value = []
-        val.attrValue.split(',').forEach((item) => {
-          targetKeysOther.value.push(item)
-        })
-        console.log(targetKeysOther.value)
-        // console.log('wowowo')
-      } else if (val.attrType === '关联组件信息' && val.attrValue == '') {
-        queryResourceRelByKeyId({
-          keyId: 0,
-          type: '组件服务',
-          referenceName: '',
-        }).then((res) => {
-          // console.log(res.data.data.notLinked)
-          res.data.data.notLinked.forEach((val, index) => {
-            mockDataOther.value.push({
-              key: val.id,
-              title: val.name,
-              description: val.name,
-            })
-          })
-        })
-      }
-    })
-  }
-  const selectedKeys = ref([])
-  const selectedKeysOther = ref([])
-
-  const handleChange = (nextTargetKeys, direction, moveKeys) => {
-    console.log('targetKeys: ', nextTargetKeys)
-    console.log('direction: ', direction)
-    console.log('moveKeys: ', moveKeys)
-    if (direction === 'right') {
-      targetKeys.value = moveKeys.filter((item, index) => index === 0)
-    }
-  }
-  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
-    console.log('targetSelectedKeys: ', targetSelectedKeys, sourceSelectedKeys)
-  }
-  const handleChangeOther = (nextTargetKeys, direction, moveKeys) => {
-    console.log('targetKeys: ', nextTargetKeys)
-    console.log('direction: ', direction)
-    console.log('moveKeys: ', moveKeys)
-  }
-  const handleSelectChangeOther = (sourceSelectedKeys, targetSelectedKeys) => {
-    console.log('targetSelectedKeys: ', targetSelectedKeys, sourceSelectedKeys)
-  }
-
-  const filterOptionTransfer = (inputValue, option) => {
-    console.log(option, 'option')
-    return option.description.indexOf(inputValue) > -1
-  }
-
-  const handleOk = (e) => {
-    console.log(e)
-    visibleAssociatedApplicationOther.value = false
-    visibleAssociatedApplication.value = false
-    // console.log('2222222222222', props.refData)
-    data.value.list.map((item) => {
-      if (item.name === '来源应用') {
-        item.note1 = targetKeys.value + ''
-      } else if (item.name === '关联组件信息') {
-        item.note1 = targetKeysOther.value + ''
-      }
-    })
-  }
-  const handleCancel = (e) => {
-    console.log(e)
-    visibleAssociatedApplicationOther.value = false
-    visibleAssociatedApplication.value = false
-  }
-
-  const showType = ref('')
-  const showTypeClick = (e) => {
-    showType.value = e
-    console.log(e, 'showType', showType.value)
-  }
-  showTypeClick('调用接口')
-
-  watch(data.value.list, (newProps, oldProps) => {
-    console.log('数据发生改变==========>', newProps, oldProps)
-    newProps.forEach((val) => {
-      // console.log('数据发生改变==========>', val)
-      if (
-        props.configure &&
-        props.configure.filter((item) => item.name === val.name).length > 0
-      ) {
-        mybus.emit('chageDataFrom', {
-          attrType: val.name,
-          attrValue: val.note1,
-          delFlag: 0,
-        })
-      } else if (
-        props.externalField &&
-        props.externalField.indexOf(val.name) > -1
-      ) {
-        let note2 = {} //储存归属部门的名字
-        if (val.options) {
-          note2 = val.options.filter((item) => item.value == val.note1)[0]
-        }
-        console.log('chageDataFromDwon===================>', val)
-        mybus.emit('chageDataFromDwon', {
-          attrType: val.name,
-          attrValue: val.note1,
-          delFlag: 0,
-          attrValueTwo: note2,
-        })
-      } else {
-        if (val.name !== '应用领域' && val.name !== '发布端') {
-          if (val.name == '算法介绍视频') {
-            console.log('变更视频==================>', val)
-            mybus.emit('chageDataFrom', {
-              attrType: val.name,
-              attrValue: val.note1,
-              delFlag: 0,
-              note3: val.note3,
-            })
-          } else {
-            mybus.emit('chageDataFrom', {
-              attrType: val.name,
-              attrValue: val.note1,
-              delFlag: 0,
-            })
-          }
         }
       }
-    })
+    }
   })
-  const applicationsChange = (value) => {
-    data.value.list.map((item) => {
-      if (item.name === '来源应用') {
-        item.note1 = value
-      }
-    })
-    console.log(`selected ${value}`)
-  }
-
-  const handleBlur = () => {
-    console.log('blur')
-  }
-  const applicationsBlur = () => {
-    console.log('blur')
-  }
-
-  const handleFocus = () => {
-    console.log('focus')
-  }
-  const applicationsFocus = () => {
-    console.log('focus')
-  }
-
-  const filterOption = (input, option) => {
-    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-  }
-  defineExpose({
-    add,
+})
+const applicationsChange = (value) => {
+  data.value.list.map((item) => {
+    if (item.name === '来源应用') {
+      item.note1 = value
+    }
   })
-  const applicationsOption = (input, option) => {
-    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-  }
+}
+
+const handleBlur = () => {}
+const applicationsBlur = () => {}
+
+const handleFocus = () => {}
+const applicationsFocus = () => {}
+
+const filterOption = (input, option) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+defineExpose({
+  add,
+})
+const applicationsOption = (input, option) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
 </script>
 <style></style>
 <style lang="less" scoped>
-  .put-on-the-shelf {
-    height: 6.8rem;
-    overflow: scroll;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0.5rem 1rem 0.25rem;
-    .Technical-text {
-      height: 0.3rem;
-      width: 1rem;
-      border: 0.01rem solid #bbd3ef;
-      border-radius: 0.06rem;
-      background: #edf4fc;
-      color: #0087ff;
-      font-size: 0.14rem;
-      text-align: center;
-      line-height: 0.3rem;
-    }
-    .Technical-text:hover {
-      cursor: pointer;
-    }
 
-    & > div {
-      width: 100%;
-      margin-top: 0.6rem;
+:deep(.upload-list-inline .ant-upload .ant-btn) {
+    height: 150px;
+    width: 218px;
+    border: 1px solid rgba(198,198,198,0.5);
+    border-radius: 2px; 
+    background: rgba(0,88,225,0.05);
+    color: #0087ff;
+    font-size: 14px;
+}
 
-      .top {
-        color: #333333;
-        font-size: 0.22rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-bottom: 0.25rem;
+:deep(.upload-list-inline .ant-upload .ant-btn > span){
+    background:url('~@/assets/home/yuanjia.png') no-repeat ;
+    color: #666666;
+    background-position: center;
+    text-align: center;
+    line-height: 120px;
+    height: 50px;
+}
+ // 箭头大小以及位置
+ :deep(.ant-select-arrow) {
+  background:url('~@/assets/home/huixia.png') no-repeat ;
+  cursor: pointer;
+    margin-top: -4px;
+    margin-right: -4px;
+  }
 
-        div:first-child,
-        div:last-child {
-          width: 2.45rem;
-          height: 0.01rem;
-          background: #f0f0f0;
-        }
+  // 隐藏三角
+  :deep(.ant-select-arrow .anticon){
+    vertical-align: top;
+    transition: transform 0.3s;
+    display: none;
+  } 
+  // :deep(.ant-select-arrow :focus) {
+  //   background:url('~@/assets/home/huishang.png') no-repeat ;
+  // cursor: pointer;
+  //   margin-top: -4px;
+  //   margin-right: -4px;
+  // }
 
-        div:nth-child(2) {
-          margin: 0 0.3rem;
-        }
+
+
+.put-on-the-shelf {
+  margin: 0.15rem 2rem;
+  background: rgb(246, 247, 249, 0.8);
+  height: 846px;
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .Technical-text {
+    height: 0.3rem;
+    width: 1rem;
+    border: 0.01rem solid #bbd3ef;
+    border-radius: 0.06rem;
+    background: #edf4fc;
+    color: #0087ff;
+    font-size: 0.14rem;
+    text-align: center;
+    line-height: 0.3rem;
+  }
+  .Technical-text:hover {
+    cursor: pointer;
+  }
+
+  & > div {
+    padding: 0px 0px 24px 24px;
+    width: 100%;
+    font-size: 14px;
+
+    .top {
+      color: #333333;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 0.25rem;
+
+      div:first-child,
+      div:last-child {
+        width: 2.45rem;
+        height: 0.01rem;
+        background: #f0f0f0;
       }
 
-      .bottom {
-        margin-top: 0.25rem;
+      div:nth-child(2) {
+        margin: 0 0.3rem;
+      }
+    }
 
-        .items {
-          background: #fafafa;
-          padding: 0.1rem;
+    .bottom {
+      // margin-top: 0.25rem;
 
-          p {
-            display: flex;
-            justify-content: space-between;
+      .items {
+        background: #fafafa;
+        padding: 0.1rem;
 
-            span:nth-of-type(1) {
-              width: 2rem;
-            }
+        p {
+          display: flex;
+          justify-content: space-between;
 
-            span:nth-of-type(2) {
-              width: 100%;
-              font-weight: 600;
-            }
+          span:nth-of-type(1) {
+            width: 2rem;
           }
 
-          p:nth-of-type(1) > span:nth-of-type(1) {
-            font-size: 0.18rem;
+          span:nth-of-type(2) {
+            width: 100%;
             font-weight: 600;
           }
         }
 
-        .add {
-          cursor: pointer;
-          margin-top: 0.1rem;
-          font-size: 0.16rem;
-          color: #007efb;
-        }
-
-        .form {
-          margin-top: 0.2rem;
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-
-          span:first-child {
-            width: 1.2rem;
-          }
-
-          :deep(.ant-input-textarea) {
-            width: 5.2rem;
-          }
-
-          :deep(.ant-radio-group) {
-            width: 5.2rem;
-          }
-
-          :deep(.ant-input-number) {
-            width: 2rem;
-          }
-
-          :deep(.ant-input) {
-            resize: none;
-            width: 5.2rem;
-          }
-
-          .ant-btn {
-            width: 1.6rem;
-            height: 0.32rem;
-            text-align: center;
-            background: #edf4fc;
-            color: #0087ff;
-            border: 0.01rem solid #bbd3ef;
-            border-radius: 0.06rem;
-          }
-        }
-
-        .submit {
-          margin-top: 0.4rem;
-          font-size: 0.14rem;
-          display: flex;
-          justify-content: flex-end;
-
-          .ant-btn {
-            width: 1.8rem;
-            height: 0.3rem;
-            text-align: center;
-            background: #d9ebff;
-            color: #0087ff;
-            border: 0.01rem solid #0087ff;
-            border-radius: 0.06rem;
-          }
+        p:nth-of-type(1) > span:nth-of-type(1) {
+          font-size: 0.18rem;
+          font-weight: 600;
         }
       }
-    }
 
-    & > div:nth-of-type(1) {
-      margin-top: 0;
-    }
-  }
+      .add {
+        cursor: pointer;
+        margin-top: 0.1rem;
+        font-size: 0.16rem;
+        color: #007efb;
+      }
 
-  .application-Area {
-    width: 5.2rem;
-    display: grid;
-    margin-top: -0.05rem;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-
-    .application-Area-son {
-      cursor: pointer;
-      font-size: 0.14rem;
-      width: 0.9rem;
-      height: 0.26rem;
-      border-radius: 0.13rem;
-      color: #333333;
-      background: #f5f5f5;
-      border: 0.01rem #cccccc solid;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-top: 0.1rem;
-      font-weight: 500;
-    }
-
-    .application-Area-down {
-      background: #0087ff;
-      color: #fff;
-    }
-  }
-
-  :deep(.ant-image-img) {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  :deep(.ant-modal) {
-    width: 9.6rem;
-  }
-
-  :deep(.ant-transfer-list) {
-    width: 39.5%;
-    height: 5.2rem;
-  }
-
-  :deep(.ant-transfer-operation) {
-    flex-direction: row-reverse;
-    margin: 0 0.3rem;
-  }
-
-  :deep(.ant-btn) {
-    width: 0.56rem;
-    height: 0.4rem;
-    border-radius: 0.04rem;
-  }
-
-  :deep(.ant-btn:first-child) {
-    margin-left: 0.04rem;
-  }
-
-  :deep(.ant-modal-footer) {
-    border: 0;
-  }
-
-  :deep(.ant-modal-header) {
-    border: 0;
-  }
-
-  :deep(.ant-modal-title) {
-    line-height: 0.24rem;
-    font-size: 0.18rem;
-    color: #303133;
-  }
-
-  :deep(.ant-transfer-list-header) {
-    background: #f5f7fa;
-  }
-
-  :deep(.ant-transfer-list-header-selected) {
-    display: flex;
-    width: 90%;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  :deep(.ant-transfer-list-header-title) {
-    font-size: 0.16rem;
-    color: #303133;
-    font-weight: 400;
-    text-align: left;
-  }
-  :deep(.ant-transfer-list-header .ant-checkbox-wrapper) {
-    display: none !important;
-  }
-  :deep(.ant-upload-list-item-name) {
-    width: 1rem;
-  }
-
-  .del {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    font-size: 0.14rem;
-    margin-left: 0.2rem;
-
-    .delImg {
-      cursor: pointer;
-      display: inline-block;
-      width: 0.16rem;
-      height: 0.18rem;
-      background: url(~@/assets/home/sf_del.png) no-repeat;
-      margin-right: 0.05rem;
-    }
-
-    div {
-      cursor: pointer;
-    }
-  }
-  .item {
-    position: relative;
-    span:first-child {
-      width: unset;
-    }
-    .box {
-      display: flex;
-      align-items: center;
-      // margin: 15px 0;
-      & > div:nth-of-type(1) {
-        width: 105px;
+      .form {
+        margin-top: 0.2rem;
         display: flex;
+        justify-content: flex-start;
         align-items: center;
+
+        span:first-child {
+          width: 1.2rem;
+        }
+
+        :deep(.ant-input-textarea) {
+          width: 5.2rem;
+        }
+
+        :deep(.ant-radio-group) {
+          width: 5.2rem;
+        }
+
+        :deep(.ant-input-number) {
+          width: 2rem;
+        }
+
+        :deep(.ant-input) {
+          resize: none;
+          width: 5.2rem;
+        }
+
+        .ant-btn {
+          width: 1.6rem;
+          height: 0.32rem;
+          text-align: center;
+          background: #edf4fc;
+          color: #0087ff;
+          border: 0.01rem solid #bbd3ef;
+          border-radius: 0.06rem;
+        }
       }
-      .required {
-        color: #f56c6c;
-        margin-right: 3px;
+
+      .submit {
+        margin-top: 0.4rem;
+        font-size: 0.14rem;
+        display: flex;
+        justify-content: flex-end;
+
+        .ant-btn {
+          width: 1.8rem;
+          height: 0.3rem;
+          text-align: center;
+          background: #d9ebff;
+          color: #0087ff;
+          border: 0.01rem solid #0087ff;
+          border-radius: 0.06rem;
+        }
       }
     }
-    .requiredTips {
-      font-size: 14px;
-      color: #f56c6c;
-      position: absolute;
-      bottom: -20px;
-      left: 110px;
-    }
   }
+
+  & > div:nth-of-type(1) {
+    margin-top: 0;
+  }
+}
+.danxuan-Area {
+  display: grid;
+  margin-top: -0.05rem;
+  grid-template-columns: auto auto auto auto auto auto;
+  border-right: 1px #0558e1 solid;
+  .danxuan-Area-son {
+    cursor: pointer;
+    min-width: 80px;
+    height: 32px;
+    border-radius: 2px;
+    color: #0558e1;
+    background: #fff;
+    border-left: 1px #0558e1 solid;
+    border-bottom: 1px #0558e1 solid;
+    border-top: 1px #0558e1 solid;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .danxuan-Area-son:hover {
+    color: #fff;
+    background: #0558e1;
+  }
+
+
+  .danxuan-Area-down {
+    background: #0058e1;
+    color: #fff;
+    // border: 1px #0558e1 solid;
+  }
+}
+
+.application-Area {
+  display: grid;
+  margin-top: -0.05rem;
+  grid-template-columns: auto auto auto auto auto auto;
+
+  .application-Area-son {
+    cursor: pointer;
+    width: 162px;
+    height: 32px;
+    border-radius: 2px;
+    color: #212121;
+    background: rgba(96, 99, 104, 0.1);
+    border: 0.01rem rgba(96, 99, 104, 0.1) solid;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 8px;
+    margin-right: 8px;
+    position: relative;
+    .application-Area-son-son {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      z-index: 100;
+      width: 16px;
+      height: 16px;
+      background: url('~@/assets/home/kong.png') no-repeat;
+    }
+  }
+  .application-Area-son:hover {
+    opacity: 0.9;
+    color: #0058e1;
+    border: 1px #0558e1 solid;
+  }
+
+  .application-Area-down {
+    opacity: 0.9;
+    color: #0058e1;
+    border: 1px #0558e1 solid;
+    .application-Area-son-son {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      z-index: 100;
+      width: 16px;
+      height: 16px;
+      background: url('~@/assets/home/duihao.png') no-repeat;
+    }
+  }
+}
+
+:deep(.ant-image-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+:deep(.ant-modal) {
+  width: 9.6rem;
+}
+
+:deep(.ant-transfer-list) {
+  width: 39.5%;
+  height: 5.2rem;
+}
+
+:deep(.ant-transfer-operation) {
+  flex-direction: row-reverse;
+  margin: 0 0.3rem;
+}
+
+:deep(.ant-btn) {
+  width: 0.56rem;
+  height: 0.4rem;
+  border-radius: 0.04rem;
+}
+
+:deep(.ant-btn:first-child) {
+  margin-left: 0.04rem;
+}
+
+:deep(.ant-modal-footer) {
+  border: 0;
+}
+
+:deep(.ant-modal-header) {
+  border: 0;
+}
+
+:deep(.ant-modal-title) {
+  line-height: 0.24rem;
+  font-size: 0.18rem;
+  color: #303133;
+}
+
+:deep(.ant-transfer-list-header) {
+  background: #f5f7fa;
+}
+
+:deep(.ant-transfer-list-header-selected) {
+  display: flex;
+  width: 90%;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+}
+
+:deep(.ant-transfer-list-header-title) {
+  font-size: 0.16rem;
+  color: #303133;
+  font-weight: 400;
+  text-align: left;
+}
+:deep(.ant-transfer-list-header .ant-checkbox-wrapper) {
+  display: none !important;
+}
+:deep(.ant-upload-list-item-name) {
+  width: 1rem;
+}
+
+.del {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 0.14rem;
+  margin-left: 0.2rem;
+
+  .delImg {
+    cursor: pointer;
+    display: inline-block;
+    width: 0.16rem;
+    height: 0.18rem;
+    background: url(~@/assets/home/sf_del.png) no-repeat;
+    margin-right: 0.05rem;
+  }
+
+  div {
+    cursor: pointer;
+  }
+}
+.item {
+  position: relative;
+  span:first-child {
+    width: unset;
+  }
+  .box {
+  
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    // margin: 15px 0;
+    & > div:nth-of-type(1) {
+      text-align: right;
+      width: 110px;
+      margin-right: 16px;
+      // display: flex;
+      align-items: center;
+    }
+    .required {
+      color: #e83e48;
+      margin-left: -6px;
+    }
+    
+  }
+
+ :deep(.the-new-release .box .first){
+      justify-content: center !important;
+
+    
+      padding: 10px 350px 0;
+      button {
+        cursor: pointer;
+        width: 80px;
+        height: 35px;
+        text-align: center;
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        background: yellow;
+      }
+      button:nth-of-type(1) {
+        color:red;
+        background: #e1edfa;
+      }
+      button:nth-of-type(2) {
+        background: yellow;
+      }
+    }
+  
+  .requiredTips {
+    font-size: 14px;
+    color: #e83e48;
+    position: absolute;
+    bottom: -20px;
+    left: 110px;
+  }
+}
 </style>
diff --git a/front/src/views/newHome/components/WorkDynamics.vue b/front/src/views/newHome/components/WorkDynamics.vue
index bea6bc44..6de21b31 100644
--- a/front/src/views/newHome/components/WorkDynamics.vue
+++ b/front/src/views/newHome/components/WorkDynamics.vue
@@ -1,57 +1,5 @@
 <template>
   <div class="work-dynamics">
-    <!-- <div class="title">
-      <div>工作动态</div>
-      <div class="title-son"></div>
-    </div>
-    <div class="content" v-if="dataList && dataList.length > 0">
-      <div v-for="(item, index) in dataList" :key="item">
-        <div class="content-one" v-if="index % 2 == 0">
-          <div class="one">
-            <a-image
-              style="text-align: center"
-              alt="暂无图片"
-              :src="item.imageUrl"
-              :fallback="imgSrc"
-            />
-          </div>
-          <div class="content-miaoshui">
-            <div class="content-miaoshui-title">{{ item.title }}</div>
-            <div class="content-miaoshui-content">
-              {{ item.content }}
-            </div>
-            <div class="shijain">
-              <div>{{ item.createDate }}发布</div>
-              <div class="shijain-content-bootom" @click="selectOne(item.id)">
-                查看详情
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="content-one" v-else>
-          <div class="content-miaoshui">
-            <div class="content-miaoshui-title">{{ item.title }}</div>
-            <div class="content-miaoshui-content">
-              {{ item.content }}
-            </div>
-          </div>
-          <div class="one">
-            <a-image alt="暂无图片" :src="item.imageUrl" :fallback="imgSrc" />
-            <div class="shijain">
-              <div>{{ item.createDate }}发布</div>
-              <div class="shijain-content-bootom" @click="selectOne(item.id)">
-                查看详情
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <a-empty v-else></a-empty>
-    <div class="bottom" @click="jumpPage()">
-      查看更多
-      <span class="gengduo"></span>
-    </div> -->
     <div class="fixedmount">
       <div @click="applyResource()">
         <p></p>
@@ -67,12 +15,14 @@
         <!-- <a-button type="primary" >Open Modal</a-button> -->
         <a-modal
           v-model:visible="visible"
-          @ok="handleOk"
+          
           class="shangjia-class"
-          @cancel="handlecancel"
+         
         >
+      
+
           <div class="ant-modal-title" id="vcDialogTitle1">
-            <div class="showBg"></div>
+            <!-- <div class="showBg"></div> -->
             能力上架申请
           </div>
           <div class="ability-to-type">
@@ -92,565 +42,583 @@
               </div>
             </div>
           </div>
+         
           <div
-            class="component-type"
+            class="ability-to-type"
             v-if="abilityToTypeFunctionData == '组件服务'"
           >
             <div class="title">组件类型选择</div>
-            <div class="component-type-content">
-              <!-- <a-checkbox-group
-                v-model:value="value1"
-                name="checkboxgroup"
-                :options="componentType"
-              /> -->
-              <a-radio-group v-model:value="componentTypeValue">
-                <a-radio
-                  @click="componentTypeValueFunction(item)"
-                  v-for="item in componentType"
-                  :key="item"
-                  :value="item"
-                >
-                  {{ item }}
-                </a-radio>
-              </a-radio-group>
-            </div>
-          </div>
-        </a-modal>
-      </div>
-      <!-- <div @click="showAbilitySquare">
-        <p></p>
-        <p>能力广场</p>
-        <a-modal
-          v-model:visible="visibleAbilitySquare"
-          @ok="handleOkAbilitySquare"
-          class="shangjia-class"
-          @cancel="handlecancelAbilitySquare"
-        >
-          <div class="ant-modal-title" id="vcDialogTitle1">
-            <div class="showBg"></div>
-            能力广场目录
-          </div>
-          <div class="ability-to-type">
             <div class="ability-to-type-content">
               <div
-                v-for="item in abilitySquare"
+                v-for="item in componentType"
                 :key="item"
-                @click="abilitySquareFunction(item)"
+                @click="componentTypeValueFunction(item)"
                 :class="
-                  abilitySquareFunctionData == item
+                  componentTypeValue == item
                     ? 'ability-to-type-down'
                     : ''
                 "
               >
                 {{ item }}
               </div>
-            </div>
-          </div>
+            </div> 
+           </div>
+           <template v-slot:footer>
+        <a-button  class="shenqing" @click="handleOk">申请</a-button>
+        <a-button class="quxiao"  @click="handlecancel">取消</a-button>
+    </template>
+
         </a-modal>
-      </div> -->
+      </div>
+    
     </div>
   </div>
 </template>
 <script setup>
-  import { gongZuoZhuangTai } from '@/api/home.js'
-  import { message } from 'ant-design-vue'
-  import { ref, watch } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { useStore } from 'vuex'
-  const store = useStore()
-  const router = useRouter()
-  const imgSrc = ref(require('@/assets/newHome/zw.png'))
-  let dataList = ref([])
-  // let tupain = ref([
-  //   require('../../../assets/newHome/one.png'),
-  //   require('../../../assets/newHome/two.png'),
-  //   require('../../../assets/newHome/three.png'),
-  //   require('../../../assets/newHome/four.png'),
-  // ])
-  //能力上架弹窗
-  function handlecancel() {
-    abilityToTypeFunctionData.value = '组件服务'
+import { gongZuoZhuangTai } from '@/api/home.js'
+import { message } from 'ant-design-vue'
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+const store = useStore()
+const router = useRouter()
+const imgSrc = ref(require('@/assets/newHome/zw.png'))
+let dataList = ref([])
+// let tupain = ref([
+//   require('../../../assets/newHome/one.png'),
+//   require('../../../assets/newHome/two.png'),
+//   require('../../../assets/newHome/three.png'),
+//   require('../../../assets/newHome/four.png'),
+// ])
+//能力上架弹窗
+function handlecancel() {
+  abilityToTypeFunctionData.value = '组件服务'
+  componentTypeValue.value = ''
+}
+let abilityToTypeFunctionData = ref('组件服务')
+function abilityToTypeFunction(item) {
+  abilityToTypeFunctionData.value = item
+}
+
+let abilityToType = ref(['组件服务', '应用资源'])
+let abilitySquare = ref(['智能算法', '图层服务', '应用资源'])
+let componentType = ref([
+  '智能算法',
+  '图层服务',
+  '开发组件',
+  // '办公组件',
+  '业务组件',
+  // '其他',
+])
+const visible = ref(false)
+const showModal = () => {
+  visible.value = true
+}
+// 能力广场
+const visibleAbilitySquare = ref(false)
+const showAbilitySquare = () => {
+  visibleAbilitySquare.value = true
+}
+let componentTypeValueOld = ref('')
+function componentTypeValueFunction(item) {
+  componentTypeValue.value = item
+  if (componentTypeValueOld.value != item) {
+    componentTypeValue.value = item
+    componentTypeValueOld.value = item
+  } else {
     componentTypeValue.value = ''
   }
-  let abilityToTypeFunctionData = ref('组件服务')
-  function abilityToTypeFunction(item) {
-    abilityToTypeFunctionData.value = item
-  }
-  let abilityToType = ref(['组件服务', '应用资源'])
-  let abilitySquare = ref(['智能算法', '图层服务', '应用资源'])
-  let componentType = ref([
-    '智能算法',
-    '图层服务',
-    '开发组件',
-    // '办公组件',
-    '业务组件',
-    // '其他',
-  ])
-  const visible = ref(false)
-  const showModal = () => {
-    visible.value = true
-  }
-  // 能力广场
-  const visibleAbilitySquare = ref(false)
-  const showAbilitySquare = () => {
-    visibleAbilitySquare.value = true
-  }
-  let componentTypeValueOld = ref('')
-  function componentTypeValueFunction(item) {
-    if (componentTypeValueOld.value != item) {
-      componentTypeValue.value = item
-      componentTypeValueOld.value = item
-    } else {
-      componentTypeValue.value = ''
-    }
-  }
-  let componentTypeValue = ref('')
-  const handleOk = (e) => {
-    let snum = ref({})
-    if (abilityToTypeFunctionData.value == '组件服务') {
-      if (!componentTypeValue.value || componentTypeValue.value == '') {
-        message.error('请选择组件类型！')
-        return
-      } else if (
-        componentTypeValue.value === '智能算法' ||
-        componentTypeValue.value === '开发组件' ||
-        componentTypeValue.value === '业务组件' ||
-        componentTypeValue.value === '图层服务'
-      ) {
-        snum.value = {
-          abilityToType: abilityToTypeFunctionData.value,
-          componentTypeValue: componentTypeValue.value,
-        }
-      } else {
-        message.error('功能开发中！')
-        return
-      }
-    } else {
+}
+let componentTypeValue = ref('')
+const handleOk = (e) => {
+  let snum = ref({})
+  if (abilityToTypeFunctionData.value == '组件服务') {
+    if (!componentTypeValue.value || componentTypeValue.value == '') {
+      message.error('请选择组件类型！')
+      return
+    } else if (
+      componentTypeValue.value === '智能算法' ||
+      componentTypeValue.value === '开发组件' ||
+      componentTypeValue.value === '业务组件' ||
+      componentTypeValue.value === '图层服务'
+    ) {
       snum.value = {
         abilityToType: abilityToTypeFunctionData.value,
+        componentTypeValue: componentTypeValue.value,
       }
+    } else {
+      message.error('功能开发中！')
+      return
     }
-    const applypage = router.resolve({
-      path: '/nenglishangjia', // 跳转的页面路由
-      query: snum.value,
-    })
-    window.open(applypage.href, '_blank')
-    visible.value = false
-    abilityToTypeFunctionData.value = '组件服务'
-    componentTypeValue.value = ''
-    console.log(e)
-  }
-  const getList = () => {
-    const params = {
-      limit: 4,
-      page: 1,
+  } else {
+    snum.value = {
+      abilityToType: abilityToTypeFunctionData.value,
     }
-    gongZuoZhuangTai(params).then((res) => {
-      dataList.value = res.data.data.list
-      dataList.value.map((item, index) => {
-        // dataList.value[index].imageUrl = require(dataList.value[index].imageUrl)
-        console.log('item', dataList.value[index].imageUrl)
-      })
-    })
   }
-  const newpage = router.resolve({
-    path: '/addApplication', // 跳转的页面路由
+  const applypage = router.resolve({
+    path: '/nenglishangjia', // 跳转的页面路由
+    query: snum.value,
   })
-  const toView = () => {
-    window.open(newpage.href, '_blank')
+  window.open(applypage.href, '_blank')
+  visible.value = false
+  abilityToTypeFunctionData.value = '组件服务'
+  componentTypeValue.value = ''
+  console.log(e)
+}
+const getList = () => {
+  const params = {
+    limit: 4,
+    page: 1,
   }
-  // const toApply = () => {
-  //   window.open(applypage.href, '_blank')
-  // }
-  getList()
-  // dataList.value.map((item, index) => {
-  //   dataList.value[index].tupian = tupain.value[index]
-  //   console.log('item', item, dataList.value)
+  gongZuoZhuangTai(params).then((res) => {
+    dataList.value = res.data.data.list
+    dataList.value.map((item, index) => {
+      // dataList.value[index].imageUrl = require(dataList.value[index].imageUrl)
+      console.log('item', dataList.value[index].imageUrl)
+    })
+  })
+}
+const newpage = router.resolve({
+  path: '/addApplication', // 跳转的页面路由
+})
+const toView = () => {
+  window.open(newpage.href, '_blank')
+}
+// const toApply = () => {
+//   window.open(applypage.href, '_blank')
+// }
+getList()
+// dataList.value.map((item, index) => {
+//   dataList.value[index].tupian = tupain.value[index]
+//   console.log('item', item, dataList.value)
+// })
+function jumpPage() {
+  // 点击内存入store
+  // store.commit('WorkDynList', {
+  //   selectCardsnum: '组件服务',
   // })
-  function jumpPage() {
-    // 点击内存入store
-    // store.commit('WorkDynList', {
-    //   selectCardsnum: '组件服务',
-    // })
-    console.log(
-      '选中===================>',
-      store.getters['home/selectCardsnum']
-    )
-    // router.push({ path: '/DetailsPageconetent' })
-    router.push({
-      path: '/WorkDynList',
-    })
-  }
-  const selectOne = (id) => {
-    console.log('点击===============》', id)
-    router.push({
-      path: '/WorkDynDetails',
-      query: {
-        id: id,
-      },
-    })
-  }
-  watch(abilityToTypeFunctionData, () => {
-    componentTypeValue.value = ''
+  console.log('选中===================>', store.getters['home/selectCardsnum'])
+  // router.push({ path: '/DetailsPageconetent' })
+  router.push({
+    path: '/WorkDynList',
   })
-  // 能力广场
-  const handleOkAbilitySquare = (e) => {
-    let snumSquare = ref({})
-    snumSquare.value = {
-      abilityToType: abilitySquareFunctionData.value,
-    }
-    const applypage = router.resolve({
-      path: '/capacitySquare', // 跳转的页面路由
-      query: snumSquare.value,
-    })
-    window.open(applypage.href, '_blank')
-    console.log(e, abilitySquareFunctionData.value, 'hahhaha')
-    visibleAbilitySquare.value = false
-    abilitySquareFunctionData.value = '智能算法'
-  }
-  let abilitySquareFunctionData = ref('智能算法')
-  function abilitySquareFunction(item) {
-    abilitySquareFunctionData.value = item
-  }
-  function handlecancelAbilitySquare() {
-    abilitySquareFunctionData.value = '智能算法'
-  }
-  const applyResource = () => {
-    console.log('点击===============》')
-    router.push({
-      path: '/DetailsPageconetent',
-      query: {
-        select: '基础设施',
-      },
-    })
+}
+const selectOne = (id) => {
+  console.log('点击===============》', id)
+  router.push({
+    path: '/WorkDynDetails',
+    query: {
+      id: id,
+    },
+  })
+}
+watch(abilityToTypeFunctionData, () => {
+  componentTypeValue.value = ''
+})
+// 能力广场
+const handleOkAbilitySquare = (e) => {
+  let snumSquare = ref({})
+  snumSquare.value = {
+    abilityToType: abilitySquareFunctionData.value,
   }
+  const applypage = router.resolve({
+    path: '/capacitySquare', // 跳转的页面路由
+    query: snumSquare.value,
+  })
+  window.open(applypage.href, '_blank')
+  console.log(e, abilitySquareFunctionData.value, 'hahhaha')
+  visibleAbilitySquare.value = false
+  abilitySquareFunctionData.value = '智能算法'
+}
+let abilitySquareFunctionData = ref('智能算法')
+function abilitySquareFunction(item) {
+  abilitySquareFunctionData.value = item
+}
+function handlecancelAbilitySquare() {
+  abilitySquareFunctionData.value = '智能算法'
+}
+const applyResource = () => {
+  console.log('点击===============》')
+  router.push({
+    path: '/DetailsPageconetent',
+    query: {
+      select: '基础设施',
+    },
+  })
+}
 </script>
 <style lang="less">
-  .shangjia-class {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    margin-left: -2.6rem;
-    margin-top: -1.44rem;
-    font-size: 0.14rem;
-    font-weight: 500;
-
-    .ant-radio-inner {
-      height: 0.16rem;
-      width: 0.16rem;
+.shangjia-class {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  margin-left: -2.6rem;
+  margin-top: -1.44rem;
+  font-size: 0.14rem;
+  font-weight: 500;
+  .ant-modal-footer {
+    border: 0;
+    text-align: center;
+    margin-top: 24px;
+    padding-bottom: 24px;
+   
+    .shenqing{
+      background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
     }
-    .ant-radio-inner::after {
-      background-color: unset;
-      background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
-      background-size: cover;
-      background-position: center;
+    .quxiao{
+      width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+
     }
-    .ant-modal-content {
-      border-radius: 0.1rem;
-      .ability-to-type,
-      .component-type {
-        display: flex;
-        margin-top: 0.2rem;
-        .title {
-          white-space: nowrap;
-          margin-right: 0.2rem;
-          display: flex;
-          align-items: center;
-          height: 0.26rem;
-        }
-        .component-type-content {
-          width: 100%;
-          height: unset;
-          border: unset;
-          background: unset;
-          .ant-radio-group {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            grid-gap: 0.15rem;
-          }
-        }
-      }
-
-      .ability-to-type {
-        .ability-to-type-content {
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
-          height: unset;
-          border: unset;
-          background: unset;
-          div {
-            margin-right: 0.15rem;
-            cursor: pointer;
-            font-size: 0.14rem;
-            width: 0.9rem;
-            height: 0.26rem;
-            border-radius: 0.13rem;
-            color: #333333;
-            background: #f5f5f5;
-            border: 0.01rem #cccccc solid;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-weight: 500;
-          }
-
-          .ability-to-type-down {
-            background: #0087ff;
-            color: #fff;
-          }
-        }
-      }
-    }
-
-    .ant-modal-title {
+}
+  .ant-modal-body {
+    padding: 0px !important;
+  }
+  .ant-radio-inner {
+    height: 0.16rem;
+    width: 0.16rem;
+  }
+  .ant-radio-inner::after {
+    background-color: unset;
+    background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
+    background-size: cover;
+    background-position: center;
+  }
+  .ant-modal-content {
+    border-radius: 2px;
+    border: 1px #e6e9ed solid;
+    width: 690px;
+    box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5);
+    .ability-to-type,
+    .component-type {
       display: flex;
-      align-items: center;
-    }
-
-    .ant-modal-footer {
-      border: 0;
-      text-align: center;
-      padding-bottom: 0.2rem;
-      button {
-        margin-right: 0.2rem;
-        border-radius: 0.08rem;
+      margin-top: 24px;
+      margin-left: 24px;
+      .title {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        height: 0.26rem;
+        font-size: 16px;
+      }
+      .component-type-content {
+        width: 100%;
+        height: unset;
+        border: unset;
+        background: unset;
+        .ant-radio-group {
+          display: grid;
+          grid-template-columns: auto auto auto auto;
+          grid-gap: 0.15rem;
+        }
       }
     }
 
-    .showBg {
-      height: 0.24rem;
-      width: 0.24rem;
-      background: url('~@/assets/home/shenqing.png') no-repeat;
-      background-size: cover;
-      background-position: center;
-      margin-right: 0.1rem;
+    .ability-to-type {
+      .ability-to-type-content {
+        display: grid;
+        grid-template-columns: auto auto auto auto;
+        height: unset;
+        border: unset;
+        background: unset;
+        margin-left: 20px;
+        div {
+          &:hover {
+    background: #0058e1;
+    cursor: pointer;
+    color:#ffffff;
+  }
+          margin-right: 16px;
+          cursor: pointer;
+          font-size: 16px;
+          width: 90px;
+          height: 32px;
+          border-radius: 2px;
+          color: #0058e1;
+          background: #ffffff;
+          border: 1px #0058e1 solid;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-weight: 500;
+        }
+
+        .ability-to-type-down {
+          background: #0058e1;
+          color: #fff;
+        }
+      }
     }
   }
+
+  .ant-modal-title {
+    display: flex;
+    align-items: center;
+    display: flex;
+    align-items: center;
+    margin: 0px 24px;
+    padding-top: 24px;
+    padding-bottom: 22px;
+    color: #212121;
+    font-weight: bold;
+    font-size: 20px;
+    border-bottom: 2px solid #ebeced;
+  }
+
+  .ant-modal-footer {
+    border: 0;
+    text-align: center;
+    padding-bottom: 0.2rem;
+    margin-top:50px;
+    button {
+      margin-right: 12px;
+      border-radius: 2px;
+    }
+  }
+
+  .showBg {
+    height: 0.24rem;
+    width: 0.24rem;
+    background: url('~@/assets/home/shenqing.png') no-repeat;
+    background-size: cover;
+    background-position: center;
+    margin-right: 0.1rem;
+  }
+}
 </style>
 <style lang="less" scoped>
-  .work-dynamics {
+.work-dynamics {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // padding-bottom: 0.8rem;
+  // padding-top: 0.78rem;
+  .title {
+    font-size: 0.3rem;
+    font-family: 'convergence-typeface';
     display: flex;
     flex-direction: column;
     align-items: center;
-    // padding-bottom: 0.8rem;
-    // padding-top: 0.78rem;
-    .title {
-      font-size: 0.3rem;
-      font-family: 'convergence-typeface';
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 0.32rem;
-      // width: 0.34rem;
-      border-radius: 0.01rem;
-      margin-top: 0.18rem;
-    }
+    margin-bottom: 0.32rem;
+    // width: 0.34rem;
+    border-radius: 0.01rem;
+    margin-top: 0.18rem;
+  }
+}
+
+.content {
+  width: 13rem;
+  height: 4.8rem;
+  display: flex;
+  // padding-left: 0.2rem;
+  .content-empty {
+    height: 2.2rem;
+    padding-top: 0.49rem;
+  }
+  border: #eaedf2 0.01rem solid;
+}
+
+.content > div:hover {
+  border-radius: 0.02rem;
+  border: 0.01rem solid #0058e1;
+  box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+}
+
+.content-miaoshui {
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.2rem;
+  align-items: center;
+  padding-bottom: 0.1rem;
+  .content-miaoshui-title {
+    padding-left: 0.05rem;
+    padding-right: 0.05rem;
+    font-size: 0.18rem;
+    font-weight: bold;
+    height: 0.3rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    margin-bottom: 0.12rem;
+    word-break: break-all;
   }
 
-  .content {
-    width: 13rem;
-    height: 4.8rem;
-    display: flex;
-    // padding-left: 0.2rem;
-    .content-empty {
-      height: 2.2rem;
-      padding-top: 0.49rem;
-    }
-    border: #eaedf2 0.01rem solid;
-  }
-
-  .content > div:hover {
-    border-radius: 0.02rem;
-    border: 0.01rem solid #0058e1;
-    box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
-  }
-
-  .content-miaoshui {
-    display: flex;
-    flex-direction: column;
-    padding-top: 0.2rem;
-    align-items: center;
-    padding-bottom: 0.1rem;
-    .content-miaoshui-title {
-      padding-left: 0.05rem;
-      padding-right: 0.05rem;
-      font-size: 0.18rem;
-      font-weight: bold;
-      height: 0.3rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      margin-bottom: 0.12rem;
-      word-break: break-all;
-    }
-
-    .content-miaoshui-content {
-      height: 1.2rem;
-      width: 2.98rem;
-      margin: 0.12rem 0.1rem 0.1rem 0.1rem;
-      font-family: text-typeface;
-      font-size: 0.14rem;
-      line-height: 0.2rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 6;
-      -webkit-box-orient: vertical;
-      margin-bottom: 0.12rem;
-      word-break: break-all;
-      cursor: pointer;
-    }
-  }
-
-  .shijain {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: bottom;
-    margin-right: 0.16rem;
-    margin-left: 0.16rem;
-    div:first-child {
-      margin-left: 0.16rem;
-    }
-  }
-
-  .shijain-content-bootom {
-    margin-right: 0.16rem;
-    width: 0.8rem;
-    height: 0.24rem;
-    text-align: center;
-    border: 0.01rem solid #0058e1;
+  .content-miaoshui-content {
+    height: 1.2rem;
+    width: 2.98rem;
+    margin: 0.12rem 0.1rem 0.1rem 0.1rem;
+    font-family: text-typeface;
+    font-size: 0.14rem;
+    line-height: 0.2rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    margin-bottom: 0.12rem;
+    word-break: break-all;
     cursor: pointer;
-    color: #0058e1;
+  }
+}
+
+.shijain {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: bottom;
+  margin-right: 0.16rem;
+  margin-left: 0.16rem;
+  div:first-child {
+    margin-left: 0.16rem;
+  }
+}
+
+.shijain-content-bootom {
+  margin-right: 0.16rem;
+  width: 0.8rem;
+  height: 0.24rem;
+  text-align: center;
+  border: 0.01rem solid #0058e1;
+  cursor: pointer;
+  color: #0058e1;
+}
+
+.shijain-content-bootom:hover {
+  background: rgba(0, 88, 225, 0.3);
+}
+
+.content > div > div {
+  height: 2.4rem;
+  width: 100%;
+}
+
+.one {
+  height: 2.4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-size: 100%;
+  padding-top: 0.15rem;
+  .shijain {
+    margin-top: 0.2rem;
   }
 
-  .shijain-content-bootom:hover {
-    background: rgba(0, 88, 225, 0.3);
+  :deep(.ant-imag) {
+    text-align: center;
   }
-
-  .content > div > div {
-    height: 2.4rem;
-    width: 100%;
-  }
-
-  .one {
-    height: 2.4rem;
-    display: flex;
-    flex-direction: column;
+  :deep(.ant-image-img) {
+    height: 2.1rem;
+    text-align: center;
     justify-content: center;
     align-items: center;
-    background-size: 100%;
-    padding-top: 0.15rem;
-    .shijain {
-      margin-top: 0.2rem;
-    }
-
-    :deep(.ant-imag) {
-      text-align: center;
-    }
-    :deep(.ant-image-img) {
-      height: 2.1rem;
-      text-align: center;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      max-width: 2.98rem;
-    }
+    width: 100%;
+    max-width: 2.98rem;
   }
+}
 
-  .bottom {
-    height: 0.24rem;
-    font-size: 0.16rem;
-    width: 1rem;
-    margin-top: 0.4rem;
-    cursor: pointer;
-    text-align: center;
-    color: #000000;
+.bottom {
+  height: 0.24rem;
+  font-size: 0.16rem;
+  width: 1rem;
+  margin-top: 0.4rem;
+  cursor: pointer;
+  text-align: center;
+  color: #000000;
 
-    .gengduo {
-      display: inline-block;
-      margin-left: 0.04rem;
-      width: 0.1rem;
-      height: 0.1rem;
-      background: url('~@/assets/newHome/gd2.png') no-repeat;
-      background-position: center;
-    }
-  }
-
-  .bottom:hover {
-    border-radius: 0.02rem;
-    background-color: rgba(1, 102, 255, 0.1);
-  }
-
-  .content > div {
-    height: 4.8rem;
-    width: 3.1rem;
-    margin-right: 0.1rem;
-    background: #f3f5f9;
-  }
-
-  .fixedmount {
-    height: 3rem;
-    display: flex;
-    position: fixed;
-    bottom: 1.56rem;
-    right: 0rem;
-    z-index: 10;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .fixedmount div {
-    width: 0.96rem;
-    height: 0.96rem;
-    // border-radius: 0.04rem;
-    // border: 0.01rem #94aac9 solid;
-    display: flex;
-    flex-direction: column;
-    // justify-content: center;
-    align-items: center;
-    padding-top: 0.16rem;
-    margin-bottom: 2px;
-    position: relative;
-    cursor: pointer;
-    // background: #e3edfc;
-    background: url('~@/assets/home/bg-right.png');
-  }
-
-  .fixedmount div p:nth-child(2) {
-    position: absolute;
-    bottom: 0rem;
-    height: 0.2rem;
-    font-size: 0.2rem;
-    line-height: 0.2rem;
-    color: #fff;
-    // margin-top: .08rem;
-  }
-
-  .fixedmount div:nth-child(1) p:nth-child(1) {
-    height: 0.32rem;
-    width: 0.32rem;
-    //background: url('~@/assets/home/shenqing.png') no-repeat;
-    background: url('~@/assets/home/sq.png') no-repeat;
-    background-size: contain;
+  .gengduo {
+    display: inline-block;
+    margin-left: 0.04rem;
+    width: 0.1rem;
+    height: 0.1rem;
+    background: url('~@/assets/newHome/gd2.png') no-repeat;
     background-position: center;
   }
+}
 
-  .fixedmount div:nth-child(2) p:nth-child(1) {
-    height: 0.32rem;
-    width: 0.32rem;
-    background: url('~@/assets/home/xq.png') no-repeat;
-    background-size: contain;
-    background-position: center;
-  }
-  .fixedmount div:nth-child(3) p:nth-child(1) {
-    height: 0.32rem;
-    width: 0.32rem;
-    background: url('~@/assets/home/sj.png') no-repeat;
-    background-size: 140% 126%;
-    background-position: center;
-  }
+.bottom:hover {
+  border-radius: 0.02rem;
+  background-color: rgba(1, 102, 255, 0.1);
+}
+
+.content > div {
+  height: 4.8rem;
+  width: 3.1rem;
+  margin-right: 0.1rem;
+  background: #f3f5f9;
+}
+
+.fixedmount {
+  height: 3rem;
+  display: flex;
+  position: fixed;
+  bottom: 1.56rem;
+  right: 0rem;
+  z-index: 10;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fixedmount div {
+  width: 0.96rem;
+  height: 0.96rem;
+  // border-radius: 0.04rem;
+  // border: 0.01rem #94aac9 solid;
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+  padding-top: 0.16rem;
+  margin-bottom: 2px;
+  position: relative;
+  cursor: pointer;
+  // background: #e3edfc;
+  background: url('~@/assets/home/bg-right.png');
+}
+
+.fixedmount div p:nth-child(2) {
+  position: absolute;
+  bottom: 0rem;
+  height: 0.2rem;
+  font-size: 0.2rem;
+  line-height: 0.2rem;
+  color: #fff;
+  // margin-top: .08rem;
+}
+
+.fixedmount div:nth-child(1) p:nth-child(1) {
+  height: 0.32rem;
+  width: 0.32rem;
+  //background: url('~@/assets/home/shenqing.png') no-repeat;
+  background: url('~@/assets/home/sq.png') no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.fixedmount div:nth-child(2) p:nth-child(1) {
+  height: 0.32rem;
+  width: 0.32rem;
+  background: url('~@/assets/home/xq.png') no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+.fixedmount div:nth-child(3) p:nth-child(1) {
+  height: 0.32rem;
+  width: 0.32rem;
+  background: url('~@/assets/home/sj.png') no-repeat;
+  background-size: 140% 126%;
+  background-position: center;
+}
 </style>