业务组件bug

front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue

@@ -20,14 +20,14 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { ref, defineProps, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
-  const flag = ref(true)
+const flag = ref(true)
-  let dataFrom = ref([])
+let dataFrom = ref([])
-  const props = defineProps({
+const props = defineProps({
   dataList: { type: Object, default: null },
-  })
+})
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   let obj = props.dataList.infoList.filter(
     (item) => item.attrType === '常见问题'
   )[0]
@@ -43,8 +43,8 @@
       dataFrom.value.push(params)
     })
   }
-  }
+}
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -63,41 +63,47 @@
       }
     }
   }
-  )
+)
 </script>
 
 <style lang="less" scoped>
-  .cpmmon-problem {
+.cpmmon-problem {
   display: flex;
   flex-direction: column;
   align-items: center;
-    padding-top: 80px;
+  padding-top: 160px;
   background: #f7f8fa;
+
   .content {
     width: 1300px;
     margin: 20px 0px;
     background: #ffffff;
     padding: 40px;
+
     .content-son {
       font-size: 20px;
       margin-bottom: 60px;
+
       .content-top {
         display: flex;
         align-items: center;
         margin-bottom: 20px;
         line-height: 20px;
       }
+
       .content-bottom {
         display: flex;
         line-height: 34px;
         color: #666666;
       }
+
       .content-top,
       .content-bottom {
         div:last-child {
           width: calc(100% - 54px);
         }
       }
+
       .top-img {
         width: 34px;
         height: 30px;
@@ -106,6 +112,7 @@
         background-size: cover;
         margin-right: 20px;
       }
+
       .bottom-img {
         width: 34px;
         height: 30px;
@@ -115,9 +122,10 @@
         margin-right: 20px;
       }
     }
+
     .content-son:last-child {
       margin-bottom: 0px;
     }
   }
-  }
+}
 </style>

front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue

@@ -7,42 +7,26 @@
         <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
       </div>
       <div class="tab">
-        <div
+        <div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
-          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          @click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
-          :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
+            <div class="tab-top" :class="
-              class="tab-top"
-              :class="
               tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
-              "
+            ">
-            >
               {{ itemSonTitle.name }}
             </div>
           </a-tooltip>
-          <div
+          <div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></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
+            <a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></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">
@@ -60,17 +44,17 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { ref, defineProps, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
-  const flag = ref(true)
+const flag = ref(true)
-  let dataFrom = ref([])
+let dataFrom = ref([])
-  // tab切换方法
+// tab切换方法
-  let tabindex = ref('场景说明一')
+let tabindex = ref('场景说明一')
-  //数据初始化
+//数据初始化
-  const props = defineProps({
+const props = defineProps({
   dataList: { type: Object, default: null },
-  })
+})
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   let obj = props.dataList.infoList.filter(
     (item) => item.attrType === '功能介绍'
   )[0]
@@ -81,8 +65,8 @@
     dataFrom.value = obj
     tabindex.value = dataFrom.value.attrValue[0].name
   }
-  }
+}
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -96,32 +80,33 @@
       }
     }
   }
-  )
+)
-  //滚动条样式
+//滚动条样式
-  function tabIndexClass(index, title, content) {
+function tabIndexClass(index, title, content) {
   if (title == '功能介绍' && index == 0 && content.length > 6) {
     return 'tab-son-class'
   }
-  }
+}
-  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+//初始化tab切换（判断标题不同，点击事件的判断变量不同）
-  function tabInitialize() {
+function tabInitialize() {
   return tabindex.value
-  }
+}
-  //tab切换点击事件
+//tab切换点击事件
-  function tabSwitch(name) {
+function tabSwitch(name) {
   tabindex.value = name
   return tabindex.value
-  }
+}
 </script>
 
 <style lang="less" scoped>
