diff --git a/back/src/assets/img/putOnTheShelf/update.png b/back/src/assets/img/putOnTheShelf/update.png
new file mode 100644
index 00000000..baefd1f5
Binary files /dev/null and b/back/src/assets/img/putOnTheShelf/update.png differ
diff --git a/back/src/views/modules/ability/bsabilityai.vue b/back/src/views/modules/ability/bsabilityai.vue
index b0af3265..a5fe82e1 100644
--- a/back/src/views/modules/ability/bsabilityai.vue
+++ b/back/src/views/modules/ability/bsabilityai.vue
@@ -230,7 +230,7 @@
       :close-on-press-escape="false"
       :destroy-on-close="true"
       :before-close="clear"
-      width="50%"
+      width="60%"
     >
       <putOnTheShelf
         ref="putOnTheShelf"
@@ -271,6 +271,7 @@ export default {
       radio: '',
       showPutOnTheShelfFlag: false,
       showPutOnTheShelfFlag2: false,
+      routePath: '',
       submitFrom: {
         type: '组件服务',
         deptId: '',
@@ -629,6 +630,7 @@ export default {
     },
     // 新上架
     clear () {
+      this.$router.push(this.routePath)
       console.log('清空----------------------------------------')
       this.notFilled = []
       this.showPutOnTheShelfFlag = false
@@ -659,6 +661,7 @@ export default {
       })
     },
     showPutOnTheShelfVue () {
+      this.routePath = this.$route.path
       this.showPutOnTheShelfFlag = false
       this.showPutOnTheShelfFlag2 = true
       this.submitFrom.infoList[0].attrValue = this.radio
diff --git a/back/src/views/modules/ability/bsabilityservice.vue b/back/src/views/modules/ability/bsabilityservice.vue
index 1a90ce73..f5e420a1 100644
--- a/back/src/views/modules/ability/bsabilityservice.vue
+++ b/back/src/views/modules/ability/bsabilityservice.vue
@@ -217,8 +217,8 @@
       :close-on-press-escape='false'
       :destroy-on-close='true'
       :before-close='clear'
-      width="50%">
-      <putOnTheShelf :required="required" :notFilled="notFilled":putOnTheShelfList='putOnTheShelfList' @changeInfoList='changeInfoList' :type='radio' :typeInput='typeInput'></putOnTheShelf>
+      width="60%">
+      <putOnTheShelf :required="required" :notFilled="notFilled" :putOnTheShelfList='putOnTheShelfList' @changeInfoList='changeInfoList' :type='radio' :typeInput='typeInput'></putOnTheShelf>
       <span slot="footer" class="dialog-footer">
         <el-button @click="clear">取 消</el-button>
         <el-button type="primary" @click="submitData">确 定</el-button>
@@ -271,6 +271,7 @@ export default {
       insertList: [],
       putOnTheShelfList: [],
       showPutOnTheShelfFlag2: false,
+      routePath: '',
       submitFrom: {
         type: '应用资源',
         deptId: '',
@@ -594,6 +595,7 @@ export default {
     },
     // 新上架
     clear () {
+      this.$router.push(this.routePath)
       this.notFilled = []
       this.showPutOnTheShelfFlag2 = false
       this.insertList = []
@@ -615,6 +617,7 @@ export default {
     },
     // 上架
     showPutOnTheShelf () {
+      this.routePath = this.$route.path
       this.showPutOnTheShelfFlag2 = true
       this.$http.get('/category/getCategoryTree').then(res => {
         this.insertList = res.data.data.filter(item => item.name === '应用资源')[0]
diff --git a/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue b/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue
index 4d649f4e..3f4e7f4a 100644
--- a/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue
+++ b/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue
@@ -81,12 +81,11 @@ js:
        <!-- <el-radio-group v-model:value="data.note1" v-else-if="type == 'radio'">
         <el-radio v-for="item in options" :label="item.dictLabel" :key="item.dictLabel">{{item.dictLabel}}</el-radio>
       </el-radio-group> -->
-    <a-textarea v-else-if="type == 'textArea'" @change="changeIiem(name,data.note1)" v-model:value="data.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + name" />
-    <div class="block" v-else-if="type == 'date'">  
-      <el-date-picker v-model="data.note1" type="date" :placeholder="'选择' + name" value-format="yyyy-MM-dd">
-      </el-date-picker>
-    </div>
-    
+      <a-textarea v-else-if="type == 'textArea'" @change="changeIiem(name,data.note1)" v-model:value="data.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + name" />
+      <div class="block" v-else-if="type == 'date'">
+        <el-date-picker v-model="data.note1" type="date" :placeholder="'选择' + name" value-format="yyyy-MM-dd">
+        </el-date-picker>
+      </div>
     </div>
 </template>
 <script>
@@ -179,7 +178,7 @@ export default {
           })
         }
         // })
-      } 
+      }
     },
     chekBoxChange (list) {
       let str = ''
diff --git a/back/src/views/modules/putOnTheShelf/components/special.vue b/back/src/views/modules/putOnTheShelf/components/special.vue
index bf515d18..54a6e5be 100644
--- a/back/src/views/modules/putOnTheShelf/components/special.vue
+++ b/back/src/views/modules/putOnTheShelf/components/special.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-07-08 09:54:50
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-28 20:09:53
+ * @LastEditors: Light
+ * @LastEditTime: 2022-12-20 10:42:37
  * @Description: 多条数据特殊处理
 -->
 <template>
@@ -28,7 +28,9 @@
                 <span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
               </p>
               <div class="del">
-                <i class="delImg" @click="del( index)"></i>
+                <i class="updateImg" @click="update(configure.name, index)"></i>
+                <div @click="update(configure.name, index)" style="margin-right:10px;">修改</div>
+                <i class="delImg" @click="del(configure.name, index)"></i>
                 <div @click="del(configure.name, index)">删除</div>
               </div>
             </div>
@@ -171,6 +173,19 @@ export default {
         delFlag: 0
       })
     },
+    update (title, index) {
+      const obj = this.data[index]
+      this.data.splice(index, 1)
+      const str = this.data.length > 0 ? JSON.stringify(this.data) : ''
+      this.$emit('changeInfoList', {
+        attrType: title,
+        attrValue: str,
+        delFlag: 0
+      })
+      this.configure.list.map(val => {
+        val.note1 = obj[val.field]
+      })
+    },
     radioChange (e) {
       console.log(e, 'wewewe')
       this.numType = e.target.value
@@ -242,12 +257,21 @@ export default {
       justify-content: flex-end;
       align-items: center;
 
+      .updateImg {
+        cursor: pointer;
+        display: inline-block;
+        width: 16px;
+        height: 18px;
+        background: url("~@/assets/img/putOnTheShelf/update.png") no-repeat;
+        margin-right: 5px;
+        margin-bottom: 1px;
+      }
       .delImg {
         cursor: pointer;
         display: inline-block;
         width: 16px;
         height: 18px;
-        background: url(~@/assets/img/putOnTheShelf/del.png) no-repeat;
+        background: url("~@/assets/img/putOnTheShelf/del.png") no-repeat;
         margin-right: 5px;
       }
 
diff --git a/back/src/views/modules/putOnTheShelf/index.vue b/back/src/views/modules/putOnTheShelf/index.vue
index 772ed2ed..254ce7f9 100644
--- a/back/src/views/modules/putOnTheShelf/index.vue
+++ b/back/src/views/modules/putOnTheShelf/index.vue
@@ -1,61 +1,68 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-07-08 09:48:52
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-25 15:57:25
+ * @LastEditors: Light
+ * @LastEditTime: 2022-12-20 09:50:01
  * @Description: 告诉大家这是什么
 -->
 <template>
     <div class="put-on-the-shelf">
-      <div v-for="parent in putOnTheShelfList" :key='parent.id'>
-        <div v-for='child in parent.children' :key='child.id'>
-          <template v-if='judgmentType.filter(item => item.name==child.name).length === 0'>
-            <div class="top">{{child.name}}</div>
-            <div v-for="item in child.children" :key="item.id" class='item' v-show="(item.name != '来源应用' && item.name != '关联组件信息' && item.name != '技术文档') && !(
-              (showTypeName == '调用接口' && item.name == '平台地址') ||
-                (showTypeName == '调用接口' && item.name == 'SDK安装包') ||
-                (showTypeName == '平台对接' && item.name == 'SDK安装包') ||
-                (showTypeName == '平台对接' && item.name == '接口请求方式') ||
-                (showTypeName == '平台对接' && item.name == '服务接口') ||
-                (showTypeName == 'SDK' && item.name == '平台地址') ||
-                (showTypeName == 'SDK' && item.name == '接口请求方式') ||
-                (showTypeName == 'SDK' && item.name == '服务接口')
-            )">
-              <div class="box">
-                <div>
-                <span class="required" v-if="required.indexOf(item.name) > -1">*</span>
-                {{ item.name }}
+      <div class="left">
+        <a-anchor>
+          <a-anchor-link v-for="parent in putOnTheShelfList" :key="parent.id+'left'" :href="'#'+parent.name" :title="parent.name" />
+        </a-anchor>
+      </div>
+      <div class="right">
+        <div v-for="parent in putOnTheShelfList" :key='parent.id' :id="parent.name">
+          <div v-for='child in parent.children' :key='child.id'>
+            <template v-if='judgmentType.filter(item => item.name==child.name).length === 0'>
+              <div class="top">{{child.name}}</div>
+              <div v-for="item in child.children" :key="item.id" class='item' v-show="(item.name != '来源应用' && item.name != '关联组件信息' && item.name != '技术文档') && !(
+                (showTypeName == '调用接口' && item.name == '平台地址') ||
+                  (showTypeName == '调用接口' && item.name == 'SDK安装包') ||
+                  (showTypeName == '平台对接' && item.name == 'SDK安装包') ||
+                  (showTypeName == '平台对接' && item.name == '接口请求方式') ||
+                  (showTypeName == '平台对接' && item.name == '服务接口') ||
+                  (showTypeName == 'SDK' && item.name == '平台地址') ||
+                  (showTypeName == 'SDK' && item.name == '接口请求方式') ||
+                  (showTypeName == 'SDK' && item.name == '服务接口')
+              )">
+                <div class="box">
+                  <div>
+                  <span class="required" v-if="required.indexOf(item.name) > -1">*</span>
+                  {{ item.name }}
+                </div>
+                <!-- <upload :list="[]" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
+                  tip="支持图片类型，大小不超过100M"></upload> -->
+                <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.jpg,.jpeg,.png' :list="item" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1"
+                  :dataList="item" tip="支持文件类型，大小不超过100M"></upload>
+                <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="item" v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
+                  :dataList="item" tip="支持文件类型，大小不超过100M"></upload>
+                <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="item" v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :dataList="item" :busType="2"
+                  tip="支持文件类型，大小不超过100M"></upload>
+                <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.mp4' :list="item" v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :dataList="item"
+                  tip="支持视频类型，大小不超过100M"></upload>
+                <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.zip' :list="item" v-else-if="item.type == 'package' &&item.name != '上传附件'" type="安装包" btnName="上传安装包" :maxCount="1" :dataList="item"
+                  tip="支持.zip类型，大小不超过100M"></upload>
+                  <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx,.zip' :list="item" v-else-if="item.name == '上传附件'" type="附件" btnName="上传附件" :maxCount="1" :dataList="item"
+                  tip="支持.doc,.docx,.zip,.ppt,.pdf类型，大小不超过100M"></upload>
+                <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'AbilityType'" type="disabled" :data="item" :name="item.name" :value="typeInput"></input-select-checkbox>
+                <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'ComponentType'" type="disabled" :data="item" :name="item.name" :value="type"></input-select-checkbox>
+                <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'input'" type="input" :data="item" :name="item.name"></input-select-checkbox>
+                <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'select'" type="select" :data="item" :name="item.name" :options="item.options" @show-type="showType"></input-select-checkbox>
+                <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'checkBox'" type="checkBox" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
+                <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'radio'" type="radio" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
+                <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'textArea'" type="textArea" :data="item" :name="item.name"></input-select-checkbox>
+                <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'date'" type="date" :data="item" :name="item.name"></input-select-checkbox>
               </div>
-              <!-- <upload :list="[]" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
-                tip="支持图片类型，大小不超过100M"></upload> -->
-              <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.jpg,.jpeg,.png' :list="item" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1"
-                :dataList="item" tip="支持文件类型，大小不超过100M"></upload>
-              <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="item" v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
-                :dataList="item" tip="支持文件类型，大小不超过100M"></upload>
-              <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="item" v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :dataList="item" :busType="2"
-                tip="支持文件类型，大小不超过100M"></upload>
-              <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.mp4' :list="item" v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :dataList="item"
-                tip="支持视频类型，大小不超过100M"></upload>
-              <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.zip' :list="item" v-else-if="item.type == 'package' &&item.name != '上传附件'" type="安装包" btnName="上传安装包" :maxCount="1" :dataList="item"
-                tip="支持.zip类型，大小不超过100M"></upload>
-                <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx,.zip' :list="item" v-else-if="item.name == '上传附件'" type="附件" btnName="上传附件" :maxCount="1" :dataList="item"
-                tip="支持.doc,.docx,.zip,.ppt,.pdf类型，大小不超过100M"></upload>
-              <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'AbilityType'" type="disabled" :data="item" :name="item.name" :value="typeInput"></input-select-checkbox>
-              <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'ComponentType'" type="disabled" :data="item" :name="item.name" :value="type"></input-select-checkbox>
-              <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'input'" type="input" :data="item" :name="item.name"></input-select-checkbox>
-              <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'select'" type="select" :data="item" :name="item.name" :options="item.options" @show-type="showType"></input-select-checkbox>
-              <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'checkBox'" type="checkBox" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
-              <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'radio'" type="radio" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
-              <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'textArea'" type="textArea" :data="item" :name="item.name"></input-select-checkbox>
-              <input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'date'" type="date" :data="item" :name="item.name"></input-select-checkbox>
-            </div>
-              <div class="requiredTips" v-show="notFilled.indexOf(item.name) > -1 && (item.type=='input' || item.type=='textArea') && changeField.indexOf(item.name) == -1">请填写{{item.name}}！</div>
-              <div class="requiredTips" v-show="notFilled.indexOf(item.name) > -1 && (item.type=='select' || item.type=='checkBox' || item.type=='radio') && changeField.indexOf(item.name) == -1">请选择{{item.name}}！</div>
-            </div>
-          </template>
-          <template v-else>
-            <special @submitData="submitData" ref="specialRef" :configure='judgmentType.filter(item => item.name==child.name)[0]' :showData='child' @changeInfoList='changeInfoList'></special>
-          </template>
+                <div class="requiredTips" v-show="notFilled.indexOf(item.name) > -1 && (item.type=='input' || item.type=='textArea') && changeField.indexOf(item.name) == -1">请填写{{item.name}}！</div>
+                <div class="requiredTips" v-show="notFilled.indexOf(item.name) > -1 && (item.type=='select' || item.type=='checkBox' || item.type=='radio') && changeField.indexOf(item.name) == -1">请选择{{item.name}}！</div>
+              </div>
+            </template>
+            <template v-else>
+              <special @submitData="submitData" ref="specialRef" :configure='judgmentType.filter(item => item.name==child.name)[0]' :showData='child' @changeInfoList='changeInfoList'></special>
+            </template>
+          </div>
         </div>
       </div>
     </div>
@@ -241,13 +248,23 @@ export default {
 </script>
 <style lang='scss' scoped>
 .put-on-the-shelf {
-  height: 500px;
+  // height: 500px;
+  display: flex;
   padding: 0 50px;
-  overflow-y: scroll;
-}
-.put-on-the-shelf::-webkit-scrollbar {
-  width: 0;
+  .left {
+    margin-right: 50px;
+  }
+  .right {
+    height: 500px;
+    overflow-y: scroll;
+  }
+  .right::-webkit-scrollbar {
+    width: 0;
+  }
 }
+// .put-on-the-shelf::-webkit-scrollbar {
+//   width: 0;
+// }
 
 .top {
   color: #333333;
diff --git a/front/src/assets/home/update.png b/front/src/assets/home/update.png
new file mode 100644
index 00000000..baefd1f5
Binary files /dev/null and b/front/src/assets/home/update.png differ
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index 6b2ff93a..be695526 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-17 14:11:08
  * @LastEditors: Light
- * @LastEditTime: 2022-10-26 14:57:25
+ * @LastEditTime: 2022-12-20 11:39:05
  * @Description: 上架
 -->
 <template>
@@ -10,7 +10,7 @@
     <div v-for="title in props.refData.children" :key="title.id">
       <div class="top">
         <div></div>
-        <div    >{{ title.name }}</div>
+        <div>{{ title.name }}</div>
         <div></div>
       </div>
       <template v-if="title.isConfigure">
@@ -42,25 +42,39 @@
             </div> -->
             <div
               style="
-                  font-size: 16px;
-                 display: flex;
+                font-size: 16px;
+                display: flex;
                 float: right;
-                top:0px;
+                top: 0px;
                 margin-right: 28px;
               "
             >
               <!-- <span>{{ title.name }}-{{ index + 1 }}</span> -->
-              <a-popconfirm
-                :title="'是否删除该条' + title.name + '?'"
-                ok-text="是"
-                cancel-text="否"
-                @confirm="del(title.name, index)"
-              >
-                <div class="del">
-                  <i class="delImg"></i>
-                  <div>删除</div>
+              <div class="del">
+                <i class="updateImg" @click="update(title.name, index)"></i>
+                <div
+                  @click="update(title.name, index)"
+                  style="margin-right: 10px"
+                >
+                  修改
                 </div>
-              </a-popconfirm>
+                <a-popconfirm
+                  :title="'是否删除该条' + title.name + '?'"
+                  ok-text="是"
+                  cancel-text="否"
+                  @confirm="del(title.name, index)"
+                >
+                  <i class="delImg"></i>
+                </a-popconfirm>
+                <a-popconfirm
+                  :title="'是否删除该条' + title.name + '?'"
+                  ok-text="是"
+                  cancel-text="否"
+                  @confirm="del(title.name, index)"
+                >
+                  <div>删除</div>
+                </a-popconfirm>
+              </div>
             </div>
             <div
               class="form"
@@ -69,10 +83,9 @@
               )[0].list"
               :key="'key2' + attr.name + index2"
             >
-            
-            <span >{{ attr.name }}:</span>
+              <span>{{ attr.name }}:</span>
               <a-input
-              style="width:280px"
+                style="width: 280px"
                 disabled
                 v-model:value="val[attr.field]"
                 :maxlength="24"
@@ -81,23 +94,22 @@
               />
               <template v-if="attr.type == 'input2'">
                 <a-input
-                style="width:280px"
-                   disabled
+                  style="width: 280px"
+                  disabled
                   :maxLength="1000"
                   v-model:value="val[attr.field]"
                   :placeholder="'请填写' + attr.name"
                 />
               </template>
               <template v-else-if="attr.type == 'textArea'">
-              <a-input
-                style="width:1120px"
-                disabled
-                v-model:value="val[attr.field]"
-                :maxlength="1000"
-                :placeholder="'请填写' + attr.name + ',不超过1000个字符'"
-               
-              />
-            </template>
+                <a-input
+                  style="width: 1120px"
+                  disabled
+                  v-model:value="val[attr.field]"
+                  :maxlength="1000"
+                  :placeholder="'请填写' + attr.name + ',不超过1000个字符'"
+                />
+              </template>
               <!-- <a-textarea
               disabled
                 v-model:value="val[attr.field]"
@@ -113,9 +125,17 @@
                 <a-image :width="85" :height="60" :src="val.img" />
               </span>
             </div>
-            <div style="margin-top:24px;height:1px;border-top: 1px dashed #dddee1; width: 1240px;font-size: 18px;"></div>
+            <div
+              style="
+                margin-top: 24px;
+                height: 1px;
+                border-top: 1px dashed #dddee1;
+                width: 1240px;
+                font-size: 18px;
+              "
+            ></div>
           </div>
-      
+
           <!-- <div style="font-size: 0.18rem; font-weight: 600border-top: 1px dashed grey; width: 1240px;font-size: 18px;">
             <span>{{ title.name }}-{{ data[title.name].length + 1 }}</span>
           </div> -->
@@ -126,9 +146,9 @@
             )[0].list"
             :key="'key3' + val.name + index"
           >
-          <span >{{ val.name }}:</span>
+            <span>{{ val.name }}:</span>
             <a-input
-            style="width:280px"
+              style="width: 280px"
               v-model:value="val.note1"
               :maxlength="24"
               :placeholder="'请填写' + val.name + ',不超过24个字符'"
@@ -136,7 +156,7 @@
             />
             <template v-if="val.type == 'input2'">
               <a-input
-                style="width:280px"
+                style="width: 280px"
                 :maxLength="1000"
                 v-model:value="val.note1"
                 :placeholder="'请填写' + val.name"
@@ -155,14 +175,13 @@
                 }}
               </span>
             </template>
