1

src/views/product/detail.vue

@@ -1,16 +1,24 @@
 <script setup>
-import {ref, onMounted, computed} from 'vue'
+import {ref, onMounted, shallowRef, watchEffect} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
-import {advantages, monitorSystemList, remoteDeviceList} from './description.js'
+import {cryptoDecrypt} from '@/utils/cryptojs.js'
+
+const advantages = window.advantages
 
 const route = useRoute()
 const router = useRouter()
 
-const detail = route.query
+const query = JSON.parse(cryptoDecrypt(route.query.type))
 
-const showMonitor = computed(() => detail.type === 'monitorSystem')
+const videoLoaded = ref(false)
 
-onMounted(() => {})
+onMounted(() => {
+  videoLoaded.value = query.type !== 'softwareSystem' ? false : true
+})
+
+function onVideoLoaded() {
+  videoLoaded.value = false
+}
 
 const toBack = () => {
   router.back()
@@ -18,57 +26,73 @@ const toBack = () => {
 </script>
 
 <template>
-  <div class="page flex column a-c">
-    <div class="label">{{ detail.title }} {{ detail.subTitle }}</div>
-    <div class="content flex j-s">
-      <div class="img">
-        <img :src="`./static/images/${detail.imgUrl}`" alt="" />
+  <div class="page flex column a-c" v-loading="videoLoaded">
+    <h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>
+
+    <!-- 硬件内容 -->
+    <template v-if="query.type === 'hardwareSystem'">
+      <div class="content flex j-s hardware">
+        <img class="img" :src="`./static/images/${query.imgUrl}`" alt="" />
+        <div class="text">
+          <h4 class="title">核心优势：</h4>
+          <div v-html="advantages"></div>
+        </div>
       </div>
 
-      <!-- 核心优势 -->
-      <div class="text" v-if="showMonitor">
-        <div class="title">核心优势：</div>
-        <div v-html="advantages"></div>
+      <div class="descripition">
+        <div v-html="query.description"></div>
       </div>
-      <div class="text" v-if="!showMonitor">
-        <div v-html="remoteDeviceList[detail.id - 1].description"></div>
-      </div>
-    </div>
+    </template>
+
+    <!-- 软件 -->
+    <template v-else>
+      <div class="content software flex j-s">
+        <video autoplay muted loop @loadeddata="onVideoLoaded" v-show="!videoLoaded">
+          <source :src="`./static/video/${query.video}`" type="video/mp4" />
+        </video>
+        <div class="descripition">
+          <div v-html="query.description"></div>
+        </div>
+      </div>
+      <div class="card-list flex j-c a-c wrap">
+        <div class="card" v-for="item in query.card" :key="item.id">
+          <h4 class="title">{{ item.title }}</h4>
+          <div class="content">{{ item.content }}</div>
+        </div>
+      </div>
+    </template>
 
-    <!-- 介绍 -->
-    <div class="descripition" v-if="showMonitor">
-      <div v-html="monitorSystemList[detail.id - 1].description"></div>
-    </div>
     <div class="back" @click="toBack">返回</div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-:deep(.monitor) {
+:deep(.hardware) {
   margin-bottom: 40px;
 }
 
 .label {
-  margin: 64px 0 20px 0;
+  margin: 40px 0 0 0;
   font-family: 'PingFang SC';
   font-weight: 500;
   font-size: 32px;
   font-weight: bold;
   color: $black;
 }
+
 .time {
   margin-bottom: 40px;
 }
 .content {
-  width: 1300px;
-  height: 550px;
   margin-top: 40px;
   margin-bottom: 40px;
+}
+
+.hardware {
+  width: 1300px;
   .img {
-    img {
-      width: 550px;
-      height: 550px;
-    }
+    width: 550px;
+    height: 550px;
   }
   .text {
     font-size: 24px;
@@ -80,12 +104,59 @@ const toBack = () => {
     }
   }
 }
+
+.software {
+  width: 1700px;
+  video {
+    width: 65%;
+    height: auto;
+    margin-right: 40px;
+  }
+}
+
+.card-list {
+  width: 1200px;
+  height: 100%;
+  .card {
+    width: 350px;
+    height: 300px;
+    margin: 20px;
+    text-align: center;
+    border-radius: $border_radius;
+    transition: all 0.3s ease-in-out;
+    border: 1px solid #eee;
+    cursor: pointer;
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    }
+    .title {
+      background-color: #0389ff;
+      height: 60px;
+      line-height: 60px;
+      color: #fff;
+      font-size: 28px;
+      border-radius: $border_radius $border_radius 0 0;
+    }
+    .content {
+      font-size: 18px;
+      padding: 0 20px;
+      display: -webkit-box;
+      -webkit-line-clamp: 6;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
 .descripition {
   width: 1000px;
-  font-size: 20px;
+  font-size: 22px;
 }
 
 .back {
+  margin-top: 40px;
   padding: 10px 40px;
   background: #0389ff;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);