-  .function-intorduction {
+.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;
@@ -129,6 +114,7 @@
     flex-direction: column;
     align-items: center;
     overflow: unset;
+
     .tab {
       max-width: 13rem;
       overflow-x: auto;
@@ -141,11 +127,13 @@
       cursor: pointer;
       padding-left: 0.4rem;
       padding-right: 0.4rem;
+
       .tab-son {
         display: flex;
         flex-direction: column;
         align-items: center;
         margin-right: 1rem;
+
         .tab-top {
           min-width: 1.2rem;
           font-size: 0.24rem;
@@ -157,53 +145,65 @@
           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;
@@ -212,6 +212,7 @@
         display: flex;
         justify-content: center;
       }
+
       .content-right-scene,
       .content-right-case {
         width: 6.2rem;
@@ -220,6 +221,7 @@
         flex-direction: column;
         justify-content: center;
       }
+
       .content-left-scene,
       .content-left-case {
         height: 3.4rem;
@@ -229,12 +231,14 @@
         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;
@@ -246,8 +250,9 @@
       }
     }
   }
+
   .application-scenarios-and-case-son:first-child {
     padding-top: 1rem;
   }
-  }
+}
 </style>

front/src/views/detailsAll/components/Application/ApplicationNavigation.vue

@@ -8,12 +8,7 @@
 <template>
   <div class="application-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div
+      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
-        class="nav"
-        :class="{ select: nav.key == select }"
-        v-if="nav.show"
-        @click="selectNav(nav.key)"
-      >
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -21,9 +16,13 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
-  import mybus from '@/myplugins/mybus'
+import mybus from '@/myplugins/mybus'
-  const navList = ref([
+import { useRouter } from 'vue-router'
+// 获取当前路由地址
+const router = useRouter()
+const keyId = router.currentRoute.value.query.id
+const navList = ref([
   {
     name: '应用展示',
     key: 'application-presentation',
@@ -56,19 +55,34 @@
     name: '常见问题',
     key: 'common-problem',
   },
-  ])
+])
-  const props = defineProps({
+const props = defineProps({
   selectNow: { type: String, default: '' },
   dataList: { type: Object, default: null },
   associatedComponents: { type: Array, default: null },
+})
+const select = ref('algorithm-display')
+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: 'layer-service-associated-ability',
+        show: true,
       })
-  const select = ref('algorithm-display')
+      list.value.unshift('关联组件')
-  const list = ref([])
+    }
-  const selectNav = (key) => {
+  })
+}
+const selectNav = (key) => {
   select.value = key
   mybus.emit('flyToView', select.value)
-  }
+}
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   list.value = []
   props.dataList.infoList.map((item) => {
     if (
@@ -100,14 +114,14 @@
     (item) => item.name === list.value[0]
   )[0].key
   console.log('11111111111111111111111111', list.value, navList.value)
-  }
+}
-  watch(
+watch(
   () => props.selectNow,
   (newValue) => {
     select.value = newValue
   }
-  )
+)
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -148,10 +162,10 @@
       console.log('11111111111111111111111111', list.value, navList.value)
     }
   }
-  )
+)
 </script>
 <style lang="less" scoped>
-  .application-navigation {
+.application-navigation {
   width: 19.12rem;
   height: 0.84rem;
   line-height: 0.8rem;
@@ -163,22 +177,26 @@
   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;
     }
   }
+
   .select {
     color: #526aff;
+
     .line {
       background: #526aff;
     }
   }
-  }
+}
 </style>

front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue

@@ -2,17 +2,10 @@
 <template>
   <div class="application-deployment-and-security">
     <div class="title">
-      <DetalsTitle
+      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
-        :title="dataFrom.title"
-        :type="dataFrom.englishTitle"
-      ></DetalsTitle>
     </div>
     <div class="content">
-      <div
+      <div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
-        v-for="(item, index) in dataFrom.content"
-        :key="index"
-        class="content-card"
-      >
         <div class="card-title">{{ item.childrenTitle }}</div>
         <div class="card-content">
           <div v-for="carditem in item.childrenContent" :key="carditem">