-            <template  v-else-if="val.type == 'textArea'">
+            <template v-else-if="val.type == 'textArea'">
               <a-input
-                style="width:1120px"
+                style="width: 1120px"
                 :showCount="true"
                 v-model:value="val.note1"
                 :maxlength="1000"
                 :placeholder="'请填写' + val.name + ',不超过1000个字符'"
-           
               />
             </template>
             <!-- <a-textarea
@@ -188,24 +207,24 @@
               v-else-if="val.type == 'radio'"
             /> -->
             <div
-            v-else-if="val.type == 'radio'"
-                class="danxuan-Area"
-                id="danxuan-Area"
+              v-else-if="val.type == 'radio'"
+              class="danxuan-Area"
+              id="danxuan-Area"
+            >
+              <div
+                v-for="itemSelect in val.options"
+                :key="itemSelect"
+                class="danxuan-Area-son"
+                @click="radioChangeNew(val, itemSelect)"
+                :class="
+                  val.note1 && val.note1 === itemSelect
+                    ? 'danxuan-Area-down'
+                    : ''
+                "
               >
-                <div
-                  v-for="itemSelect in val.options"
-                  :key="itemSelect"
-                  class="danxuan-Area-son"
-                  @click="radioChangeNew(val, itemSelect)"
-                  :class="
-                    val.note1 && val.note1=== itemSelect
-                      ? 'danxuan-Area-down'
-                      : ''
-                  "
-                >
-                  {{ itemSelect }}
-                </div>
+                {{ itemSelect }}
               </div>
