应用资源详情样式修改

front/src/views/assignCase/components/AssignCaseDetailPage.vue

@@ -11,12 +11,18 @@
     <!--详情页头部-->
     <div class="assign-case-detail-page-header">
       <div class="assign-case-detail-page-header-son">
-        <div class="assign-case-detail-page-header-son-left" :style="`background:url(${pictureFormat(dataFrom.name)})`"></div>
+        <div
+          class="assign-case-detail-page-header-son-left"
+          :style="`background:url(${pictureFormat(dataFrom.name)})`"
+        ></div>
         <div class="assign-case-detail-page-header-son-right">
           <div class="assign-case-detail-page-header-son-right-title">
             {{ dataFrom.name }}
           </div>
-          <div class="assign-case-detail-page-header-son-right-click">
+          <div
+            class="assign-case-detail-page-header-son-right-click"
+            @click="clickToView(dataFrom.name)"
+          >
             <span>点击查看</span>
             <span></span>
           </div>
@@ -78,10 +84,16 @@
               <span>其他案例</span>
             </div>
             <div class="assign-case-detail-page-content-right-card-content">
+              <div
+                class="assign-case-detail-page-content-right-card-content-card"
+                @click="routerClick(dataFrom.else.name)"
+              >
                 <p>{{ dataFrom.else.name }}</p>
                 <p>{{ dataFrom.else.time }}</p>
               </div>
             </div>
+            <div class="no-data">暂无更多</div>
+          </div>
         </div>
       </div>
     </div>
@@ -90,35 +102,29 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { ref, watch, onMounted } from 'vue'
   import HomeHeader from '@/views/home/components/header'
   import HomeFooter from '@/views/newHome/components/Footer'
   import { useRouter } from 'vue-router'
   const router = useRouter()
-  const val = router.currentRoute.value.query.val
+  let val = router.currentRoute.value.query.val
   console.log('val', val)
-  //   const contenBox = ref([
-  //   {
-  //     photo: require('@/assets/assignCase/road.png'),
-  //     name: '道路保洁监管场景',
-  //     time: '2022-01-01 12:00',
-  //   },
-  //   {
-  //     photo: require('@/assets/assignCase/city.png'),
-  //     name: '文明创城场景',
-  //     time: '2022-01-01 12:00',
-  //   },
-  // ])
   //图片样式切换
   function pictureFormat(name) {
     if (name == '道路保洁监管场景') {
       return require('@/assets/assignCase/road.png')
-    }
-    else{
+    } else {
       return require('@/assets/assignCase/city.png')
     }
   }
+  //路由跳转事件
+  const routerClick = (name) => {
+    val = name
+    router.push({ path: 'AssignCaseDetailPage', query: { val } })
+  }
   let dataFrom = ref({})
+  const init = () => {
+    val = router.currentRoute.value.query.val
     if (val == '道路保洁监管场景') {
       dataFrom.value = {
         name: '道路保洁监管场景',
@@ -200,10 +206,21 @@
         },
       }
     }
+  }
+  init()
+  //监听路由发生变化
+  watch(
+    () => router.currentRoute.value.query.val,
+    () => {
+      init()
+    },
+    { immediate: true }
+  )
   let tabName = ref('案例背景')
