From 6c10a4bb298be32c89a43ec9444a27cda8321b81 Mon Sep 17 00:00:00 2001
From: wuhongjian <wuhongjian@hisense.com>
Date: Fri, 15 Jul 2022 21:35:22 +0800
Subject: [PATCH] =?UTF-8?q?eslint=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/.eslintrc.js                            |    8 +
 front/package.json                            |    4 +-
 front/src/App.vue                             |    2 +-
 front/src/api/capabilityCloud.js              |   12 +-
 front/src/api/home.js                         |    6 +-
 front/src/api/personalCenter.js               |    2 +-
 front/src/config/default/setting.config.js    |    9 +-
 front/src/store/modules/user.js               |  354 +--
 front/src/utils/request.js                    |    9 +-
 front/src/vab/plugins/permissions.js          |   96 +-
 .../views/assignCase/components/queryPage.vue |    5 +-
 .../src/views/detailsAll/AlgorithmDetails.vue |  295 ++-
 .../views/detailsAll/ApplicationDetails.vue   |  326 +--
 .../src/views/detailsAll/BusinessDetails.vue  |  278 +-
 .../views/detailsAll/DeveloperComponents.vue  |  302 ++-
 front/src/views/detailsAll/LayerService.vue   |  292 ++-
 .../Algorithm/AlgorithmAdvantage.vue          |    2 +-
 .../components/Algorithm/AlgorithmOnTrial.vue |    4 +-
 .../Algorithm/PictureCharacterRecognition.vue |   10 +-
 .../components/Algorithm/TestOfWords.vue      |    6 +-
 .../Application/ApplicationCommonProblem.vue  |  200 +-
 .../ApplicationFunctionIntorduction.vue       |  408 +--
 .../Application/ApplicationPresentation.vue   |  194 +-
 .../Application/ApplicationTopDetails.vue     |  421 +--
 .../Business/BusinessNavigation.vue           |  399 +--
 front/src/views/home/DetailsPageconetent.vue  | 2330 +++++++++--------
 .../home/components/CompareGroupView.vue      |  128 +-
 front/src/views/home/constantData/showData.js |  120 +-
 front/src/views/home/integrationServices.vue  |  495 ++--
 .../views/home/integrationServicesDetails.vue |  721 ++---
 .../components/abilityDocTree.vue             |    2 +-
 front/src/views/instructionManual/index.vue   |  371 +--
 .../views/newHome/components/Navigation2.vue  |    2 +-
 .../newHome/components/PopularAbility.vue     |  320 +--
 .../personalCenter/components/Collection.vue  |   10 +-
 .../components/addApplication.vue             |  542 ++--
 36 files changed, 4649 insertions(+), 4036 deletions(-)

diff --git a/front/.eslintrc.js b/front/.eslintrc.js
index 81701c75..bdbc18cb 100644
--- a/front/.eslintrc.js
+++ b/front/.eslintrc.js
@@ -1,3 +1,10 @@
+/*
+ * @Author: hisense.wuhongjian
+ * @Date: 2022-06-14 09:31:29
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-15 16:33:55
+ * @Description: 告诉大家这是什么
+ */
 module.exports = {
   root: true,
   env: {
@@ -15,6 +22,7 @@ module.exports = {
   ignorePatterns: [
     'src/supermap',
     'src/views/home/videoSurveillance',
+    'src/views/vab/*',
     'src/utils/coordinateSystemTransform.js',
   ],
 }
diff --git a/front/package.json b/front/package.json
index fca2d1c9..592ac777 100644
--- a/front/package.json
+++ b/front/package.json
@@ -5,7 +5,9 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "lint": "eslint --ext .js --ext .jsx --ext .vue src/",
+    "lint:fix": "eslint --fix --ext .js,.vue .",
+    "fix": "eslint src/**/*.*  --fix",
     "clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org",
     "use:npm": "nrm use npm",
     "use:taobao": "nrm use taobao",
diff --git a/front/src/App.vue b/front/src/App.vue
index aeb2000e..b3fb4074 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -26,7 +26,7 @@
 </script>
 <style lang="less">
   @import '~@/vab/styles/vab.less';
-  #vue-admin-beautiful{
+  #vue-admin-beautiful {
     max-width: 1920px;
     // max-height: 1080px;
     margin: auto;
diff --git a/front/src/api/capabilityCloud.js b/front/src/api/capabilityCloud.js
index 03fac901..8c72303b 100644
--- a/front/src/api/capabilityCloud.js
+++ b/front/src/api/capabilityCloud.js
@@ -83,14 +83,22 @@ export function dataResourceInfo(params) {
 //能力云图-调用趋势
 export function callTheTrendPort(start, end, params) {
   return request({
-    url: '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' + start + '&end=' + end + '&step=' + params,
+    url:
+      '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' +
+      start +
+      '&end=' +
+      end +
+      '&step=' +
+      params,
     method: 'get',
   })
 }
 //能力云图-调用次数
 export function totalCallsSnum(params) {
   return request({
-    url: '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' + params,
+    url:
+      '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' +
+      params,
     method: 'get',
   })
 }
diff --git a/front/src/api/home.js b/front/src/api/home.js
index de19b712..86cf83ec 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -342,7 +342,7 @@ export function getIntegrationServicesList(params) {
   return request({
     url: '/fuse/page',
     method: 'get',
-    params
+    params,
   })
 }
 
@@ -359,6 +359,6 @@ export function getDevelopDocTree(params) {
   return request({
     url: '/resource/selectDevelopDoc',
     method: 'get',
-    params
+    params,
   })
-}
\ No newline at end of file
+}
diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index 86d0f684..dbc2a2ca 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -199,7 +199,7 @@ export function getMyComment(params) {
 }
 export function demandComment(params) {
   return request({
-    url: '/demandComment/'+ params,
+    url: '/demandComment/' + params,
     method: 'get',
     params,
   })
diff --git a/front/src/config/default/setting.config.js b/front/src/config/default/setting.config.js
index ee70f8b7..204825b6 100644
--- a/front/src/config/default/setting.config.js
+++ b/front/src/config/default/setting.config.js
@@ -50,7 +50,14 @@ const setting = {
   //路由模式，可选值为 history 或 hash
   routerMode: 'hash',
   //不经过token校验的路由
-  routesWhiteList: ['/login', '/register', '/callback', '/404', '/403', '/capabilityCloud'], // 新增统计云图白名单
+  routesWhiteList: [
+    '/login',
+    '/register',
+    '/callback',
+    '/404',
+    '/403',
+    '/capabilityCloud',
+  ], // 新增统计云图白名单
   //加载时显示文字
   loadingText: '正在加载中...',
   //token名称
diff --git a/front/src/store/modules/user.js b/front/src/store/modules/user.js
index f3b183ff..bb545609 100644
--- a/front/src/store/modules/user.js
+++ b/front/src/store/modules/user.js
@@ -2,182 +2,182 @@
  * @author chuzhixin 1204505056@qq.com
  * @description 登录、获取用户信息、退出登录、清除accessToken逻辑，不建议修改
  */
- import { getUserInfo, login, logout } from '@/api/user'
- import {
-   getAccessToken,
-   removeAccessToken,
-   setAccessToken,
- } from '@/utils/accessToken'
- import { title, tokenName } from '@/config'
- import { message, notification } from 'ant-design-vue'
+import { getUserInfo, login, logout } from '@/api/user'
+import {
+  getAccessToken,
+  removeAccessToken,
+  setAccessToken,
+} from '@/utils/accessToken'
+import { title, tokenName } from '@/config'
+import { message, notification } from 'ant-design-vue'
 
- const state = () => ({
-   accessToken: getAccessToken(),
-   username: '',
-   userId: '',
-   avatar: '',
-   role: 0, // 用户管理员权限
- })
- const getters = {
-   accessToken: (state) => state.accessToken,
-   username: (state) => state.username,
-   avatar: (state) => state.avatar,
-   role: (state) => state.role,
-   userId: (state) => state.userId,
- }
- const mutations = {
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 设置accessToken
-    * @param {*} state
-    * @param {*} accessToken
-    */
-   setAccessToken(state, accessToken) {
-     state.accessToken = accessToken
-     setAccessToken(accessToken)
-   },
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 设置用户名
-    * @param {*} state
-    * @param {*} username
-    */
-   setUsername(state, username) {
-     state.username = username
-   },
-   // 设置角色
-   setRole(state, role) {
-     state.role = role
-   },
-   // 设置用户userId
-   setUserId(state, id) {
-     state.userId = id
-   },
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 设置头像
-    * @param {*} state
-    * @param {*} avatar
-    */
-   setAvatar(state, avatar) {
-     state.avatar = avatar
-   },
- }
- const actions = {
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 登录拦截放行时，设置虚拟角色
-    * @param {*} { commit, dispatch }
-    */
-   setVirtualRoles({ commit, dispatch }) {
-     dispatch('acl/setFull', true, {
-       root: true,
-     })
-     commit('setAvatar', 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif')
-     commit('setUsername', 'admin(未开启登录拦截)')
-   },
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 登录
-    * @param {*} { commit }
-    * @param {*} userInfo
-    */
-   async login({ commit }, userInfo) {
-     const { data } = await login(userInfo)
-     // debugger
-     const accessToken = data.data[tokenName]
-     if (accessToken) {
-       commit('setAccessToken', accessToken)
-       const hour = new Date().getHours()
-       const thisTime =
-         hour < 8
-           ? '早上好'
-           : hour <= 11
-           ? '上午好'
-           : hour <= 13
-           ? '中午好'
-           : hour < 18
-           ? '下午好'
-           : '晚上好'
-       notification.open({
-         message: `欢迎登录${title}`,
-         description: `${thisTime}！`,
-       })
-     } else {
-       message.error(`登录接口异常，未正确返回${tokenName}...`)
-     }
-   },
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用
-    * @param {*} { commit, dispatch, state }
-    * @returns
-    */
-   async getUserInfo({ commit }) {
-     const { data } = await getUserInfo()
-     if (!data) {
-       message.error(`验证失败，请重新登录...`)
-       return false
-     }
-     // debugger
-     commit('setUsername', data.data.realName)
-     commit('setRole', data.data.roleIdList.length)
-     commit('setUserId', data.data.id)
-     // TODO 获取用户信息，后续执行部分操作
-     // let { username, avatar, roles, ability } = data
-     // if (username && roles && Array.isArray(roles)) {
-     //   dispatch('acl/setRole', roles, {
-     //     root: true,
-     //   })
-     //   if (ability && ability.length > 0)
-     //     dispatch('acl/setAbility', ability, {
-     //       root: true,
-     //     })
-     //   commit('setUsername', username)
-     //   commit('setAvatar', avatar)
-     // } else {
-     //   message.error('用户信息接口异常')
-     // }
-   },
+const state = () => ({
+  accessToken: getAccessToken(),
+  username: '',
+  userId: '',
+  avatar: '',
+  role: 0, // 用户管理员权限
+})
+const getters = {
+  accessToken: (state) => state.accessToken,
+  username: (state) => state.username,
+  avatar: (state) => state.avatar,
+  role: (state) => state.role,
+  userId: (state) => state.userId,
+}
+const mutations = {
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 设置accessToken
+   * @param {*} state
+   * @param {*} accessToken
+   */
+  setAccessToken(state, accessToken) {
+    state.accessToken = accessToken
+    setAccessToken(accessToken)
+  },
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 设置用户名
+   * @param {*} state
+   * @param {*} username
+   */
+  setUsername(state, username) {
+    state.username = username
+  },
+  // 设置角色
+  setRole(state, role) {
+    state.role = role
+  },
+  // 设置用户userId
+  setUserId(state, id) {
+    state.userId = id
+  },
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 设置头像
+   * @param {*} state
+   * @param {*} avatar
+   */
+  setAvatar(state, avatar) {
+    state.avatar = avatar
+  },
+}
+const actions = {
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 登录拦截放行时，设置虚拟角色
+   * @param {*} { commit, dispatch }
+   */
+  setVirtualRoles({ commit, dispatch }) {
+    dispatch('acl/setFull', true, {
+      root: true,
+    })
+    commit('setAvatar', 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif')
+    commit('setUsername', 'admin(未开启登录拦截)')
+  },
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 登录
+   * @param {*} { commit }
+   * @param {*} userInfo
+   */
+  async login({ commit }, userInfo) {
+    const { data } = await login(userInfo)
+    // debugger
+    const accessToken = data.data[tokenName]
+    if (accessToken) {
+      commit('setAccessToken', accessToken)
+      const hour = new Date().getHours()
+      const thisTime =
+        hour < 8
+          ? '早上好'
+          : hour <= 11
+          ? '上午好'
+          : hour <= 13
+          ? '中午好'
+          : hour < 18
+          ? '下午好'
+          : '晚上好'
+      notification.open({
+        message: `欢迎登录${title}`,
+        description: `${thisTime}！`,
+      })
+    } else {
+      message.error(`登录接口异常，未正确返回${tokenName}...`)
+    }
+  },
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用
+   * @param {*} { commit, dispatch, state }
+   * @returns
+   */
+  async getUserInfo({ commit }) {
+    const { data } = await getUserInfo()
+    if (!data) {
+      message.error(`验证失败，请重新登录...`)
+      return false
+    }
+    // debugger
+    commit('setUsername', data.data.realName)
+    commit('setRole', data.data.roleIdList.length)
+    commit('setUserId', data.data.id)
+    // TODO 获取用户信息，后续执行部分操作
+    // let { username, avatar, roles, ability } = data
+    // if (username && roles && Array.isArray(roles)) {
+    //   dispatch('acl/setRole', roles, {
+    //     root: true,
+    //   })
+    //   if (ability && ability.length > 0)
+    //     dispatch('acl/setAbility', ability, {
+    //       root: true,
+    //     })
+    //   commit('setUsername', username)
+    //   commit('setAvatar', avatar)
+    // } else {
+    //   message.error('用户信息接口异常')
+    // }
+  },
 
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 退出登录
-    * @param {*} { dispatch }
-    */
-   async logout({ dispatch }) {
-     await logout(state.accessToken)
-     await dispatch('resetAll')
-   },
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 重置accessToken、roles、ability、router等
-    * @param {*} { commit, dispatch }
-    */
-   async resetAll({ dispatch }) {
-     await dispatch('setAccessToken', '')
-     await dispatch('acl/setFull', false, {
-       root: true,
-     })
-     await dispatch('acl/setRole', [], {
-       root: true,
-     })
-     await dispatch('acl/setAbility', [], {
-       root: true,
-     })
-     removeAccessToken()
-   },
-   /**
-    * @author chuzhixin 1204505056@qq.com
-    * @description 设置token
-    */
-   setAccessToken({ commit }, accessToken) {
-     commit('setAccessToken', accessToken)
-   },
- }
- export default {
-   state,
-   getters,
-   mutations,
-   actions,
- }
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 退出登录
+   * @param {*} { dispatch }
+   */
+  async logout({ dispatch }) {
+    await logout(state.accessToken)
+    await dispatch('resetAll')
+  },
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 重置accessToken、roles、ability、router等
+   * @param {*} { commit, dispatch }
+   */
+  async resetAll({ dispatch }) {
+    await dispatch('setAccessToken', '')
+    await dispatch('acl/setFull', false, {
+      root: true,
+    })
+    await dispatch('acl/setRole', [], {
+      root: true,
+    })
+    await dispatch('acl/setAbility', [], {
+      root: true,
+    })
+    removeAccessToken()
+  },
+  /**
+   * @author chuzhixin 1204505056@qq.com
+   * @description 设置token
+   */
+  setAccessToken({ commit }, accessToken) {
+    commit('setAccessToken', accessToken)
+  },
+}
+export default {
+  state,
+  getters,
+  mutations,
+  actions,
+}
diff --git a/front/src/utils/request.js b/front/src/utils/request.js
index 0f02346e..9134efb2 100644
--- a/front/src/utils/request.js
+++ b/front/src/utils/request.js
@@ -22,7 +22,7 @@ let loadingInstance
  * @param {*} code
  * @param {*} msg
  */
-const handleCode = (code, msg, res) => {
+const handleCode = (code, msg) => {
   debugger
   switch (code) {
     case 401:
@@ -49,7 +49,7 @@ const handleCode = (code, msg, res) => {
       message.error(msg || '接口异常')
       break
     case 302:
-      window.location.href = redirect
+      // window.location.href = redirect
       break
   }
 }
@@ -74,8 +74,7 @@ instance.interceptors.request.use(
   (config) => {
     debugger
     const token = getAccessToken()
-    if (token)
-      config.headers[tokenName] = token
+    if (token) config.headers[tokenName] = token
     if (
       config.data &&
       config.headers['Content-Type'] ===
@@ -105,7 +104,7 @@ instance.interceptors.response.use(
     response['Access-Control-Expose-Headers'] = 'redirect'
     const { code, message } = response.data
     debugger
-    if (code=='0' && response.headers.token) {
+    if (code == '0' && response.headers.token) {
       setAccessToken(response.headers.token)
     } else {
       const token = getAccessToken()
diff --git a/front/src/vab/plugins/permissions.js b/front/src/vab/plugins/permissions.js
index 6139bd4b..d3a7f7ec 100644
--- a/front/src/vab/plugins/permissions.js
+++ b/front/src/vab/plugins/permissions.js
@@ -2,65 +2,65 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-01 17:23:11
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-07-11 16:39:36
+ * @LastEditTime: 2022-07-15 16:36:53
  * @Description: 告诉大家这是什么
  */
 /**
  * @author chuzhixin 1204505056@qq.com
  * @description 路由守卫，目前两种模式：all模式与intelligence模式
  */
- import router from '@/router'
- import store from '@/store'
- import getPageTitle from '@/utils/pageTitle'
- import { getUserInfo } from '@/api/user'
- import {
-   // authentication,
-   loginInterception,
-   // recordRoute,
-   routesWhiteList,
- } from '@/config'
- import { setAccessToken, getAccessToken } from '@/utils/accessToken'
- router.beforeEach(async (to, from, next) => {
-   // debugger
-   // const SSOTOKEN = to.query.SSOToken
-   // if (SSOTOKEN) {
-   //   setAccessToken(SSOTOKEN)
-   // }
-   const token = getAccessToken()
-   console.log('token', token)
-   let hasToken = token || store.getters['user/accessToken']
-   // debugger
-   if (!loginInterception) hasToken = true
-   console.log('hasToken存在巨大问题', hasToken)
-   if (hasToken) {
+import router from '@/router'
+import store from '@/store'
+import getPageTitle from '@/utils/pageTitle'
+import { getUserInfo } from '@/api/user'
+import {
+  // authentication,
+  loginInterception,
+  // recordRoute,
+  routesWhiteList,
+} from '@/config'
+import { getAccessToken } from '@/utils/accessToken'
+router.beforeEach(async (to, from, next) => {
+  // debugger
+  // const SSOTOKEN = to.query.SSOToken
+  // if (SSOTOKEN) {
+  //   setAccessToken(SSOTOKEN)
+  // }
+  const token = getAccessToken()
+  console.log('token', token)
+  let hasToken = token || store.getters['user/accessToken']
+  // debugger
+  if (!loginInterception) hasToken = true
+  console.log('hasToken存在巨大问题', hasToken)
+  if (hasToken) {
     //  setAccessToken(hasToken)
-     await store.dispatch('user/getUserInfo')
-     debugger
-     next()
-   } else {
-     let accessRoutes = []
-     accessRoutes = await store.dispatch('routes/setRoutes')
-     accessRoutes.forEach((item) => {
-       router.addRoute(item)
-     })
-     if (routesWhiteList.indexOf(to.path) !== -1) {
-       next()
-     } else {
+    await store.dispatch('user/getUserInfo')
+    debugger
+    next()
+  } else {
+    let accessRoutes = []
+    accessRoutes = await store.dispatch('routes/setRoutes')
+    accessRoutes.forEach((item) => {
+      router.addRoute(item)
+    })
+    if (routesWhiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
       // 这里是一个单点登录的入口
-      getUserInfo().then(res=>{
+      getUserInfo().then((res) => {
         console.log(res)
         router.replace('/home')
       })
       //  await store.dispatch('user/getUserInfo')
       //   next()
-       // if (recordRoute)
-       //   next({ path: '/login', query: { redirect: to.path }, replace: true })
-       // else next({ path: '/login', replace: true })
+      // if (recordRoute)
+      //   next({ path: '/login', query: { redirect: to.path }, replace: true })
+      // else next({ path: '/login', replace: true })
       //  next()
-       // window.open('http://www.baidu.com', '_self')
-     }
-   }
- })
- router.afterEach((to) => {
-   document.title = getPageTitle(to.meta.title)
- })
+      // window.open('http://www.baidu.com', '_self')
+    }
+  }
+})
+router.afterEach((to) => {
+  document.title = getPageTitle(to.meta.title)
+})
diff --git a/front/src/views/assignCase/components/queryPage.vue b/front/src/views/assignCase/components/queryPage.vue
index 97f3dfa6..0a2f1052 100644
--- a/front/src/views/assignCase/components/queryPage.vue
+++ b/front/src/views/assignCase/components/queryPage.vue
@@ -53,10 +53,7 @@
               v-for="(item, index) in contenBox"
               :key="index"
             >
-              <img
-                :src="item.note1"
-                alt=""
-              />
+              <img :src="item.note1" alt="" />
               <h3>{{ item.name }}</h3>
               <p>
                 发布时间
diff --git a/front/src/views/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index bb7a9b71..23556a21 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -10,159 +10,194 @@
     <!-- 头部基本信息 -->
     <algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
     <!-- 导航 -->
-    <algorithm-navigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
-    </algorithm-navigation>
+    <algorithm-navigation
+      :dataList="dataList.data"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></algorithm-navigation>
     <!-- 关联能力 -->
-    <algorithm-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="algorithm-associated-ability" class="scrollBox"></algorithm-associated-ability>
+    <algorithm-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="algorithm-associated-ability"
+      class="scrollBox"
+    ></algorithm-associated-ability>
     <!-- 算法展示  视频 -->
-    <algorithm-display :dataList="dataList.data" id="algorithm-display" class="scrollBox"></algorithm-display>
+    <algorithm-display
+      :dataList="dataList.data"
+      id="algorithm-display"
+      class="scrollBox"
+    ></algorithm-display>
     <!-- 算法优势 -->
-    <algorithm-advantage :dataList="dataList.data" id="algorithm-advantage" class="scrollBox"></algorithm-advantage>
+    <algorithm-advantage
+      :dataList="dataList.data"
+      id="algorithm-advantage"
+      class="scrollBox"
+    ></algorithm-advantage>
     <!-- 应用场景和应用案例 -->
     <!-- <application-scenarios-and-case
       id="application-scenarios-and-case"
       class="scrollBox"
     ></application-scenarios-and-case> -->
-    <algorithm-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
-    </algorithm-application-scenarios>
-    <algorithm-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
-    </algorithm-application-case>
+    <algorithm-application-scenarios
+      :dataList="dataList.data"
+      id="application-scenarios"
+      class="scrollBox"
+    ></algorithm-application-scenarios>
+    <algorithm-application-case
+      :dataList="dataList.data"
+      id="application-case"
+      class="scrollBox"
+    ></algorithm-application-case>
     <!-- 算法试用 -->
-    <algorithm-on-trial :dataList="dataList.data" id="algorithm-on-trial" class="scrollBox"></algorithm-on-trial>
+    <algorithm-on-trial
+      :dataList="dataList.data"
+      id="algorithm-on-trial"
+      class="scrollBox"
+    ></algorithm-on-trial>
     <!-- 计费标准 -->
-    <algorithm-charging-standard :dataList="dataList.data" id="charging-standard" class="scrollBox">
-    </algorithm-charging-standard>
+    <algorithm-charging-standard
+      :dataList="dataList.data"
+      id="charging-standard"
+      class="scrollBox"
+    ></algorithm-charging-standard>
     <!-- 使用方式 -->
-    <algorithm-usage-mode :dataList="dataList.data" id="usage-mode" class="scrollBox"></algorithm-usage-mode>
+    <algorithm-usage-mode
+      :dataList="dataList.data"
+      id="usage-mode"
+      class="scrollBox"
+    ></algorithm-usage-mode>
     <!-- 常见问题-->
-    <algorithm-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
-    </algorithm-common-problem>
+    <algorithm-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></algorithm-common-problem>
   </div>
 </template>
 <script setup>
-import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
-import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
-import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
-import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
-import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
-import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
-import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
-import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
-import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
-import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
-import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId2,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const loading = ref(true)
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
+  import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
+  import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
+  import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
+  import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
+  import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
+  import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
+  import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
+  import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
+  import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
+  import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const loading = ref(true)
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  console.log(id, '-------------------------------------------------')
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      console.log('初始化详情页=========================>', dataList.data)
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      if (arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    console.log(id, '-------------------------------------------------')
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-      }
-      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[index].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 7eee09d3..367e4087 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -1,179 +1,211 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:32:22
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-30 10:22:31
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-15 16:37:23
  * @Description: 应用详情页
 -->
 <template>
   <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
     <!-- 头部基本信息 -->
-    <application-top-details :dataList="dataList.data"></application-top-details>
+    <application-top-details
+      :dataList="dataList.data"
+    ></application-top-details>
     <!-- 导航 -->
-    <application-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation>
+    <application-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></application-navigation>
     <!-- 关联能力 -->
-    <application-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="application-associated-ability" class="scrollBox"></application-associated-ability>
+    <application-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="application-associated-ability"
+      class="scrollBox"
+    ></application-associated-ability>
     <!-- 应用展示  视频 -->
-    <application-presentation :dataList="dataList.data" id="application-presentation" class="scrollBox">
-    </application-presentation>
+    <application-presentation
+      :dataList="dataList.data"
+      id="application-presentation"
+      class="scrollBox"
+    ></application-presentation>
     <!-- 关联组件 -->
-    <application-associated-components :dataList="dataList.data" id="application-associated-components"
-      class="scrollBox" v-if="false"></application-associated-components>
+    <application-associated-components
+      :dataList="dataList.data"
+      id="application-associated-components"
+      class="scrollBox"
+      v-if="false"
+    ></application-associated-components>
 
     <!-- 功能介绍-->
-    <application-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
-    </application-function-intorduction>
+    <application-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></application-function-intorduction>
     <!-- 使用能力 -->
-    <application-ability-toise :dataList="dataList.data" id="ability-to-use" class="scrollBox">
-    </application-ability-toise>
+    <application-ability-toise
+      :dataList="dataList.data"
+      id="ability-to-use"
+      class="scrollBox"
+    ></application-ability-toise>
     <!-- 部署与安全-->
-    <application-deployment-and-security :dataList="dataList.data" id="deployment-and-security" class="scrollBox">
-    </application-deployment-and-security>
+    <application-deployment-and-security
+      :dataList="dataList.data"
+      id="deployment-and-security"
+      class="scrollBox"
+    ></application-deployment-and-security>
     <!-- 归属部门与服务商-->
-    <application-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
-      class="scrollBox"></application-owning-department-and-service-provider>
+    <application-owning-department-and-service-provider
+      :dataList="dataList.data"
+      id="department-and-service-provider"
+      class="scrollBox"
+    ></application-owning-department-and-service-provider>
     <!-- 常见问题-->
-    <application-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
-    </application-common-problem>
+    <application-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></application-common-problem>
   </div>
 </template>
 <script setup>
-import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
-import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
-import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
-import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
-import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
-import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
-import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
-import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
-import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
-import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
-let loading = ref(true)
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop-50)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
+  import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
+  import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
+  import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
+  import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
+  import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
+  import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
+  import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
+  import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
+  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
+  let loading = ref(true)
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop-50)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      console.log(
-        '初始化详情页=========================>',
-        dataList.data,
-        arrList.value
-      )
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        console.log(
+          '初始化详情页=========================>',
+          dataList.data,
+          arrList.value
+        )
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-        type: item.type,
-      }
-      queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[0].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[0].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-const associatedComponentsFunction = () => {
-  if (
-    associatedComponents.value[0].dataList.length > 0 ||
-    associatedComponents.value[1].dataList.length > 0 ||
-    associatedComponents.value[2].dataList.length > 0
-  ) {
-    return associatedComponents.value
-  }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  // const associatedComponentsFunction = () => {
+  //   if (
+  //     associatedComponents.value[0].dataList.length > 0 ||
+  //     associatedComponents.value[1].dataList.length > 0 ||
+  //     associatedComponents.value[2].dataList.length > 0
+  //   ) {
+  //     return associatedComponents.value
+  //   }
+  // }
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/BusinessDetails.vue b/front/src/views/detailsAll/BusinessDetails.vue
index cb14bfd2..8138d495 100644
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@@ -10,149 +10,177 @@
     <!-- 头部基本信息 -->
     <business-top-details :dataList="dataList.data"></business-top-details>
     <!-- 导航 -->
-    <business-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></business-navigation>
+    <business-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></business-navigation>
     <!-- 关联能力 -->
-    <business-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="business-associated-ability" class="scrollBox"></business-associated-ability>
+    <business-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="business-associated-ability"
+      class="scrollBox"
+    ></business-associated-ability>
     <!-- 组件展示 -->
-    <business-presentation :dataList="dataList.data" id="business-presentation" class="scrollBox">
-    </business-presentation>
+    <business-presentation
+      :dataList="dataList.data"
+      id="business-presentation"
+      class="scrollBox"
+    ></business-presentation>
     <!-- 功能介绍-->
-    <business-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
-    </business-function-intorduction>
+    <business-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></business-function-intorduction>
     <!-- 应用场景 -->
-    <business-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
-    </business-application-scenarios>
+    <business-application-scenarios
+      :dataList="dataList.data"
+      id="application-scenarios"
+      class="scrollBox"
+    ></business-application-scenarios>
     <!-- 应用案例 -->
-    <business-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
-    </business-application-case>
+    <business-application-case
+      :dataList="dataList.data"
+      id="application-case"
+      class="scrollBox"
+    ></business-application-case>
     <!-- 使用方式 -->
-    <business-usage-mode :dataList="dataList.data" id="business-usage-mode" class="scrollBox"></business-usage-mode>
+    <business-usage-mode
+      :dataList="dataList.data"
+      id="business-usage-mode"
+      class="scrollBox"
+    ></business-usage-mode>
     <!-- 常见问题-->
-    <business-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox"></business-common-problem>
+    <business-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></business-common-problem>
   </div>
 </template>
 <script setup>
-import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
-import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
-import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
-import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
-import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
-import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
-import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
-import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
-import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId2,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-let loading = ref(true)
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
+  import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
+  import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
+  import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
+  import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
+  import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
+  import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
+  import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
+  import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      console.log('初始化详情页=========================>', dataList.data)
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-      }
-      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[index].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/DeveloperComponents.vue b/front/src/views/detailsAll/DeveloperComponents.vue
index be9c7f40..eb4d145d 100644
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:32:22
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-20 18:59:01
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-15 16:38:44
  * @Description: 开发组件详情页
 -->
 <template>
@@ -10,157 +10,187 @@
     <!-- 头部基本信息 -->
     <developer-top-details :dataList="dataList.data"></developer-top-details>
     <!-- 导航 -->
-    <developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation>
+    <developer-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponentsFunction()"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></developer-navigation>
     <!-- 关联能力 -->
-    <developer-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="developer-associated-ability" class="scrollBox"></developer-associated-ability>
+    <developer-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="developer-associated-ability"
+      class="scrollBox"
+    ></developer-associated-ability>
     <!-- 组件展示  视频 -->
-    <Developer-presentation :dataList="dataList.data" id="eveloper-presentation" class="scrollBox">
-    </Developer-presentation>
+    <Developer-presentation
+      :dataList="dataList.data"
+      id="eveloper-presentation"
+      class="scrollBox"
+    ></Developer-presentation>
     <!-- 功能介绍-->
-    <developer-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
-    </developer-function-intorduction>
+    <developer-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></developer-function-intorduction>
     <!-- 应用场景 -->
-    <developer-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
-    </developer-application-scenarios>
+    <developer-application-scenarios
+      :dataList="dataList.data"
+      id="application-scenarios"
+      class="scrollBox"
+    ></developer-application-scenarios>
     <!-- 应用案例 -->
-    <developer-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
-    </developer-application-case>
+    <developer-application-case
+      :dataList="dataList.data"
+      id="application-case"
+      class="scrollBox"
+    ></developer-application-case>
     <!-- 组件试用 -->
-    <developer-trial :dataList="dataList.data" id="developer-trial" class="scrollBox"></developer-trial>
+    <developer-trial
+      :dataList="dataList.data"
+      id="developer-trial"
+      class="scrollBox"
+    ></developer-trial>
     <!-- 归属部门与服务商-->
-    <developer-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
-      class="scrollBox"></developer-owning-department-and-service-provider>
+    <developer-owning-department-and-service-provider
+      :dataList="dataList.data"
+      id="department-and-service-provider"
+      class="scrollBox"
+    ></developer-owning-department-and-service-provider>
     <!-- 常见问题-->
-    <developer-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
-    </developer-common-problem>
+    <developer-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></developer-common-problem>
   </div>
 </template>
 <script setup>
-import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
-import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
-import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
-import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
-import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
-import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
-import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
-import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
-import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
-import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId2,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-let loading = ref(true)
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
+  import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
+  import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
+  import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
+  import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
+  import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
+  import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
+  import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
+  import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
+  import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
   })
-})
-const init = (id) => {
-  if (id) {
-    let queryPartAppByKeyIdParams = {
-      keyId: id,
-    }
-    queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-      associatedComponents.value[0].dataList = res.data.data
-      loading.value = false
-    })
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      console.log('初始化详情页=========================>', dataList.data)
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
-        }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
-        })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
       }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
-      })
     })
-    associatedComponents.value.map((item, index) => { })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+  })
+  const init = (id) => {
+    if (id) {
+      let queryPartAppByKeyIdParams = {
+        keyId: id,
+      }
+      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+        associatedComponents.value[0].dataList = res.data.data
+        loading.value = false
+      })
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
+        }).then(() => {
+          console.log('浏览记录+1')
+        })
+      })
+      associatedComponents.value.map(() => {})
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-init(id)
-const associatedComponentsFunction = () => {
-  if (associatedComponents.value[0].dataList.length > 0) {
-    return associatedComponents.value
+  init(id)
+  const associatedComponentsFunction = () => {
+    if (associatedComponents.value[0].dataList.length > 0) {
+      return associatedComponents.value
+    }
   }
-}
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/LayerService.vue b/front/src/views/detailsAll/LayerService.vue
index 6228798c..b6dbe86b 100644
--- a/front/src/views/detailsAll/LayerService.vue
+++ b/front/src/views/detailsAll/LayerService.vue
@@ -8,156 +8,188 @@
 <template>
   <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
     <!-- 头部基本信息 -->
-    <layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
+    <layer-service-top-details
+      :dataList="dataList.data"
+    ></layer-service-top-details>
     <!-- 导航 -->
-    <layer-service-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></layer-service-navigation>
+    <layer-service-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></layer-service-navigation>
     <!-- 关联能力 -->
-    <layer-service-associated-ability :associatedComponents="associatedComponents" id="layer-service-associated-ability"
-      class="scrollBox" v-if="!loading"></layer-service-associated-ability>
+    <layer-service-associated-ability
+      :associatedComponents="associatedComponents"
+      id="layer-service-associated-ability"
+      class="scrollBox"
+      v-if="!loading"
+    ></layer-service-associated-ability>
     <!-- 图层展示  视频 -->
-    <layer-service-presentation :dataList="dataList.data" id="service-presentation" class="scrollBox">
-    </layer-service-presentation>
+    <layer-service-presentation
+      :dataList="dataList.data"
+      id="service-presentation"
+      class="scrollBox"
+    ></layer-service-presentation>
     <!-- 图层信息-->
-    <layer-service-information :dataList="dataList.data" id="service-information" class="scrollBox">
-    </layer-service-information>
+    <layer-service-information
+      :dataList="dataList.data"
+      id="service-information"
+      class="scrollBox"
+    ></layer-service-information>
     <!-- 应用场景 -->
-    <layer-service-application-scenarios :dataList="dataList.data" id="service-application-scenarios" class="scrollBox">
-    </layer-service-application-scenarios>
+    <layer-service-application-scenarios
+      :dataList="dataList.data"
+      id="service-application-scenarios"
+      class="scrollBox"
+    ></layer-service-application-scenarios>
     <!-- 应用案例 -->
-    <layer-service-application-case :dataList="dataList.data" id="service-application-case" class="scrollBox">
-    </layer-service-application-case>
+    <layer-service-application-case
+      :dataList="dataList.data"
+      id="service-application-case"
+      class="scrollBox"
+    ></layer-service-application-case>
     <!-- 图层预览 -->
-    <layer-service-preview :dataList="dataList.data" id="service-preview" class="scrollBox"></layer-service-preview>
+    <layer-service-preview
+      :dataList="dataList.data"
+      id="service-preview"
+      class="scrollBox"
+    ></layer-service-preview>
     <!-- 使用方式-->
-    <layer-service-usage-mode :dataList="dataList.data" id="service-usage-mode" class="scrollBox">
-    </layer-service-usage-mode>
+    <layer-service-usage-mode
+      :dataList="dataList.data"
+      id="service-usage-mode"
+      class="scrollBox"
+    ></layer-service-usage-mode>
     <!-- 常见问题-->
-    <layer-service-common-problem :dataList="dataList.data" id="service-common-problem" class="scrollBox">
-    </layer-service-common-problem>
+    <layer-service-common-problem
+      :dataList="dataList.data"
+      id="service-common-problem"
+      class="scrollBox"
+    ></layer-service-common-problem>
   </div>
 </template>
 <script setup>
-import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
-import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
-import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
-import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
-import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
-import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
-import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
-import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
-import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
-import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId2,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-let loading = ref(true)
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
+  import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
+  import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
+  import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
+  import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
+  import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
+  import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
+  import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
+  import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
+  import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      console.log('初始化详情页=========================>', dataList.data)
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-      }
-      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[index].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
index 3e97e58d..a6703a1b 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
@@ -92,7 +92,7 @@
         align-items: center;
         .item {
           width: 424px;
-          height:306px;
+          height: 306px;
           padding: 35px;
           display: flex;
           flex-direction: column;
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
index e114c8fa..d5457892 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
@@ -38,7 +38,9 @@
     () => props.dataList,
     (val) => {
       if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '试用地址' && item.attrValue)[0]
+        let obj = val.infoList.filter(
+          (item) => item.attrType === '试用地址' && item.attrValue
+        )[0]
         if (!obj) {
           flag.value = false
         } else {
diff --git a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
index ee1d8057..8110e34e 100644
--- a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
+++ b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
@@ -73,7 +73,7 @@
 </template>
 <script setup>
   import { ref, onMounted } from 'vue'
-  import { paddleocr,algo } from '@/api/file'
+  import { algo } from '@/api/file'
   import { message } from 'ant-design-vue'
   import { useRouter } from 'vue-router'
   const router = useRouter()
@@ -85,10 +85,12 @@
   const imageResult1 = ref('')
   const menuOpenKeys2 = ref(['全文还原'])
   // 图片初始化
-  let responseUrl = ref('static/image/' + router.currentRoute.value.query.exampleImg)
+  let responseUrl = ref(
+    'static/image/' + router.currentRoute.value.query.exampleImg
+  )
   const imgType = router.currentRoute.value.query.exampleImg.split('.')[1]
   const handleChange = (info) => {
-    debugger;
+    debugger
     if (info.file.status !== 'uploading') {
       console.log(info.file, info.fileList)
     }
@@ -111,7 +113,7 @@
         company: router.currentRoute.value.query.company,
         algorithmName: router.currentRoute.value.query.algorithmName,
         data: base64.split('base64,')[1],
-        type: router.currentRoute.value.query.type
+        type: router.currentRoute.value.query.type,
       }
       algo(param).then((res) => {
         // wordValue.value = res.data
diff --git a/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue b/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
index aaab686f..ff40a564 100644
--- a/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
+++ b/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
@@ -43,7 +43,7 @@
 </template>
 <script setup>
   import { ref } from 'vue'
-  import { correct,algo } from '@/api/file'
+  import { algo } from '@/api/file'
   import { useRouter } from 'vue-router'
   const router = useRouter()
   // const keyId = router.currentRoute.value.query.id
@@ -58,7 +58,7 @@
       company: router.currentRoute.value.query.company,
       algorithmName: router.currentRoute.value.query.algorithmName,
       data: wordValue.value,
-      type: router.currentRoute.value.query.type
+      type: router.currentRoute.value.query.type,
     }
     // correct(param).then((res) => {
     //   // wordContent.value = res.data.data
@@ -72,7 +72,7 @@
     //     errorWordContent.value = val.value
     //   })
     // })
-    algo(param).then(res=>{
+    algo(param).then((res) => {
       errorWord.value = res.data.data.text_data
     })
   }
diff --git a/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue b/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
index 026fffab..c4168a11 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
@@ -16,127 +16,125 @@
         </div>
       </div>
     </div>
-    <div v-else class="no-data">
-      暂无数据
-    </div>
+    <div v-else class="no-data">暂无数据</div>
   </div>
 </template>
 
 <script setup>
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-import { ref, defineProps, watch } from 'vue'
-const flag = ref(true)
-let dataFrom = ref([])
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-if (props.dataList.infoList) {
-  let obj = props.dataList.infoList.filter(
-    (item) => item.attrType === '常见问题'
-  )[0]
-  if (!obj) {
-    flag.value = false
-  } else {
-    obj.attrValue = JSON.parse(obj.attrValue)
-    obj.attrValue.map((item) => {
-      let params = {
-        title: item.question,
-        answer: item.answer,
-      }
-      dataFrom.value.push(params)
-    })
-  }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
-      if (!obj) {
-        flag.value = false
-      } else {
-        obj.attrValue = JSON.parse(obj.attrValue)
-        obj.attrValue.map((item) => {
-          let params = {
-            title: item.question,
-            answer: item.answer,
-          }
-          dataFrom.value.push(params)
-        })
-      }
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '常见问题'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      obj.attrValue.map((item) => {
+        let params = {
+          title: item.question,
+          answer: item.answer,
+        }
+        dataFrom.value.push(params)
+      })
     }
   }
-)
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          obj.attrValue.map((item) => {
+            let params = {
+              title: item.question,
+              answer: item.answer,
+            }
+            dataFrom.value.push(params)
+          })
+        }
+      }
+    }
+  )
 </script>
 
 <style lang="less" scoped>
