产品细节mock

src/components/detail/Detail.vue

@@ -1,25 +1,26 @@
 <template>
   <div class="product_detail_card_container">
-    <HeadLine title="产品细节" line1="注重产品的每一个细节" />
+    <HeadLine :title="productDetail.title" :line1="productDetail.desc" />
     <div class="detail_card">
-      <div class="one_card bg1">
+      <div
+        class="one_card"
+        v-for="(item, index) in productDetail.list"
+        :key="index"
+      >
+        <img :src="item.pic" class="img_card" alt="" />
         <div class="mask">
-          <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
-        </div>
-      </div>
-      <div class="one_card bg2">
-        <div class="mask">
-          <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
-        </div>
-      </div>
-      <div class="one_card bg3">
-        <div class="mask">
-          <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
-        </div>
-      </div>
-      <div class="one_card bg4">
-        <div class="mask">
-          <div class="btn" @click="toHomeDetail(1, 1, 2)">点击查看详情</div>
+          <div
+            class="btn"
+            @click="
+              toHomeDetail(
+                productDetail.typ,
+                productDetail.tid,
+                productDetail.pid,
+              )
+            "
+          >
+            点击查看详情
+          </div>
         </div>
       </div>
     </div>
@@ -29,6 +30,20 @@
 <script setup>
 import HeadLine from '../HeadLine'
 import { DOMAIN } from '@/constant'
