diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index faed5074..d6a61432 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -215,3 +215,11 @@ export function selectResourceListByDept(params) {
     params,
   })
 }
+// 获取来源应用列表
+export function queryApplicationRelByResourceId(params) {
+  return request({
+    url: '/dataResourceRel/queryApplicationRelByResourceId',
+    method: 'get',
+    params,
+  })
+}
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index c6c19bdc..789dabd6 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -16,21 +16,14 @@
       <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"
-            >
+            <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"
-              >
+              <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" />
@@ -44,51 +37,19 @@
             </div>
           </div>
           <div class="add">添加更多{{ title.name }}</div>
-          <div
-            class="form"
-            v-for="(val, index) in props.configure.filter(
-              (item) => item.name === title.name
-            )[0].list"
-            :key="'key3' + val.name + index"
-          >
+          <div class="form" v-for="(val, index) in props.configure.filter(
+            (item) => item.name === title.name
+          )[0].list" :key="'key3' + val.name + index">
             <span>{{ val.name }}</span>
-            <a-input
-              v-model:value="val.note1"
-              :maxlength="24"
-              :placeholder="'请填写' + val.name + ',不超过24个字符'"
-              v-if="val.type == 'input'"
-            />
-            <a-textarea
-              v-model:value="val.note1"
-              :showCount="true"
-              :maxlength="200"
-              :placeholder="'请填写' + val.name"
-              v-else-if="val.type == 'textArea'"
-            />
-            <a-input-number
-              v-model:value="val.note1"
-              :min="0"
-              :max="9999"
-              :step="0.01"
-              string-mode
-              :placeholder="'请填写' + val.name"
-              v-else-if="val.type == 'number'"
-            />
-            <a-radio-group
-              v-model:value="val.note1"
-              :options="val.options"
-              v-else-if="val.type == 'radio'"
-            />
-            <upload
-              :key="showKey"
-              type="图片"
-              btnName="上传图片"
-              :maxCount="1"
-              :data="val"
-              :list="[]"
-              tip="支持图片类型，大小不超过100M"
-              v-else-if="val.type == 'image'"
-            ></upload>
+            <a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
+              v-if="val.type == 'input'" />
+            <a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
+              v-else-if="val.type == 'textArea'" />
+            <a-input-number v-model:value="val.note1" :min="0" :max="9999" :step="0.01" string-mode
+              :placeholder="'请填写' + val.name" v-else-if="val.type == 'number'" />
+            <a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
+            <upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型，大小不超过100M"
+              v-else-if="val.type == 'image'"></upload>
           </div>
           <div class="submit">
             <a-button type="primary" @click="add(title.name)">提交</a-button>
@@ -99,505 +60,585 @@
         <div class="bottom">
           <div class="form" v-for="item in title.children" :key="item.id">
             <span>{{ item.name }}</span>