@@ -31,9 +24,9 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { ref, defineProps, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
-  let dataFrom = ref({
+let dataFrom = ref({
   title: '归属部门与服务商',
   englishTitle: 'DEPARTMENT&ERVICE',
   content: [
@@ -46,13 +39,13 @@
       childrenContent: [],
     },
   ],
-  })
+})
-  console.log(dataFrom.value)
+console.log(dataFrom.value)
-  //数据初始化
+//数据初始化
-  const props = defineProps({
+const props = defineProps({
   dataList: { type: Object, default: null },
-  })
+})
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   let obj = {
     attrType: '部门名称',
     attrValue: props.dataList.deptName || '------',
@@ -64,7 +57,7 @@
   }
   dataFrom.value.content[0].childrenContent[1] = deptContacts
   let deptPhone = {
-      attrType: '部门联系人',
+    attrType: '部门联系电话',
     attrValue: props.dataList.deptPhone || '------',
   }
   dataFrom.value.content[0].childrenContent[2] = deptPhone
@@ -97,8 +90,8 @@
     }
   })
   console.log('obj', dataFrom.value)
-  }
+}
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -115,7 +108,7 @@
       }
       dataFrom.value.content[0].childrenContent[1] = deptContacts
       let deptPhone = {
-          attrType: '部门联系人',
+        attrType: '部门联系电话',
         attrValue: props.dataList.deptPhone || '------',
       }
       dataFrom.value.content[0].childrenContent[2] = deptPhone
@@ -159,49 +152,54 @@
       console.log('obj', dataFrom.value)
     }
   }
-  )
+)
 </script>
 
 <style lang="less" scoped>
-  .application-deployment-and-security {
+.application-deployment-and-security {
   padding: 0.8rem 0;
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .title {
     margin-bottom: 0.3rem;
   }
+
   .content {
     display: flex;
     width: 13rem;
     justify-content: space-between;
+
     .content-card {
       height: 1.5rem;
       width: 6.2rem;
       border-radius: 0.2rem;
-        background: linear-gradient(
+      background: linear-gradient(to right,
-          to right,
           rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4)
+          rgba(148, 163, 252, 0.4));
-        );
       padding: 0 0.3rem;
       display: flex;
       flex-direction: column;
       justify-content: center;
+
       .card-title {
         font-size: 0.26rem;
         color: #212956;
         margin-bottom: 0.2rem;
         line-height: 0.26rem;
       }
+
       .card-content {
         white-space: nowrap;
+
         div {
           display: inline-block;
           margin-right: 0.2rem;
           color: rgba(33, 41, 86, 0.8);
           font-size: 0.2rem;
           max-width: 2.8rem;
+
           div {
             max-width: 2.8rem;
             overflow: hidden;
@@ -211,11 +209,12 @@
             -webkit-line-clamp: 1;
           }
         }
+
         div:first-child {
           display: block;
         }
       }
     }
   }
-  }
+}
 </style>

front/src/views/detailsAll/components/Business/BusinessNavigation.vue

@@ -8,12 +8,7 @@
 <template>
   <div class="business-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div