+            </div>
             <upload
               :key="showKey"
               type="图片"
@@ -217,11 +236,19 @@
               v-else-if="val.type == 'image'"
             ></upload>
           </div>
-          <div style="margin-top:24px;height:1px;border-top: 1px dashed #dddee1; width: 1240px;font-size: 18px;"></div>
+          <div
+            style="
+              margin-top: 24px;
+              height: 1px;
+              border-top: 1px dashed #dddee1;
+              width: 1240px;
+              font-size: 18px;
+            "
+          ></div>
           <div class="submit">
             <a-button type="primary" @click="add(title.name)">
               <img
-                style="height: 12px; width: 12px;margin-top: -2px;"
+                style="height: 12px; width: 12px; margin-top: -2px"
                 src="../../../assets/home/zhengjia.png"
                 alt=""
               />
@@ -258,17 +285,23 @@
                 {{ item.name }} :
               </div>
               <div v-if="item.type == 'input' && item.name === '参考价格'">
-              <a-input 
-                :maxLength="1000"
-                v-model:value="item.note1"
-                :placeholder="'请输入' + placeHolderWords(item.name)+',单位为元'"
-                @change="changeIiem(item.name, item.note1)"
-              />
-             <span style="color:red"> (单位为元，*仅用于测算为部门节省资金)</span>
-            </div>
+                <a-input
+                  :maxLength="1000"
+                  v-model:value="item.note1"
+                  :placeholder="
+                    '请输入' + placeHolderWords(item.name) + ',单位为元'
+                  "
+                  @change="changeIiem(item.name, item.note1)"
+                />
+                <span style="color: red">
+                  (单位为元，*仅用于测算为部门节省资金)
+                </span>
+              </div>
               <a-input
                 :maxLength="1000"