-            <a-input
-              v-if="item.type == 'input'"
-              v-model:value="item.note1"
-              :placeholder="'请输入' + item.name"
-            />
-            <a-radio-group
-              v-else-if="item.type == 'radio'"
-              v-model:value="item.note1"
-              :options="item.options"
-            />
-            <a-input
-              v-else-if="item.type == 'text'"
-              v-model:value="item.note1"
-              :placeholder="'请输入' + item.name"
-              :disabled="true"
-            />
-            <a-input
-              v-else-if="item.type == 'text2'"
-              v-model:value="item.note1"
-              :placeholder="'请输入' + item.name"
-              :disabled="true"
-            />
-            <a-textarea
-              v-else-if="item.type == 'textArea'"
-              v-model:value="item.note1"
-              :showCount="true"
-              :maxlength="200"
-              :placeholder="'请输入' + item.name"
-            />
-            <upload
-              v-else-if="item.type == 'image'"
-              type="图片"
-              btnName="上传图片"
-              :maxCount="1"
-              :data="item"
-              :list="props.imgList"
-              tip="支持图片类型，大小不超过100M"
-            ></upload>
-            <upload
-              v-else-if="item.type == 'file' && item.name !== '使用手册'"
-              type="文件"
-              btnName="上传附件"
-              :maxCount="1"
-              :data="item"
-              :list="props.fileList"
-              tip="支持文件类型，大小不超过100M"
-            ></upload>
-            <upload
-              v-else-if="item.name == '使用手册'"
-              type="文件"
-              btnName="上传附件"
-              :maxCount="1"
-              :data="item"
-              :busType="2"
-              :list="props.fileList2"
-              tip="支持文件类型，大小不超过100M"
-            ></upload>
-            <upload
-              v-else-if="item.type == 'video'"
-              type="视频"
-              btnName="上传视频"
-              :maxCount="1"
-              :data="item"
-              :list="props.videoList"
-              tip="支持视频类型，大小不超过100M"
-            ></upload>
+            <a-input v-if="item.type == 'input'" v-model:value="item.note1" :placeholder="'请输入' + item.name" />
+            <a-radio-group v-else-if="item.type == 'radio'" v-model:value="item.note1" :options="item.options" />
+            <a-input v-else-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
+              :disabled="true" />
+            <a-input v-else-if="item.type == 'text2'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
+              :disabled="true" />
+            <a-textarea v-else-if="item.type == 'textArea'" v-model:value="item.note1" :showCount="true"
+              :maxlength="200" :placeholder="'请输入' + item.name" />
+            <upload v-else-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
+              :list="props.imgList" tip="支持图片类型，大小不超过100M"></upload>
+            <upload v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
+              :data="item" :list="props.fileList" tip="支持文件类型，大小不超过100M"></upload>
+            <upload v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
+              :list="props.fileList2" tip="支持文件类型，大小不超过100M"></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 == 'dialog'" @click="sourceClick">
               请选择来源应用
             </a-button>
-            <a-select
-              v-else-if="item.type == 'select'"
-              style="width: 240px"
-              v-model:value="item.note1"
-              :placeholder="'请选择' + item.name"
-            >
-              <a-select-option
-                v-for="(itemSelect, indexSelect) in item.options"
-                :key="indexSelect"
-                :value="itemSelect.dictLabel"
-              >
+            <a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
+              :placeholder="'请选择' + item.name">
+              <a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
+                :value="itemSelect.dictLabel">
                 {{ itemSelect.dictLabel }}
               </a-select-option>
             </a-select>
-            <div
-              v-else-if="item.type == 'checkBox'"
-              class="application-Area"
-              id="application-Area"
-              :key="showKey"
-            >
-              <div
-                v-for="(itemson, indexson) in item.options"
-                :key="indexson"
-                class="application-Area-son"
-                @click="ApplicationArea(item, itemson)"
-                :class="
+            <div v-else-if="item.type == 'checkBox'" class="application-Area" id="application-Area" :key="showKey">
+              <div v-for="(itemson, indexson) in item.options" :key="indexson" class="application-Area-son"
+                @click="ApplicationArea(item, itemson)" :class="
                   item.note2.indexOf(itemson.dictLabel) != -1
                     ? 'application-Area-down'
                     : ''
-                "
-              >
+                ">
                 {{ itemson.dictLabel }}
               </div>
             </div>
           </div>