+import { productList } from '@/mock'
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const productDetail = ref({})
+onMounted(() => {
+  // 在挂载时根据路径query中的i参数动态获取video信息 如果i不存在 则为1
+  const i = route.query.i || 1
+  // 从list数据中筛选出当前的video信息
+  const filterList = productList.filter(item => item.id == i)
+  if (filterList?.length > 0) {
+    productDetail.value = filterList[0].detail
+  }
+})
 const toHomeDetail = (type, tid, pid) => {
   if (type == 1) {
     window.location.href = `${DOMAIN}?p=softdetail&pid=${pid}&tid=${tid}`
@@ -54,8 +69,11 @@ const toHomeDetail = (type, tid, pid) => {
     .one_card {
       width: 50%;
       height: 393px;
-      border: solid 1px #000;
       box-sizing: border-box;
+      .img_card {
+        width: 100%;
+        height: 393px;
+      }
       &:hover {
         .mask {
           opacity: 1;
@@ -64,7 +82,7 @@ const toHomeDetail = (type, tid, pid) => {
       }
       .mask {
         z-index: 1;
-        background: rgba(0, 0, 0, 1);
+        background: rgba(0, 0, 0, 0.67);
         position: absolute;
         top: 0;
         left: 0;
@@ -89,22 +107,6 @@ const toHomeDetail = (type, tid, pid) => {
         }
       }
     }
-    .bg1 {
-      background: url(../../static/img/index/a1.png) no-repeat;
-      background-size: cover;
-    }
-    .bg2 {
-      background: url(../../static/img/index/a2.png) no-repeat;
-      background-size: cover;
-    }
-    .bg3 {
-      background: url(../../static/img/index/a3.png) no-repeat;
-      background-size: cover;
-    }
-    .bg4 {
-      background: url(../../static/img/index/a4.png) no-repeat;
-      background-size: cover;
-    }
   }
 }
 </style>

src/components/detail/Overview.vue

@@ -2,40 +2,35 @@
   <div class="overview_container" id="product_overview">
     <Header :detail="true" />
     <div class="product_infos">
-      <div class="main" v-if="activeTab == 0">
-        <img :src="A5" alt="big_img" class="big_img" />
-        <div class="content_intro">
-          <h2 class="title">线性相机实验平台</h2>
-          <p class="feature">
-            功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组
-            帮客户缩短项目验证所需要的时间
-            快速的帮助工程师从环境上优化机器视觉方案 双 x
-          </p>
-          <div class="btn">
-            <span class="animate__animated animate__backInLeft">联系我们</span>
-            <span class="animate__animated animate__backInRight">→</span>
+      <img :src="BG" class="bg" alt="" />
+      <div v-for="item in productList" :key="item.id">
+        <div class="main" v-if="parseInt(item.id) - 1 == activeTab">
+          <img :src="A5" alt="big_img" class="big_img" />
+          <div class="content_intro">
+            <h2 class="title">线性相机实验平台</h2>
+            <p class="feature">
+              功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组
+              帮客户缩短项目验证所需要的时间
+              快速的帮助工程师从环境上优化机器视觉方案 双 x
+            </p>
+            <div class="btn" @click="contactUs">
+              <span class="animate__animated animate__backInLeft"
+                >联系我们</span
+              >
+              <span class="animate__animated animate__backInRight">→</span>
+            </div>
           </div>
         </div>
       </div>
-      <div class="main" v-if="activeTab == 1">2</div>
-      <div class="main" v-if="activeTab == 2">3</div>
-      <div class="main" v-if="activeTab == 3">4</div>
       <div class="tabs_wrapper">
-        <div class="tab mb" @click="changeTab(0)">
-          <img :src="A1" class="thumbnail" alt="" />
-          <div class="mask" v-if="[1, 2, 3].includes(activeTab)"></div>
-        </div>
-        <div class="tab mb" @click="changeTab(1)">
-          <img :src="A2" class="thumbnail" alt="" />
-          <div class="mask" v-if="[0, 2, 3].includes(activeTab)"></div>
-        </div>
-        <div class="tab mb" @click="changeTab(2)">
-          <img :src="A3" class="thumbnail" alt="" />
-          <div class="mask" v-if="[0, 1, 3].includes(activeTab)"></div>
-        </div>
-        <div class="tab" @click="changeTab(3)">
-          <img :src="A4" class="thumbnail" alt="" />
-          <div class="mask" v-if="[1, 2, 0].includes(activeTab)"></div>
+        <div
+          class="tab mb"
+          @click="changeTab(parseInt(item.id) - 1)"
+          v-for="item in productList"
+          :key="item.id"
+        >
+          <img :src="item.thumbnail" class="thumbnail" alt="" />
+          <div class="mask" v-if="activeTab != parseInt(item.id) - 1"></div>
         </div>
       </div>
     </div>
@@ -45,24 +40,36 @@
 <script setup>
 import { ref } from 'vue'
 import Header from '@/components/Header'
-import A1 from '@/static/img/zhongxin/li1.png'
-import A2 from '@/static/img/zhongxin/li2.png'
-import A3 from '@/static/img/zhongxin/li3.png'
-import A4 from '@/static/img/zhongxin/li4.png'
-import A5 from '@/static/img/zhongxin/duibi2.png'
+import { DOMAIN } from '@/constant'
+import A5 from '@/static/img/zhongxin/t1.png'
+import BG from '@/static/img/zhongxin/logo2.png'
+import { productList } from '@/mock'
 const activeTab = ref(0)
 const changeTab = index => {
   activeTab.value = index
 }
+const contactUs = () => {
+  window.location.href = `${DOMAIN}?p=contact`
+}
 </script>
 
 <style lang="scss" scoped>
 .overview_container {
   background: #f9f9f9;
+  position: relative;
   .product_infos {
     padding: 55px 59px 55px 136px;
     display: flex;
     align-items: center;
+    position: relative;
+    .bg {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      height: 100%;
+      width: auto;
+    }
     .main {
       flex: 1;
       padding: 79px 126px 45px 0;
@@ -70,8 +77,10 @@ const changeTab = index => {
       align-items: center;
       justify-content: space-between;
       .big_img {
-        width: 893px;
-        height: 502px;
+        // width: 893px;
+        // height: 502px;
+        width: 719px;
+        height: 811px;
       }
       .content_intro {
         display: flex;

src/components/detail/Video.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="video_container">
-    <HeadLine title="产品使用视频" line1="做专业的铁路设备研发和制造" />
+    <HeadLine :title="videoInfo.title" :line1="videoInfo.desc" />
     <div class="video">
       <div class="mask">
         <img :src="Play" class="video_img" alt="video_img" />
@@ -12,6 +12,20 @@
 <script setup>
 import HeadLine from '../HeadLine'
 import Play from '@/static/img/zhongxin/shipin2.png'
+import { productList } from '@/mock'
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const videoInfo = ref({})
+onMounted(() => {
+  // 在挂载时根据路径query中的i参数动态获取video信息 如果i不存在 则为1
+  const i = route.query.i || 1
+  // 从list数据中筛选出当前的video信息
+  const filterList = productList.filter(item => item.id == i)
+  if (filterList?.length > 0) {
+    videoInfo.value = filterList[0].video
+  }
+})
 </script>
 
 <style lang="scss" scoped>

src/mock/index.js

@@ -74,3 +74,139 @@ export const mainInfo = {
     line2: undefined,
   },
 }
+
+import S1 from '@/static/img/zhongxin/li1.png'
+import S2 from '@/static/img/zhongxin/li2.png'
+import S3 from '@/static/img/zhongxin/li3.png'
+import S4 from '@/static/img/zhongxin/li4.png'
+import B1 from '@/static/img/zhongxin/t1.png'
+export const productList = [
+  {
+    id: 1,
+    thumbnail: S1,
+    bigPic: B1,
+    title: '线性相机实验平台',
+    desc: '功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组帮客户缩短项目验证所需要的时间快速的帮助工程师从环境上优化机器视觉方案 双 x',
+    video: {
+      title: '产品使用视频',
+      desc: '做专业的铁路设备研发和制造',
+    },
+    detail: {
+      title: '产品细节',
+      desc: '注重产品的每一个细节',
+      pid: '1',
+      tid: '1',
+      type: '1',
+      list: [
+        {
+          pic: A1,
+        },
+        {
+          pic: A2,
+        },
+        {
+          pic: A3,
+        },
+        {
+          pic: A4,
+        },
+      ],
+    },
+  },
+  {
+    id: 2,
+    thumbnail: S2,
+    bigPic: B1,
+    title: '线性相机实验平台',
+    desc: '功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组帮客户缩短项目验证所需要的时间快速的帮助工程师从环境上优化机器视觉方案 双 x',
+    video: {
+      title: '产品使用视频',
+      desc: '做专业的铁路设备研发和制造',
+    },
+    detail: {
+      title: '产品细节',
+      desc: '注重产品的每一个细节',
+      pid: '1',
+      tid: '1',
+      type: '1',
+      list: [
+        {
+          pic: A1,
+        },
+        {
+          pic: A2,
+        },
+        {
+          pic: A3,
+        },
+        {
+          pic: A4,
+        },
+      ],
+    },
+  },
+  {
+    id: 3,
+    thumbnail: S3,
+    bigPic: B1,
+    title: '线性相机实验平台',
+    desc: '功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组帮客户缩短项目验证所需要的时间快速的帮助工程师从环境上优化机器视觉方案 双 x',
+    video: {
+      title: '产品使用视频',
+      desc: '做专业的铁路设备研发和制造',
+    },
+    detail: {
+      title: '产品细节',
+      desc: '注重产品的每一个细节',
+      pid: '1',
+      tid: '1',
+      type: '1',
+      list: [
+        {
+          pic: A1,
+        },
+        {
+          pic: A2,
+        },
+        {
+          pic: A3,
+        },
+        {
+          pic: A4,
+        },
+      ],
+    },
+  },
+  {
+    id: 4,
+    thumbnail: S4,
+    bigPic: B1,
+    title: '线性相机实验平台',
+    desc: '功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组帮客户缩短项目验证所需要的时间快速的帮助工程师从环境上优化机器视觉方案 双 x',
+    video: {
+      title: '产品使用视频',
+      desc: '做专业的铁路设备研发和制造',
+    },
+    detail: {
+      title: '产品细节',
+      desc: '注重产品的每一个细节',
+      pid: '1',
+      tid: '1',
+      type: '1',
+      list: [
+        {
+          pic: A1,
+        },
+        {
+          pic: A2,
+        },
+        {
+          pic: A3,
+        },
+        {
+          pic: A4,
+        },
+      ],
+    },
+  },
+]