-                v-else-if="item.type == 'input' && item.name.indexOf('名称') == -1"
+                v-else-if="
+                  item.type == 'input' && item.name.indexOf('名称') == -1
+                "
                 v-model:value="item.note1"
                 :placeholder="'请输入' + placeHolderWords(item.name)"
                 @change="changeIiem(item.name, item.note1)"
@@ -287,11 +320,11 @@
                 v-model:value="item.note1"
                 :options="item.options"
                 @change="changeIiem(item.name, item.note1)"
-              /> -->  
+              /> -->
               <!-- 接口请求方式  单选框样式改变 -->
               <!-- <div  v-else-if="item.type == 'radio'">ddd </div> -->
               <div
-              v-else-if="item.type == 'radio'"
+                v-else-if="item.type == 'radio'"
                 class="danxuan-Area"
                 id="danxuan-Area"
               >
@@ -343,7 +376,7 @@
                 :placeholder="'请输入' + item.name"
                 @change="changeIiem(item.name, item.note1)"
               />
-              
+
               <upload
                 v-else-if="item.type == 'image'"
                 type="图片"
@@ -416,7 +449,6 @@
                 </div>
               </div>
 
-
               <upload
                 v-else-if="item.type == 'video'"
                 type="视频"
@@ -610,1031 +642,1059 @@
   </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 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'])