-.cpmmon-problem {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 160px;
-  background: #f7f8fa;
+  .cpmmon-problem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 160px;
+    background: #f7f8fa;
 
-  .content {
-    width: 1300px;
-    margin: 20px 0px;
-    background: #ffffff;
-    padding: 40px;
+    .content {
+      width: 1300px;
+      margin: 20px 0px;
+      background: #ffffff;
+      padding: 40px;
 
-    .content-son {
-      font-size: 20px;
-      margin-bottom: 60px;
+      .content-son {
+        font-size: 20px;
+        margin-bottom: 60px;
 
-      .content-top {
-        display: flex;
-        align-items: center;
-        margin-bottom: 20px;
-        line-height: 20px;
-      }
+        .content-top {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+          line-height: 20px;
+        }
 
-      .content-bottom {
-        display: flex;
-        line-height: 34px;
-        color: #666666;
-      }
+        .content-bottom {
+          display: flex;
+          line-height: 34px;
+          color: #666666;
+        }
 
-      .content-top,
-      .content-bottom {
-        div:last-child {
-          width: calc(100% - 54px);
+        .content-top,
+        .content-bottom {
+          div:last-child {
+            width: calc(100% - 54px);
+          }
+        }
+
+        .top-img {
+          width: 34px;
+          height: 30px;
+          background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
+          background-position: center;
+          background-size: cover;
+          margin-right: 20px;
+        }
+
+        .bottom-img {
+          width: 34px;
+          height: 30px;
+          background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
+          ackground-size: cover;
+          background-position: center;
+          margin-right: 20px;
         }
       }
 
-      .top-img {
-        width: 34px;
-        height: 30px;
-        background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
-        background-position: center;
-        background-size: cover;
-        margin-right: 20px;
-      }
-
-      .bottom-img {
-        width: 34px;
-        height: 30px;
-        background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
-        ackground-size: cover;
-        background-position: center;
-        margin-right: 20px;
+      .content-son:last-child {
+        margin-bottom: 0px;
       }
     }
 
-    .content-son:last-child {
-      margin-bottom: 0px;
+    .no-data {
+      background: transparent !important;
+      color: #212121;
+      text-align: center;
+      padding: 0.5rem 0;
+      font-size: 0.2rem;
     }
   }
-
-  .no-data {
-    background: transparent !important; 
-    color: #212121;
-    text-align: center;
-    padding: 0.5rem 0;
-    font-size: 0.2rem;
-  }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
index eec26ec0..9a241c4d 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
@@ -7,26 +7,42 @@
         <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
       </div>
       <div class="tab">
-        <div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
-          @click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
             tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
-          ">
+          "
+        >
           <a-tooltip>
             <template #title>{{ itemSonTitle.name }}</template>
-            <div class="tab-top" :class="
-              tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
-            ">
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
               {{ itemSonTitle.name }}
             </div>
           </a-tooltip>
-          <div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
         </div>
       </div>
       <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
         <div class="content" v-if="tabindex == itemSonTitle.name">
           <div class="content-left">
             <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
-            <a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></a-image>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
           </div>
           <div class="content-right">
             <div class="content-right-scene">
@@ -44,215 +60,215 @@
 </template>
 
 <script setup>
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-import { ref, defineProps, watch } from 'vue'
-const flag = ref(true)
-let dataFrom = ref([])
-// tab切换方法
-let tabindex = ref('场景说明一')
-//数据初始化
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-if (props.dataList.infoList) {
-  let obj = props.dataList.infoList.filter(
-    (item) => item.attrType === '功能介绍'
-  )[0]
-  if (!obj) {
-    flag.value = false
-  } else {
-    obj.attrValue = JSON.parse(obj.attrValue)
-    dataFrom.value = obj
-    tabindex.value = dataFrom.value.attrValue[0].name
-  }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
-      if (!obj) {
-        flag.value = false
-      } else {
-        obj.attrValue = JSON.parse(obj.attrValue)
-        dataFrom.value = obj
-        tabindex.value = dataFrom.value.attrValue[0].name
-      }
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '功能介绍'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
     }
   }
-)
-//滚动条样式
-function tabIndexClass(index, title, content) {
-  if (title == '功能介绍' && index == 0 && content.length > 6) {
-    return 'tab-son-class'
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '功能介绍' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
   }
-}
-//初始化tab切换（判断标题不同，点击事件的判断变量不同）
-function tabInitialize() {
-  return tabindex.value
-}
-//tab切换点击事件
-function tabSwitch(name) {
-  tabindex.value = name
-  return tabindex.value
-}
 </script>
 
 <style lang="less" scoped>
-.function-intorduction {
-  width: 100%;
-  background: #f7f8fa;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow-x: unset;
-
-  .application-scenarios-and-case-son {
-    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+  .function-intorduction {
+    width: 100%;
+    background: #f7f8fa;
     display: flex;
     flex-direction: column;
     align-items: center;
-    overflow: unset;
+    overflow-x: unset;
 
-    .tab {
-      max-width: 13rem;
-      overflow-x: auto;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
       display: flex;
-      justify-content: center;
-      color: #808080;
-      border-bottom: 0.01rem #e4e6f5 solid;
-      margin-top: 0.45rem;
-      margin-bottom: 0.4rem;
-      cursor: pointer;
-      padding-left: 0.4rem;
-      padding-right: 0.4rem;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
 
-      .tab-son {
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-right: 1rem;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
 
-        .tab-top {
-          min-width: 1.2rem;
-          font-size: 0.24rem;
-          line-height: 0.24rem;
-          margin-bottom: 0.2rem;
-          max-width: 2rem;
-          height: 0.24rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 1rem;
+
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+            max-width: 2rem;
+            height: 0.24rem;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            text-align: center;
+          }
+
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 6.2rem;
+
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+
+        .content-right {
+          width: 6.2rem;
+          height: 3.4rem;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+        }
+
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
           display: -webkit-box;
           overflow: hidden;
-          -webkit-line-clamp: 1;
+          -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
-          text-align: center;
         }
-
-        .tab-top-down {
-          min-width: 1.2rem;
-          color: #526aff;
-          margin-bottom: 0.16rem;
-        }
-
-        .tab-bottom {
-          height: 0.04rem;
-          width: 0.6rem;
-          background: #526aff;
-        }
-      }
-
-      .tab-son-class {
-        margin-left: 4.3rem;
-        margin-bottom: 0.02rem;
-      }
-
-      .tab-son-class-two {
-        margin-left: 2.3rem;
-        margin-bottom: 0.02rem;
-      }
-
-      .tab-son:last-child {
-        margin-right: 0rem;
       }
     }
 
-    .tab::-webkit-scrollbar-thumb {
-      background: rgba(82, 106, 255, 0.4);
-    }
-
-    .content {
-      display: flex;
-      position: relative;
-      width: 100%;
-      min-width: 13rem;
-      height: 3.4rem;
-
-      .content-left {
-        position: absolute;
-        left: 0;
-        min-width: 6.2rem;
-
-        :deep(.ant-image-img) {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-
-        // text-align: center;
-        .content-top {
-          text-align: left;
-        }
-      }
-
-      .content-right {
-        width: 6.2rem;
-        height: 3.4rem;
-        position: absolute;
-        right: 0;
-        display: flex;
-        justify-content: center;
-      }
-
-      .content-right-scene,
-      .content-right-case {
-        width: 6.2rem;
-        height: 3.4rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      .content-left-scene,
-      .content-left-case {
-        height: 3.4rem;
-        width: 6.35rem;
-        border-radius: 0.1rem;
-        background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
-        background-position: center;
-        background-size: 6.35rem 3.4rem;
-      }
-
-      .content-top {
-        font-size: 0.22rem;
-        line-height: 0.22rem;
-        color: #000000;
-        margin-bottom: 0.35rem;
-      }
-
-      .content-bottom {
-        font-size: 0.18rem;
-        color: #999999;
-        line-height: 0.26rem;
-        display: -webkit-box;
-        overflow: hidden;
-        -webkit-line-clamp: 6;
-        -webkit-box-orient: vertical;
-      }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
     }
   }
-
-  .application-scenarios-and-case-son:first-child {
-    padding-top: 1rem;
-  }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
index 52aaac54..b6e6cd57 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
@@ -8,10 +8,18 @@
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main" :style="`${img}background-position:center;background-size:cover;`">
+    <div
+      class="main"
+      :style="`${img}background-position:center;background-size:cover;`"
+    >
       <div class="play" @click="showModal"></div>
     </div>
-    <a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
+    <a-modal
+      v-model:visible="visible"
+      title="视频预览"
+      :width="750"
+      destroyOnClose
+    >
       <template #footer></template>
       <div style="width: 100%; display: flex; justify-content: center">
         <div style="width: 100%; height: 100%">
@@ -22,106 +30,106 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, defineProps, watch } from 'vue'
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-const visible = ref(false)
-const options = reactive({
-  width: '7.00rem', //播放器宽度
-  height: '4.00rem', //播放器高度
-  color: '#409eff', //主题色
-  title: '', //视频名称
-  src: '', //视频源
-  muted: false, //静音
-  webFullScreen: false,
-  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-  autoPlay: true, //自动播放
-  loop: false, //循环播放
-  mirror: false, //镜像画面
-  ligthOff: false, //关灯模式
-  volume: 0.3, //默认音量大小
-  control: true, //是否显示控制
-  controlBtns: [
-    'audioTrack',
-    'quality',
-    'speedRate',
-    'volume',
-    'setting',
-    'pip',
-    'pageFullScreen',
-    'fullScreen',
-  ], //显示所有按钮,
-})
-const showModal = () => {
-  visible.value = true
-}
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-const flag = ref(true)
-const img = ref({})
-console.log('111111111111111111111,', props.dataList)
-if (props.dataList.infoList) {
-  let obj = props.dataList.infoList.filter(
-    (item) => item.attrType === '应用展示视频'
-  )[0]
-  console.log('视频==============>', obj)
-  if (!obj) {
-    flag.value = false
-  } else {
-    let imgindex = props.dataList.infoList.filter(
-      (item) => item.attrType === '应用图片'
-    )[0]
-    options.src = obj.attrValue
-    if (imgindex) {
-      img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
-    }
+  import { ref, reactive, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const visible = ref(false)
+  const options = reactive({
+    width: '7.00rem', //播放器宽度
+    height: '4.00rem', //播放器高度
+    color: '#409eff', //主题色
+    title: '', //视频名称
+    src: '', //视频源
+    muted: false, //静音
+    webFullScreen: false,
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    autoPlay: true, //自动播放
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制
+    controlBtns: [
+      'audioTrack',
+      'quality',
+      'speedRate',
+      'volume',
+      'setting',
+      'pip',
+      'pageFullScreen',
+      'fullScreen',
+    ], //显示所有按钮,
+  })
+  const showModal = () => {
+    visible.value = true
   }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      let obj = val.infoList.filter(
-        (item) => item.attrType === '应用展示视频'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  const img = ref({})
+  console.log('111111111111111111111,', props.dataList)
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用展示视频'
+    )[0]
+    console.log('视频==============>', obj)
+    if (!obj) {
+      flag.value = false
+    } else {
+      let imgindex = props.dataList.infoList.filter(
+        (item) => item.attrType === '应用图片'
       )[0]
-      console.log('视频==============>', obj)
-      if (!obj) {
-        flag.value = false
-      } else {
-        let imgindex = props.dataList.infoList.filter(
-          (item) => item.attrType === '应用图片'
-        )[0]
-        options.src = obj.attrValue
-        if (imgindex) {
-          img.value =
-            'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
-        }
+      options.src = obj.attrValue
+      if (imgindex) {
+        img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
       }
     }
   }
-)
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter(
+          (item) => item.attrType === '应用展示视频'
+        )[0]
+        console.log('视频==============>', obj)
+        if (!obj) {
+          flag.value = false
+        } else {
+          let imgindex = props.dataList.infoList.filter(
+            (item) => item.attrType === '应用图片'
+          )[0]
+          options.src = obj.attrValue
+          if (imgindex) {
+            img.value =
+              'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+          }
+        }
+      }
+    }
+  )
 </script>
 <style lang="less" scoped>
-.application-presentation {
-  padding: 0.8rem 3rem 0;
+  .application-presentation {
+    padding: 0.8rem 3rem 0;
 
-  .main {
-    height: 3.4rem;
-    border-radius: 0.1rem;
-    background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
-    background-size: 100%;
-    margin-top: 0.4rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .play {
-      width: 0.96rem;
-      height: 0.96rem;
-      background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
+    .main {
+      height: 3.4rem;
+      border-radius: 0.1rem;
+      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
       background-size: 100%;
-      cursor: pointer;
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .play {
+        width: 0.96rem;
+        height: 0.96rem;
+        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
+        background-size: 100%;
+        cursor: pointer;
+      }
     }
   }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
index 94557648..fa51553b 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
@@ -53,7 +53,11 @@
           加入购物车
         </a-button> -->
         <!-- 融合服务 存在fuseResourceList -->
-        <a-button type="primary" @click="handleAKeyApplication()" v-if="dataList.fuseResourceList">
+        <a-button
+          type="primary"
+          @click="handleAKeyApplication()"
+          v-if="dataList.fuseResourceList"
+        >
           <template #icon>
             <form-outlined />
           </template>
@@ -66,223 +70,220 @@
   </div>
 </template>
 <script setup>
-// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
-import { defineProps, ref, watch } from 'vue'
-import { scInsert } from '@/api/personalCenter'
-// import { sgcInsert } from '@/api/home'
-// import { useRouter } from 'vue-router'
-// import mybus from '@/myplugins/mybus'
-import { message } from 'ant-design-vue'
-import { useRouter } from 'vue-router'
-// 获取当前路由地址
-const router = useRouter()
+  // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+  import { defineProps, ref, watch } from 'vue'
+  import { scInsert } from '@/api/personalCenter'
+  // import { sgcInsert } from '@/api/home'
+  // import { useRouter } from 'vue-router'
+  // import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  import { useRouter } from 'vue-router'
+  // 获取当前路由地址
+  const router = useRouter()
 
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-
-console.log('dataList------------>', props.dataList);
-
-// const router = useRouter()
-const applicationArea = ref('')
-// // 加入申购车
-// const addShoppingCart = () => {
-//   console.log('加入申购车==================>', props.dataList)
-//   sgcInsert({
-//     delFlag: '0',
-//     resourceId: props.dataList.id,
-//     // userId: userId.value,
-//   }).then((res) => {
-//     console.log(res)
-//     message.success('添加申购车成功！')
-//     mybus.emit('getSgcNum')
-//   })
-// }
-// // 立即申请
-// function toView() {
-//   // window.open(newpage.href, '_blank')
-//   router.push({
-//     path: '/apply',
-//     query: {
-//       name: props.dataList.name,
-//       resourceId: [props.dataList.id],
-//     },
-//   })
-// }
-// 融合服务--一键申请
-const handleAKeyApplication = () => {
-  let _applyList = [];
-  (props.dataList.fuseResourceList || []).map(v => {
-    let resource = v.resource || {}
-    let obj = {
-      arr: [
-        {
-          delFlag: resource.delFlag,
-          description: resource.description,
-          resourceId: resource.id,
-          resourceName: resource.name,
-          time: resource.createDate,
-          type: resource.type,
-        },
-      ],
-      deptId: resource.deptId,
-      deptName: resource.deptName,
-    }
-    _applyList.push(obj)
+  const props = defineProps({
+    dataList: { type: Object, default: null },
   })
 
-  localStorage.setItem(
-    'applyList',
-    JSON.stringify(_applyList)
-  )
-  router.push({
-    path: '/apply',
-  })
-}
+  console.log('dataList------------>', props.dataList)
 
-// 收藏
-const goTOCollection = () => {
-  console.log('收藏===================》', props.dataList)
-  scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-    console.log(res)
-    message.success('收藏成功')
-  })
-}
-if (props.dataList.infoList) {
-  applicationArea.value = props.dataList.infoList.filter(
-    (val) => val.attrType === '应用领域'
-  )[0].attrValue
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      console.log('props.dataList-----watch------->', val);
+  // const router = useRouter()
+  const applicationArea = ref('')
+  // // 加入申购车
+  // const addShoppingCart = () => {
+  //   console.log('加入申购车==================>', props.dataList)
+  //   sgcInsert({
+  //     delFlag: '0',
+  //     resourceId: props.dataList.id,
+  //     // userId: userId.value,
+  //   }).then((res) => {
+  //     console.log(res)
+  //     message.success('添加申购车成功！')
+  //     mybus.emit('getSgcNum')
+  //   })
+  // }
+  // // 立即申请
+  // function toView() {
+  //   // window.open(newpage.href, '_blank')
+  //   router.push({
+  //     path: '/apply',
+  //     query: {
+  //       name: props.dataList.name,
+  //       resourceId: [props.dataList.id],
+  //     },
+  //   })
+  // }
+  // 融合服务--一键申请
+  const handleAKeyApplication = () => {
+    let _applyList = []
+    ;(props.dataList.fuseResourceList || []).map((v) => {
+      let resource = v.resource || {}
+      let obj = {
+        arr: [
+          {
+            delFlag: resource.delFlag,
+            description: resource.description,
+            resourceId: resource.id,
+            resourceName: resource.name,
+            time: resource.createDate,
+            type: resource.type,
+          },
+        ],
+        deptId: resource.deptId,
+        deptName: resource.deptName,
+      }
+      _applyList.push(obj)
+    })
 
-      applicationArea.value = props.dataList.infoList.filter(
-        (val) => val.attrType === '应用领域'
-      )[0].attrValue
-    }
+    localStorage.setItem('applyList', JSON.stringify(_applyList))
+    router.push({
+      path: '/apply',
+    })
   }
-)
+
+  // 收藏
+  const goTOCollection = () => {
+    console.log('收藏===================》', props.dataList)
+    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+      console.log(res)
+      message.success('收藏成功')
+    })
+  }
+  if (props.dataList.infoList) {
+    applicationArea.value = props.dataList.infoList.filter(
+      (val) => val.attrType === '应用领域'
+    )[0].attrValue
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        console.log('props.dataList-----watch------->', val)
+
+        applicationArea.value = props.dataList.infoList.filter(
+          (val) => val.attrType === '应用领域'
+        )[0].attrValue
+      }
+    }
+  )
 </script>
 <style lang="less" scoped>
-.algorithm-top-details {
-  height: 6rem;
-  padding: 1.8rem 0 0;
-  background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
-  background-size: 100%;
-  display: flex;
-  justify-content: center;
-
-  .left {
-    max-width: 7.2rem;
-    color: #fff;
-    margin-right: 0.8rem;
-
-    .top {
-      display: flex;
-      align-items: center;
-
-      span {
-        font-size: 0.14rem;
-      }
-
-      .name {
-        // max-width: 3.3rem;
-        // overflow: hidden;
-        // text-overflow: ellipsis;
-        // white-space: nowrap;
-        font-size: 0.4rem;
-        margin-right: 0.2rem;
-        font-size: 0.4rem;
-        margin-right: 0.2rem;
-        max-width: 7rem;
-        text-overflow: -o-ellipsis-lastline;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-      }
-
-      .label-content {
-        position: relative;
-      }
-
-      .lable-father {
-        position: absolute;
-        min-width: 3.5rem;
-        right: -3.5rem;
-        top: 0;
-      }
-
-      .label {
-        padding: 0.01rem 0.1rem;
-        margin-right: 0.1rem;
-        border-radius: 0.13rem;
-        background: rgba(255, 255, 255, 0.4);
-      }
-    }
-
-    .main {
-      margin-top: 0.2rem;
-      font-size: 0.18rem;
-      line-height: 0.34rem;
-
-      &>div:nth-of-type(1) {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      &>div:nth-of-type(2) {
-        max-height: 1rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-      }
-    }
-
-    .bottom {
-      margin-top: 0.4rem;
-      display: flex;
-
-      .ant-btn {
-        height: 0.5rem;
-        margin-right: 0.2rem;
-        background: #ff8b55;
-        border-radius: 0.06rem;
-        font-size: 0.2rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .ant-btn:nth-of-type(1) {
-        width: 1.8rem;
-      }
-
-      .ant-btn:nth-of-type(2) {
-        width: 2.2rem;
-      }
-
-      .ant-btn:nth-of-type(3) {
-        width: 1.45rem;
-        background: #fff;
-        color: #526aff;
-      }
-    }
-  }
-
-  .right {
-    width: 5.8rem;
-    height: 4rem;
-    background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
+  .algorithm-top-details {
+    height: 6rem;
+    padding: 1.8rem 0 0;
+    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
     background-size: 100%;
-    margin-top: -0.4rem;
+    display: flex;
+    justify-content: center;
+
+    .left {
+      max-width: 7.2rem;
+      color: #fff;
+      margin-right: 0.8rem;
+
+      .top {
+        display: flex;
+        align-items: center;
+
+        span {
+          font-size: 0.14rem;
+        }
+
+        .name {
+          // max-width: 3.3rem;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          // white-space: nowrap;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+          max-width: 7rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+        }
+
+        .label-content {
+          position: relative;
+        }
+
+        .lable-father {
+          position: absolute;
+          min-width: 3.5rem;
+          right: -3.5rem;
+          top: 0;
+        }
+
+        .label {
+          padding: 0.01rem 0.1rem;
+          margin-right: 0.1rem;
+          border-radius: 0.13rem;
+          background: rgba(255, 255, 255, 0.4);
+        }
+      }
+
+      .main {
+        margin-top: 0.2rem;
+        font-size: 0.18rem;
+        line-height: 0.34rem;
+
+        & > div:nth-of-type(1) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        & > div:nth-of-type(2) {
+          max-height: 1rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      .bottom {
+        margin-top: 0.4rem;
+        display: flex;
+
+        .ant-btn {
+          height: 0.5rem;
+          margin-right: 0.2rem;
+          background: #ff8b55;
+          border-radius: 0.06rem;
+          font-size: 0.2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .ant-btn:nth-of-type(1) {
+          width: 1.8rem;
+        }
+
+        .ant-btn:nth-of-type(2) {
+          width: 2.2rem;
+        }
+
+        .ant-btn:nth-of-type(3) {
+          width: 1.45rem;
+          background: #fff;
+          color: #526aff;
+        }
+      }
+    }
+
+    .right {
+      width: 5.8rem;
+      height: 4rem;
+      background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
+      background-size: 100%;
+      margin-top: -0.4rem;
+    }
   }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
index b35ba162..b30ec1a8 100644
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@@ -8,7 +8,12 @@
 <template>
   <div class="business-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
+      <div
+        class="nav"
+        :class="{ select: nav.key == select }"
+        v-if="nav.show"
+        @click="selectNav(nav.key)"
+      >
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -16,217 +21,217 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, watch, getCurrentInstance } from 'vue'
-import { useRouter } from 'vue-router'
-import mybus from '@/myplugins/mybus'
-import { queryPartAppByKeyId2 } from '@/api/home'
-// 获取当前路由地址
-const router = useRouter()
-const keyId = router.currentRoute.value.query.id
-const navList = ref([
-  {
-    name: '组件展示',
-    key: 'business-presentation',
-  },
-  {
-    name: '功能介绍',
-    key: 'function-introduction',
-  },
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
+  import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
+  const navList = ref([
+    {
+      name: '组件展示',
+      key: 'business-presentation',
+    },
+    {
+      name: '功能介绍',
+      key: 'function-introduction',
+    },
 
-  {
-    name: '应用场景',
-    key: 'application-scenarios',
-  },
-  {
-    name: '应用案例',
-    key: 'application-case',
-  },
-  {
-    name: '使用方式',
-    key: 'business-usage-mode',
-  },
-  {
-    name: '常见问题',
-    key: 'common-problem',
-  },
-])
-const props = defineProps({
-  associatedComponents: { type: Array, default: null },
-  selectNow: { type: String, default: '' },
-  dataList: { type: Object, default: null },
-})
-const select = ref('business-associated-ability')
-const list = ref([])
-// 根据能力id查询是否存在关联应用
-if (keyId) {
-  queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
-    console.log('ressssssss', res)
-    if (res.data.data.length > 0) {
-      // 存在关联应用时在导航栏加入关联应用
-      navList.value.unshift({
-        name: '关联应用',
-        key: 'business-associated-ability',
-        show: true,
-      })
-      // list.value.push('关联应用')
-      console.log('navList', navList)
-    }
+    {
+      name: '应用场景',
+      key: 'application-scenarios',
+    },
+    {
+      name: '应用案例',
+      key: 'application-case',
+    },
+    {
+      name: '使用方式',
+      key: 'business-usage-mode',
+    },
+    {
+      name: '常见问题',
+      key: 'common-problem',
+    },
+  ])
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+    selectNow: { type: String, default: '' },
+    dataList: { type: Object, default: null },
   })
-}
-const selectNav = (key) => {
-  select.value = key
-  console.log(key, select.value)
-  mybus.emit('flyToView', select.value)
-}
-if (props.dataList.infoList) {
-  list.value = []
-  let arr = [
-    '关联应用',
-    '组件视频介绍',
-    '功能介绍',
-    '应用场景',
-    '应用案例',
-    '使用方式',
-    '常见问题',
-  ]
-  // 排序
-  // eslint-disable-next-line vue/no-mutating-props
-  props.dataList.infoList.sort((a, b) => {
-    return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
-  })
-  props.dataList.infoList.map((item) => {
-    if (
-      item.attrType === '常见问题' ||
-      item.attrType === '功能介绍' ||
-      item.attrType === '应用场景' ||
-      item.attrType === '应用案例'
-    ) {
-      list.value.push(item.attrType)
-    } else if (item.attrType === '组件视频介绍') {
-      list.value.push('组件展示')
-    }
-  })
-  list.value.unshift('关联应用')
-  list.value.push('使用方式')
-  navList.value.forEach((item) => {
-    console.log(item)
-    if (list.value.indexOf(item.name) > -1) {
-      if (item.name == '关联应用') {
-        if (props.associatedComponents[0].dataList.length != 0) {
-          item.show = true
-        }
-      } else {
-        item.show = true
+  const select = ref('business-associated-ability')
+  const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'business-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
       }
-    }
-  })
-  if (list.value.length > 0) {
-    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-      select.value = navList.value.filter(
-        (item) => (item.name === '关联应用') | (item.name === list.value[0])
-      )[0].key
-    }
+    })
   }
-  console.log('11111111111111111111111111', list.value, navList.value)
-}
-watch(
-  () => props.selectNow,
-  (newValue) => {
-    select.value = newValue
+  const selectNav = (key) => {
+    select.value = key
+    console.log(key, select.value)
+    mybus.emit('flyToView', select.value)
   }
-)
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      list.value = []
-      let arr = [
-        '关联应用',
-        '组件视频介绍',
-        '功能介绍',
-        '应用场景',
-        '应用案例',
-        '使用方式',
-        '常见问题',
-      ]
-      // 排序
-      // eslint-disable-next-line vue/no-mutating-props
-      props.dataList.infoList.sort((a, b) => {
-        // console.log('排序==============>', a, b)
-        return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
-      })
-      val.infoList.map((item) => {
-        if (
-          item.attrType === '常见问题' ||
-          item.attrType === '功能介绍' ||
-          item.attrType === '应用场景' ||
-          item.attrType === '应用案例'
-        ) {
-          list.value.push(item.attrType)
-        } else if (item.attrType === '组件视频介绍') {
-          list.value.push('组件展示')
-        }
-      })
-      list.value.unshift('关联应用')
-      list.value.push('使用方式')
-      navList.value.forEach((item) => {
-        console.log(item)
-        if (list.value.indexOf(item.name) > -1) {
-          if (item.name == '关联应用') {
-            if (props.associatedComponents[0].dataList.length != 0) {
-              item.show = true
-            }
-          } else {
+  if (props.dataList.infoList) {
+    list.value = []
+    let arr = [
+      '关联应用',
+      '组件视频介绍',
+      '功能介绍',
+      '应用场景',
+      '应用案例',
+      '使用方式',
+      '常见问题',
+    ]
+    // 排序
+    // eslint-disable-next-line vue/no-mutating-props
+    props.dataList.infoList.sort((a, b) => {
+      return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
+    })
+    props.dataList.infoList.map((item) => {
+      if (
+        item.attrType === '常见问题' ||
+        item.attrType === '功能介绍' ||
+        item.attrType === '应用场景' ||
+        item.attrType === '应用案例'
+      ) {
+        list.value.push(item.attrType)
+      } else if (item.attrType === '组件视频介绍') {
+        list.value.push('组件展示')
+      }
+    })
+    list.value.unshift('关联应用')
+    list.value.push('使用方式')
+    navList.value.forEach((item) => {
+      console.log(item)
+      if (list.value.indexOf(item.name) > -1) {
+        if (item.name == '关联应用') {
+          if (props.associatedComponents[0].dataList.length != 0) {
             item.show = true
           }
-        }
-      })
-      if (list.value.length > 0) {
-        if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-          select.value = navList.value.filter(
-            (item) =>
-              (item.name === '关联应用') | (item.name === list.value[0])
-          )[0].key
+        } else {
+          item.show = true
         }
       }
-      console.log('11111111111111111111111111', list.value, navList.value)
+    })
+    if (list.value.length > 0) {
+      if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+        select.value = navList.value.filter(
+          (item) => (item.name === '关联应用') | (item.name === list.value[0])
+        )[0].key
+      }
     }
+    console.log('11111111111111111111111111', list.value, navList.value)
   }
-)
+  watch(
+    () => props.selectNow,
+    (newValue) => {
+      select.value = newValue
+    }
+  )
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        list.value = []
+        let arr = [
+          '关联应用',
+          '组件视频介绍',
+          '功能介绍',
+          '应用场景',
+          '应用案例',
+          '使用方式',
+          '常见问题',
+        ]
+        // 排序
+        // eslint-disable-next-line vue/no-mutating-props
+        props.dataList.infoList.sort((a, b) => {
+          // console.log('排序==============>', a, b)
+          return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
+        })
+        val.infoList.map((item) => {
+          if (
+            item.attrType === '常见问题' ||
+            item.attrType === '功能介绍' ||
+            item.attrType === '应用场景' ||
+            item.attrType === '应用案例'
+          ) {
+            list.value.push(item.attrType)
+          } else if (item.attrType === '组件视频介绍') {
+            list.value.push('组件展示')
+          }
+        })
+        list.value.unshift('关联应用')
+        list.value.push('使用方式')
+        navList.value.forEach((item) => {
+          console.log(item)
+          if (list.value.indexOf(item.name) > -1) {
+            if (item.name == '关联应用') {
+              if (props.associatedComponents[0].dataList.length != 0) {
+                item.show = true
+              }
+            } else {
+              item.show = true
+            }
+          }
+        })
+        if (list.value.length > 0) {
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+            select.value = navList.value.filter(
+              (item) =>
+                (item.name === '关联应用') | (item.name === list.value[0])
+            )[0].key
+          }
+        }
+        console.log('11111111111111111111111111', list.value, navList.value)
+      }
+    }
+  )
 </script>
 <style lang="less" scoped>
-.business-navigation {
-  width: 19.12rem;
-  height: 0.84rem;
-  line-height: 0.8rem;
-  display: flex;
-  justify-content: space-around;
-  font-size: 0.24rem;
-  color: #666;
-  background: #fff;
-  padding: 0 3rem;
-  box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
-  position: relative;
-
-  .nav {
-    cursor: pointer;
+  .business-navigation {
+    width: 19.12rem;
+    height: 0.84rem;
+    line-height: 0.8rem;
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: space-around;
+    font-size: 0.24rem;
+    color: #666;
+    background: #fff;
+    padding: 0 3rem;
+    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
+    position: relative;
 
-    .line {
-      width: 0.4rem;
-      height: 0.04rem;
+    .nav {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+
+      .line {
+        width: 0.4rem;
+        height: 0.04rem;
+      }
+    }
+
+    .select {
+      color: #526aff;
+
+      .line {
+        background: #526aff;
+      }
     }
   }
-
-  .select {
-    color: #526aff;
-
-    .line {
-      background: #526aff;
-    }
-  }
-}
 </style>
diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index a45cd6ea..92893816 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -10,57 +10,100 @@
     </div>
     <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="resultListSearchInput-father">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
           <div class="hengxian"></div>
         </div>
       </div>
       <div class="top-content-father" :key="listKey">
-        <template v-if="
-          Cardsname == '组件服务' ||
-          Cardsname == '应用资源' ||
-          Cardsname == ''
-        ">
+        <template
+          v-if="
+            Cardsname == '组件服务' ||
+            Cardsname == '应用资源' ||
+            Cardsname == ''
+          "
+        >
           <div class="top-content-son">
-            <div v-for="(item, index) in ListContent.records" :key="index" class="top-content">
+            <div
+              v-for="(item, index) in ListContent.records"
+              :key="index"
+              class="top-content"
+            >
               <span class="top-content-title">
                 {{ item.name }}
               </span>
-              <div class="leixingsumfather" :class="!item.shrinkFlag ? 'shrink' : ''">
-                <div v-for="(item2, index2) in item.typeList" :key="index2" class="leixingsum">
-                  <a-checkable-tag :checked="
-                    item.selectedTags &&
-                    item.selectedTags.indexOf(item2.dict_label) !== -1
-                  " @change="
-  (checked) => handleChange(item2, checked, item.name)
-">
+              <div
+                class="leixingsumfather"
+                :class="!item.shrinkFlag ? 'shrink' : ''"
+              >
+                <div
+                  v-for="(item2, index2) in item.typeList"
+                  :key="index2"
+                  class="leixingsum"
+                >
+                  <a-checkable-tag
+                    :checked="
+                      item.selectedTags &&
+                      item.selectedTags.indexOf(item2.dict_label) !== -1
+                    "
+                    @change="
+                      (checked) => handleChange(item2, checked, item.name)
+                    "
+                  >
                     {{ item2.dict_label }}
                   </a-checkable-tag>
                 </div>
               </div>
-              <div class="shrinkTag" v-if="item.showShrink" :key="item.shrinkFlag">
-                <up-outlined v-show="!item.shrinkFlag" @click="changeShrink(item.name)" />
-                <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
+              <div
+                class="shrinkTag"
+                v-if="item.showShrink"
+                :key="item.shrinkFlag"
+              >
+                <up-outlined
+                  v-show="!item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
+                <down-outlined
+                  v-show="item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
               </div>
             </div>
             <div class="top-content" v-if="Cardsname == '组件服务'">
               <span class="top-content-title">共享条件</span>
               <div class="leixingsumfather">
                 <div class="leixingsum">
-                  <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
+                  <a-checkable-tag
+                    :checked="tagFlag == '申请'"
+                    @change="() => chagneTag('申请')"
+                  >
                     申请
                   </a-checkable-tag>
                 </div>
@@ -77,25 +120,49 @@
           </div>
         </template>
       </div>
-      <searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
-        :resourceList="resourceList" :resourceTotal="resourceTotal" :select-cardsname="Cardsname" />
+      <searchResultList
+        v-show="resourceList.data && resourceList.data.length > 0"
+        :key="listKey2"
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+        :select-cardsname="Cardsname"
+      />
       <div class="pagination">
-        <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-          v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper :total="resourceTotal"
-          :page-size-options="pageSizeOptions" @change="pageChange" @showSizeChange="onShowSizeChange" />
+        <a-pagination
+          v-if="resourceList.data && resourceList.data.length > 0"
+          v-model:current="currentPage"
+          v-model:pageSize="currentPageSize"
+          show-size-changer
+          show-less-items
+          show-quick-jumper
+          :total="resourceTotal"
+          :page-size-options="pageSizeOptions"
+          @change="pageChange"
+          @showSizeChange="onShowSizeChange"
+        />
       </div>
-      <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
+      <div
+        v-if="resourceList.data && resourceList.data.length <= 0"
+        style="margin-top: 2rem"
+      >
         <a-empty />
       </div>
     </div>
     <div class="top" v-else-if="Cardsname === '基础设施'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
@@ -105,24 +172,41 @@
     </div>
     <div class="top" v-else>
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="resultListSearchInput-father" style="background: unset">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
         </div>
       </div>
-      <KnowledgeBase :resourceList="resourceList" :resourceTotal="resourceTotal"></KnowledgeBase>
+      <KnowledgeBase
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></KnowledgeBase>
     </div>
     <div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
@@ -132,18 +216,28 @@
     </div>
   </div>
   <!-- 西海岸 -->
-  <div class="details-pageconetent" v-else-if="whoShow1 && whoShow1.itShowXiHaiAn">
+  <div
+    class="details-pageconetent"
+    v-else-if="whoShow1 && whoShow1.itShowXiHaiAn"
+  >
     <home-header></home-header>
     <div class="details-pageconetent-left">
       <detailsPageconetentTree />
     </div>
     <div class="top" v-if="Cardsname != '知识库'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
@@ -151,46 +245,82 @@
       <div class="resultListSearchInput-father">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
           <div class="hengxian"></div>
         </div>
       </div>
       <!-- 分类 -->
       <div class="top-content-father" :key="listKey">
-        <template v-if="
-          Cardsname == '组件服务' ||
-          Cardsname == '应用资源' ||
-          Cardsname == ''
-        ">
+        <template
+          v-if="
+            Cardsname == '组件服务' ||
+            Cardsname == '应用资源' ||
+            Cardsname == ''
+          "
+        >
           <div class="top-content-son">
-            <div v-for="(item, index) in ListContent.records" :key="index" class="top-content">
+            <div
+              v-for="(item, index) in ListContent.records"
+              :key="index"
+              class="top-content"
+            >
               <span class="top-content-title">
                 {{ item.name }}
               </span>
-              <div class="leixingsumfather" :class="!item.shrinkFlag ? 'shrink' : ''">
-                <div v-for="(item2, index2) in item.typeList" :key="index2" class="leixingsum">
-                  <a-checkable-tag :checked="
-                    item.selectedTags &&
-                    item.selectedTags.indexOf(item2.dict_label) !== -1
-                  " @change="
-  (checked) => handleChange(item2, checked, item.name)
-">
+              <div
+                class="leixingsumfather"
+                :class="!item.shrinkFlag ? 'shrink' : ''"
+              >
+                <div
+                  v-for="(item2, index2) in item.typeList"
+                  :key="index2"
+                  class="leixingsum"
+                >
+                  <a-checkable-tag
+                    :checked="
+                      item.selectedTags &&
+                      item.selectedTags.indexOf(item2.dict_label) !== -1
+                    "
+                    @change="
+                      (checked) => handleChange(item2, checked, item.name)
+                    "
+                  >
                     {{ item2.dict_label }}
                   </a-checkable-tag>
                 </div>
               </div>
-              <div class="shrinkTag" v-if="item.showShrink" :key="item.shrinkFlag">
-                <up-outlined v-show="!item.shrinkFlag" @click="changeShrink(item.name)" />
-                <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
+              <div
+                class="shrinkTag"
+                v-if="item.showShrink"
+                :key="item.shrinkFlag"
+              >
+                <up-outlined
+                  v-show="!item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
+                <down-outlined
+                  v-show="item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
               </div>
             </div>
             <div class="top-content" v-if="Cardsname == '组件服务'">
               <span class="top-content-title">共享条件</span>
               <div class="leixingsumfather">
                 <div class="leixingsum">
-                  <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
+                  <a-checkable-tag
+                    :checked="tagFlag == '申请'"
+                    @change="() => chagneTag('申请')"
+                  >
                     申请
                   </a-checkable-tag>
                 </div>
@@ -208,37 +338,71 @@
         </template>
       </div>
       <!-- 中心内容 -->
-      <searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
-        :resourceList="resourceList" :resourceTotal="resourceTotal" :select-cardsname="Cardsname" />
+      <searchResultList
+        v-show="resourceList.data && resourceList.data.length > 0"
+        :key="listKey2"
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+        :select-cardsname="Cardsname"
+      />
       <!-- 分页 -->
       <div class="pagination">
-        <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-          v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper :total="resourceTotal"
-          :page-size-options="pageSizeOptions" @change="pageChange" @showSizeChange="onShowSizeChange" />
+        <a-pagination
+          v-if="resourceList.data && resourceList.data.length > 0"
+          v-model:current="currentPage"
+          v-model:pageSize="currentPageSize"
+          show-size-changer
+          show-less-items
+          show-quick-jumper
+          :total="resourceTotal"
+          :page-size-options="pageSizeOptions"
+          @change="pageChange"
+          @showSizeChange="onShowSizeChange"
+        />
       </div>
-      <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 200px">
+      <div
+        v-if="resourceList.data && resourceList.data.length <= 0"
+        style="margin-top: 200px"
+      >
         <a-empty />
       </div>
     </div>
     <div class="top" v-else>
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="resultListSearchInput-father" style="background: unset">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
         </div>
       </div>
-      <KnowledgeBase :resourceList="resourceList" :resourceTotal="resourceTotal"></KnowledgeBase>
+      <KnowledgeBase
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></KnowledgeBase>
     </div>
     <div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
@@ -248,64 +412,113 @@
     </div>
   </div>
   <!-- 包头 -->
-  <div class="details-pageconetent" v-else-if="whoShow1 && whoShow1.itShowBaoTou">
+  <div
+    class="details-pageconetent"
+    v-else-if="whoShow1 && whoShow1.itShowBaoTou"
+  >
     <home-header></home-header>
     <div class="details-pageconetent-left">
       <detailsPageconetentTree />
     </div>
     <div class="top" v-if="Cardsname != '知识库' && Cardsname != '数据资源'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
-      <div v-show="Cardsname !== '数据资源'" class="resultListSearchInput-father">
+      <div
+        v-show="Cardsname !== '数据资源'"
+        class="resultListSearchInput-father"
+      >
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
           <div class="hengxian"></div>
         </div>
       </div>
       <div class="top-content-father" :key="listKey">
-        <template v-if="
-          Cardsname == '组件服务' ||
-          Cardsname == '应用资源' ||
-          Cardsname == ''
-        ">
+        <template
+          v-if="
+            Cardsname == '组件服务' ||
+            Cardsname == '应用资源' ||
+            Cardsname == ''
+          "
+        >
           <div class="top-content-son">
-            <div v-for="(item, index) in ListContent.records" :key="index" class="top-content">
+            <div
+              v-for="(item, index) in ListContent.records"
+              :key="index"
+              class="top-content"
+            >
               <span class="top-content-title">
                 {{ item.name }}
               </span>
-              <div class="leixingsumfather" :class="!item.shrinkFlag ? 'shrink' : ''">
-                <div v-for="(item2, index2) in item.typeList" :key="index2" class="leixingsum">
-                  <a-checkable-tag :checked="
-                    item.selectedTags &&
-                    item.selectedTags.indexOf(item2.dict_label) !== -1
-                  " @change="
-  (checked) => handleChange(item2, checked, item.name)
-">
+              <div
+                class="leixingsumfather"
+                :class="!item.shrinkFlag ? 'shrink' : ''"
+              >
+                <div
+                  v-for="(item2, index2) in item.typeList"
+                  :key="index2"
+                  class="leixingsum"
+                >
+                  <a-checkable-tag
+                    :checked="
+                      item.selectedTags &&
+                      item.selectedTags.indexOf(item2.dict_label) !== -1
+                    "
+                    @change="
+                      (checked) => handleChange(item2, checked, item.name)
+                    "
+                  >
                     {{ item2.dict_label }}
                   </a-checkable-tag>
                 </div>
               </div>
-              <div class="shrinkTag" v-if="item.showShrink" :key="item.shrinkFlag">
-                <up-outlined v-show="!item.shrinkFlag" @click="changeShrink(item.name)" />
-                <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
+              <div
+                class="shrinkTag"
+                v-if="item.showShrink"
+                :key="item.shrinkFlag"
+              >
+                <up-outlined
+                  v-show="!item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
+                <down-outlined
+                  v-show="item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
               </div>
             </div>
             <div class="top-content" v-if="Cardsname == '组件服务'">
               <span class="top-content-title">共享条件</span>
               <div class="leixingsumfather">
                 <div class="leixingsum">
-                  <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
+                  <a-checkable-tag
+                    :checked="tagFlag == '申请'"
+                    @change="() => chagneTag('申请')"
+                  >
                     申请
                   </a-checkable-tag>
                 </div>
@@ -322,18 +535,35 @@
           </div>
         </template>
       </div>
-      <searchResultList v-show="resourceList.data && resourceList.data.length" :key="listKey2"
-        :resourceList="resourceList" :resourceTotal="resourceTotal" :select-cardsname="Cardsname" />
+      <searchResultList
+        v-show="resourceList.data && resourceList.data.length"
+        :key="listKey2"
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+        :select-cardsname="Cardsname"
+      />
       <div class="pagination">
-        <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-          v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper :total="resourceTotal"
-          :page-size-options="pageSizeOptions" @change="pageChange" @showSizeChange="onShowSizeChange" />
+        <a-pagination
+          v-if="resourceList.data && resourceList.data.length > 0"
+          v-model:current="currentPage"
+          v-model:pageSize="currentPageSize"
+          show-size-changer
+          show-less-items
+          show-quick-jumper
+          :total="resourceTotal"
+          :page-size-options="pageSizeOptions"
+          @change="pageChange"
+          @showSizeChange="onShowSizeChange"
+        />
       </div>
       <div class="shujuziyuan" v-if="Cardsname == '数据资源'">
         <div class="yunziyuan">
           <div class="yunziyuan-title">
             <div class="tupian"></div>
-            <div class="title" @click="dianjitiaozhaun('青岛市政务资源管理平台')">
+            <div
+              class="title"
+              @click="dianjitiaozhaun('青岛市政务资源管理平台')"
+            >
               青岛市政务资源管理平台{{ dataShowdev }}
             </div>
           </div>
@@ -349,18 +579,28 @@
           </div>
         </div>
       </div>
-      <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
+      <div
+        v-if="resourceList.data && resourceList.data.length <= 0"
+        style="margin-top: 2rem"
+      >
         <a-empty v-if="!(Cardsname == '数据资源')" />
       </div>
     </div>
     <div class="top" v-else-if="Cardsname == '数据资源'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
@@ -368,24 +608,41 @@
     </div>
     <div class="top" v-else>
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="resultListSearchInput-father" style="background: unset">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
         </div>
       </div>
-      <KnowledgeBase :resourceList="resourceList" :resourceTotal="resourceTotal"></KnowledgeBase>
+      <KnowledgeBase
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></KnowledgeBase>
     </div>
     <!--<div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
@@ -397,222 +654,215 @@
   <home-footer></home-footer>
 </template>
 <script>
-import HomeFooter from '@/views/newHome/components/Footer'
-import mybus from '@/myplugins/mybus'
-import {
-  defineComponent,
-  reactive,
-  ref,
-  toRefs,
-  onMounted,
-  watch,
-} from 'vue'
-import {
-  UpOutlined,
-  DownOutlined,
-} from '@ant-design/icons-vue'
-import {
-  selectDicStoreAll,
-  pageWithAttrs,
-  getDataResource,
-  getIntegrationServicesList,
-} from '@/api/home.js'
-import { getSgcList } from '@/api/personalCenter'
-import { useRouter } from 'vue-router'
-import HomeHeader from '@/views/home/components/header'
-import detailsPageconetentTree from '@/views/home/detailsPageconetentTree.vue'
-import searchResultList from '@/views/home/components/searchResultList.vue'
-import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
-// 数据资源引用
-import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
-// 基础设施引用
-import infrastructurePage from '@/views/home/infrastructurePage.vue'
-import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
-import { message } from 'ant-design-vue'
-import { titleNameArray, keyongziyuanqingkaungArray, shujuziyuanqingkuangArray } from './constantData/showData.js'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import mybus from '@/myplugins/mybus'
+  import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+  import {
+    selectDicStoreAll,
+    pageWithAttrs,
+    getDataResource,
+  } from '@/api/home.js'
+  import { getSgcList } from '@/api/personalCenter'
+  import { useRouter } from 'vue-router'
+  import HomeHeader from '@/views/home/components/header'
+  import detailsPageconetentTree from '@/views/home/detailsPageconetentTree.vue'
+  import searchResultList from '@/views/home/components/searchResultList.vue'
+  import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
+  // 数据资源引用
+  import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
+  // 基础设施引用
+  import infrastructurePage from '@/views/home/infrastructurePage.vue'
+  import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
+  // import { message } from 'ant-design-vue'
+  import {
+    titleNameArray,
+    keyongziyuanqingkaungArray,
+    shujuziyuanqingkuangArray,
+  } from './constantData/showData.js'
 
-export default defineComponent({
-  setup() {
-    const titleName = ref(titleNameArray)
+  export default defineComponent({
+    setup() {
+      const titleName = ref(titleNameArray)
 
-    const openMonitor = () => {
-      window.open('http://www.qingdao.gov.cn:8083/ghwd/znwdqd/index.html')
-    }
-    // 模糊查询
-    const keyongziyuanqingkaung = ref(keyongziyuanqingkaungArray)
-    const shujuziyuanqingkuang = ref(shujuziyuanqingkuangArray)
-
-    // 西海岸数据资源页
-    // const dataShowbt = ref(whoShow.itshow)
-    // 青岛数据资源页
-    const whoShow1 = ref(whoShow)
-    // 分页
-    const loading = ref(true)
-    const currentPage = ref(1)
-    const currentPageSize = ref(5)
-    const pageSizeOptions = ref(['5', '10', '20', '50'])
-    const router = useRouter()
-    const select = router.currentRoute.value.query.select
-    const str = router.currentRoute.value.query.str
-    const searchValue = ref(str)
-    let tecHnosphere = router.currentRoute.value.query.tecHnosphere
-    let appLiCation = router.currentRoute.value.query.appLiCation
-    const Cardsname = ref(select)
-    // 刷新筛选条件组件
-    let listKey = ref(0)
-    // 刷新筛选列表信息组件
-    const listKey2 = ref(0)
-    // 储存筛选条件状态
-    const state = reactive({
-      selectedTags: [],
-      diyici: [],
-    })
-    // 查询参数
-    const paramsGetResources = {
-      districtId: '',
-      deptIds: [],
-      pageNum: 1,
-      pageSize: currentPageSize.value,
-      type: Cardsname.value,
-      name: '',
-      infoList: [],
-      orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
-      orderType: 'DESC', // ASC 升序  DESC 降序
-    }
-    
-    // 查询
-    const onSearch = () => {
-      loading.value = true
-      paramsGetResources.name = searchValue.value
-      currentPage.value = 1
-    }
-    // 免批
-    const tagFlag = ref('')
-    // 视频资源
-    const stateTags = ref(['在线', '离线'])
-    const selStateTags = ref([])
-    const handleChangeStateTag = (tag, checked) => {
-      loading.value = true
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      paramsGetResources.infoList = paramsGetResources.infoList.filter(
-        (item) => item.attrType !== 'status'
-      )
-      if (checked) {
-        selStateTags.value = [tag]
-        paramsGetResources.infoList.push({
-          attrType: 'status',
-          attrValue: tag == '在线' ? 1 : 0,
-        })
-      } else {
-        selStateTags.value = selStateTags.value.filter((t) => t !== tag)
+      const openMonitor = () => {
+        window.open('http://www.qingdao.gov.cn:8083/ghwd/znwdqd/index.html')
       }
-      getAppResources()
-      console.log(tag, checked)
-    }
-    const selBqTags = ref([])
-    const handleChangeBqTags = (tag, checked) => {
-      loading.value = true
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      paramsGetResources.infoList = paramsGetResources.infoList.filter(
-        (item) => item.attrType !== 'labelName'
-      )
-      if (checked) {
-        selBqTags.value = [tag]
-        paramsGetResources.infoList.push({
-          attrType: 'labelName',
-          attrValue: tag,
-        })
-      } else {
-        selBqTags.value = selBqTags.value.filter((t) => t !== tag)
-      }
-      getAppResources()
-    }
-    const current = ref(5)
-    const chagneTag = (name) => {
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      if (tagFlag.value == name) {
-        tagFlag.value = ''
-        paramsGetResources.shareCondition = ''
-      } else {
-        tagFlag.value = name
-        paramsGetResources.shareCondition = name
-      }
-      listKey.value++
-      getAppResources()
-    }
+      // 模糊查询
+      const keyongziyuanqingkaung = ref(keyongziyuanqingkaungArray)
+      const shujuziyuanqingkuang = ref(shujuziyuanqingkuangArray)
 
-    // 重置数据
-    const chongzhi = () => {
-      loading.value = true
-      // 重置模糊查字段
-      searchValue.value = ''
-      paramsGetResources.name = searchValue.value
-      // 重置筛选条件
-      ListContent.records.forEach((val) => {
-        val.selectedTags = []
-      })
+      // 西海岸数据资源页
+      // const dataShowbt = ref(whoShow.itshow)
+      // 青岛数据资源页
+      const whoShow1 = ref(whoShow)
       // 分页
-      currentPage.value = 1
-      currentPageSize.value = 5
-      // 重置查询条件
-      paramsGetResources.districtId = ''
-      paramsGetResources.deptIds = []
-      paramsGetResources.pageNum = 1
-      paramsGetResources.pageSize = 5
-      paramsGetResources.name = ''
-      paramsGetResources.shareCondition = ''
-      paramsGetResources.infoList = []
-      paramsGetResources.orderField = 'total'
-      paramsGetResources.orderType = 'DESC'
-      mybus.emit('chongzhi')
-      getAppResources()
-    }
-
-    //跳转链接
-    function dianjitiaozhaun(name) {
-      switch (name) {
-        case '青岛市政务资源管理平台':
-          window.open('http://15.72.158.81/web/root/homepage.aspx')
-          console.log('name', name)
-          break
-        case '青岛市视频资源管理平台':
-          window.open('http://15.72.183.88:8760/yzy/main')
-          console.log('name', name)
-          break
-      }
-    }
-
-    // 点击筛选条件回调
-    const handleChange = (tag, checked, name) => {
-      loading.value = true
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      console.log('点击筛选条件=================>', tag, checked, name)
-      ListContent.records.forEach((val) => {
-        if (val.name === name) {
-          paramsGetResources.infoList = paramsGetResources.infoList.filter(
-            (item) => item.attrType !== name
-          )
-          if (val.selectedTags.indexOf(tag.dict_label) == -1) {
-            val.selectedTags = [tag.dict_label]
-            paramsGetResources.infoList.push({
-              attrType: name,
-              attrValue: tag.dict_label,
-            })
-          } else {
-            val.selectedTags.splice(
-              val.selectedTags.indexOf(tag.dict_label),
-              1
-            )
-          }
-        }
+      const loading = ref(true)
+      const currentPage = ref(1)
+      const currentPageSize = ref(5)
+      const pageSizeOptions = ref(['5', '10', '20', '50'])
+      const router = useRouter()
+      const select = router.currentRoute.value.query.select
+      const str = router.currentRoute.value.query.str
+      const searchValue = ref(str)
+      let tecHnosphere = router.currentRoute.value.query.tecHnosphere
+      let appLiCation = router.currentRoute.value.query.appLiCation
+      const Cardsname = ref(select)
+      // 刷新筛选条件组件
+      let listKey = ref(0)
+      // 刷新筛选列表信息组件
+      const listKey2 = ref(0)
+      // 储存筛选条件状态
+      const state = reactive({
+        selectedTags: [],
+        diyici: [],
       })
-      listKey.value++
-      getAppResources()
-    }
+      // 查询参数
+      const paramsGetResources = {
+        districtId: '',
+        deptIds: [],
+        pageNum: 1,
+        pageSize: currentPageSize.value,
+        type: Cardsname.value,
+        name: '',
+        infoList: [],
+        orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
+        orderType: 'DESC', // ASC 升序  DESC 降序
+      }
+
+      // 查询
+      const onSearch = () => {
+        loading.value = true
+        paramsGetResources.name = searchValue.value
+        currentPage.value = 1
+      }
+      // 免批
+      const tagFlag = ref('')
+      // 视频资源
+      const stateTags = ref(['在线', '离线'])
+      const selStateTags = ref([])
+      const handleChangeStateTag = (tag, checked) => {
+        loading.value = true
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        paramsGetResources.infoList = paramsGetResources.infoList.filter(
+          (item) => item.attrType !== 'status'
+        )
+        if (checked) {
+          selStateTags.value = [tag]
+          paramsGetResources.infoList.push({
+            attrType: 'status',
+            attrValue: tag == '在线' ? 1 : 0,
+          })
+        } else {
+          selStateTags.value = selStateTags.value.filter((t) => t !== tag)
+        }
+        getAppResources()
+        console.log(tag, checked)
+      }
+      const selBqTags = ref([])
+      const handleChangeBqTags = (tag, checked) => {
+        loading.value = true
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        paramsGetResources.infoList = paramsGetResources.infoList.filter(
+          (item) => item.attrType !== 'labelName'
+        )
+        if (checked) {
+          selBqTags.value = [tag]
+          paramsGetResources.infoList.push({
+            attrType: 'labelName',
+            attrValue: tag,
+          })
+        } else {
+          selBqTags.value = selBqTags.value.filter((t) => t !== tag)
+        }
+        getAppResources()
+      }
+      const current = ref(5)
+      const chagneTag = (name) => {
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        if (tagFlag.value == name) {
+          tagFlag.value = ''
+          paramsGetResources.shareCondition = ''
+        } else {
+          tagFlag.value = name
+          paramsGetResources.shareCondition = name
+        }
+        listKey.value++
+        getAppResources()
+      }
+
+      // 重置数据
+      const chongzhi = () => {
+        loading.value = true
+        // 重置模糊查字段
+        searchValue.value = ''
+        paramsGetResources.name = searchValue.value
+        // 重置筛选条件
+        ListContent.records.forEach((val) => {
+          val.selectedTags = []
+        })
+        // 分页
+        currentPage.value = 1
+        currentPageSize.value = 5
+        // 重置查询条件
+        paramsGetResources.districtId = ''
+        paramsGetResources.deptIds = []
+        paramsGetResources.pageNum = 1
+        paramsGetResources.pageSize = 5
+        paramsGetResources.name = ''
+        paramsGetResources.shareCondition = ''
+        paramsGetResources.infoList = []
+        paramsGetResources.orderField = 'total'
+        paramsGetResources.orderType = 'DESC'
+        mybus.emit('chongzhi')
+        getAppResources()
+      }
+
+      //跳转链接
+      function dianjitiaozhaun(name) {
+        switch (name) {
+          case '青岛市政务资源管理平台':
+            window.open('http://15.72.158.81/web/root/homepage.aspx')
+            console.log('name', name)
+            break
+          case '青岛市视频资源管理平台':
+            window.open('http://15.72.183.88:8760/yzy/main')
+            console.log('name', name)
+            break
+        }
+      }
+
+      // 点击筛选条件回调
+      const handleChange = (tag, checked, name) => {
+        loading.value = true
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        console.log('点击筛选条件=================>', tag, checked, name)
+        ListContent.records.forEach((val) => {
+          if (val.name === name) {
+            paramsGetResources.infoList = paramsGetResources.infoList.filter(
+              (item) => item.attrType !== name
+            )
+            if (val.selectedTags.indexOf(tag.dict_label) == -1) {
+              val.selectedTags = [tag.dict_label]
+              paramsGetResources.infoList.push({
+                attrType: name,
+                attrValue: tag.dict_label,
+              })
+            } else {
+              val.selectedTags.splice(
+                val.selectedTags.indexOf(tag.dict_label),
+                1
+              )
+            }
+          }
+        })
+        listKey.value++
+        getAppResources()
+      }
       const getNewList = () => {
         tecHnosphere = router.currentRoute.value.query.tecHnosphere
         appLiCation = router.currentRoute.value.query.appLiCation
@@ -706,783 +956,785 @@ export default defineComponent({
               : paramsGetResources.orderField == 'applyCount'
               ? 'requestCount'
               : 'createTime', //排序字段
-          orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
-          pageNum: paramsGetResources.pageNum, //页码
-          pageSize: paramsGetResources.pageSize, //分页大小
-        }
-        getDataResource(dataResourceParams).then((res) => {
-          if (whoShow1.value.itShowQingDao) {
-            res.data.data.data.forEach((val) => {
-              val.id = val.guid // id
-              val.name = val.zyname // 名字
-              val.sjlCount = val.sjcczl // 数据量
-              val.applyCount = val.syqk // 申请量
-              val.deptName = val.TGBM // 部门
-              val.createDate = val.fbrq // 发布时间
-            })
-            resourceList.data = res.data.data.data || []
-            resourceTotal.value = res.data.data.rows || ''
-            loading.value = false
-          } else if (whoShow1.value.itShowXiHaiAn) {
-            res.data.data.list.forEach((val) => {
-              val.id = val.serviceId // id
-              val.name = val.serviceName // 名字
-              val.sjlCount = val.requestQuantity // 数据量
-              val.applyCount = val.requestCount // 申请量
-              val.deptName = val.departmentName // 部门
-              val.createTime = val.createTime.split('.')[0]
-              val.createDate = val.createTime // 发布时间
-            })
-            resourceList.data = res.data.data.list || []
-            resourceTotal.value = res.data.data.total || ''
-            loading.value = false
+            orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
+            pageNum: paramsGetResources.pageNum, //页码
+            pageSize: paramsGetResources.pageSize, //分页大小
           }
-        })
-      }
-      else if (paramsGetResources.type !== '数据资源') {
-        if (switchIndex != '分页查询') {
-          paramsGetResources.pageNum = 1
-        }
-        pageWithAttrs(paramsGetResources).then((res) => {
-          console.log('查询列表============>', resourceList, res.data.data)
-          resourceList.data = []
-          videoList.data = []
-          if (Cardsname.value === '基础设施') {
-            resourceList.data = res.data.data.records || []
-            resourceTotal.value = res.data.data.total || ''
-            loading.value = false
-          } else {
-            resourceTotal.value = res.data.data.total || ''
-            getShoppingCartList(res.data.data.records)
-          }
-        })
-      }
-    }
-
-    let shoppingCartList = ref([])
-    // 获取申购车列表
-    const getShoppingCartList = (list) => {
-      getSgcList({
-        pageNum: 1,
-        pageSize: 500,
-        name: '',
-        type: '',
-      }).then((res) => {
-        console.log('申购车列表================>', res.data.data.records)
-        shoppingCartList.value = res.data.data.records
-        list.map((item) => {
-          item.isInShoppingCart = false
-          item.isInShoppingCart = shoppingCartList.value.some((item2) => {
-            return item.id === item2.resourceId
+          getDataResource(dataResourceParams).then((res) => {
+            if (whoShow1.value.itShowQingDao) {
+              res.data.data.data.forEach((val) => {
+                val.id = val.guid // id
+                val.name = val.zyname // 名字
+                val.sjlCount = val.sjcczl // 数据量
+                val.applyCount = val.syqk // 申请量
+                val.deptName = val.TGBM // 部门
+                val.createDate = val.fbrq // 发布时间
+              })
+              resourceList.data = res.data.data.data || []
+              resourceTotal.value = res.data.data.rows || ''
+              loading.value = false
+            } else if (whoShow1.value.itShowXiHaiAn) {
+              res.data.data.list.forEach((val) => {
+                val.id = val.serviceId // id
+                val.name = val.serviceName // 名字
+                val.sjlCount = val.requestQuantity // 数据量
+                val.applyCount = val.requestCount // 申请量
+                val.deptName = val.departmentName // 部门
+                val.createTime = val.createTime.split('.')[0]
+                val.createDate = val.createTime // 发布时间
+              })
+              resourceList.data = res.data.data.list || []
+              resourceTotal.value = res.data.data.total || ''
+              loading.value = false
+            }
           })
+        } else if (paramsGetResources.type !== '数据资源') {
+          if (switchIndex != '分页查询') {
+            paramsGetResources.pageNum = 1
+          }
+          pageWithAttrs(paramsGetResources).then((res) => {
+            console.log('查询列表============>', resourceList, res.data.data)
+            resourceList.data = []
+            videoList.data = []
+            if (Cardsname.value === '基础设施') {
+              resourceList.data = res.data.data.records || []
+              resourceTotal.value = res.data.data.total || ''
+              loading.value = false
+            } else {
+              resourceTotal.value = res.data.data.total || ''
+              getShoppingCartList(res.data.data.records)
+            }
+          })
+        }
+      }
+
+      let shoppingCartList = ref([])
+      // 获取申购车列表
+      const getShoppingCartList = (list) => {
+        getSgcList({
+          pageNum: 1,
+          pageSize: 500,
+          name: '',
+          type: '',
+        }).then((res) => {
+          console.log('申购车列表================>', res.data.data.records)
+          shoppingCartList.value = res.data.data.records
+          list.map((item) => {
+            item.isInShoppingCart = false
+            item.isInShoppingCart = shoppingCartList.value.some((item2) => {
+              return item.id === item2.resourceId
+            })
+          })
+          console.log('经过过滤后的列表信息', list)
+          resourceList.data = list
         })
-        console.log('经过过滤后的列表信息', list)
-        resourceList.data = list
+      }
+      mybus.on('paramsGetResources', (ids) => {
+        if (ids && ids.length > 0) {
+          paramsGetResources.deptIds = ids
+        } else {
+          delete paramsGetResources.deptIds
+        }
+        getAppResources()
+        console.log('paramsGetResources', paramsGetResources)
       })
-    }
-    mybus.on('paramsGetResources', (ids) => {
-      if (ids && ids.length > 0) {
-        paramsGetResources.deptIds = ids
-      } else {
-        delete paramsGetResources.deptIds
+      mybus.on('changePage', (page) => {
+        paramsGetResources.pageNum = page
+        console.log('changePage', paramsGetResources.pageNum)
+        getAppResources('分页查询')
+        console.log('paramsGetResources', paramsGetResources)
+      })
+      mybus.on('changeSelcted', () => {
+        getAppResources()
+      })
+      mybus.on('changeInfo', (info) => {
+        paramsGetResources.pageNum = 1
+        console.log('paramsGetResources.infoList', paramsGetResources.infoList)
+        paramsGetResources.infoList = paramsGetResources.infoList.filter(
+          (item) => item.attrType !== '文件类型'
+        )
+        if (info) {
+          paramsGetResources.infoList.push(info)
+        }
+        getAppResources()
+        console.log('paramsGetResources', paramsGetResources)
+      })
+      mybus.on('refresh', () => {
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        getAppResources()
+      })
+      mybus.on('changeCondition', (condition) => {
+        //  orderField: 'total' total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
+        // orderType: 'ASC'  ASC 升序  DESC 降序
+        paramsGetResources.orderField = condition.orderField
+        paramsGetResources.orderType = condition.orderType
+        getAppResources()
+        console.log('paramsGetResources', paramsGetResources)
+      })
+      const pageChange = (val) => {
+        console.log(val)
+        loading.value = true
+        currentPage.value = val
+        paramsGetResources.pageNum = val
+        let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
+        getAppResources(params)
       }
-      getAppResources()
-      console.log('paramsGetResources', paramsGetResources)
-    })
-    mybus.on('changePage', (page) => {
-      paramsGetResources.pageNum = page
-      console.log('changePage', paramsGetResources.pageNum)
-      getAppResources('分页查询')
-      console.log('paramsGetResources', paramsGetResources)
-    })
-    mybus.on('changeSelcted', () => {
-      getAppResources()
-    })
-    mybus.on('changeInfo', (info) => {
-      paramsGetResources.pageNum = 1
-      console.log('paramsGetResources.infoList', paramsGetResources.infoList)
-      paramsGetResources.infoList = paramsGetResources.infoList.filter(
-        (item) => item.attrType !== '文件类型'
-      )
-      if (info) {
-        paramsGetResources.infoList.push(info)
-      }
-      getAppResources()
-      console.log('paramsGetResources', paramsGetResources)
-    })
-    mybus.on('refresh', () => {
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      getAppResources()
-    })
-    mybus.on('changeCondition', (condition) => {
-      //  orderField: 'total' total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
-      // orderType: 'ASC'  ASC 升序  DESC 降序
-      paramsGetResources.orderField = condition.orderField
-      paramsGetResources.orderType = condition.orderType
-      getAppResources()
-      console.log('paramsGetResources', paramsGetResources)
-    })
-    const pageChange = (val) => {
-      console.log(val)
-      loading.value = true
-      currentPage.value = val
-      paramsGetResources.pageNum = val
-      let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
-      getAppResources(params)
-    }
 
-    onMounted(() => {
-      listKey2.value++;
+      onMounted(() => {
+        listKey2.value++
 
-      // 获取筛选条件
-      getNewList()
+        // 获取筛选条件
+        getNewList()
 
-      if (!tecHnosphere && !appLiCation) {
+        if (!tecHnosphere && !appLiCation) {
+          getAppResources()
+        }
+      })
+
+      // 分页
+      const onShowSizeChange = (current, pageSize) => {
+        currentPage.value = current
+        currentPageSize.value = pageSize
+        paramsGetResources.pageNum = current
+        paramsGetResources.pageSize = pageSize
+        console.log('执行onShowSizeChange', paramsGetResources)
         getAppResources()
       }
-    })
-
-    // 分页
-    const onShowSizeChange = (current, pageSize) => {
-      currentPage.value = current
-      currentPageSize.value = pageSize
-      paramsGetResources.pageNum = current
-      paramsGetResources.pageSize = pageSize
-      console.log('执行onShowSizeChange', paramsGetResources)
-      getAppResources()
-    }
-    watch(currentPageSize, () => {
-      console.log('pageSize', currentPageSize.value)
-    })
-
-    const changeShrink = (name) => {
-      ListContent.records.forEach((val) => {
-        if (val.name === name) {
-          console.log(val)
-          val.shrinkFlag = !val.shrinkFlag
-        }
+      watch(currentPageSize, () => {
+        console.log('pageSize', currentPageSize.value)
       })
-    }
-    const changeCards = (name) => {
-      resourceList.data = []
-      videoList.data = []
-      resourceTotal.value = ''
-      router.currentRoute.value.query.tecHnosphere = ''
-      router.currentRoute.value.query.appLiCation = ''
-      tecHnosphere = router.currentRoute.value.query.tecHnosphere
-      appLiCation = router.currentRoute.value.query.appLiCation
-      let newQuery = JSON.parse(
-        JSON.stringify(router.currentRoute.value.query)
-      )
-      Cardsname.value = name
-      console.log(
-        '更改前url中的select=====================>',
-        router.currentRoute.value.query.select
-      )
-      newQuery.select = Cardsname.value
-      router
-        .replace({
-          query: newQuery,
+
+      const changeShrink = (name) => {
+        ListContent.records.forEach((val) => {
+          if (val.name === name) {
+            console.log(val)
+            val.shrinkFlag = !val.shrinkFlag
+          }
         })
-        .then(() => {
-          console.log(
-            '更改后url中的select=====================>',
-            router.currentRoute.value.query.select
-          )
-          // router.currentRoute.value.query.select
-          tagFlag.value = false
-          chongzhi()
-          getNewList()
-        })
-    }
-    // 监听地址栏变化
-    window.addEventListener('hashchange', () => {
-      location.reload()
-      console.log('URL发生变化了')
-    })
-    return {
-      listKey,
-      ListContent,
-      searchValue,
-      currentPage,
-      ...toRefs(state),
-      changeCards,
-      handleChange,
-      resourceList,
-      videoList,
-      resourceTotal,
-      pageChange,
-      listKey2,
-      Cardsname,
-      getNewList,
-      getAppResources,
-      chongzhi,
-      onSearch,
-      onShowSizeChange,
-      currentPageSize,
-      pageSizeOptions,
-      changeShrink,
-      titleName,
-      keyongziyuanqingkaung,
-      shujuziyuanqingkuang,
-      dianjitiaozhaun,
-      chagneTag,
-      tagFlag,
-      current,
-      openMonitor,
-      stateTags,
-      selStateTags,
-      handleChangeStateTag,
-      // bqTags,
-      selBqTags,
-      handleChangeBqTags,
-      loading,
-      getShoppingCartList,
-      whoShow1,
-    }
-  },
-  components: {
-    HomeHeader,
-    HomeFooter,
-    detailsPageconetentTree,
-    searchResultList,
-    UpOutlined,
-    DownOutlined,
-    KnowledgeBase,
-    // VideoCameraOutlined,
-    // VideoSurveillance,
-    DetailsPageResource,
-    infrastructurePage,
-    detailsPageInfrastructureTree,
-  },
-  beforeUnmount() {
-    mybus.off('selectCardsitem')
-    mybus.off('paramsGetResources')
-    mybus.off('changeCondition')
-    mybus.off('refresh')
-    mybus.off('changePage')
-    mybus.off('changeInfo')
-  },
-})
+      }
+      const changeCards = (name) => {
+        resourceList.data = []
+        videoList.data = []
+        resourceTotal.value = ''
+        router.currentRoute.value.query.tecHnosphere = ''
+        router.currentRoute.value.query.appLiCation = ''
+        tecHnosphere = router.currentRoute.value.query.tecHnosphere
+        appLiCation = router.currentRoute.value.query.appLiCation
+        let newQuery = JSON.parse(
+          JSON.stringify(router.currentRoute.value.query)
+        )
+        Cardsname.value = name
+        console.log(
+          '更改前url中的select=====================>',
+          router.currentRoute.value.query.select
+        )
+        newQuery.select = Cardsname.value
+        router
+          .replace({
+            query: newQuery,
+          })
+          .then(() => {
+            console.log(
+              '更改后url中的select=====================>',
+              router.currentRoute.value.query.select
+            )
+            // router.currentRoute.value.query.select
+            tagFlag.value = false
+            chongzhi()
+            getNewList()
+          })
+      }
+      // 监听地址栏变化
+      window.addEventListener('hashchange', () => {
+        location.reload()
+        console.log('URL发生变化了')
+      })
+      return {
+        listKey,
+        ListContent,
+        searchValue,
+        currentPage,
+        ...toRefs(state),
+        changeCards,
+        handleChange,
+        resourceList,
+        videoList,
+        resourceTotal,
+        pageChange,
+        listKey2,
+        Cardsname,
+        getNewList,
+        getAppResources,
+        chongzhi,
+        onSearch,
+        onShowSizeChange,
+        currentPageSize,
+        pageSizeOptions,
+        changeShrink,
+        titleName,
+        keyongziyuanqingkaung,
+        shujuziyuanqingkuang,
+        dianjitiaozhaun,
+        chagneTag,
+        tagFlag,
+        current,
+        openMonitor,
+        stateTags,
+        selStateTags,
+        handleChangeStateTag,
+        // bqTags,
+        selBqTags,
+        handleChangeBqTags,
+        loading,
+        getShoppingCartList,
+        whoShow1,
+      }
+    },
+    components: {
+      HomeHeader,
+      HomeFooter,
+      detailsPageconetentTree,
+      searchResultList,
+      UpOutlined,
+      DownOutlined,
+      KnowledgeBase,
+      // VideoCameraOutlined,
+      // VideoSurveillance,
+      DetailsPageResource,
+      infrastructurePage,
+      detailsPageInfrastructureTree,
+    },
+    beforeUnmount() {
+      mybus.off('selectCardsitem')
+      mybus.off('paramsGetResources')
+      mybus.off('changeCondition')
+      mybus.off('refresh')
+      mybus.off('changePage')
+      mybus.off('changeInfo')
+    },
+  })
 </script>
 <style lang="less" scoped>
-.resultListSearchInput-father {
-  background: #f3f5f9;
-  padding: 0.2rem;
+  .resultListSearchInput-father {
+    background: #f3f5f9;
+    padding: 0.2rem;
 
-  // padding-left: 0.2rem;
-  // padding-top: 0.2rem;
-  .resultListSearchInput-son {
-    background: #fff;
-    padding: 0.2rem 0.2rem 0rem 0.3rem;
+    // padding-left: 0.2rem;
+    // padding-top: 0.2rem;
+    .resultListSearchInput-son {
+      background: #fff;
+      padding: 0.2rem 0.2rem 0rem 0.3rem;
 
-    .hengxian {
-      width: 100%;
-      height: 0.01rem;
-      background: rgba(150, 144, 144, 0.3);
-      margin-top: 0.2rem;
+      .hengxian {
+        width: 100%;
+        height: 0.01rem;
+        background: rgba(150, 144, 144, 0.3);
+        margin-top: 0.2rem;
+      }
     }
   }
-}
 
-.resultListSearchInput {
-  margin-left: 0.1rem;
+  .resultListSearchInput {
+    margin-left: 0.1rem;
 
-  :deep(.ant-input) {
-    width: 4rem;
-    height: 0.36rem;
-    background: #fff;
-    border-radius: 0.04rem;
+    :deep(.ant-input) {
+      width: 4rem;
+      height: 0.36rem;
+      background: #fff;
+      border-radius: 0.04rem;
+    }
+
+    :deep(.ant-input-search-button) {
+      width: 0.8rem;
+      height: 0.36rem;
+      background: #0087ff;
+      border-radius: 0.04rem !important;
+      font-size: 0.14rem;
+      font-weight: 400;
+      color: #fff;
+      line-height: 0.34rem;
+      margin-left: 0.1rem;
+    }
+
+    :deep(.ant-input-group-addon) {
+      left: 0 !important;
+    }
   }
 
-  :deep(.ant-input-search-button) {
+  .button-reset {
+    border: 0;
+    outline: none;
     width: 0.8rem;
     height: 0.36rem;
-    background: #0087ff;
-    border-radius: 0.04rem !important;
+    background: #e1edfa;
+    border-radius: 0.04rem;
     font-size: 0.14rem;
     font-weight: 400;
-    color: #fff;
+    color: #0087ff;
     line-height: 0.34rem;
-    margin-left: 0.1rem;
-  }
-
-  :deep(.ant-input-group-addon) {
-    left: 0 !important;
-  }
-}
-
-.button-reset {
-  border: 0;
-  outline: none;
-  width: 0.8rem;
-  height: 0.36rem;
-  background: #e1edfa;
-  border-radius: 0.04rem;
-  font-size: 0.14rem;
-  font-weight: 400;
-  color: #0087ff;
-  line-height: 0.34rem;
-  margin-left: 2.5rem;
-  cursor: pointer;
-}
-
-.details-pageconetent {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 0.67rem;
-  position: relative;
-  background: rgba(245, 243, 243, 0.3);
-
-  .details-pageconetent-left {
-    max-height: 6.9rem;
-    position: absolute;
-    width: 2.5rem;
-    top: 0.17rem;
-    left: 2.5rem;
-    margin-right: 0.17rem;
-    overflow: auto;
-  }
-
-  .top {
-    min-height: 7.2rem;
-    position: relative;
-    width: 11.5rem;
-    display: flex;
-    padding-top: 0.2rem;
-    flex-direction: column;
-    font-size: 0.16rem;
-    justify-content: left;
     margin-left: 2.5rem;
-    background: #f3f5f9;
+    cursor: pointer;
+  }
 
-    .pagination {
-      background: #f3f5f9;
-      padding-bottom: 0.6rem;
+  .details-pageconetent {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0.67rem;
+    position: relative;
+    background: rgba(245, 243, 243, 0.3);
+
+    .details-pageconetent-left {
+      max-height: 6.9rem;
+      position: absolute;
+      width: 2.5rem;
+      top: 0.17rem;
+      left: 2.5rem;
+      margin-right: 0.17rem;
+      overflow: auto;
     }
 
-    .jichusheshi {
-      height: 4.45rem;
-
-      .yunziyuan {
-        width: 100%;
-        position: relative;
-
-        .shuoming {
-          position: absolute;
-          right: 0.2rem;
-          top: 0.15rem;
-          font-size: 0.12rem;
-        }
-
-        .yunziyuan-title {
-          display: flex;
-          align-items: center;
-
-          .tupian {}
-
-          .title {
-            margin-left: 0.1rem;
-            font-weight: 600;
-            text-decoration: underline;
-            cursor: pointer;
-          }
-        }
-
-        .fenlei {
-          display: flex;
-          margin-left: 0.2rem;
-          margin-right: 0.3rem;
-          justify-content: space-between;
-        }
-
-        .keyongziyuan {
-          display: flex;
-          justify-content: space-between;
-          margin-left: 0.3rem;
-          margin-right: 0.3rem;
-
-          div {
-            display: flex;
-
-            div:last-child {
-              font-weight: 600;
-            }
-          }
-        }
-      }
-
-      .yunziyuan>div {
-        margin-bottom: 0.1rem;
-      }
-
-      .shipin {
-        width: 100%;
-
-        .shipin-title {
-          display: flex;
-          align-items: center;
-
-          .tupian {}
-
-          .title {
-            margin-left: 0.1rem;
-            font-weight: 600;
-            text-decoration: underline;
-            cursor: pointer;
-          }
-        }
-
-        .fenlei {
-          display: flex;
-          margin-left: 0.2rem;
-
-          div {
-            margin-right: 0.6rem;
-          }
-
-          .shuzi {
-            font-weight: 600;
-          }
-        }
-      }
-
-      .shipin>div {
-        margin-bottom: 0.1rem;
-      }
-    }
-
-    .jichusheshi>div {
-      padding-top: 0.1rem;
-      border-radius: 0.04rem;
-      margin-bottom: 0.2rem;
-      padding-bottom: 0.4rem;
-    }
-
-    .shujuziyuan {
+    .top {
+      min-height: 7.2rem;
+      position: relative;
+      width: 11.5rem;
       display: flex;
+      padding-top: 0.2rem;
       flex-direction: column;
-      justify-content: center;
-      padding-top: 0.4rem;
+      font-size: 0.16rem;
+      justify-content: left;
+      margin-left: 2.5rem;
+      background: #f3f5f9;
 
-      .yunziyuan {
-        width: 100%;
-        position: relative;
+      .pagination {
+        background: #f3f5f9;
+        padding-bottom: 0.6rem;
+      }
 
-        .shuoming {
-          position: absolute;
-          right: 0.2rem;
-          top: 0.15rem;
-          font-size: 0.12rem;
-        }
+      .jichusheshi {
+        height: 4.45rem;
 
-        .yunziyuan-title {
-          display: flex;
-          align-items: center;
-          margin-left: 0.2rem;
+        .yunziyuan {
+          width: 100%;
+          position: relative;
 
-          .tupian {}
+          .shuoming {
+            position: absolute;
+            right: 0.2rem;
+            top: 0.15rem;
+            font-size: 0.12rem;
+          }
 
-          .title {
-            margin-left: 0.1rem;
-            font-weight: 600;
-            text-decoration: underline;
-            cursor: pointer;
+          .yunziyuan-title {
+            display: flex;
+            align-items: center;
+
+            .tupian {
+            }
+
+            .title {
+              margin-left: 0.1rem;
+              font-weight: 600;
+              text-decoration: underline;
+              cursor: pointer;
+            }
+          }
+
+          .fenlei {
+            display: flex;
+            margin-left: 0.2rem;
+            margin-right: 0.3rem;
+            justify-content: space-between;
+          }
+
+          .keyongziyuan {
+            display: flex;
+            justify-content: space-between;
+            margin-left: 0.3rem;
+            margin-right: 0.3rem;
+
+            div {
+              display: flex;
+
+              div:last-child {
+                font-weight: 600;
+              }
+            }
           }
         }
 
-        .fenlei {
-          display: flex;
-          margin-left: 0.2rem;
-          margin-right: 0.3rem;
-          justify-content: space-between;
+        .yunziyuan > div {
+          margin-bottom: 0.1rem;
         }
 
-        .keyongziyuan {
-          display: flex;
-          justify-content: space-between;
-          margin-left: 0.3rem;
-          margin-right: 0.3rem;
+        .shipin {
+          width: 100%;
 
-          div {
+          .shipin-title {
             display: flex;
+            align-items: center;
 
-            div:last-child {
+            .tupian {
+            }
+
+            .title {
+              margin-left: 0.1rem;
+              font-weight: 600;
+              text-decoration: underline;
+              cursor: pointer;
+            }
+          }
+
+          .fenlei {
+            display: flex;
+            margin-left: 0.2rem;
+
+            div {
+              margin-right: 0.6rem;
+            }
+
+            .shuzi {
               font-weight: 600;
             }
           }
         }
+
+        .shipin > div {
+          margin-bottom: 0.1rem;
+        }
       }
 
-      .yunziyuan>div {
-        margin-bottom: 0.1rem;
-      }
-    }
-
-    .shujuziyuan>div {
-      background: #eaf4ff;
-      padding-top: 0.1rem;
-      border-radius: 0.04rem;
-      margin-bottom: 0.2rem;
-      padding-bottom: 0.4rem;
-    }
-
-    .top-title {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 0.2rem;
-      font-family: 'Alibaba PuHuiTi';
-      color: #000000;
-      line-height: 0.34rem;
-
-      .photo {
-        display: inline-block;
-        height: 0.44rem;
-        width: 0.44rem;
-        margin-right: 0.1rem;
+      .jichusheshi > div {
+        padding-top: 0.1rem;
+        border-radius: 0.04rem;
+        margin-bottom: 0.2rem;
+        padding-bottom: 0.4rem;
       }
 
-      div {
-        margin: 0 0.2rem;
-        padding: 0 0.1rem;
-        cursor: pointer;
+      .shujuziyuan {
         display: flex;
-        align-items: center;
-      }
+        flex-direction: column;
+        justify-content: center;
+        padding-top: 0.4rem;
 
-      div:hover {
-        color: #0087ff;
-      }
-
-      .sel {
-        font-weight: 600;
-        color: #0087ff;
-        border-bottom: 0.02rem solid #0087ff;
-      }
-    }
-
-    .top-content-father {
-      width: 100%;
-      padding: 0 0.2rem 0.2rem 0.2rem;
-      background: #f3f5f9;
-      margin-bottom: 0.2rem;
-
-      .top-content-son {
-        background: #fff;
-        padding: 0.2rem 0;
-      }
-
-      .top-content {
-        display: flex;
-        margin-top: 0rem;
-
-        span:nth-child(1) {
-          display: inline-block;
+        .yunziyuan {
+          width: 100%;
           position: relative;
-          line-height: 0.3614rem;
-          white-space: normal;
-          text-align: center;
-          vertical-align: middle;
-        }
 
-        .leixingsumfather {
-          width: 8.1rem;
-          display: inline-block;
-          height: 0.3014rem;
-          overflow: hidden;
-        }
+          .shuoming {
+            position: absolute;
+            right: 0.2rem;
+            top: 0.15rem;
+            font-size: 0.12rem;
+          }
 
-        .leixingsumfather2 {
-          width: 9.2rem;
-        }
-
-        .leixingsum {
-          display: inline-block;
-          cursor: pointer;
-          text-align: center;
-          margin-top: 0.05rem;
-
-          .ant-tag-checkable {
-            width: 0.83rem;
-            height: 0.25rem;
+          .yunziyuan-title {
             display: flex;
-            justify-content: center;
             align-items: center;
-            padding-left: 0.05rem;
-            padding-right: 0.05rem;
-            float: left;
-            margin: 0 0.15rem;
-            font-family: 'AlibabaPuHuiTiR';
-            font-size: 0.14rem;
-            color: #333333;
-            font-weight: 500;
-            text-align: center;
-            line-height: 0.14rem;
+            margin-left: 0.2rem;
+
+            .tupian {
+            }
+
+            .title {
+              margin-left: 0.1rem;
+              font-weight: 600;
+              text-decoration: underline;
+              cursor: pointer;
+            }
           }
 
-          :deep(.ant-tag-checkable-checked) {
-            margin-left: 0.15rem;
-            margin-right: 0.15rem;
-            text-align: center;
+          .fenlei {
+            display: flex;
+            margin-left: 0.2rem;
+            margin-right: 0.3rem;
+            justify-content: space-between;
           }
 
-          .ant-tag-checkable:active,
-          .ant-tag-checkable-checked {
-            width: 0.85rem;
-            font-family: 'Alibaba PuHuiTi';
+          .keyongziyuan {
+            display: flex;
+            justify-content: space-between;
+            margin-left: 0.3rem;
+            margin-right: 0.3rem;
+
+            div {
+              display: flex;
+
+              div:last-child {
+                font-weight: 600;
+              }
+            }
+          }
+        }
+
+        .yunziyuan > div {
+          margin-bottom: 0.1rem;
+        }
+      }
+
+      .shujuziyuan > div {
+        background: #eaf4ff;
+        padding-top: 0.1rem;
+        border-radius: 0.04rem;
+        margin-bottom: 0.2rem;
+        padding-bottom: 0.4rem;
+      }
+
+      .top-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 0.2rem;
+        font-family: 'Alibaba PuHuiTi';
+        color: #000000;
+        line-height: 0.34rem;
+
+        .photo {
+          display: inline-block;
+          height: 0.44rem;
+          width: 0.44rem;
+          margin-right: 0.1rem;
+        }
+
+        div {
+          margin: 0 0.2rem;
+          padding: 0 0.1rem;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+        }
+
+        div:hover {
+          color: #0087ff;
+        }
+
+        .sel {
+          font-weight: 600;
+          color: #0087ff;
+          border-bottom: 0.02rem solid #0087ff;
+        }
+      }
+
+      .top-content-father {
+        width: 100%;
+        padding: 0 0.2rem 0.2rem 0.2rem;
+        background: #f3f5f9;
+        margin-bottom: 0.2rem;
+
+        .top-content-son {
+          background: #fff;
+          padding: 0.2rem 0;
+        }
+
+        .top-content {
+          display: flex;
+          margin-top: 0rem;
+
+          span:nth-child(1) {
+            display: inline-block;
+            position: relative;
+            line-height: 0.3614rem;
+            white-space: normal;
+            text-align: center;
+            vertical-align: middle;
+          }
+
+          .leixingsumfather {
+            width: 8.1rem;
+            display: inline-block;
+            height: 0.3014rem;
+            overflow: hidden;
+          }
+
+          .leixingsumfather2 {
+            width: 9.2rem;
+          }
+
+          .leixingsum {
+            display: inline-block;
+            cursor: pointer;
+            text-align: center;
+            margin-top: 0.05rem;
+
+            .ant-tag-checkable {
+              width: 0.83rem;
+              height: 0.25rem;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding-left: 0.05rem;
+              padding-right: 0.05rem;
+              float: left;
+              margin: 0 0.15rem;
+              font-family: 'AlibabaPuHuiTiR';
+              font-size: 0.14rem;
+              color: #333333;
+              font-weight: 500;
+              text-align: center;
+              line-height: 0.14rem;
+            }
+
+            :deep(.ant-tag-checkable-checked) {
+              margin-left: 0.15rem;
+              margin-right: 0.15rem;
+              text-align: center;
+            }
+
+            .ant-tag-checkable:active,
+            .ant-tag-checkable-checked {
+              width: 0.85rem;
+              font-family: 'Alibaba PuHuiTi';
+              font-weight: 500;
+              background-color: #0087ff;
+              color: #ffffff;
+              border-radius: 0.16rem;
+            }
+          }
+
+          .active {
+            font-family: Alibaba PuHuiTi;
             font-weight: 500;
             background-color: #0087ff;
             color: #ffffff;
-            border-radius: 0.16rem;
           }
         }
 
-        .active {
-          font-family: Alibaba PuHuiTi;
+        .top-content:nth-child(1) {
+          margin-top: 0rem !important;
+        }
+      }
+    }
+  }
+
+  .shrinkTag {
+    width: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    margin-bottom: 0.05rem;
+
+    span {
+      cursor: pointer;
+    }
+  }
+
+  .shrink {
+    height: unset !important;
+    overflow: unset !important;
+  }
+
+  .talk-monitor {
+    position: fixed;
+    bottom: 0.5rem;
+    right: 0.1rem;
+    z-index: 9999;
+    cursor: pointer;
+
+    i {
+      width: 0.64rem;
+      height: 0.64rem;
+      display: inline-block;
+      background: url('~@/assets/home/icon-talk.png');
+      background-size: cover;
+    }
+  }
+
+  .top-content-father {
+    width: 10.87rem;
+    padding-left: 0.2rem;
+
+    // margin-bottom: .2rem;
+    .top-content {
+      display: flex;
+      margin-top: 0.23rem;
+
+      span:nth-child(1) {
+        display: inline-block;
+        position: relative;
+        width: 0.68rem;
+        font-weight: 600;
+        white-space: normal;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 0.16rem;
+        margin-left: 0.3rem;
+      }
+
+      // .top-content-title {
+      //   top: -0.2rem;
+      // }
+      .leixingsumfather {
+        width: 7.7rem;
+        display: inline-block;
+        height: 0.3014rem;
+        overflow: hidden;
+        // width: 7.18rem;
+      }
+
+      .leixingsum {
+        width: 0.93rem;
+        display: inline-block;
+        cursor: pointer;
+        text-align: center;
+        margin-top: 0.05rem;
+
+        // margin-bottom: .1rem;
+        .ant-tag-checkable {
+          width: 0.85rem;
+          height: 0.25rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-left: 0.05rem;
+          padding-right: 0.05rem;
+          float: left;
+          margin: 0 0.15rem;
+          font-family: 'AlibabaPuHuiTiR';
+          font-size: 0.14rem;
+          color: #333333;
+          font-weight: 500;
+          text-align: center;
+          line-height: 0.14rem;
+        }
+
+        :deep(.ant-tag-checkable-checked) {
+          // width: .67rem;
+          margin-left: 0.15rem;
+          margin-right: 0.15rem;
+          text-align: center;
+        }
+
+        .ant-tag-checkable:active,
+        .ant-tag-checkable-checked {
+          width: 0.85rem;
+          font-family: 'Alibaba PuHuiTi';
           font-weight: 500;
           background-color: #0087ff;
           color: #ffffff;
+          border-radius: 0.16rem;
         }
       }
 
-      .top-content:nth-child(1) {
-        margin-top: 0rem !important;
-      }
-    }
-  }
-}
-
-.shrinkTag {
-  width: 0.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  margin-bottom: 0.05rem;
-
-  span {
-    cursor: pointer;
-  }
-}
-
-.shrink {
-  height: unset !important;
-  overflow: unset !important;
-}
-
-.talk-monitor {
-  position: fixed;
-  bottom: 0.5rem;
-  right: 0.1rem;
-  z-index: 9999;
-  cursor: pointer;
-
-  i {
-    width: 0.64rem;
-    height: 0.64rem;
-    display: inline-block;
-    background: url('~@/assets/home/icon-talk.png');
-    background-size: cover;
-  }
-}
-
-.top-content-father {
-  width: 10.87rem;
-  padding-left: 0.2rem;
-
-  // margin-bottom: .2rem;
-  .top-content {
-    display: flex;
-    margin-top: 0.23rem;
-
-    span:nth-child(1) {
-      display: inline-block;
-      position: relative;
-      width: 0.68rem;
-      font-weight: 600;
-      white-space: normal;
-      text-align: center;
-      vertical-align: middle;
-      font-size: 0.16rem;
-      margin-left: 0.3rem;
-    }
-
-    // .top-content-title {
-    //   top: -0.2rem;
-    // }
-    .leixingsumfather {
-      width: 7.7rem;
-      display: inline-block;
-      height: 0.3014rem;
-      overflow: hidden;
-      // width: 7.18rem;
-    }
-
-    .leixingsum {
-      width: 0.93rem;
-      display: inline-block;
-      cursor: pointer;
-      text-align: center;
-      margin-top: 0.05rem;
-
-      // margin-bottom: .1rem;
-      .ant-tag-checkable {
-        width: 0.85rem;
-        height: 0.25rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-left: 0.05rem;
-        padding-right: 0.05rem;
-        float: left;
-        margin: 0 0.15rem;
-        font-family: 'AlibabaPuHuiTiR';
-        font-size: 0.14rem;
-        color: #333333;
-        font-weight: 500;
-        text-align: center;
-        line-height: 0.14rem;
-      }
-
-      :deep(.ant-tag-checkable-checked) {
-        // width: .67rem;
-        margin-left: 0.15rem;
-        margin-right: 0.15rem;
-        text-align: center;
-      }
-
-      .ant-tag-checkable:active,
-      .ant-tag-checkable-checked {
-        width: 0.85rem;
-        font-family: 'Alibaba PuHuiTi';
+      .active {
+        font-family: Alibaba PuHuiTi;
         font-weight: 500;
         background-color: #0087ff;
         color: #ffffff;
-        border-radius: 0.16rem;
       }
     }
 
-    .active {
-      font-family: Alibaba PuHuiTi;
-      font-weight: 500;
-      background-color: #0087ff;
-      color: #ffffff;
+    .top-content:nth-child(1) {
+      margin-top: 0.41rem !important;
     }
   }
 
-  .top-content:nth-child(1) {
-    margin-top: 0.41rem !important;
+  :deep(.ant-card-grid) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
   }
-}
-
-:deep(.ant-card-grid) {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 1;
-}
 </style>
diff --git a/front/src/views/home/components/CompareGroupView.vue b/front/src/views/home/components/CompareGroupView.vue
index afc7c516..7803c74c 100644
--- a/front/src/views/home/components/CompareGroupView.vue
+++ b/front/src/views/home/components/CompareGroupView.vue
@@ -1,54 +1,59 @@
 <template>
-    <div>
-        <div v-if="groupArray.length > 0">
-            <div class="group-box" v-for="(data, i) in groupArray" :key="i">
-                <div class="flex-row-start row-tr" v-for="(item, j) in Object.keys(data)" :key="j"
-                    :class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''">
-                    <div class="td-name">{{ item }}</div>
-                    <div class="flex-row-start">
-                        <div class="td" v-for="(d, k) in data[item]" :key="k">{{ d || '--' }}</div>
-                    </div>
-                </div>
+  <div>
+    <div v-if="groupArray.length > 0">
+      <div class="group-box" v-for="(data, i) in groupArray" :key="i">
+        <div
+          class="flex-row-start row-tr"
+          v-for="(item, j) in Object.keys(data)"
+          :key="j"
+          :class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''"
+        >
+          <div class="td-name">{{ item }}</div>
+          <div class="flex-row-start">
+            <div class="td" v-for="(d, k) in data[item]" :key="k">
+              {{ d || '--' }}
             </div>
+          </div>
         </div>
-        {{ '哈啊哈哈哈哈' + groupArray.length }}
-        <div v-if="groupArray.length == 0" class="no-data">暂无数据</div>
+      </div>
     </div>
-
+    {{ '哈啊哈哈哈哈' + groupArray.length }}
+    <div v-if="groupArray.length == 0" class="no-data">暂无数据</div>
+  </div>
 </template>
 
 <script>
-import { defineComponent, ref, onMounted, getCurrentInstance, computed, watch, nextTick } from 'vue'
-export default {
-    props: ["dataList"],
+  import { ref, watch, nextTick } from 'vue'
+  export default {
+    props: ['dataList'],
     setup(props) {
-        let groupArray = ref([])
-        watch(
-            () => {
-                return props.dataList
-            },
-            (newVal) => {
-                console.log('newVal------------>', newVal);
-                groupArray = ref([])
-                newVal.map(v => {
-                    groupArray.value.push(v)
-                })
-                groupArray.value = groupArray.value.splice(0)
-                nextTick(() => {
-                    console.log('groupArray---子组件--------->', groupArray.value);
-                })
-            },
-            {
-                deep: true,
-                immediate: true
-            }
-        )
-
-        return {
-            groupArray,
+      let groupArray = ref([])
+      watch(
+        () => {
+          return props.dataList
+        },
+        (newVal) => {
+          console.log('newVal------------>', newVal)
+          groupArray = ref([])
+          newVal.map((v) => {
+            groupArray.value.push(v)
+          })
+          groupArray.value = groupArray.value.splice(0)
+          nextTick(() => {
+            console.log('groupArray---子组件--------->', groupArray.value)
+          })
+        },
+        {
+          deep: true,
+          immediate: true,
         }
-    }
-}
+      )
+
+      return {
+        groupArray,
+      }
+    },
+  }
 </script>
 
 <!-- <script setup>
@@ -79,44 +84,43 @@ nextTick(() => {
 </script> -->
 
 <style lang="less" scoped>
-.group-box {
+  .group-box {
     margin-bottom: 20px;
-}
+  }
 
-.border {
+  .border {
     border: 1px solid #dddee1;
     border-bottom: none;
     border-right: none;
-}
+  }
 
-
-.row-tr {
+  .row-tr {
     border: 1px solid #dddee1;
     border-right: none;
     border-bottom: none;
-}
+  }
 
-.no-border-right {
+  .no-border-right {
     border: 1px solid #dddee1;
     border-right: none;
-}
+  }
 
-.flex-row-start {
+  .flex-row-start {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-}
+  }
 
-.td-name {
+  .td-name {
     border-right: 1px solid #dddee1;
     height: 50px;
     line-height: 50px;
     text-align: center;
     width: 200px;
     font-size: 14px;
-}
+  }
 
-.td {
+  .td {
     border-right: 1px solid #dddee1;
     height: 50px;
     line-height: 50px;
@@ -128,18 +132,18 @@ nextTick(() => {
     word-wrap: break-all;
     word-break: normal;
     overflow: hidden;
-}
+  }
 
-.border-bottom {
+  .border-bottom {
     border-bottom: 1px solid #dddee1;
-}
+  }
 
-.no-data {
+  .no-data {
     height: 100px;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #dddee1;
-}
-</style>
\ No newline at end of file
+  }
+</style>
diff --git a/front/src/views/home/constantData/showData.js b/front/src/views/home/constantData/showData.js
index 69218b34..4c344a63 100644
--- a/front/src/views/home/constantData/showData.js
+++ b/front/src/views/home/constantData/showData.js
@@ -1,68 +1,68 @@
 export const titleNameArray = [
-    {
-        photo: require('@/assets/newHome/banner-zj.png'),
-        name: '组件服务',
-    },
-    {
-        photo: require('@/assets/newHome/banner-yy.png'),
-        name: '应用资源',
-    },
-    {
-        photo: require('@/assets/newHome/banner-jc.png'),
-        name: '基础设施',
-    },
-    {
-        photo: require('@/assets/newHome/banner-sj.png'),
-        name: '数据资源',
-    },
-    {
-        photo: require('@/assets/newHome/banner-zs.png'),
-        name: '知识库',
-    },
+  {
+    photo: require('@/assets/newHome/banner-zj.png'),
+    name: '组件服务',
+  },
+  {
+    photo: require('@/assets/newHome/banner-yy.png'),
+    name: '应用资源',
+  },
+  {
+    photo: require('@/assets/newHome/banner-jc.png'),
+    name: '基础设施',
+  },
+  {
+    photo: require('@/assets/newHome/banner-sj.png'),
+    name: '数据资源',
+  },
+  {
+    photo: require('@/assets/newHome/banner-zs.png'),
+    name: '知识库',
+  },
 ]
 
 // 模糊查询
 export const keyongziyuanqingkaungArray = [
-    {
-        name: 'CPU/核：',
-        value: 2102,
-    },
-    {
-        name: '内存/T：',
-        value: 6.68,
-    },
-    {
-        name: '存储/T：',
-        value: 2102,
-    },
-    {
-        name: 'RDS for Mysql/G：',
-        value: 982.82,
-    },
-    {
-        name: 'RDS for SqlServer/G：',
-        value: 997.17,
-    },
+  {
+    name: 'CPU/核：',
+    value: 2102,
+  },
+  {
+    name: '内存/T：',
+    value: 6.68,
+  },
+  {
+    name: '存储/T：',
+    value: 2102,
+  },
+  {
+    name: 'RDS for Mysql/G：',
+    value: 982.82,
+  },
+  {
+    name: 'RDS for SqlServer/G：',
+    value: 997.17,
+  },
 ]
 
 export const shujuziyuanqingkuangArray = [
-    {
-        name: '已上线目录：',
-        value: 10372,
-        danwei: '条',
-    },
-    {
-        name: '已发布服务：',
-        value: 1080,
-        danwei: '条',
-    },
-    {
-        name: '已发布接口：',
-        value: 976,
-        danwei: '条',
-    },
-    {
-        name: '更新时间：',
-        value: '2022-05-06',
-    },
-]
\ No newline at end of file
+  {
+    name: '已上线目录：',
+    value: 10372,
+    danwei: '条',
+  },
+  {
+    name: '已发布服务：',
+    value: 1080,
+    danwei: '条',
+  },
+  {
+    name: '已发布接口：',
+    value: 976,
+    danwei: '条',
+  },
+  {
+    name: '更新时间：',
+    value: '2022-05-06',
+  },
+]
diff --git a/front/src/views/home/integrationServices.vue b/front/src/views/home/integrationServices.vue
index 14b1cf29..2f8e4332 100644
--- a/front/src/views/home/integrationServices.vue
+++ b/front/src/views/home/integrationServices.vue
@@ -1,263 +1,280 @@
 <template>
-    <!-- 青岛 -->
-    <div class="details-pageconetent">
-        <home-header></home-header>
-        <div class="top">
-            <div class="resultListSearchInput-father">
-                <div class="resultListSearchInput-son">
-                    模糊搜索
-                    <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-                        @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
-                    <button class="button-reset" @click="chongzhi()">重置</button>
-                    <div class="hengxian"></div>
-                </div>
-            </div>
-            <searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
-                :resourceList="resourceList" :resourceTotal="resourceTotal" selectCardsname="融合服务" />
-            <div class="pagination">
-                <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-                    v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
-                    :total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
-                    @showSizeChange="onShowSizeChange" />
-            </div>
-            <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
-                <a-empty />
-            </div>
+  <!-- 青岛 -->
+  <div class="details-pageconetent">
+    <home-header></home-header>
+    <div class="top">
+      <div class="resultListSearchInput-father">
+        <div class="resultListSearchInput-son">
+          模糊搜索
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
+          <button class="button-reset" @click="chongzhi()">重置</button>
+          <div class="hengxian"></div>
         </div>
+      </div>
+      <searchResultList
+        v-show="resourceList.data && resourceList.data.length > 0"
+        :key="listKey2"
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+        selectCardsname="融合服务"
+      />
+      <div class="pagination">
+        <a-pagination
+          v-if="resourceList.data && resourceList.data.length > 0"
+          v-model:current="currentPage"
+          v-model:pageSize="currentPageSize"
+          show-size-changer
+          show-less-items
+          show-quick-jumper
+          :total="resourceTotal"
+          :page-size-options="pageSizeOptions"
+          @change="pageChange"
+          @showSizeChange="onShowSizeChange"
+        />
+      </div>
+      <div
+        v-if="resourceList.data && resourceList.data.length <= 0"
+        style="margin-top: 2rem"
+      >
+        <a-empty />
+      </div>
     </div>
-    <home-footer></home-footer>
+  </div>
+  <home-footer></home-footer>
 </template>
 <script>
-import HomeFooter from '@/views/newHome/components/Footer'
-import mybus from '@/myplugins/mybus'
-import {
-    defineComponent,
-    reactive,
-    ref,
-    toRefs,
-    onMounted,
-    watch,
-} from 'vue'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import mybus from '@/myplugins/mybus'
+  import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
 
-import {
-    getIntegrationServicesList,
-} from '@/api/home.js'
-import { useRouter } from 'vue-router'
-import HomeHeader from '@/views/home/components/header'
-import searchResultList from '@/views/home/components/searchResultList.vue'
-import { message } from 'ant-design-vue'
+  import { getIntegrationServicesList } from '@/api/home.js'
+  import { useRouter } from 'vue-router'
+  import HomeHeader from '@/views/home/components/header'
+  import searchResultList from '@/views/home/components/searchResultList.vue'
+  import { message } from 'ant-design-vue'
 
-export default defineComponent({
+  export default defineComponent({
     setup() {
+      // 分页
+      const loading = ref(true)
+      const currentPage = ref(1)
+      const currentPageSize = ref(5)
+      const pageSizeOptions = ref(['5', '10', '20', '50'])
+      const router = useRouter()
+      const select = router.currentRoute.value.query.select
+      const searchValue = ref('')
+      const Cardsname = ref(select)
+      const resourceList = reactive({ data: [] })
+      const resourceTotal = ref(0)
+      const current = ref(1)
+      // 刷新筛选条件组件
+      let listKey = ref(0)
+      // 刷新筛选列表信息组件
+      const listKey2 = ref(0)
+
+      // 查询参数
+      const paramsGetResources = {
+        pageNum: 1,
+        pageSize: currentPageSize.value,
+        type: Cardsname.value,
+        name: '',
+        orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
+        orderType: 'DESC', // ASC 升序  DESC 降序
+      }
+
+      // 查询
+      const onSearch = () => {
+        loading.value = true
+        currentPage.value = 1
+      }
+      // 重置数据
+      const chongzhi = () => {
+        loading.value = true
+        // 重置模糊查字段
+        searchValue.value = ''
         // 分页
-        const loading = ref(true)
-        const currentPage = ref(1)
-        const currentPageSize = ref(5)
-        const pageSizeOptions = ref(['5', '10', '20', '50'])
-        const router = useRouter()
-        const select = router.currentRoute.value.query.select
-        const searchValue = ref('')
-        const Cardsname = ref(select)
-        const resourceList = reactive({ data: [] })
-        const resourceTotal  = ref(0)
-        const current = ref(1)
-        // 刷新筛选条件组件
-        let listKey = ref(0)
-        // 刷新筛选列表信息组件
-        const listKey2 = ref(0)
-        
-        // 查询参数
-        const paramsGetResources = {
-            pageNum: 1,
-            pageSize: currentPageSize.value,
-            type: Cardsname.value,
-            name: '',
-            orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
-            orderType: 'DESC', // ASC 升序  DESC 降序
-        }
-      
-        // 查询
-        const onSearch = () => {
-            loading.value = true
-            currentPage.value = 1
-        }
-        // 重置数据
-        const chongzhi = () => {
-            loading.value = true
-            // 重置模糊查字段
-            searchValue.value = ''
-            // 分页
-            currentPage.value = 1
-            currentPageSize.value = 5
-            // 重置查询条件
-            paramsGetResources.pageNum = 1
-            paramsGetResources.pageSize = 5
-            paramsGetResources.orderField = 'create_date'
-            paramsGetResources.orderType = 'DESC'
-            mybus.emit('chongzhi', {
-                type: '融合服务'
-            })
-            getAppResources()
-        }
+        currentPage.value = 1
+        currentPageSize.value = 5
+        // 重置查询条件
+        paramsGetResources.pageNum = 1
+        paramsGetResources.pageSize = 5
+        paramsGetResources.orderField = 'create_date'
+        paramsGetResources.orderType = 'DESC'
+        mybus.emit('chongzhi', {
+          type: '融合服务',
+        })
+        getAppResources()
+      }
 
+      const getAppResources = () => {
+        getIntegrationList()
+      }
 
-        const getAppResources = () => {
-            getIntegrationList()
+      // 获取融合服务列表
+      const getIntegrationList = () => {
+        let postData = {
+          limit: currentPageSize.value,
+          page: currentPage.value,
+          orderField: paramsGetResources.orderField,
+          orderType: paramsGetResources.orderType,
+          name: searchValue.value,
         }
-
-        // 获取融合服务列表
-        const getIntegrationList = () => {
-            let postData = {
-                limit: currentPageSize.value,
-                page: currentPage.value,
-                orderField: paramsGetResources.orderField,
-                orderType: paramsGetResources.orderType,
-                name: searchValue.value
+        getIntegrationServicesList(postData).then(
+          (res) => {
+            if (res.data.code !== 0) {
+              return message.error(res.data.msg)
             }
-            getIntegrationServicesList(postData).then(res => {
-                if (res.data.code !== 0) {
-                    return message.error(res.data.msg)
-                }
-                resourceList.data = res.data.data.list || []
-                resourceTotal.value = res.data.data.total || 0
-            }, err => {
-                message.error(err)
-            })
+            resourceList.data = res.data.data.list || []
+            resourceTotal.value = res.data.data.total || 0
+          },
+          (err) => {
+            message.error(err)
+          }
+        )
+      }
+
+      mybus.on('paramsGetResources', (ids) => {
+        if (ids && ids.length > 0) {
+          paramsGetResources.deptIds = ids
+        } else {
+          delete paramsGetResources.deptIds
         }
+        getAppResources()
+        console.log('paramsGetResources', paramsGetResources)
+      })
+      mybus.on('changePage', (page) => {
+        paramsGetResources.pageNum = page
+        getAppResources('分页查询')
+      })
+      mybus.on('changeSelcted', () => {
+        getAppResources()
+      })
 
-        mybus.on('paramsGetResources', (ids) => {
-            if (ids && ids.length > 0) {
-                paramsGetResources.deptIds = ids
-            } else {
-                delete paramsGetResources.deptIds
-            }
-            getAppResources()
-            console.log('paramsGetResources', paramsGetResources)
-        })
-        mybus.on('changePage', (page) => {
-            paramsGetResources.pageNum = page
-            getAppResources('分页查询')
-        })
-        mybus.on('changeSelcted', () => {
-            getAppResources()
-        })
+      mybus.on('refresh', () => {
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        getAppResources()
+      })
+      mybus.on('changeCondition', (condition) => {
+        paramsGetResources.orderField = condition.orderField
+        paramsGetResources.orderType = condition.orderType
+        getAppResources()
+      })
 
-        mybus.on('refresh', () => {
-            paramsGetResources.pageNum = 1
-            currentPage.value = 1
-            getAppResources()
-        })
-        mybus.on('changeCondition', (condition) => {
-            paramsGetResources.orderField = condition.orderField
-            paramsGetResources.orderType = condition.orderType
-            getAppResources()
-        })
+      const pageChange = (val) => {
+        console.log(val)
+        loading.value = true
+        currentPage.value = val
+        paramsGetResources.pageNum = val
+        let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
+        getAppResources(params)
+      }
 
-        const pageChange = (val) => {
-            console.log(val)
-            loading.value = true
-            currentPage.value = val
-            paramsGetResources.pageNum = val
-            let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
-            getAppResources(params)
-        }
+      onMounted(() => {
+        listKey2.value++
+        getAppResources()
+      })
 
-        onMounted(() => {
-            listKey2.value++;
-            getAppResources()
-        })
+      // 分页
+      const onShowSizeChange = (current, pageSize) => {
+        currentPage.value = current
+        currentPageSize.value = pageSize
+        paramsGetResources.pageNum = current
+        paramsGetResources.pageSize = pageSize
+        getAppResources()
+      }
+      watch(currentPageSize, () => {
+        console.log('pageSize', currentPageSize.value)
+      })
 
-        // 分页
-        const onShowSizeChange = (current, pageSize) => {
-            currentPage.value = current
-            currentPageSize.value = pageSize
-            paramsGetResources.pageNum = current
-            paramsGetResources.pageSize = pageSize
-            getAppResources()
-        }
-        watch(currentPageSize, () => {
-            console.log('pageSize', currentPageSize.value)
-        })
-      
-        return {
-            listKey,
-            searchValue,
-            currentPage,
-            resourceList,
-            resourceTotal,
-            pageChange,
-            listKey2,
-            Cardsname,
-            getAppResources,
-            chongzhi,
-            onSearch,
-            currentPageSize,
-            pageSizeOptions,
-            current,
-            loading,
-        }
+      return {
+        listKey,
+        searchValue,
+        currentPage,
+        resourceList,
+        resourceTotal,
+        pageChange,
+        listKey2,
+        Cardsname,
+        getAppResources,
+        chongzhi,
+        onSearch,
+        currentPageSize,
+        pageSizeOptions,
+        current,
+        loading,
+        onShowSizeChange,
+      }
     },
     components: {
-        HomeHeader,
-        HomeFooter,
-        searchResultList,
+      HomeHeader,
+      HomeFooter,
+      searchResultList,
     },
     beforeUnmount() {
-        mybus.off('paramsGetResources')
-        mybus.off('changeCondition')
-        mybus.off('refresh')
-        mybus.off('changePage')
+      mybus.off('paramsGetResources')
+      mybus.off('changeCondition')
+      mybus.off('refresh')
+      mybus.off('changePage')
     },
-})
+  })
 </script>
 <style lang="less" scoped>
-.resultListSearchInput-father {
+  .resultListSearchInput-father {
     background: #f3f5f9;
     padding: 0.2rem;
 
     // padding-left: 0.2rem;
     // padding-top: 0.2rem;
     .resultListSearchInput-son {
-        background: #fff;
-        padding: 0.2rem 0.2rem 0rem 0.3rem;
+      background: #fff;
+      padding: 0.2rem 0.2rem 0rem 0.3rem;
 
-        .hengxian {
-            width: 100%;
-            height: 0.01rem;
-            background: rgba(150, 144, 144, 0.3);
-            margin-top: 0.2rem;
-        }
+      .hengxian {
+        width: 100%;
+        height: 0.01rem;
+        background: rgba(150, 144, 144, 0.3);
+        margin-top: 0.2rem;
+      }
     }
-}
+  }
 
-.resultListSearchInput {
+  .resultListSearchInput {
     margin-left: 0.1rem;
 
     :deep(.ant-input) {
-        width: 4rem;
-        height: 0.36rem;
-        background: #fff;
-        border-radius: 0.04rem;
+      width: 4rem;
+      height: 0.36rem;
+      background: #fff;
+      border-radius: 0.04rem;
     }
 
     :deep(.ant-input-search-button) {
-        width: 0.8rem;
-        height: 0.36rem;
-        background: #0087ff;
-        border-radius: 0.04rem !important;
-        font-size: 0.14rem;
-        font-weight: 400;
-        color: #fff;
-        line-height: 0.34rem;
-        margin-left: 0.1rem;
+      width: 0.8rem;
+      height: 0.36rem;
+      background: #0087ff;
+      border-radius: 0.04rem !important;
+      font-size: 0.14rem;
+      font-weight: 400;
+      color: #fff;
+      line-height: 0.34rem;
+      margin-left: 0.1rem;
     }
 
     :deep(.ant-input-group-addon) {
-        left: 0 !important;
+      left: 0 !important;
     }
-}
+  }
 
-.button-reset {
+  .button-reset {
     border: 0;
     outline: none;
     width: 0.8rem;
@@ -270,9 +287,9 @@ export default defineComponent({
     line-height: 0.34rem;
     margin-left: 2.5rem;
     cursor: pointer;
-}
+  }
 
-.details-pageconetent {
+  .details-pageconetent {
     height: 100%;
     width: 100%;
     display: flex;
@@ -283,37 +300,37 @@ export default defineComponent({
     background: rgba(245, 243, 243, 0.3);
 
     .details-pageconetent-left {
-        max-height: 6.9rem;
-        position: absolute;
-        width: 2.5rem;
-        top: 0.17rem;
-        left: 2.5rem;
-        margin-right: 0.17rem;
-        overflow: auto;
+      max-height: 6.9rem;
+      position: absolute;
+      width: 2.5rem;
+      top: 0.17rem;
+      left: 2.5rem;
+      margin-right: 0.17rem;
+      overflow: auto;
     }
 
     .top {
-        min-height: 7.2rem;
-        position: relative;
-        width: 11.5rem;
-        display: flex;
-        padding-top: 0.2rem;
-        flex-direction: column;
-        font-size: 0.16rem;
-        justify-content: left;
+      min-height: 7.2rem;
+      position: relative;
+      width: 11.5rem;
+      display: flex;
+      padding-top: 0.2rem;
+      flex-direction: column;
+      font-size: 0.16rem;
+      justify-content: left;
+      background: #f3f5f9;
+
+      .pagination {
         background: #f3f5f9;
-
-        .pagination {
-            background: #f3f5f9;
-            padding-bottom: 0.6rem;
-        }
+        padding-bottom: 0.6rem;
+      }
     }
-}
+  }
 
-:deep(.ant-card-grid) {
+  :deep(.ant-card-grid) {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     -webkit-line-clamp: 1;
-}
+  }
 </style>
diff --git a/front/src/views/home/integrationServicesDetails.vue b/front/src/views/home/integrationServicesDetails.vue
index b42ce15f..fe18730d 100644
--- a/front/src/views/home/integrationServicesDetails.vue
+++ b/front/src/views/home/integrationServicesDetails.vue
@@ -2,13 +2,20 @@
 <template>
   <div class="IntegrationServicesDetails" :class="{ fixed2: scrollTop >= 600 }">
     <!-- 头部基本信息 -->
-    <application-top-details :dataList="detailInfoObj" :navList="navList"></application-top-details>
+    <application-top-details
+      :dataList="detailInfoObj"
+      :navList="navList"
+    ></application-top-details>
 
     <!-- 导航 -->
     <div :class="{ fixed: scrollTop >= 600 }">
       <div class="application-navigation">
         <template v-for="nav in navList" :key="nav.key">
-          <div class="nav" :class="{ selectNow: nav.key == selectNow }" @click="selectNav(nav.key)">
+          <div
+            class="nav"
+            :class="{ selectNow: nav.key == selectNow }"
+            @click="selectNav(nav.key)"
+          >
             {{ nav.name }}
             <span class="line"></span>
           </div>
@@ -17,7 +24,10 @@
     </div>
 
     <!-- 组合能力 -->
-    <div id="integration-combination-ability" class="combination-ability scrollBox">
+    <div
+      id="integration-combination-ability"
+      class="combination-ability scrollBox"
+    >
       <div class="title-1">
         <DetalsTitle title="组合能力" type="COMBINATION ABILITY"></DetalsTitle>
       </div>
@@ -50,9 +60,17 @@
           </div>
         </div>
         <div class="content-card flex-row-start">
-          <div class="right-item content-card-item" v-for="(use, i) in useWayShowList" :key="i">
+          <div
+            class="right-item content-card-item"
+            v-for="(use, i) in useWayShowList"
+            :key="i"
+          >
             <div class="card-title title">{{ use.title }}</div>
-            <div class="card-text" v-for="(d, k) in Object.keys(use.info)" :key="k">
+            <div
+              class="card-text"
+              v-for="(d, k) in Object.keys(use.info)"
+              :key="k"
+            >
               {{ use.info[d] }}:{{ detailInfoObj[d] || '--' }}
             </div>
           </div>
@@ -61,390 +79,403 @@
     </div>
 
     <!-- 常见问题-->
-    <application-common-problem :dataList="detailInfoObj" id="common-problem" class="scrollBox">
-    </application-common-problem>
+    <application-common-problem
+      :dataList="detailInfoObj"
+      id="common-problem"
+      class="scrollBox"
+    ></application-common-problem>
 
     <home-footer></home-footer>
   </div>
 </template>
 
 <script setup>
-import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
-import HomeFooter from '@/views/newHome/components/Footer'
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import { getIntegrationDetail } from '@/api/home'
-import mybus from '@/myplugins/mybus'
+  import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { getIntegrationDetail } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const id = router.currentRoute.value.query.id
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top =
+      document.querySelector('#' + id) &&
+      document.querySelector('#' + id).offsetTop - 50
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
 
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const id = router.currentRoute.value.query.id
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id) && document.querySelector('#' + id).offsetTop - 50;
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-
-const navList = ref([
-  {
-    name: '组合能力',
-    key: 'integration-combination-ability',
-  },
-  {
-    name: '使用方式',
-    key: 'integration-use-way',
-  },
-  {
-    name: '常见问题',
-    key: 'common-problem',
-  },
-])
-
-const selectNow = ref('integration-combination-ability')
-
-const useWayShowList = ref([
-  {
-    title: '归属部门',
-    info: {
-      deptUser: '部门联系人',
-      mobile: '联系人电话',
+  const navList = ref([
+    {
+      name: '组合能力',
+      key: 'integration-combination-ability',
     },
-  },
-  {
-    title: '服务商',
-    info: {
-      providerUser: '服务商联系人',
-      providerMobile: '联系人电话',
+    {
+      name: '使用方式',
+      key: 'integration-use-way',
     },
-  },
-])
+    {
+      name: '常见问题',
+      key: 'common-problem',
+    },
+  ])
 
-const combineList = ref([
-  {
-    title: '基础设施',
-    list: []
-  },
-  {
-    title: '组件服务',
-    list: []
-  },
-  {
-    title: '数据资源',
-    list: []
-  },
-])
-const detailInfoObj = ref({})
+  const selectNow = ref('integration-combination-ability')
 
-onMounted(() => {
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
+  const useWayShowList = ref([
+    {
+      title: '归属部门',
+      info: {
+        deptUser: '部门联系人',
+        mobile: '联系人电话',
+      },
+    },
+    {
+      title: '服务商',
+      info: {
+        providerUser: '服务商联系人',
+        providerMobile: '联系人电话',
+      },
+    },
+  ])
+
+  const combineList = ref([
+    {
+      title: '基础设施',
+      list: [],
+    },
+    {
+      title: '组件服务',
+      list: [],
+    },
+    {
+      title: '数据资源',
+      list: [],
+    },
+  ])
+  const detailInfoObj = ref({})
+
+  onMounted(() => {
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
         }
       }
-    }
-  })
-})
-
-const selectNav = (key) => {
-  selectNow.value = key
-  mybus.emit('flyToView', selectNow.value)
-}
-
-// 融合服务--详情
-const getIntegrationServicesDeatil = (id) => {
-  getIntegrationDetail(id).then(res => {
-    if (res.data.code !== 0) {
-      return message.error(res.data.msg)
-    }
-    detailInfoObj.value = res.data.data || {}
-    // 资源属性
-    let fuseAttrList = res.data.data.fuseAttrList || []
-    // 融合关系
-    let fuseResourceList = res.data.data.fuseResourceList || []
-    let questionValue = fuseAttrList.find(v => v.attrType === '常见问题') || {}
-    let questionObj = {
-      attrType: '常见问题',
-      attrValue: questionValue.attrValue || "[]"
-    }
-    let areaObj = {
-      attrType: '应用领域',
-      attrValue: detailInfoObj.value.applicationArea
-    }
-    combineList.value.map(item => {
-      let arr = (fuseResourceList.filter(v => v.resource && v.resource.type == item.title) || []).map(d => d.resource.name)
-      item.list = arr;
-      return item
     })
-    detailInfoObj.value.infoList = []
-    detailInfoObj.value.infoList.push(questionObj)
-    detailInfoObj.value.infoList.push(areaObj)
-  }, err => {
-    message.error(err)
   })
-}
-getIntegrationServicesDeatil(id)
 
-function handleOpenUrl(type) {
-  let obj = (detailInfoObj.value.fuseAttrList || []).find(v => v.attrType == type) || {};
-  let url = obj.attrValue || '';
-  if (!obj.attrValue) {
-    return message.error('错误的文档链接地址！')
+  const selectNav = (key) => {
+    selectNow.value = key
+    mybus.emit('flyToView', selectNow.value)
   }
-  window.open(
-    window.SITE_CONFIG.previewUrl +
-    'hisense_office/onlinePreview?url=' +
-    btoa(encodeURI(url))
-  )
-}
 
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  // 融合服务--详情
+  const getIntegrationServicesDeatil = (id) => {
+    getIntegrationDetail(id).then(
+      (res) => {
+        if (res.data.code !== 0) {
+          return message.error(res.data.msg)
+        }
+        detailInfoObj.value = res.data.data || {}
+        // 资源属性
+        let fuseAttrList = res.data.data.fuseAttrList || []
+        // 融合关系
+        let fuseResourceList = res.data.data.fuseResourceList || []
+        let questionValue =
+          fuseAttrList.find((v) => v.attrType === '常见问题') || {}
+        let questionObj = {
+          attrType: '常见问题',
+          attrValue: questionValue.attrValue || '[]',
+        }
+        let areaObj = {
+          attrType: '应用领域',
+          attrValue: detailInfoObj.value.applicationArea,
+        }
+        combineList.value.map((item) => {
+          let arr = (
+            fuseResourceList.filter(
+              (v) => v.resource && v.resource.type == item.title
+            ) || []
+          ).map((d) => d.resource.name)
+          item.list = arr
+          return item
+        })
+        detailInfoObj.value.infoList = []
+        detailInfoObj.value.infoList.push(questionObj)
+        detailInfoObj.value.infoList.push(areaObj)
+      },
+      (err) => {
+        message.error(err)
+      }
+    )
+  }
+  getIntegrationServicesDeatil(id)
+
+  function handleOpenUrl(type) {
+    let obj =
+      (detailInfoObj.value.fuseAttrList || []).find(
+        (v) => v.attrType == type
+      ) || {}
+    let url = obj.attrValue || ''
+    if (!obj.attrValue) {
+      return message.error('错误的文档链接地址！')
+    }
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(url))
+    )
+  }
+
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 
 <style lang="less" scoped>
-.flex-row-between {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.flex-row-start {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.flex-row-center {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-
-.IntegrationServicesDetails {
-  .fixed {
-    position: fixed !important;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-
-  .fixed2>div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
-
-  .application-navigation {
-    width: 19.12rem;
-    height: 0.84rem;
-    line-height: 0.8rem;
+  .flex-row-between {
     display: flex;
-    justify-content: space-around;
-    font-size: 0.24rem;
-    color: #666;
-    background: #fff;
-    padding: 0 3rem;
-    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
-    position: relative;
-
-    .nav {
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-
-      .line {
-        width: 0.4rem;
-        height: 0.04rem;
-      }
-    }
-
-    .selectNow {
-      color: #526aff;
-
-      .line {
-        background: #526aff;
-      }
-    }
-  }
-}
-
-.use-way {
-  padding: 0.8rem 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .title-1 {
-    margin-bottom: 0.3rem;
-  }
-
-
-
-  .left {
-    .btn {
-      padding: 10px 20px;
-      color: #526aff;
-      background: #fff;
-      border-radius: 50px;
-      margin: 10px;
-      font-size: 0.2rem;
-      width: 150px;
-      text-align: center;
-      cursor: pointer;
-    }
-
-    .btn-box {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-    }
-  }
-
-  .content {
-    display: flex;
-    width: 13rem;
+    flex-direction: row;
+    align-items: center;
     justify-content: space-between;
+  }
 
-    .word-bg {
-      background: linear-gradient(90deg, #7184fc, #94a3fc) !important;
+  .flex-row-start {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .flex-row-center {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .IntegrationServicesDetails {
+    .fixed {
+      position: fixed !important;
+      z-index: 2000;
+      top: 0;
+      left: 0;
     }
 
-    .content-card {
-      height: 1.5rem;
-      width: 6.2rem;
-      border-radius: 0.2rem;
-      background: linear-gradient(to right,
-          rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4));
-      padding: 0 0.3rem;
+    .fixed2 > div:nth-of-type(3) {
+      margin-top: 0.84rem;
+    }
+
+    .application-navigation {
+      width: 19.12rem;
+      height: 0.84rem;
+      line-height: 0.8rem;
       display: flex;
-      justify-content: center;
+      justify-content: space-around;
+      font-size: 0.24rem;
+      color: #666;
+      background: #fff;
+      padding: 0 3rem;
+      box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
+      position: relative;
 
-      .card-title {
-        font-size: 0.26rem;
-        color: #212956;
-        margin-bottom: 0.2rem;
-        line-height: 0.26rem;
+      .nav {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        .line {
+          width: 0.4rem;
+          height: 0.04rem;
+        }
       }
 
-      .content-card-item {
-        width: 50%;
+      .selectNow {
+        color: #526aff;
 
-        .card-text {
-          margin-right: 0.2rem;
-          color: rgba(33, 41, 86, 0.8);
-          font-size: 0.2rem;
-          max-width: 2.8rem;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-        }
-
-        div:first-child {
-          display: block;
+        .line {
+          background: #526aff;
         }
       }
     }
   }
-}
 
-.combination-ability {
-  padding: 0.8rem 0;
-  background: rgb(247, 248, 250);
-
-  .title-1 {
-    margin-bottom: 0.3rem;
-  }
-
-  .combine-content {
-    width: 13rem;
-    margin: 0 auto;
-  }
-
-  .combine-item {
-    margin: 0 0.1rem;
-    width: 4.28rem;
+  .use-way {
+    padding: 0.8rem 0;
     display: flex;
     flex-direction: column;
     align-items: center;
-    border: 1px solid #e4e6f5;
-    border-radius: 0.1rem;
-    padding: 0.1rem 0;
-    cursor: pointer;
-    height: 2.5rem;
 
-    &:hover {
-      border-radius: 0.02rem;
-      border: 0.01rem solid #0058e1;
-      box-shadow: 0rem 0.08rem 0.2rem rgb(0 88 225 / 30%);
+    .title-1 {
+      margin-bottom: 0.3rem;
     }
 
-    .title {
+    .left {
+      .btn {
+        padding: 10px 20px;
+        color: #526aff;
+        background: #fff;
+        border-radius: 50px;
+        margin: 10px;
+        font-size: 0.2rem;
+        width: 150px;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .btn-box {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+    }
+
+    .content {
+      display: flex;
+      width: 13rem;
+      justify-content: space-between;
+
+      .word-bg {
+        background: linear-gradient(90deg, #7184fc, #94a3fc) !important;
+      }
+
+      .content-card {
+        height: 1.5rem;
+        width: 6.2rem;
+        border-radius: 0.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        padding: 0 0.3rem;
+        display: flex;
+        justify-content: center;
+
+        .card-title {
+          font-size: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+          line-height: 0.26rem;
+        }
+
+        .content-card-item {
+          width: 50%;
+
+          .card-text {
+            margin-right: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            font-size: 0.2rem;
+            max-width: 2.8rem;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+
+          div:first-child {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  .combination-ability {
+    padding: 0.8rem 0;
+    background: rgb(247, 248, 250);
+
+    .title-1 {
+      margin-bottom: 0.3rem;
+    }
+
+    .combine-content {
+      width: 13rem;
+      margin: 0 auto;
+    }
+
+    .combine-item {
+      margin: 0 0.1rem;
+      width: 4.28rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border: 1px solid #e4e6f5;
+      border-radius: 0.1rem;
+      padding: 0.1rem 0;
+      cursor: pointer;
+      height: 2.5rem;
+
+      &:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgb(0 88 225 / 30%);
+      }
+
+      .title {
+        color: #212121;
+        text-align: center;
+        padding: 0.2rem 0;
+        font-size: 0.22rem;
+        text-align: center;
+      }
+    }
+
+    .name-box {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      width: 100%;
+    }
+
+    .no-data {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.16rem;
+      color: #666;
+      text-align: center;
+    }
+
+    .name-text {
+      font-size: 0.16rem;
       color: #212121;
+      line-height: 0.3rem;
+      height: 0.3rem;
       text-align: center;
-      padding: 0.2rem 0;
-      font-size: .22rem;
-      text-align: center;
+      width: 50%;
+      box-sizing: border-box;
     }
-
   }
-
-  .name-box {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    width: 100%;
-  }
-
-  .no-data {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.16rem;
-    color: #666;
-    text-align: center;
-  }
-
-  .name-text {
-    font-size: 0.16rem;
-    color: #212121;
-    line-height: 0.3rem;
-    height: 0.3rem;
-    text-align: center;
-    width: 50%;
-    box-sizing: border-box;
-  }
-
-}
 </style>
diff --git a/front/src/views/instructionManual/components/abilityDocTree.vue b/front/src/views/instructionManual/components/abilityDocTree.vue
index b1874596..a88e101a 100644
--- a/front/src/views/instructionManual/components/abilityDocTree.vue
+++ b/front/src/views/instructionManual/components/abilityDocTree.vue
@@ -56,7 +56,7 @@
     clickData: {
       type: Object,
       default: () => {
-        title: ''
+        ''
       },
     },
   })
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
index 10350124..b21d0231 100644
--- a/front/src/views/instructionManual/index.vue
+++ b/front/src/views/instructionManual/index.vue
@@ -4,21 +4,40 @@
     <div id="container" class="content-menu">
       <div class="rela">
         <div class="left">
-          <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
-            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
+          <div
+            class="first-title-text"
+            v-for="(data, i) in titleList"
+            :key="i"
+            @click="changeName(data)"
+            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
+          >
             <div class="img" :class="data.className"></div>
             {{ data.name }}
           </div>
-          <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+          <abilityDocTree
+            :dataList="treeArray"
+            @treeClick="treeClick"
+            :clickData="clickData"
+          ></abilityDocTree>
         </div>
         <div class="right">
-          <div class="new-menu-box" style="height: 100%" v-if="titleData.name === '新手指引'">
+          <div
+            class="new-menu-box"
+            style="height: 100%"
+            v-if="titleData.name === '新手指引'"
+          >
             <!-- 新手指引 -->
             <a-empty description="新手指引" />
           </div>
-          <div v-else style="height:100%">
-            <iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
-              :src="doc_base_url + clickData.doc"></iframe>
+          <div v-else style="height: 100%">
+            <iframe
+              name="iframeName"
+              width="1000"
+              height="100%"
+              id="iframeId"
+              :frameborder="0"
+              :src="doc_base_url + clickData.doc"
+            ></iframe>
           </div>
         </div>
       </div>
@@ -26,199 +45,199 @@
   </div>
 </template>
 <script setup>
-import HomeHeader from '@/views/home/components/header'
-import abilityDocTree from './components/abilityDocTree'
-import { ref, reactive, onMounted, nextTick, watch } from 'vue'
-import { Empty, message } from 'ant-design-vue'
-import { getDevelopDocTree } from '@/api/home'
-import flatten from '@turf/flatten'
+  import HomeHeader from '@/views/home/components/header'
+  import abilityDocTree from './components/abilityDocTree'
+  import { ref, onMounted } from 'vue'
+  import { message } from 'ant-design-vue'
+  import { getDevelopDocTree } from '@/api/home'
+  // import flatten from '@turf/flatten'
 
-const titleList = ref([
-  {
-    name: '新手指引',
-    className: 'newGuide',
-  },
-  {
-    name: '技术文档',
-    className: 'doc',
-  },
-])
-const titleData = ref(titleList.value[0])
-const clickData = ref({})
-const treeArray = ref([])
-const treeArrayCopy = ref([])
-let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
-let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
+  const titleList = ref([
+    {
+      name: '新手指引',
+      className: 'newGuide',
+    },
+    {
+      name: '技术文档',
+      className: 'doc',
+    },
+  ])
+  const titleData = ref(titleList.value[0])
+  const clickData = ref({})
+  const treeArray = ref([])
+  const treeArrayCopy = ref([])
+  let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
+  let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
 
-const treeClick = (item) => {
-  clickData.value = item
-  console.log('clickData------------>', item)
-  titleData.value = titleList.value[1]
-}
-
-const getTreeData = () => {
-  getDevelopDocTree({})
-    .then((res) => {
-      console.log('res------文档树------>', res)
-      if (res.data.code !== 0) {
-        return message.error(res.data.msg)
-      }
-      treeArray.value = res.data.data || []
-      treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
-    })
-    .catch((err) => {
-      message.error(err)
-    })
-}
-
-const changeName = (item) => {
-  titleData.value = item
-  if (item.name == '新手指引') {
-    clickData.value = {}
+  const treeClick = (item) => {
+    clickData.value = item
+    console.log('clickData------------>', item)
+    titleData.value = titleList.value[1]
   }
-  if (item.name == '技术文档') {
-    if (!clickData.value.title) {
-      clickData.value = {}
-      treeArray.value = []
-      treeArrayCopy.value.map((val, i) => {
-        let obj = Object.assign({}, val, {
-          title: val.title,
-          show:
-            (i === 0 && val.children && val.children.length > 0) ||
-              typeList.includes(val.title)
-              ? true
-              : false,
-          children: [],
-        })
-        formData(val.children, obj)
-        treeArray.value.push(obj)
+
+  const getTreeData = () => {
+    getDevelopDocTree({})
+      .then((res) => {
+        console.log('res------文档树------>', res)
+        if (res.data.code !== 0) {
+          return message.error(res.data.msg)
+        }
+        treeArray.value = res.data.data || []
+        treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
       })
-      getFirstData(treeArrayCopy.value[0] || {})
+      .catch((err) => {
+        message.error(err)
+      })
+  }
+
+  const changeName = (item) => {
+    titleData.value = item
+    if (item.name == '新手指引') {
+      clickData.value = {}
+    }
+    if (item.name == '技术文档') {
+      if (!clickData.value.title) {
+        clickData.value = {}
+        treeArray.value = []
+        treeArrayCopy.value.map((val, i) => {
+          let obj = Object.assign({}, val, {
+            title: val.title,
+            show:
+              (i === 0 && val.children && val.children.length > 0) ||
+              typeList.includes(val.title)
+                ? true
+                : false,
+            children: [],
+          })
+          formData(val.children, obj)
+          treeArray.value.push(obj)
+        })
+        getFirstData(treeArrayCopy.value[0] || {})
+      }
     }
   }
-}
 
-const formData = (children = [], dataItem) => {
-  children.map((item, index) => {
-    let _obj = Object.assign({}, item, {
-      title: item.title,
-      show:
-        (index === 0 && item.children && item.children.length > 0) ||
+  const formData = (children = [], dataItem) => {
+    children.map((item, index) => {
+      let _obj = Object.assign({}, item, {
+        title: item.title,
+        show:
+          (index === 0 && item.children && item.children.length > 0) ||
           typeList.includes(item.title)
-          ? true
-          : false,
-      children: [],
+            ? true
+            : false,
+        children: [],
+      })
+      if (item.children && item.children.length > 0) {
+        formData(item.children, _obj)
+      }
+      dataItem.children.push(_obj)
     })
-    if (item.children && item.children.length > 0) {
-      formData(item.children, _obj)
-    }
-    dataItem.children.push(_obj)
-  })
-}
-
-const getFirstData = (firstObj = {}) => {
-  if (firstObj && firstObj.children && firstObj.children.length > 0) {
-    getFirstData(firstObj.children[0])
-  } else {
-    clickData.value = firstObj
   }
-}
 
-onMounted(() => {
-  getTreeData()
-})
+  const getFirstData = (firstObj = {}) => {
+    if (firstObj && firstObj.children && firstObj.children.length > 0) {
+      getFirstData(firstObj.children[0])
+    } else {
+      clickData.value = firstObj
+    }
+  }
+
+  onMounted(() => {
+    getTreeData()
+  })
 </script>
 
 <style scoped lang="less">
-.menu-box {
-  // overflow: hidden;
-  height: 100%;
-}
-
-.first-title-text {
-  cursor: pointer;
-  font-size: 18px;
-  color: #333;
-  padding-bottom: 10px;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    color: #0058e1;
+  .menu-box {
+    // overflow: hidden;
+    height: 100%;
   }
-}
 
-.content-menu {
-  width: 1240px;
-  display: flex;
-  justify-content: flex-start;
-  margin: 0 auto;
-  margin-top: 74px;
-  box-sizing: border-box;
-  position: fixed;
-  left: 50%;
-  bottom: 0;
-  transform: translateX(-50%);
-  top: 0.6rem;
-  top: 0;
-}
+  .first-title-text {
+    cursor: pointer;
+    font-size: 18px;
+    color: #333;
+    padding-bottom: 10px;
+    display: flex;
+    align-items: center;
 
-.left {
-  width: 240px;
-  padding: 20px;
-  height: 600px;
-  margin-right: 20px;
-  background: rgba(244, 245, 248, 0.8);
-  overflow-y: scroll;
-  position: absolute;
-  top: 10px;
-  left: 0;
-}
+    &:hover {
+      color: #0058e1;
+    }
+  }
 
-.right {
-  width: 870px;
-  height: calc(100% - 20px);
+  .content-menu {
+    width: 1240px;
+    display: flex;
+    justify-content: flex-start;
+    margin: 0 auto;
+    margin-top: 74px;
+    box-sizing: border-box;
+    position: fixed;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    top: 0.6rem;
+    top: 0;
+  }
 
-  position: absolute;
-  top: 10px;
-  left: 260px;
-}
+  .left {
+    width: 240px;
+    padding: 20px;
+    height: 600px;
+    margin-right: 20px;
+    background: rgba(244, 245, 248, 0.8);
+    overflow-y: scroll;
+    position: absolute;
+    top: 10px;
+    left: 0;
+  }
 
-.sidebar {
-  right: 0 !important;
-}
+  .right {
+    width: 870px;
+    height: calc(100% - 20px);
 
-.content {
-  right: 16rem !important;
-  left: 0 !important;
-}
+    position: absolute;
+    top: 10px;
+    left: 260px;
+  }
 
-.img {
-  height: 20px;
-  width: 20px;
-  margin-right: 8px;
-}
+  .sidebar {
+    right: 0 !important;
+  }
 
-.doc {
-  background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
-  background-size: 100%;
-}
+  .content {
+    right: 16rem !important;
+    left: 0 !important;
+  }
 
-.newGuide {
-  background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
-  background-size: 100%;
-}
+  .img {
+    height: 20px;
+    width: 20px;
+    margin-right: 8px;
+  }
 
-.new-menu-box {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .doc {
+    background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
+    background-size: 100%;
+  }
 
-.rela {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
+  .newGuide {
+    background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
+    background-size: 100%;
+  }
+
+  .new-menu-box {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .rela {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
 </style>
diff --git a/front/src/views/newHome/components/Navigation2.vue b/front/src/views/newHome/components/Navigation2.vue
index ed186af5..66fd5bc3 100644
--- a/front/src/views/newHome/components/Navigation2.vue
+++ b/front/src/views/newHome/components/Navigation2.vue
@@ -100,7 +100,7 @@
       query: {
         select: type,
         tecHnosphere: '',
-        appLiCation: ''
+        appLiCation: '',
       },
     })
   }
diff --git a/front/src/views/newHome/components/PopularAbility.vue b/front/src/views/newHome/components/PopularAbility.vue
index ee733fcf..9bdbb85c 100644
--- a/front/src/views/newHome/components/PopularAbility.vue
+++ b/front/src/views/newHome/components/PopularAbility.vue
@@ -153,195 +153,195 @@
   }
 </script>
 <style lang="less" scoped>
-.popular-ability {
-  height: 6.8rem;
-  background: url('~@/assets/newHome/popular-bg.png') no-repeat;
-  background-size: 100%;
-  display: flex;
-  justify-content: center;
-  .main {
-    width: 13rem;
-    margin-top: 0.78rem;
+  .popular-ability {
+    height: 6.8rem;
+    background: url('~@/assets/newHome/popular-bg.png') no-repeat;
+    background-size: 100%;
     display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    .top {
-      font-size: 0.3rem;
-      color: #fff;
-      text-align: center;
+    justify-content: center;
+    .main {
+      width: 13rem;
+      margin-top: 0.78rem;
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      .line {
-        width: 0.34rem;
-        height: 0.03rem;
-        background-color: #fff;
-        margin-top: 0.08rem;
-      }
-    }
-    .bottom {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 0.52rem;
-      .left {
+      .top {
+        font-size: 0.3rem;
+        color: #fff;
+        text-align: center;
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        .select {
-          cursor: pointer;
+        justify-content: center;
+        align-items: center;
+        .line {
+          width: 0.34rem;
+          height: 0.03rem;
+          background-color: #fff;
+          margin-top: 0.08rem;
+        }
+      }
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 0.52rem;
+        .left {
           display: flex;
           flex-direction: column;
           flex-wrap: wrap;
-          align-items: center;
-          justify-content: center;
-          width: 1.05rem;
-          height: 1.39rem;
-          background: rgba(255, 255, 255, 0.08);
-          margin-bottom: 0.01rem;
-          border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
-          .img {
-            width: 0.36rem;
-            height: 0.36rem;
-            background-size: 100%;
-          }
-          .fwl {
-            background: url('~@/assets/newHome/fwl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .sgl {
-            background: url('~@/assets/newHome/sgl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .scl {
-            background: url('~@/assets/newHome/scl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .text {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 0.14rem;
-            margin-top: 0.08rem;
-          }
-        }
-        .select:hover {
-          background: rgba(255, 255, 255, 0.12);
-        }
-        .checked {
-          background: rgba(255, 255, 255, 0.18) !important;
-          border-right: 0.02rem solid #fff;
-        }
-      }
-      .right {
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-left: 0.2rem;
-        .item {
-          width: 3.78rem;
-          height: 2rem;
-          display: flex;
-          .item-left {
-            width: 0.83rem;
-            height: 100%;
+          .select {
+            cursor: pointer;
             display: flex;
-            justify-content: center;
+            flex-direction: column;
+            flex-wrap: wrap;
             align-items: center;
-            background: #eef1f8;
+            justify-content: center;
+            width: 1.05rem;
+            height: 1.39rem;
+            background: rgba(255, 255, 255, 0.08);
+            margin-bottom: 0.01rem;
+            border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
             .img {
-              width: 0.56rem;
-              height: 0.56rem;
+              width: 0.36rem;
+              height: 0.36rem;
               background-size: 100%;
             }
-            .zj {
-              background: url('~@/assets/newHome/popular-zj.png') no-repeat;
+            .fwl {
+              background: url('~@/assets/newHome/fwl-no.png') no-repeat;
               background-size: contain;
             }
-            .yy {
-              background: url('~@/assets/newHome/popular-yy.png') no-repeat;
+            .sgl {
+              background: url('~@/assets/newHome/sgl-no.png') no-repeat;
               background-size: contain;
             }
-            .jc {
-              background: url('~@/assets/newHome/popular-jc.png') no-repeat;
+            .scl {
+              background: url('~@/assets/newHome/scl-no.png') no-repeat;
               background-size: contain;
             }
-            .sj {
-              background: url('~@/assets/newHome/popular-sj.png') no-repeat;
-              background-size: contain;
-            }
-            .zs {
-              background: url('~@/assets/newHome/popular-zs.png') no-repeat;
-              background-size: contain;
-            }
-          }
-          .item-right {
-            width: 100%;
-            height: 100%;
-            background: #fff;
-            .fw {
-              width: 100%;
-              padding-right: 0.1rem;
-              padding-top: 0.03rem;
-              text-align: right;
-              color: 666;
-              font-size: 0.14rem;
-              color: #666;
-            }
-            .name {
-              font-size: 0.18rem;
-              color: #212121;
-              text-align: center;
-              margin-top: 0.05rem;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              display: -webkit-box;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
-            }
             .text {
-              width: 100%;
-              padding: 0.24rem 0.3rem;
+              color: rgba(255, 255, 255, 0.6);
               font-size: 0.14rem;
-              color: #212121;
-              line-height: 0.24rem;
-              height: 1rem;
-              overflow: hidden;
+              margin-top: 0.08rem;
             }
           }
+          .select:hover {
+            background: rgba(255, 255, 255, 0.12);
+          }
+          .checked {
+            background: rgba(255, 255, 255, 0.18) !important;
+            border-right: 0.02rem solid #fff;
+          }
         }
-        .item:nth-of-type(4),
-        .item:nth-of-type(5),
-        .item:nth-of-type(6) {
-          margin-top: 0.2rem;
-        }
-        .item:hover {
-          border-radius: 0.02rem;
-          border: 0.01rem solid #0058e1;
-          box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+        .right {
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          margin-left: 0.2rem;
+          .item {
+            width: 3.78rem;
+            height: 2rem;
+            display: flex;
+            .item-left {
+              width: 0.83rem;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: #eef1f8;
+              .img {
+                width: 0.56rem;
+                height: 0.56rem;
+                background-size: 100%;
+              }
+              .zj {
+                background: url('~@/assets/newHome/popular-zj.png') no-repeat;
+                background-size: contain;
+              }
+              .yy {
+                background: url('~@/assets/newHome/popular-yy.png') no-repeat;
+                background-size: contain;
+              }
+              .jc {
+                background: url('~@/assets/newHome/popular-jc.png') no-repeat;
+                background-size: contain;
+              }
+              .sj {
+                background: url('~@/assets/newHome/popular-sj.png') no-repeat;
+                background-size: contain;
+              }
+              .zs {
+                background: url('~@/assets/newHome/popular-zs.png') no-repeat;
+                background-size: contain;
+              }
+            }
+            .item-right {
+              width: 100%;
+              height: 100%;
+              background: #fff;
+              .fw {
+                width: 100%;
+                padding-right: 0.1rem;
+                padding-top: 0.03rem;
+                text-align: right;
+                color: 666;
+                font-size: 0.14rem;
+                color: #666;
+              }
+              .name {
+                font-size: 0.18rem;
+                color: #212121;
+                text-align: center;
+                margin-top: 0.05rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+              }
+              .text {
+                width: 100%;
+                padding: 0.24rem 0.3rem;
+                font-size: 0.14rem;
+                color: #212121;
+                line-height: 0.24rem;
+                height: 1rem;
+                overflow: hidden;
+              }
+            }
+          }
+          .item:nth-of-type(4),
+          .item:nth-of-type(5),
+          .item:nth-of-type(6) {
+            margin-top: 0.2rem;
+          }
+          .item:hover {
+            border-radius: 0.02rem;
+            border: 0.01rem solid #0058e1;
+            box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+          }
         }
       }
-    }
-    .bottom-btn {
-      cursor: pointer;
-      text-align: center;
-      margin-top: 0.24rem;
-      color: #fff;
-      width: 1rem;
-      height: 0.24rem;
-      line-height: 0.24rem;
-      margin-left: 6rem;
-      span {
-        display: inline-block;
-        width: 0.1rem;
-        height: 0.1rem;
-        background: url('~@/assets/newHome/gd.png') no-repeat;
-        background-size: contain;
+      .bottom-btn {
+        cursor: pointer;
+        text-align: center;
+        margin-top: 0.24rem;
+        color: #fff;
+        width: 1rem;
+        height: 0.24rem;
+        line-height: 0.24rem;
+        margin-left: 6rem;
+        span {
+          display: inline-block;
+          width: 0.1rem;
+          height: 0.1rem;
+          background: url('~@/assets/newHome/gd.png') no-repeat;
+          background-size: contain;
+        }
+      }
+      .bottom-btn:hover {
+        background: rgba(0, 88, 225, 0.1);
       }
-    }
-    .bottom-btn:hover {
-      background: rgba(0, 88, 225, 0.1);
     }
   }
-}
 </style>
diff --git a/front/src/views/personalCenter/components/Collection.vue b/front/src/views/personalCenter/components/Collection.vue
index cc2f7180..a3fff65e 100644
--- a/front/src/views/personalCenter/components/Collection.vue
+++ b/front/src/views/personalCenter/components/Collection.vue
@@ -236,8 +236,8 @@
           checked: false,
           resourceId: val.resourceId,
           createDate: val.createDate,
-          updateDate: val.updateDate, 
-           ...getObj(val, val.resourceDTO ? 'resourceDTO' : 'fuseDTO')
+          updateDate: val.updateDate,
+          ...getObj(val, val.resourceDTO ? 'resourceDTO' : 'fuseDTO'),
         }
         if (checkedList.value.indexOf(val.resourceId) == -1) {
           checkAll.value = false
@@ -250,8 +250,8 @@
   }
 
   function getObj(val, typeStr) {
-    let typeObj = val[typeStr] || {};
-    console.log('typeObj------------>', typeObj);
+    let typeObj = val[typeStr] || {}
+    console.log('typeObj------------>', typeObj)
     return {
       name: typeObj.name,
       type: typeObj.type,
@@ -464,4 +464,4 @@
   .name:hover {
     color: #0087ff;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/views/personalCenter/components/addApplication.vue b/front/src/views/personalCenter/components/addApplication.vue
index 581d5c5b..53797b62 100644
--- a/front/src/views/personalCenter/components/addApplication.vue
+++ b/front/src/views/personalCenter/components/addApplication.vue
@@ -9,38 +9,83 @@
         <div class="form-container">
           <div v-if="applySuccess">
             <div class="title">申请人信息</div>
-            <a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
-              :wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
+            <a-form
+              ref="formRef"
+              :model="formName"
+              name="basic"
+              :label-col="{ style: { width: '106px' } }"
+              :wrapper-col="{ style: { width: '230px' } }"
+              labelAlign="left"
+              autocomplete="off"
+            >
               <div class="base-info">
-                <a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]">
-                  <a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" />
+                <a-form-item
+                  label="申请人"
+                  name="applyUserName"
+                  :rules="[{ required: true, message: '请输入申请人' }]"
+                >
+                  <a-input
+                    placeholder="请输入申请人"
+                    v-model:value="formName.applyUserName"
+                  />
                 </a-form-item>
 
-                <a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[
-                  {
-                    required: true,
-                    pattern: /^1[3456789]\d{9}$/,
-                    message: '请输入正确的电话号码',
-                  },
-                ]">
-                  <a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" />
+                <a-form-item
+                  style="margin: 0 22px"
+                  label="申请人电话"
+                  name="applyUserPhone"
+                  :rules="[
+                    {
+                      required: true,
+                      pattern: /^1[3456789]\d{9}$/,
+                      message: '请输入正确的电话号码',
+                    },
+                  ]"
+                >
+                  <a-input
+                    placeholder="请输入申请人电话"
+                    v-model:value="formName.applyUserPhone"
+                  />
                 </a-form-item>
 
-                <a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]">
-                  <a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" />
+                <a-form-item
+                  label="申请单位"
+                  name="applyUserDeptName"
+                  :rules="[{ required: true, message: '请输入申请单位' }]"
+                >
+                  <a-input
+                    placeholder="请输入申请单位"
+                    v-model:value="formName.applyUserDeptName"
+                  />
                 </a-form-item>
               </div>
 
               <div class="title">需求信息</div>
 
-              <a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject"
-                :rules="[{ required: true, message: '请输入需求标题' }]">
-                <a-input style="width: 350px" v-model:value="formName.demandSubject" />
+              <a-form-item
+                style="margin-bottom: 10px"
+                label="需求标题"
+                name="demandSubject"
+                :rules="[{ required: true, message: '请输入需求标题' }]"
+              >
+                <a-input
+                  style="width: 350px"
+                  v-model:value="formName.demandSubject"
+                />
               </a-form-item>
 
-              <a-form-item style="margin-bottom: 10px" label="需求类型" name="detailsType"
-                :rules="[{ required: true, message: '请选择需求类型' }]">
-                <a-select ref="select" v-model:value="formName.detailsType" @focus="focus" style="width: 200px">
+              <a-form-item
+                style="margin-bottom: 10px"
+                label="需求类型"
+                name="detailsType"
+                :rules="[{ required: true, message: '请选择需求类型' }]"
+              >
+                <a-select
+                  ref="select"
+                  v-model:value="formName.detailsType"
+                  @focus="focus"
+                  style="width: 200px"
+                >
                   <a-select-option value="基础设施">基础设施</a-select-option>
                   <a-select-option value="数据资源">数据资源</a-select-option>
                   <a-select-option value="组件服务">组件服务</a-select-option>
@@ -49,14 +94,26 @@
                 </a-select>
               </a-form-item>
 
-              <a-form-item label="应用领域" name="detailsField" style="width: 350px"
-                :rules="[{ required: true, message: '请输入应用领域' }]">
-                <a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" />
+              <a-form-item
+                label="应用领域"
+                name="detailsField"
+                style="width: 350px"
+                :rules="[{ required: true, message: '请输入应用领域' }]"
+              >
+                <a-input
+                  placeholder="请输入应用领域"
+                  v-model:value="formName.detailsField"
+                />
               </a-form-item>
 
-              <a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails"
-                :rules="[{ required: true, message: '请输入需求描述' }]">
-                <a-textarea style="
+              <a-form-item
+                style="margin-bottom: 10px"
+                label="需求描述"
+                name="demandDetails"
+                :rules="[{ required: true, message: '请输入需求描述' }]"
+              >
+                <a-textarea
+                  style="
                     width: 500px;
                     height: 150px;
                     font-size: 16px;
@@ -66,12 +123,24 @@
                     border-radius: 6px;
                     padding: 10px;
                     resize: none;
-                  " v-model:value="formName.demandDetails" />
+                  "
+                  v-model:value="formName.demandDetails"
+                />
               </a-form-item>
-              <a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc">
-                <a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers"
-                  @change="handleChange">
-                  <a-button style="
+              <a-form-item
+                style="color: #666; font-size: 16px"
+                label="附件上传"
+                name="applyDoc"
+              >
+                <a-upload
+                  v-model:file-list="fileList"
+                  name="file"
+                  :action="upLoadUrl"
+                  :headers="headers"
+                  @change="handleChange"
+                >
+                  <a-button
+                    style="
                       width: 100px;
                       height: 30px;
                       margin-right: 10px;
@@ -82,7 +151,8 @@
                       border: 1px solid #bbd3ef;
                       padding: 0;
                       text-align: center;
-                    ">
+                    "
+                  >
                     <upload-outlined></upload-outlined>
                     文件上传
                   </a-button>
@@ -93,7 +163,8 @@
               </a-form-item>
 
               <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-                <a-button style="
+                <a-button
+                  style="
                     width: 80px;
                     height: 38px;
                     margin-right: 20px;
@@ -104,10 +175,15 @@
                     border: none;
                     padding: 0;
                     text-align: center;
-                  " type="primary" html-type="cancle" @click="signOut">
+                  "
+                  type="primary"
+                  html-type="cancle"
+                  @click="signOut"
+                >
                   退出申请
                 </a-button>
-                <a-button style="
+                <a-button
+                  style="
                     width: 80px;
                     height: 38px;
                     background: #0087ff;
@@ -117,7 +193,11 @@
                     border: none;
                     padding: 0;
                     text-align: center;
-                  " type="primary" html-type="submit" @click="processStartHandle()">
+                  "
+                  type="primary"
+                  html-type="submit"
+                  @click="processStartHandle()"
+                >
                   提交申请
                 </a-button>
               </a-form-item>
@@ -129,7 +209,7 @@
             </div>
             <p>
               您已成功申请{{
-                  formName.demandSubject || ''
+                formName.demandSubject || ''
               }},请耐心等待审批结果，结果会第一时间通知您！
             </p>
           </div>
@@ -140,219 +220,219 @@
 </template>
 
 <script>
-import HomeHeader from '@/views/home/components/header'
-import { reactive, ref } from 'vue'
-import { message } from 'ant-design-vue'
-// import { UploadOutlined } from '@ant-design/icons-vue'
-import { getUser, getUserInfo, relaunch } from '@/api/home'
-import {
-  demandApply,
-  getDemandForm,
-  updateDemandForm,
-} from '@/api/personalCenter'
-// import { baseURL } from '@/config'
-import { useRouter } from 'vue-router'
+  import HomeHeader from '@/views/home/components/header'
+  import { reactive, ref } from 'vue'
+  import { message } from 'ant-design-vue'
+  // import { UploadOutlined } from '@ant-design/icons-vue'
+  import { getUser, getUserInfo, relaunch } from '@/api/home'
+  import {
+    demandApply,
+    getDemandForm,
+    updateDemandForm,
+  } from '@/api/personalCenter'
+  // import { baseURL } from '@/config'
+  import { useRouter } from 'vue-router'
 
-export default {
-  name: '',
-  props: {},
-  components: {
-    HomeHeader,
-    // UploadOutlined,
-  },
-  setup() {
-    const disabled = ref(false)
-    const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
-    const formName = reactive({
-      applyUserDeptId: '',
-      applyUserDeptName: '',
-      applyUserId: '',
-      applyUserName: '',
-      applyUserPhone: '',
-      demandDetails: '',
-      demandSubject: '',
-      detailsField: '',
-      detailsType: '',
-      enclosure: '',
-    })
-    // console.log(formName.demandSubject)
-
-    const router = useRouter()
-    const id = ref(router.currentRoute.value.query.id)
-    const taskId = ref(router.currentRoute.value.query.taskId)
-    if (id.value) {
-      getDemandForm(id.value).then((res) => {
-        console.log('回填数据===============>', res)
-        formName.applyUserPhone = res.data.data.applyUserPhone
-        formName.demandSubject = res.data.data.demandSubject
-        formName.detailsType = res.data.data.detailsType
-        formName.detailsField = res.data.data.detailsField
-        formName.demandDetails = res.data.data.demandDetails
-        formName.enclosure = res.data.data.enclosure
+  export default {
+    name: '',
+    props: {},
+    components: {
+      HomeHeader,
+      // UploadOutlined,
+    },
+    setup() {
+      const disabled = ref(false)
+      const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
+      const formName = reactive({
+        applyUserDeptId: '',
+        applyUserDeptName: '',
+        applyUserId: '',
+        applyUserName: '',
+        applyUserPhone: '',
+        demandDetails: '',
+        demandSubject: '',
+        detailsField: '',
+        detailsType: '',
+        enclosure: '',
       })
-    }
-    getUser().then((res) => {
-      formName.applyUserName = res.data.data.realName
-      formName.applyUserId = res.data.data.id
-      getUserInfo(formName.applyUserId).then((res) => {
-        if (res.data.data.mobile) {
-          formName.applyUserPhone = res.data.data.mobile
-        }
-        formName.applyUserDeptName = res.data.data.deptName
-        formName.applyUserDeptId = res.data.data.deptId
-      })
-    })
+      // console.log(formName.demandSubject)
 
-    const formRef = ref()
-    const applySuccess = ref(true)
-
-    // 退出
-    const signOut = () => {
-      window.close()
-    }
-    const handleChange = (info) => {
-      if (info.file.status !== 'uploading') {
-        console.log(info.file, info.fileList)
-      }
-
-      if (info.file.status === 'done') {
-        message.success(`${info.file.name} 文件上传成功`)
-        formName.enclosure = info.file.response.data
-      } else if (info.file.status === 'error') {
-        message.error(`${info.file.name} 文件上传失败`)
-      }
-    }
-
-    const fileList = ref([])
-
-    const processStartHandle = () => {
+      const router = useRouter()
+      const id = ref(router.currentRoute.value.query.id)
+      const taskId = ref(router.currentRoute.value.query.taskId)
       if (id.value) {
-        updateDemandForm(formName).then((upres) => {
-          if (upres.data.code == 0) {
-            relaunch({ data: formName, taskId: taskId.value }).then((res) => {
-              console.log('驳回================>', res)
-              if (res.data.code == 0) {
-                message.success('重新发起流程成功！')
-                window.setTimeout(() => {
-                  window.close()
-                }, 1000)
-              } else {
-                message.error('重新发起流程失败！')
-              }
-            })
-          } else {
-            message.error('数据更新失败！')
-          }
-        })
-      } else {
-        formRef.value.validate().then(() => {
-          demandApply(formName).then((res) => {
-            applySuccess.value = false
-            message.success('操作成功！')
-            console.log('能力申请================>', res)
-          })
+        getDemandForm(id.value).then((res) => {
+          console.log('回填数据===============>', res)
+          formName.applyUserPhone = res.data.data.applyUserPhone
+          formName.demandSubject = res.data.data.demandSubject
+          formName.detailsType = res.data.data.detailsType
+          formName.detailsField = res.data.data.detailsField
+          formName.demandDetails = res.data.data.demandDetails
+          formName.enclosure = res.data.data.enclosure
         })
       }
-    }
+      getUser().then((res) => {
+        formName.applyUserName = res.data.data.realName
+        formName.applyUserId = res.data.data.id
+        getUserInfo(formName.applyUserId).then((res) => {
+          if (res.data.data.mobile) {
+            formName.applyUserPhone = res.data.data.mobile
+          }
+          formName.applyUserDeptName = res.data.data.deptName
+          formName.applyUserDeptId = res.data.data.deptId
+        })
+      })
 
-    return {
-      formRef,
-      formName,
-      fileList,
-      headers: {
-        authorization: 'authorization-text',
-      },
-      handleChange,
-      applySuccess,
-      disabled,
-      signOut,
-      processStartHandle,
-      upLoadUrl,
-      // baseURL,
-    }
-  },
-}
+      const formRef = ref()
+      const applySuccess = ref(true)
+
+      // 退出
+      const signOut = () => {
+        window.close()
+      }
+      const handleChange = (info) => {
+        if (info.file.status !== 'uploading') {
+          console.log(info.file, info.fileList)
+        }
+
+        if (info.file.status === 'done') {
+          message.success(`${info.file.name} 文件上传成功`)
+          formName.enclosure = info.file.response.data
+        } else if (info.file.status === 'error') {
+          message.error(`${info.file.name} 文件上传失败`)
+        }
+      }
+
+      const fileList = ref([])
+
+      const processStartHandle = () => {
+        if (id.value) {
+          updateDemandForm(formName).then((upres) => {
+            if (upres.data.code == 0) {
+              relaunch({ data: formName, taskId: taskId.value }).then((res) => {
+                console.log('驳回================>', res)
+                if (res.data.code == 0) {
+                  message.success('重新发起流程成功！')
+                  window.setTimeout(() => {
+                    window.close()
+                  }, 1000)
+                } else {
+                  message.error('重新发起流程失败！')
+                }
+              })
+            } else {
+              message.error('数据更新失败！')
+            }
+          })
+        } else {
+          formRef.value.validate().then(() => {
+            demandApply(formName).then((res) => {
+              applySuccess.value = false
+              message.success('操作成功！')
+              console.log('能力申请================>', res)
+            })
+          })
+        }
+      }
+
+      return {
+        formRef,
+        formName,
+        fileList,
+        headers: {
+          authorization: 'authorization-text',
+        },
+        handleChange,
+        applySuccess,
+        disabled,
+        signOut,
+        processStartHandle,
+        upLoadUrl,
+        // baseURL,
+      }
+    },
+  }
 </script>
 
 <style scoped lang="less">
-#apply-container {
-  background-color: #f5f8fc;
-  height: 100%;
-  width: 100%;
-  margin: 90px auto 0;
-  display: flex;
-  justify-content: space-between;
-
-  aside {
-    width: 282px;
-    height: 96%;
-    overflow-y: auto;
-    background-color: #fff;
-    margin: 1% 0 3%;
-  }
-
-  article {
-    width: 1090px;
-    height: 99%;
-    overflow-y: auto;
-    background-color: #fff;
-    margin: 5% auto;
-  }
-
-  .form-container {
-    padding: 20px 20px 30px 20px;
-
-    .title {
-      font-size: 20px;
-      color: #000;
-      font-weight: bold;
-      margin-bottom: 20px;
-    }
-  }
-
-  .base-info {
+  #apply-container {
+    background-color: #f5f8fc;
+    height: 100%;
+    width: 100%;
+    margin: 90px auto 0;
     display: flex;
-  }
+    justify-content: space-between;
 
-  :deep(.ant-form-item-label) {
-    label {
-      color: #666;
-      font-size: 16px;
+    aside {
+      width: 282px;
+      height: 96%;
+      overflow-y: auto;
+      background-color: #fff;
+      margin: 1% 0 3%;
+    }
 
-      &::after {
-        content: '';
+    article {
+      width: 1090px;
+      height: 99%;
+      overflow-y: auto;
+      background-color: #fff;
+      margin: 5% auto;
+    }
+
+    .form-container {
+      padding: 20px 20px 30px 20px;
+
+      .title {
+        font-size: 20px;
+        color: #000;
+        font-weight: bold;
+        margin-bottom: 20px;
       }
     }
-  }
 
-  :deep(.ant-form-item-required) {
-    &::before {
-      font-size: 8px;
-      margin-right: 10px;
-    }
-  }
-
-  :deep(.ant-input) {
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-  }
-
-  .success {
-    div {
-      width: 100px;
-      margin: 80px auto 40px;
+    .base-info {
+      display: flex;
     }
 
-    text-align: center;
-    font-size: 20px;
-    font-weight: bold;
-    color: #000;
+    :deep(.ant-form-item-label) {
+      label {
+        color: #666;
+        font-size: 16px;
+
+        &::after {
+          content: '';
+        }
+      }
+    }
+
+    :deep(.ant-form-item-required) {
+      &::before {
+        font-size: 8px;
+        margin-right: 10px;
+      }
+    }
+
+    :deep(.ant-input) {
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+    }
+
+    .success {
+      div {
+        width: 100px;
+        margin: 80px auto 40px;
+      }
+
+      text-align: center;
+      font-size: 20px;
+      font-weight: bold;
+      color: #000;
+    }
   }
-}
 </style>
 <style>
-body,
-html {
-  height: unset;
-}
+  body,
+  html {
+    height: unset;
+  }
 </style>