portal/src/views/mobile/product/detail.vue

<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>