+  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 radioChangeNew = (item,itemSelect) => {
-  if (item.note1) {
-    if (item.note1 === itemSelect) {
-      item.note1 = null
+  const changeAdd = () => {}
+  const data = ref({
+    list: [],
+  })
+  const showKey = ref(0)
+  const numType = ref('一次性买断')
+  const radioChange = (e) => {
+    numType.value = e.target.value
+  }
+  const radioChangeNew = (item, itemSelect) => {
+    if (item.note1) {
+      if (item.note1 === itemSelect) {
+        item.note1 = null
+      } else {
+        item.note1 = itemSelect
+      }
     } else {
       item.note1 = itemSelect
     }
-  } else {
-    item.note1 = itemSelect
-  }
 
-  numType.value =itemSelect
-}
-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)
+    numType.value = itemSelect
+  }
+  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
-      }
-      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
-    }
-  } 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
+  props.refData.children.map((item) => {
+    if (item.name == '基本信息') {
+      item.children.map((val) => {
+        if (val.name == '能力类型') {
+          val.note1 = abilityToType
         }
-        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 }) => {
-            item.note1 = res1.data.deptId
-            item.note2 = item.options.filter(
-              (val) => val.value == item.note1
-            )[0]
-
-            data.value.list.push(item)
-          })
-        } else {
-          data.value.list.push(item)
+        if (val.name == '组件类型') {
+          val.note1 = componentTypeValue
         }
       })
     }
