智能算法详情增加说明文字

front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue

@@ -54,39 +54,48 @@
       </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()">
           {{ props.dataList.isCollect == 'true' ? '已' : '' }}收藏
         </a-button>
       </div>
+      <div class="text-tip">
+        使用声明：算法的场景适应性和结果准确性需申请部门根据场景建设要求先行试用，进而判断是否满足应用需求，除特殊声明，算法结果仅为参考。
+      </div>
     </div>
     <div class="right"></div>
+
   </div>
+
 </template>
 <script setup>
-  import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
+import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
-  import { defineProps, ref, watch } from 'vue'
+import { defineProps, ref, watch } from 'vue'
-  import { scInsert, scDel } from '@/api/personalCenter'
+import { scInsert, scDel } 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 classOfAlgorithm = ref('')
+const classOfAlgorithm = ref('')
-  // console.log('==================>', props.dataList.isCollect)
+// console.log('==================>', props.dataList.isCollect)
-  const router = useRouter()
+const router = useRouter()
-  const applicationArea = ref('')
+const applicationArea = ref('')
-  const deploymentLocation = ref('') //部署位置
+const deploymentLocation = ref('') //部署位置
-  //加入申购车
+//加入申购车
-  const addShoppingCart = () => {
+const addShoppingCart = () => {
   if (props.dataList.isInShoppingCart) {
     message.error('已经加入申购车了')
   } else {
@@ -106,9 +115,9 @@
       )
     })
   }
-  }
+}
-  //立即申请
+//立即申请
-  function toView() {
+function toView() {
   // window.open(newpage.href, '_blank')
   console.log('一键申请===================>', props.dataList)
   localStorage.setItem(
@@ -134,9 +143,9 @@
   router.push({
     path: '/apply',
   })
-  }
+}
-  const componentType = ref('')
+const componentType = ref('')
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   applicationArea.value = props.dataList.infoList.filter(
     (val) => val.attrType === '应用领域'
   )[0].attrValue
@@ -160,8 +169,8 @@
   if (obj) {
     componentType.value = obj.attrValue
   }
-  }
+}
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
@@ -194,10 +203,10 @@
       }
     }
   }
-  )
+)
-  // 收藏
+// 收藏
-  const scFlag2 = ref(true)
+const scFlag2 = ref(true)
-  const goTOCollection = () => {
+const goTOCollection = () => {
   console.log('收藏===================》', props.dataList)
   if (scFlag2.value) {
     scFlag2.value = false
@@ -229,27 +238,32 @@
   //   console.log(res)
   //   message.success('收藏成功')
   // })
-  }
+}
 </script>
 <style lang="less" scoped>
-  .algorithm-top-details {
+.algorithm-top-details {
   height: 600px;
   padding: 180px 0 0;
   background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
   background-size: 100%;
   display: flex;
   justify-content: center;
+
   .left {
     width: 7.2rem;
     color: #fff;
     margin-right: 0.8rem;
     margin-top: -0.3rem;
+    position: relative;
+
     .top {
       display: flex;
       align-items: center;
+
       span {
         font-size: 14px;
       }
+
       .name {
         display: inline-block;
         // width: 10.2rem;
@@ -267,15 +281,18 @@
         -webkit-box-orient: vertical;
         word-break: break-all;
       }
+
       .label-content {
         position: relative;
       }
+
       .lable-father {
         position: absolute;
         min-width: 5.5rem;
         right: -5.5rem;
         top: 0;
       }
+
       .label {
         padding: 1px 10px;
         margin-right: 10px;
@@ -283,16 +300,19 @@
         background: rgba(255, 255, 255, 0.4);
       }
     }
+
     .main {
       margin-top: 20px;
       font-size: 18px;
       line-height: 34px;
-        & > 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: 100px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -302,9 +322,11 @@
         word-break: break-all;
       }
     }
+
     .bottom {
       margin-top: 40px;
       display: flex;
+
       .ant-btn {
         height: 50px;
         margin-right: 20px;
@@ -315,17 +337,21 @@
         justify-content: center;
         align-items: center;
       }
+
       .ant-btn:nth-of-type(1) {
         width: 180px;
       }
+
       .ant-btn:nth-of-type(2) {
         width: 220px;
       }
+
       .ant-btn:nth-of-type(3) {
         width: 145px;
       }
     }
   }
+
   .right {
     width: 580px;
     height: 400px;
@@ -333,5 +359,13 @@
     background-size: 100%;
     margin-top: -40px;
   }
-  }
+}
+
+.text-tip {
+  font-size: 14px;
+  color: #fff;
+  position: absolute;
+  bottom: 20px;
+  width: 140%;
+}
 </style>