+  //tab点击事件
   const tabSwitch = (item, index) => {
     tabName.value = item.title
-    if (index != 0) {
+    if (index != 0 && index != 3) {
       let top =
         document.querySelector(
           '#assign-case-detail-page-content-center-card' + index
@@ -221,7 +238,7 @@
       console.log('view.style.top', view.style.top)
       document.documentElement.scrollTop = top
       document.body.scrollTop = top
-    } else {
+    } else if (index == 0) {
       let top = 0
       let view = document.getElementById(
         'assign-case-detail-page-content-left-border-id'
@@ -229,6 +246,56 @@
       document.documentElement.scrollTop = top
       document.body.scrollTop = top
       view.style.top = '490px'
+    } else if (index == 3) {
+      let top = document.querySelector(
+        '#assign-case-detail-page-content-center-card' + index
+      ).offsetTop
+      let view = document.getElementById(
+        'assign-case-detail-page-content-left-border-id'
+      )
+      document.documentElement.scrollTop = top
+      document.body.scrollTop = top
+      view.style.top = '220px'
+    }
+  }
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      debugger
+      domArr.value = document.querySelectorAll(
+        '.assign-case-detail-page-content-center-card'
+      )
+      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 clickToView = (name) => {
+    if (name == '道路保洁监管场景') {
+      window.open('http://15.72.183.90:7001/#/road')
+    } else {
+      window.open('http://15.72.183.90:7001/#/city')
     }
   }
 </script>
@@ -236,42 +303,42 @@
 <style lang="less" scoped>
   .assign-case-detail-page {
     position: relative;
-    top: 64px;
+    top: 0.64rem;
     .assign-case-detail-page-header {
-      height: 370px;
+      height: 3.7rem;
       background: url('~@/assets/assignCase/assignCase_bg2.png') no-repeat;
       background-position: center;
       background-size: cover;
-      padding-top: 120px;
+      padding-top: 1.2rem;
       .assign-case-detail-page-header-son {
-        width: 900px;
-        height: 250px;
-        border-radius: 10px;
+        width: 9rem;
+        height: 2.5rem;
+        border-radius: 0.01rem;
         background: #fff;
         margin: auto;
         box-shadow: 5px 5px 20px #f2f3fb;
         display: flex;
         align-items: center;
-        padding: 20px;
+        padding: 0.2rem;
         .assign-case-detail-page-header-son-left {
-          height: 200px;
-          width: 290px;
+          height: 2rem;
+          width: 2.9rem;
           background-repeat: no-repeat;
           background-position: center;
           background-size: cover;
-          margin-right: 30px;
+          margin-right: 0.3rem;
         }
         .assign-case-detail-page-header-son-right {
           .assign-case-detail-page-header-son-right-title {
             color: #000000;
-            font-size: 36px;
-            line-height: 36px;
-            margin-bottom: 40px;
+            font-size: 0.36rem;
+            line-height: 0.36rem;
+            margin-bottom: 0.4rem;
           }
           .assign-case-detail-page-header-son-right-click {
             color: #526aff;
-            font-size: 20px;
-            line-height: 20px;
+            font-size: 0.2rem;
+            line-height: 0.2rem;
             cursor: pointer;
             span {
               display: inline-block;
@@ -280,7 +347,7 @@
               margin-right: 10px;
             }
             span:last-child {
-              width: 20px;
+              width: 0.2rem;
               height: 10px;
               background: url('~@/assets/assignCase/assignCase_click.png')
                 no-repeat;
@@ -292,67 +359,68 @@
       }
     }
     .assign-case-detail-page-content {
-      padding-top: 60px;
+      padding-top: 0.6rem;
       display: flex;
       justify-content: center;
       .assign-case-detail-page-content-son {
-        width: 1300px;
+        width: 13rem;
         display: flex;
       }
       .assign-case-detail-page-content-left {
-        width: 167px;
+        width: 1.67rem;
         .assign-case-detail-page-content-left-border {
           border-right: 1px #e5e5e5 solid;
           padding-top: 5px;
           padding-bottom: 5px;
           position: fixed;
-          top: 490px;
+          top: 4.9rem;
           div {
-            height: 30px;
-            padding-right: 70px;
-            margin-bottom: 30px;
+            height: 0.3rem;
+            padding-right: 0.7rem;
+            margin-bottom: 0.3rem;
             font-size: 24px;
             color: #666666;
-            line-height: 30px;
+            line-height: 0.3rem;
             cursor: pointer;
           }
           div:last-child {
             margin-bottom: 0px;
           }
           .assign-case-detail-page-content-left-border-click {
-            padding-right: 66px;
+            padding-right: 0.66rem;
             border-right: 4px #526aff solid;
             color: #526aff;
           }
         }
       }
       .assign-case-detail-page-content-center {
-        width: 845px;
-        padding: 0 40px 100px 35px;
+        width: 8.45rem;
+        padding: 0 0.4rem 1rem 0.35rem;
         .assign-case-detail-page-content-center-card {
-          margin-bottom: 60px;
+          margin-bottom: 0.6rem;
           .assign-case-detail-page-content-center-card-title {
-            font-size: 28px;
+            font-size: 0.28rem;
             color: #000000;
             font-weight: bold;
-            line-height: 28px;
-            margin-bottom: 35px;
+            line-height: 0.28rem;
+            margin-bottom: 0.35rem;
           }
           .assign-case-detail-page-content-center-card-description {
             color: #333333;
-            font-size: 20px;
-            line-height: 34px;
+            font-size: 0.2rem;
+            line-height: 0.34rem;
           }
         }
       }
       .assign-case-detail-page-content-right {
-        width: 270px;
-        height: 260px;
+        width: 2.7rem;
+        height: 2.6rem;
         display: inline-block;
         .assign-case-detail-page-content-right-card {
-          width: 270px;
-          height: 260px;
+          width: 2.7rem;
+          height: 2.6rem;
           border: 1px #e5e5e5 solid;
+          position: relative;
           .assign-case-detail-page-content-right-card-title {
             padding-left: 15px;
             background: linear-gradient(
@@ -360,10 +428,10 @@
               rgba(113, 132, 252, 0.8),
               rgba(148, 163, 252, 0.8)
             );
-            height: 64px;
+            height: 0.64rem;
             color: #fff;
             font-size: 24px;
-            line-height: 64px;
+            line-height: 0.64rem;
             margin-bottom: 30px;
             border-radius: 10px 10px 0 0;
             span:first-child {
@@ -378,8 +446,11 @@
             }
           }
           .assign-case-detail-page-content-right-card-content {
-            padding-left: 20px;
+            padding: 0 20px;
             border-radius: 0px 0px 10px 10px;
+            .assign-case-detail-page-content-right-card-content-card {
+              cursor: pointer;
+              border-bottom: 1px solid #ebebeb;
               p:first-child {
                 font-size: 20px;
                 line-height: 20px;
@@ -394,6 +465,15 @@
               }
             }
           }
+          .no-data {
+            position: absolute;
+            bottom: 0.2rem;
+            font-size: 0.18rem;
+            color: #cccccc;
+            width: 2.3rem;
+            text-align: center;
+          }
+        }
       }
     }
   }

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

@@ -115,10 +115,10 @@
           font-size: 14px;
         }
         .name {
-          max-width: 330px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+          // max-width: 330px;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          // white-space: nowrap;
           font-size: 40px;
           margin-right: 20px;
         }

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

@@ -22,14 +22,14 @@
         </div>
       </div>
       <div class="bottom" v-if="props.dataList.id">
-        <a-button type="primary" @click="toView()">
+        <!-- <a-button type="primary" @click="toView()">
           <template #icon><form-outlined /></template>
           申请使用
         </a-button>
         <a-button type="primary" @click="addShoppingCart()">
           <template #icon><shopping-cart-outlined /></template>
           加入购物车
-        </a-button>
+        </a-button> -->
         <a-button type="primary" @click="goTOCollection()">收藏</a-button>
       </div>
     </div>
@@ -37,42 +37,42 @@
   </div>
 </template>
 <script setup>
-  import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
+  // 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 { 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 router = useRouter()
+  // 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 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 goTOCollection = () => {
     console.log('收藏===================》', props.dataList)
@@ -115,10 +115,10 @@
           font-size: 0.14rem;
         }
         .name {
-          max-width: 3.3rem;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+          // max-width: 3.3rem;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          // white-space: nowrap;
           font-size: 0.4rem;
           margin-right: 0.2rem;
         }