+          <div class="AssociatedApplication">
+            <a-modal v-model:visible="visibleAssociatedApplication" title="关联应用" @ok="handleOk" @cancel="handleCancel"
+              style="width: 960px">
+              <div>
+                <a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys"
+                  :data-source="mockData" :titles="['未关联的应用名称', '已关联的应用名称']" :render="(item) => item.title"
+                  @change="handleChange" @selectChange="handleSelectChange" />
+              </div>
+            </a-modal>
+          </div>
         </div>
       </template>
     </div>
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch, onMounted } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  import upload from '@/views/components/upload'
-  import { message } from 'ant-design-vue'
-  import { getCategoryTreePage } 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 props = defineProps({
-    // 展示数据
-    refData: { type: Object, default: null },
-    // 表单数据
-    dataFrom: { type: Array, default: null },
-    // 文件回显
-    fileList: { type: Array, default: null },
-    fileList2: { type: Array, default: null },
-    // 图片回显
-    imgList: { type: Array, default: null },
-    // 视频回显
-    videoList: { type: Array, default: null },
-    // 外部字段
-    externalField: { type: Array, default: null },
-    // 多条的配置
-    configure: { 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:''
-    //     }
-    //   ]
-    // }]
-  })
-  // console.log('props==========>', props)
-  const data = ref({
-    list: [],
-  })
-  const showKey = ref(0)
-  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
+import { ref, defineProps, watch, onMounted } from 'vue'
+import mybus from '@/myplugins/mybus'
+import upload from '@/views/components/upload'
+import { message } from 'ant-design-vue'
+import {
+  getCategoryTreePage,
+  queryApplicationRelByResourceId,
+} 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 props = defineProps({
+  // 展示数据
+  refData: { type: Object, default: null },
+  // 表单数据
+  dataFrom: { type: Array, default: null },
+  // 文件回显
+  fileList: { type: Array, default: null },
+  fileList2: { type: Array, default: null },
+  // 图片回显
+  imgList: { type: Array, default: null },
+  // 视频回显
+  videoList: { type: Array, default: null },
+  // 外部字段
+  externalField: { type: Array, default: null },
+  // 多条的配置
+  configure: { 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:''
+  //     }
+  //   ]
+  // }]
+})
+// console.log('props==========>', props)
+const data = ref({
+  list: [],
+})
+const showKey = ref(0)
+props.refData.children.map((item) => {
+  if (item.name == '基本信息') {
+    item.children.map((val) => {
+      if (val.name == '能力类型') {
+        val.note1 = abilityToType
       }
-    } else {
+      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
     }
-  })
-  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 {
-        data.value.list.push(item)
-      }
-    })
-  })
-  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)
-            }
-          })
-        })
-        //  item.note1 = item.attrValue.split(';')
-      }
-    })
+  } else {
+    return item
   }
-  const add = (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 = {}
-      list.forEach((item) => {
-        obj[item.field] = item.note1
-      })
-      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++
+})
+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 {
-      message.warning('请填写完整')
+      data.value.list.push(item)
     }
-  }
-  const del = (title, index) => {
-    data.value[title].splice(index, 1)
+  })
+})
+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)
+          }
+        })
+      })
+      //  item.note1 = item.attrValue.split(';')
+    }
+  })
+}
+const add = (title) => {
+  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 = {}
+    list.forEach((item) => {
+      obj[item.field] = item.note1
+    })
+    data.value[title].push(obj)
+    // console.log(data.value[title])
     mybus.emit('chageDataFrom', {
       attrType: title,
       attrValue: JSON.stringify(data.value[title]),
       delFlag: 0,
     })
-  }
-  const ApplicationArea = (item, itemson) => {
-    // console.log(item, itemson)
-    if (item.note2.indexOf(itemson.dictLabel) === -1) {
-      item.note2.push(itemson.dictLabel)
-    } else {
-      item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
-    }
-    mybus.emit('chageDataFrom', {
-      attrType: item.name,
-      attrValue: item.note2.join(';'),
-      delFlag: 0,
+    list.forEach((item) => {
+      item.note1 = ''
+      showKey.value++
     })
+  } else {
+    message.warning('请填写完整')
   }
-  const sourceClick = () => {}
-  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
-      ) {
+}
+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) => {
+  // console.log(item, itemson)
+  if (item.note2.indexOf(itemson.dictLabel) === -1) {
+    item.note2.push(itemson.dictLabel)
+  } else {
+    item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
+  }
+  mybus.emit('chageDataFrom', {
+    attrType: item.name,
+    attrValue: item.note2.join(';'),
+    delFlag: 0,
+  })
+}
+// 来源应用
+const visibleAssociatedApplication = ref(false)
+const mockData = ref([])
+
+const sourceClick = () => {
+  visibleAssociatedApplication.value = true
+  queryApplicationRelByResourceId({
+    referenceId: 0,
+  }).then((res) => {
+    // console.log(res.data.data.notLinked)
+    res.data.data.notLinked.forEach((val, index) => {
+      // console.log(val, index)
+      mockData.value.push({
+        key: val.id,
+        title: val.name,
+        description: val.id,
+      })
+    })
+  })
+}
+const targetKeys = ref([])
+const selectedKeys = ref([])
+
+const handleChange = (nextTargetKeys, direction, moveKeys) => {
+  console.log('targetKeys: ', nextTargetKeys)
+  console.log('direction: ', direction)
+  console.log('moveKeys: ', moveKeys)
+}
+
+const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  console.log('targetSelectedKeys: ', targetSelectedKeys)
+}
+
+const handleOk = (e) => {
+  console.log(e)
+  visibleAssociatedApplication.value = false
+  // console.log('2222222222222', props.refData)
+  data.value.list.map((item) => {
+    if (item.name === '来源应用') {
+      item.note1 = targetKeys.value + ''
+    }
+  })
+}
+const handleCancel = (e) => {
+  console.log(e)
+  visibleAssociatedApplication.value = false
+}
+
+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
+    ) {
+      mybus.emit('chageDataFromDwon', {
+        attrType: val.name,
+        attrValue: val.note1,
+        delFlag: 0,
+      })
+    } else {
+      if (val.name !== '应用领域') {
         mybus.emit('chageDataFrom', {
           attrType: val.name,
           attrValue: val.note1,
           delFlag: 0,
         })
-      } else if (
-        props.externalField &&
-        props.externalField.indexOf(val.name) > -1
-      ) {
-        mybus.emit('chageDataFromDwon', {
-          attrType: val.name,
-          attrValue: val.note1,
-          delFlag: 0,
-        })
-      } else {
-        if (val.name !== '应用领域') {
-          mybus.emit('chageDataFrom', {
-            attrType: val.name,
-            attrValue: val.note1,
-            delFlag: 0,
-          })
-        }
       }
-    })
+    }
   })