-    // 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
+      props.configure.filter((val) => val.name === item.name).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.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
+      }
+    } 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 }) => {
+              item.note1 = res1.data.deptId
+              item.note2 = item.options.filter(
+                (val) => val.value == item.note1
+              )[0]
+
+              data.value.list.push(item)
+            })
+          } else {
+            data.value.list.push(item)
           }
         })
-      })
-      //  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 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 {
-        obj[item.field] = item.note1
+        data.value.list.push(item)
       }
     })
-    if (!sfFlag) {
-      data.value[title].push(obj)
-    }
+  })
+  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,
+      })
+      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)
     mybus.emit('chageDataFrom', {
       attrType: title,
       attrValue: JSON.stringify(data.value[title]),
       delFlag: 0,
     })
-    list.forEach((item) => {
-      item.note1 = ''
-      showKey.value++
+  }
+  const update = (title, index) => {
+    const obj = data.value[title][index]
+    data.value[title].splice(index, 1)
+    mybus.emit('chageDataFrom', {
+      attrType: title,
+      attrValue: JSON.stringify(data.value[title]),
+      delFlag: 0,
     })
-    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++
+    props.configure
+      .filter((item) => item.name === title)[0]
+      .list.map((val) => {
+        val.note1 = obj[val.field]
       })
-      if (type == '上一步') {
-        emit('back')
-      } else if (type == '下一步') {
-        emit('next')
-      } else if (type == '提交') {
-        emit('submit')
-      } else if (type == '预览') {
-        emit('preview')
+  }
+  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 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
+  const danxuanArea = (item, itemSelect, indexSelect) => {
+    if (item.note1) {
+      if (item.note1 === indexSelect) {
+        item.note1 = null
+      } else {
+        item.note1 = indexSelect
+      }
     } else {
       item.note1 = indexSelect
     }
-  } else {
-    item.note1 = indexSelect
-  }
 
-  changeIiem(itemSelect, indexSelect)
-}
-const danxuanRadio= (item, itemSelect) => {
-  if (item.note1) {
-    if (item.note1 === itemSelect) {
-      item.note1 = null
+    changeIiem(itemSelect, indexSelect)
+  }
+  const danxuanRadio = (item, itemSelect) => {
+    if (item.note1) {
+      if (item.note1 === itemSelect) {
+        item.note1 = null
+      } else {
+        item.note1 = itemSelect
+      }
     } else {
       item.note1 = itemSelect
     }
-  } else {
-    item.note1 = itemSelect
+
+    changeIiem(item.name, item.note1)
   }
-
-  changeIiem(item.name, item.note1)
-}
-// 来源应用
-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,
+  // 来源应用
+  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,
+        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 (
-      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]
       }
+    })
+  }
+  // 关联组件
+  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([])
 
