测试跳转

src/components/HeadLine.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="header_line_container" ref="el">
-    <h2 class="title" ref="titleRef">{{ title }}</h2>
-    <p class="line" ref="lineRef"></p>
-    <p class="desc" v-if="line1" ref="descRef1">
+    <h2 class="title">{{ title }}</h2>
+    <p class="line"></p>
+    <p class="desc" v-if="line1">
       {{ line1 }}
     </p>
-    <p :class="margin ? 'desc mt' : 'desc'" v-if="line2" ref="descRef2">
+    <p :class="margin ? 'desc mt' : 'desc'" v-if="line2">
       {{ line2 }}
     </p>
   </div>
@@ -14,10 +14,6 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 const el = ref(null)
-const titleRef = ref(null)
-const lineRef = ref(null)
-const descRef1 = ref(null)
-const descRef2 = ref(null)
 const props = defineProps({
   title: {
     type: String,
@@ -36,10 +32,7 @@ onMounted(() => {
   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
-        animateCSS(titleRef.value, 'fadeInUp')
-        animateCSS(lineRef.value, 'fadeInUp')
-        animateCSS(descRef1.value, 'fadeInUp')
-        animateCSS(descRef2.value, 'fadeInUp')
+        animateCSS(el.value, 'fadeInUp')
       }
     })
   })

src/components/detail/Detail.vue

@@ -4,27 +4,22 @@
     <div class="detail_card">
       <div class="one_card">
         <div class="mask">
-          <div class="btn">点击查看详情</div>
+          <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
         </div>
       </div>
       <div class="one_card">
         <div class="mask">
-          <div class="btn">点击查看详情</div>
+          <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
         </div>
       </div>
       <div class="one_card">
         <div class="mask">
-          <div class="btn">点击查看详情</div>
+          <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
         </div>
       </div>
       <div class="one_card">
         <div class="mask">
-          <div class="btn">点击查看详情</div>
-        </div>
-      </div>
-      <div class="one_card">
-        <div class="mask">
-          <div class="btn">点击查看详情</div>
+          <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
         </div>
       </div>
     </div>
@@ -33,6 +28,15 @@
 
 <script setup>
 import HeadLine from '../HeadLine'
+import { DOMAIN } from '@/constant'
+const toHomeDetail = (type, tid, pid) => {
+  if (type == 1) {
+    window.location.href = `${DOMAIN}?p=softdetail&pid=${pid}&tid=${tid}`
+  }
+  if (type == 2) {
+    window.location.href = `${DOMAIN}?p=harddetail&pid=${pid}&tid=${tid}`
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/constant/index.js

@@ -1 +1,3 @@
-export const DOMAIN = 'https://www.iflytop.com'
+// export const DOMAIN = 'https://www.iflytop.com'
+
+export const DOMAIN = 'http://localhost:5173'