备份代码

src/views/mobile/product/detail.vue

@@ -0,0 +1,175 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import {cryptoDecrypt} from '@/utils/cryptojs.js'
+
+const route = useRoute()
+const router = useRouter()
+
+const query = JSON.parse(cryptoDecrypt(route.query.type))
+const advantages = window.advantages
+const videoLoaded = ref(false)
+
+onMounted(() => {
+  videoLoaded.value = query.type !== 'softwareSystem' ? false : true
+})
+
+function onVideoLoaded() {
+  videoLoaded.value = false
+}
+
+function toBack() {
+  if (query.type === 'hardwareSystem') {
+    router.push('/m/product/hardwareSystem')
+  } else if (query.type === 'softwareSystem') {
+    router.push('/m/product/softwareSystem')
+  } else {
+    router.back()
+  }
+}
+</script>
+
+<template>
+  <div class="page" v-loading="videoLoaded">
+    <h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>
+
+    <!-- ============== 硬件详情 ============== -->
+    <template v-if="query.type === 'hardwareSystem'">
+      <div class="hardware-section">
+        <img class="hardware-img" :src="`./static/images/${query.imgUrl}`" alt="" />
+        <div class="advantage-box">
+          <h4 class="advantage-title">核心优势</h4>
+          <div class="advantage-text" v-html="advantages"></div>
+        </div>
+      </div>
+      <div class="desc-box" v-html="query.description"></div>
+    </template>
+
+    <!-- ============== 软件详情 ============== -->
+    <template v-else>
+      <div class="software-section">
+        <video autoplay muted loop playsinline @loadeddata="onVideoLoaded" v-show="!videoLoaded">
+          <source :src="`./static/video/${query.video}`" type="video/mp4" />
+        </video>
+        <div class="desc-box" v-html="query.description"></div>
+      </div>
+
+      <div class="card-grid" v-if="query.card">
+        <div class="card" v-for="item in query.card" :key="item.id">
+          <h4 class="card-title">{{ item.title }}</h4>
+          <p class="card-text">{{ item.content }}</p>
+        </div>
+      </div>
+    </template>
+
+    <div class="back-btn" @click="toBack">返回</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  width: 100%;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+
+.label {
+  margin: 24px 0 16px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+}
+
+// ============== 硬件区域 ==============
+.hardware-section {
+  .hardware-img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+
+  .advantage-box {
+    margin-top: 16px;
+    padding: 12px;
+    background: #f5f7fa;
+    border-radius: 8px;
+
+    .advantage-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 8px;
+    }
+
+    .advantage-text {
+      font-size: 14px;
+      line-height: 1.8;
+      color: #333;
+    }
+  }
+}
+
+// ============== 软件区域 ==============
+.software-section {
+  video {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    display: block;
+  }
+}
+
+// ============== 描述文案 ==============
+.desc-box {
+  margin-top: 16px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #333;
+}
+
+// ============== 功能卡片 ==============
+.card-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .card-title {
+    background-color: #0389ff;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+    padding: 10px 0;
+  }
+
+  .card-text {
+    font-size: 12px;
+    padding: 10px;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    color: #666;
+  }
+}
+
+// ============== 返回按钮 ==============
+.back-btn {
+  margin: 32px auto 40px;
+  width: 120px;
+  padding: 10px 0;
+  text-align: center;
+  background: #0389ff;
+  border-radius: 16px;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+}
+</style>