-      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,
-          })
-        } else {
-          mybus.emit('chageDataFrom', {
-            attrType: val.name,
-            attrValue: val.note1,
-            delFlag: 0,
-          })
+  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 (
+        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]
+        }
+
+        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,
+            })
+          } 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
-    }
+  const applicationsChange = (value) => {
+    data.value.list.map((item) => {
+      if (item.name === '来源应用') {
+        item.note1 = value
+      }
+    })
+  }
+
+  const handleBlur = () => {}
+  const applicationsBlur = () => {}
+
+  const handleFocus = () => {}
+  const applicationsFocus = () => {}
+
+  const filterOption = (input, option) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+  }
+  defineExpose({
+    add,
   })
-}
-
-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
-}
+  const applicationsOption = (input, option) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+  }
 </script>
 <style></style>
 <style lang="less" scoped>
-: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;
-}
-
-: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;
-}
-
-// 隐藏三角
-: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;
-// }
-
-.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;
+  :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: 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;
-      font-size: 24px;
-    font-weight: bold;
-    margin-top: 22px;
-      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.02rem;
-        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;
     }
 
-    .bottom {
-      // margin-top: 0.25rem;
+    & > div {
+      padding: 0px 0px 24px 24px;
+      width: 100%;
+      font-size: 14px;
 
-      .items {
-        background: #fafafa;
-        padding: 0.1rem;
+      .top {
+        color: #333333;
+        font-size: 24px;
+        font-weight: bold;
+        margin-top: 22px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 0.25rem;
 
-        p {
-          display: flex;
-          justify-content: space-between;
+        div:first-child,
+        div:last-child {
+          width: 2.45rem;
+          height: 0.02rem;
+          background: #f0f0f0;
+        }
 
-          span:nth-of-type(1) {
-            width: 2rem;
+        div:nth-child(2) {
+          margin: 0 0.3rem;
+        }
+      }
+
+      .bottom {
+        // margin-top: 0.25rem;
+
+        .items {
+          background: #fafafa;
+          padding: 0.1rem;
+
+          p {
+            display: flex;
+            justify-content: space-between;
+
+            span:nth-of-type(1) {
+              width: 2rem;
+            }
+
+            span:nth-of-type(2) {
+              width: 100%;
+              font-weight: 600;
+            }
           }
 
-          span:nth-of-type(2) {
-            width: 100%;
+          p:nth-of-type(1) > span:nth-of-type(1) {
+            font-size: 0.18rem;
             font-weight: 600;
           }
         }
 
-        p:nth-of-type(1) > span:nth-of-type(1) {
-          font-size: 0.18rem;
-          font-weight: 600;
-        }
-      }
-
-      .add {
-        cursor: pointer;
-        margin-top: 0.1rem;
-        font-size: 0.16rem;
-        color: #007efb;
-      }
-
-      .form {
-        min-height: 32px;
-        margin-top: 24px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-
-        span:first-child {
-          width: 1.0rem;
+        .add {
+          cursor: pointer;
+          margin-top: 0.1rem;
+          font-size: 0.16rem;
+          color: #007efb;
         }
 
-        :deep(.ant-input-textarea) {
-          width: 1000px;
+        .form {
+          min-height: 32px;
+          margin-top: 24px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+
+          span:first-child {
+            width: 1rem;
+          }
+
+          :deep(.ant-input-textarea) {
+            width: 1000px;
+          }
+
+          :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;
+          }
         }
 
-        :deep(.ant-radio-group) {
-          width: 5.2rem;
-        }
+        .submit {
+          margin-top: 0.4rem;
+          font-size: 0.14rem;
+          display: flex;
+          justify-content: center;
 
-        :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: center;
-
-        .ant-btn {
-          width: 260px;
-          height: 32px;
-          text-align: center;
-          background: #fff;
-          color: #0558e1;
-          border: 1px solid #0558e1;
-          border-radius: 2px;
-          font-size: 14px;
-        }
-        .ant-btn:hover{
-          background: #fff;
-          color: #0558e1;
-          opacity: 0.8;
-        }
-        .ant-btn:active{
-          background: #fff;
-          color: #0558e1;
-          opacity: 0.8
+          .ant-btn {
+            width: 260px;
+            height: 32px;
+            text-align: center;
+            background: #fff;
+            color: #0558e1;
+            border: 1px solid #0558e1;
+            border-radius: 2px;
+            font-size: 14px;
+          }
+          .ant-btn:hover {
+            background: #fff;
+            color: #0558e1;
+            opacity: 0.8;
+          }
+          .ant-btn:active {
+            background: #fff;
+            color: #0558e1;
+            opacity: 0.8;
+          }
         }
       }
     }
-  }
 
-  & > 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 auto auto ;
-  border-left: 1px #0558e1 solid;
-  .danxuan-Area-son {
-    cursor: pointer;
-    min-width: 82px;
-    height: 32px;
-    border-radius: 2px;
-    color: #0558e1;
-    background: #fff;
-    border-right: 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;
+      margin-top: 0;
+    }
+  }
+  .danxuan-Area {
+    display: grid;
+    margin-top: -0.05rem;
+    grid-template-columns: auto auto auto auto auto auto auto auto;
+    border-left: 1px #0558e1 solid;
+    .danxuan-Area-son {
+      cursor: pointer;
+      min-width: 82px;
+      height: 32px;
+      border-radius: 2px;
+      color: #0558e1;
+      background: #fff;
+      border-right: 1px #0558e1 solid;
+      border-bottom: 1px #0558e1 solid;
+      border-top: 1px #0558e1 solid;
+      display: flex;
+      justify-content: center;
       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;
+    .danxuan-Area-son:hover {
       color: #fff;
-      border: none;
-      border-radius: 6px;
-      background: yellow;
+      background: #0558e1;
     }
-    button:nth-of-type(1) {
-      color: red;
-      background: #e1edfa;
-    }
-    button:nth-of-type(2) {
-      background: yellow;
+
+    .danxuan-Area-down {
+      background: #0058e1;
+      color: #fff;
+      // border: 1px #0558e1 solid;
     }
   }
 
-  .requiredTips {
-    font-size: 14px;
-    color: #e83e48;
-    position: absolute;
-    bottom: -20px;
-    left: 110px;
+  .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;
+    .updateImg {
+      cursor: pointer;
+      display: inline-block;
+      width: 16px;
+      height: 18px;
+      background: url('~@/assets/home/update.png') no-repeat;
+      margin-right: 5px;
+      margin-bottom: 1px;
+    }
+    .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;
+    }
+    & > span {
+      display: flex;
+    }
+
+    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>