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

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 { defineProps, ref, watch } from 'vue'
-  import { scInsert, scDel } from '@/api/personalCenter'
-  import { sgcInsert } from '@/api/home'
-  import { useRouter } from 'vue-router'
-  import mybus from '@/myplugins/mybus'
-  import { message } from 'ant-design-vue'
-  const props = defineProps({
+import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
+import { defineProps, ref, watch } from 'vue'
+import { scInsert, scDel } from '@/api/personalCenter'
+import { sgcInsert } from '@/api/home'
+import { useRouter } from 'vue-router'
+import mybus from '@/myplugins/mybus'
+import { message } from 'ant-design-vue'
+const props = defineProps({
   dataList: { type: Object, default: null },
-  })
-  const classOfAlgorithm = ref('')
-  // console.log('==================>', props.dataList.isCollect)
-  const router = useRouter()
-  const applicationArea = ref('')
-  const deploymentLocation = ref('') //部署位置
-  //加入申购车
-  const addShoppingCart = () => {
+})
+const classOfAlgorithm = ref('')
+// console.log('==================>', props.dataList.isCollect)
+const router = useRouter()
+const applicationArea = ref('')
+const deploymentLocation = ref('') //部署位置
+//加入申购车
+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('')
-  if (props.dataList.infoList) {
+}
+const componentType = ref('')
+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 goTOCollection = () => {
+)
+// 收藏
+const scFlag2 = ref(true)
+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>