+      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
-        class="nav"
-        :class="{ select: nav.key == select }"
-        v-if="nav.show"
-        @click="selectNav(nav.key)"
-      >
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -21,14 +16,14 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+import { ref, defineProps, watch, getCurrentInstance } from 'vue'
-  import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-  import mybus from '@/myplugins/mybus'
+import mybus from '@/myplugins/mybus'
-  import { queryPartAppByKeyId2 } from '@/api/home'
+import { queryPartAppByKeyId2 } from '@/api/home'
-  // 获取当前路由地址
+// 获取当前路由地址
-  const router = useRouter()
+const router = useRouter()
-  const keyId = router.currentRoute.value.query.id
+const keyId = router.currentRoute.value.query.id
-  const navList = ref([
+const navList = ref([
   {
     name: '组件展示',
     key: 'business-presentation',
@@ -54,16 +49,16 @@
     name: '常见问题',
     key: 'common-problem',
   },
-  ])
+])
-  const props = defineProps({
+const props = defineProps({
   associatedComponents: { type: Array, default: null },
   selectNow: { type: String, default: '' },
   dataList: { type: Object, default: null },
-  })
+})
-  const select = ref('business-associated-ability')
+const select = ref('business-associated-ability')
-  const list = ref([])
+const list = ref([])
-  // 根据能力id查询是否存在关联应用
+// 根据能力id查询是否存在关联应用
-  if (keyId) {
+if (keyId) {
   queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
     console.log('ressssssss', res)
     if (res.data.data.length > 0) {
@@ -77,13 +72,13 @@
       console.log('navList', navList)
     }
   })
-  }
+}
-  const selectNav = (key) => {
+const selectNav = (key) => {
   select.value = key
   console.log(key, select.value)
   mybus.emit('flyToView', select.value)
-  }
+}
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   list.value = []
   let arr = [
     '关联应用',
@@ -125,18 +120,22 @@
       }
     }
   })
+  if (list.value.length > 0) {
+    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
       select.value = navList.value.filter(
-      (item) => item.name === list.value[0]
+        (item) => (item.name === '关联应用') | (item.name === list.value[0])
       )[0].key
-    console.log('11111111111111111111111111', list.value, navList.value)
     }
-  watch(
+  }
+  console.log('11111111111111111111111111', list.value, navList.value)
+}
+watch(
   () => props.selectNow,
   (newValue) => {
     select.value = newValue
   }
-  )
+)
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -193,10 +192,10 @@
       console.log('11111111111111111111111111', list.value, navList.value)
     }
   }
-  )
+)
 </script>
 <style lang="less" scoped>
-  .business-navigation {
+.business-navigation {
   width: 19.12rem;
   height: 0.84rem;
   line-height: 0.8rem;
@@ -208,22 +207,26 @@
   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;
     }
   }
+
   .select {
     color: #526aff;
+
     .line {
       background: #526aff;
     }
   }
-  }
+}
 </style>

front/src/views/detailsAll/components/Business/BusinessTopDetails.vue

@@ -29,8 +29,8 @@
       </div>
       <div class="main">
         <a-tooltip placement="top">
-          <template #title>应用领域：{{ applicationArea }}</template>
+          <template #title>应用领域：{{ businessArea }}</template>
-          <div>应用领域：{{ applicationArea }}</div>
+          <div>应用领域：{{ businessArea }}</div>
         </a-tooltip>
         <a-tooltip placement="top">
           <template #title>{{ props.dataList.description }}</template>
@@ -41,11 +41,15 @@
       </div>
       <div class="bottom" v-if="props.dataList.id">
         <a-button type="primary" @click="toView()">
-          <template #icon><form-outlined /></template>
+          <template #icon>
+            <form-outlined />
+          </template>
           申请使用
         </a-button>
         <a-button type="primary" @click="addShoppingCart()">
-          <template #icon><shopping-cart-outlined /></template>
+          <template #icon>
+            <shopping-cart-outlined />
+          </template>
           加入申购车
         </a-button>
         <a-button type="primary" @click="goTOCollection()">收藏</a-button>
@@ -55,20 +59,20 @@
   </div>
 </template>
 <script setup>
