cim前两个

front/src/views/cimSpecialArea/components/platform.vue

@@ -13,10 +13,13 @@
           @slideChange="onSlideChange"
         >
           <swiper-slide v-for="item in platformList" :key="item.id">
-            <div class="platformBox">
+            <div class="platformBox" @click.stop="toView(item)">
               <h2>{{ item.name }}</h2>
               <a-image :preview="false" :src="item.pic" :fallback="item.pic2" />
-              <p>{{ item.description }}</p>
+              <a-tooltip>
+                <template #title>{{ item.description }}</template>
+                <p>{{ item.description }}</p>
+              </a-tooltip>
             </div>
           </swiper-slide>
         </swiper>
@@ -30,33 +33,10 @@
   import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
   import 'swiper/swiper-bundle.min.css'
   import { getCIMApplyApplicationList } from '@/api/cimSpecialArea'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
   const modules = ref([Pagination])
-  const platformList = ref([
-    // {
-    //   name: 'CIM+青岛市更新项目申报系统',
-    //   img: require('@/assets/capacitySquare/yyzy.jpg'),
-    //   content:
-    //     'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
-    // },
-    // {
-    //   name: 'CIM+青岛市更新项目申报系统',
-    //   img: require('@/assets/capacitySquare/yyzy.jpg'),
-    //   content:
-    //     'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
-    // },
-    // {
-    //   name: 'CIM+青岛市更新项目申报系统',
-    //   img: require('@/assets/capacitySquare/yyzy.jpg'),
-    //   content:
-    //     'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
-    // },
-    // {
-    //   name: 'CIM+青岛市更新项目申报系统',
-    //   img: require('@/assets/capacitySquare/yyzy.jpg'),
-    //   content:
-    //     'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
-    // },
-  ])
+  const platformList = ref([])
   getCIMApplyApplicationList().then((res) => {
     if (res.status === 200) {
       res.data.data.map((val) => {
@@ -69,6 +49,16 @@
       platformList.value.push(...res.data.data)
     }
   })
+  const toView = (data) => {
+    console.log('111111111111111111===========>', data)
+    const newpage = router.resolve({
+      path: '/details',
+      query: {
+        id: data.id,
+      },
+    })
+    window.open(newpage.href, '_blank')
+  }
 </script>
 <style lang="less" scoped>
   .box {
@@ -84,6 +74,7 @@
       border-bottom: 0.01rem solid #bcbdbd;
     }
     .platformBox {
+      cursor: pointer;
       width: 5.34rem;
       height: 5.65rem;
       padding: 0.28rem 0.35rem;
@@ -106,6 +97,12 @@
       p {
         font-size: 0.18rem;
         margin: 0.2rem 0 0;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-break: break-all;
       }
     }
     :deep(.swiper) {