+})
 </script>
 <style lang="less" scoped>
-  .put-on-the-shelf {
-    height: 680px;
-    overflow: scroll;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 50px 100px 25px;
-    & > div {
-      width: 100%;
-      margin-top: 60px;
-      .top {
-        color: #333333;
-        font-size: 22px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-bottom: 25px;
-        div:first-child,
-        div:last-child {
-          width: 245px;
-          height: 1px;
-          background: #f0f0f0;
-        }
-        div:nth-child(2) {
-          margin: 0 30px;
-        }
-      }
-      .bottom {
-        margin-top: 25px;
-        .items {
-          background: #fafafa;
-          padding: 10px;
-          p {
-            display: flex;
-            justify-content: space-between;
-            span:nth-of-type(1) {
-              width: 200px;
-            }
-            span:nth-of-type(2) {
-              width: 100%;
-              font-weight: 600;
-            }
-          }
-          p:nth-of-type(1) > span:nth-of-type(1) {
-            font-size: 18px;
-            font-weight: 600;
-          }
-          .del {
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            .delImg {
-              cursor: pointer;
-              display: inline-block;
-              width: 16px;
-              height: 18px;
-              background: url(~@/assets/home/sf_del.png) no-repeat;
-              margin-right: 5px;
-            }
-            div {
-              cursor: pointer;
-            }
-          }
-        }
-        .add {
-          margin-top: 10px;
-          font-size: 16px;
-          color: #007efb;
-        }
-        .form {
-          margin-top: 20px;
-          display: flex;
-          justify-content: flex-start;
-          span:first-child {
-            width: 120px;
-          }
-          :deep(.ant-input-textarea) {
-            width: 570px;
-          }
-          :deep(.ant-radio-group) {
-            width: 570px;
-          }
-          :deep(.ant-input-number) {
-            width: 200px;
-          }
-          :deep(.ant-input) {
-            resize: none;
-            width: 570px;
-          }
-          .ant-btn {
-            width: 160px;
-            height: 32px;
-            text-align: center;
-            background: #edf4fc;
-            color: #0087ff;
-            border: 1px solid #bbd3ef;
-            border-radius: 6px;
-          }
-        }
-        .submit {
-          margin-top: 40px;
-          display: flex;
-          justify-content: flex-end;
-          .ant-btn {
-            width: 80px;
-            height: 28px;
-            text-align: center;
-            background: #d9ebff;
-            color: #0087ff;
-            border: 1px solid #0087ff;
-            border-radius: 6px;
-          }
-        }
-      }
-    }
-    & > div:nth-of-type(1) {
-      margin-top: 0;
-    }
-  }
-  .application-Area {
-    width: 570px;
-    display: grid;
-    margin-top: -5px;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-    .application-Area-son {
-      cursor: pointer;
-      font-size: 14px;
-      width: 90px;
-      height: 26px;
-      border-radius: 13px;
+.put-on-the-shelf {
+  height: 680px;
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 100px 25px;
+
+  &>div {
+    width: 100%;
+    margin-top: 60px;
+
+    .top {
       color: #333333;
-      background: #f5f5f5;
-      border: 1px #cccccc solid;
+      font-size: 22px;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-top: 10px;
-      font-weight: 500;
+      margin-bottom: 25px;
+
+      div:first-child,
+      div:last-child {
+        width: 245px;
+        height: 1px;
+        background: #f0f0f0;
+      }
+
+      div:nth-child(2) {
+        margin: 0 30px;
+      }
     }
-    .application-Area-down {
-      background: #0087ff;
-      color: #fff;
+
+    .bottom {
+      margin-top: 25px;
+
+      .items {
+        background: #fafafa;
+        padding: 10px;
+
+        p {
+          display: flex;
+          justify-content: space-between;
+
+          span:nth-of-type(1) {
+            width: 200px;
+          }
+
+          span:nth-of-type(2) {
+            width: 100%;
+            font-weight: 600;
+          }
+        }
+
+        p:nth-of-type(1)>span:nth-of-type(1) {
+          font-size: 18px;
+          font-weight: 600;
+        }
+
+        .del {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+
+          .delImg {
+            cursor: pointer;
+            display: inline-block;
+            width: 16px;
+            height: 18px;
+            background: url(~@/assets/home/sf_del.png) no-repeat;
+            margin-right: 5px;
+          }
+
+          div {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .add {
+        margin-top: 10px;
+        font-size: 16px;
+        color: #007efb;
+      }
+
+      .form {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-start;
+
+        span:first-child {
+          width: 120px;
+        }
+
+        :deep(.ant-input-textarea) {
+          width: 570px;
+        }
+
+        :deep(.ant-radio-group) {
+          width: 570px;
+        }
+
+        :deep(.ant-input-number) {
+          width: 200px;
+        }
+
+        :deep(.ant-input) {
+          resize: none;
+          width: 570px;
+        }
+
+        .ant-btn {
+          width: 160px;
+          height: 32px;
+          text-align: center;
+          background: #edf4fc;
+          color: #0087ff;
+          border: 1px solid #bbd3ef;
+          border-radius: 6px;
+        }
+      }
+
+      .submit {
+        margin-top: 40px;
+        display: flex;
+        justify-content: flex-end;
+
+        .ant-btn {
+          width: 80px;
+          height: 28px;
+          text-align: center;
+          background: #d9ebff;
+          color: #0087ff;
+          border: 1px solid #0087ff;
+          border-radius: 6px;
+        }
+      }
     }
   }
-  :deep(.ant-image-img) {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+
+  &>div:nth-of-type(1) {
+    margin-top: 0;
   }
+}
+
+.application-Area {
+  width: 570px;
+  display: grid;
+  margin-top: -5px;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+
+  .application-Area-son {
+    cursor: pointer;
+    font-size: 14px;
+    width: 90px;
+    height: 26px;
+    border-radius: 13px;
+    color: #333333;
+    background: #f5f5f5;
+    border: 1px #cccccc solid;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    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: 960px;
+}
+
+:deep(.ant-transfer-list) {
+  width: 39.5%;
+  height: 520px;
+}
+
+:deep(.ant-transfer-operation) {
+  flex-direction: row-reverse;
+  margin: 0 30px;
+}
+
+:deep(.ant-btn) {
+  width: 56px;
+  height: 40px;
+  border-radius: 4px;
+}
+
+:deep(.ant-btn:first-child) {
+  margin-left: 4px;
+}
+
+:deep(.ant-modal-footer) {
+  border: 0;
+}
+
+:deep(.ant-modal-header) {
+  border: 0;
+}
+
+:deep(.ant-modal-title) {
+  line-height: 24px;
+  font-size: 18px;
+  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: 16px;
+  color: #303133;
+  font-weight: 400;
+  text-align: left;
+}
 </style>