-  import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+import { ShoppingCartOutlined } from '@ant-design/icons-vue'
-  import { defineProps, ref, watch } from 'vue'
+import { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
+import { scInsert } from '@/api/personalCenter'
-  import { sgcInsert } from '@/api/home'
+import { sgcInsert } from '@/api/home'
-  import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-  import mybus from '@/myplugins/mybus'
+import mybus from '@/myplugins/mybus'
-  import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
-  const props = defineProps({
+const props = defineProps({
   dataList: { type: Object, default: null },
-  })
+})
-  const router = useRouter()
+const router = useRouter()
-  const businessArea = ref('')
+const businessArea = ref('')
-  // // 加入申购车
+// // 加入申购车
-  const addShoppingCart = () => {
+const addShoppingCart = () => {
   console.log('加入申购车==================>', props.dataList)
   sgcInsert({
     delFlag: '0',
@@ -79,9 +83,9 @@
     message.success('添加申购车成功！')
     mybus.emit('getSgcNum')
   })
-  }
+}
-  // // 立即申请
+// // 立即申请
-  function toView() {
+function toView() {
   // window.open(newpage.href, '_blank')
   console.log('一键申请===================>', props.dataList)
   localStorage.setItem(
@@ -107,17 +111,17 @@
   router.push({
     path: '/apply',
   })
-  }
+}
-  // 收藏
+// 收藏
-  const goTOCollection = () => {
+const goTOCollection = () => {
   console.log('收藏===================》', props.dataList)
   scInsert([{ resourceId: props.dataList.id }]).then((res) => {
     console.log(res)
     message.success('收藏成功')
   })
-  }
+}
-  const componentType = ref('')
+const componentType = ref('')
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   businessArea.value = props.dataList.infoList.filter(
     (val) => val.attrType === '应用领域'
   )[0].attrValue
@@ -127,8 +131,8 @@
   if (obj) {
     componentType.value = obj.attrValue
   }
-  }
+}
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -143,16 +147,17 @@
       }
     }
   }
-  )
+)
 </script>
 <style lang="less" scoped>
-  .algorithm-top-details {
+.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;
@@ -161,9 +166,11 @@
     .top {
       display: flex;
       align-items: center;
+
       span {
         font-size: 0.14rem;
       }
+
       .name {
         // max-width: 3.3rem;
         // overflow: hidden;
@@ -179,15 +186,18 @@
         -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;
@@ -195,16 +205,19 @@
         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) {
+
+      &>div:nth-of-type(1) {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-        & > div:nth-of-type(2) {
+
+      &>div:nth-of-type(2) {
         max-height: 1rem;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -213,9 +226,11 @@
         -webkit-box-orient: vertical;
       }
     }
+
     .bottom {
       margin-top: 0.4rem;
       display: flex;
+
       .ant-btn {
         height: 0.5rem;
         margin-right: 0.2rem;
@@ -226,15 +241,19 @@
         justify-content: center;
         align-items: center;
       }
+
       .ant-btn-primary {
         color: #1890ff;
       }
+
       .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;
@@ -242,13 +261,13 @@
       }
     }
   }
+
   .right {
     width: 5.8rem;
     height: 4rem;
-      background: url('~@/assets/detailsAll/business/business_right_bg.png')
+    background: url('~@/assets/detailsAll/business/business_right_bg.png') no-repeat;
-        no-repeat;
     background-size: 100%;
     margin-top: -0.4rem;
   }
-  }
+}
 </style>

front/src/views/detailsAll/components/Business/BusinessUsageMode.vue

@@ -13,7 +13,10 @@
           <div class="content-left-content">
             <p>
               <span>{{ item.link.name }}</span>
+              <a-tooltip>
+                <template #title>{{ item.linkValue }}</template>
                 <span>{{ item.linkValue }}</span>
+              </a-tooltip>
             </p>
           </div>
         </div>
@@ -269,11 +272,16 @@ function technicalNew() {
           line-height: 0.2rem;
 
           p {
+            display: -webkit-box;
+            margin-bottom: 0.1rem;
+
+            span:last-of-type {
+              width: 298px;
               display: -webkit-box;
               overflow: hidden;
               -webkit-line-clamp: 1;
               -webkit-box-orient: vertical;
-            margin-bottom: 0.1rem;
+            }
           }
         }
       }