提交代码

src/views/product/detail.vue

@@ -0,0 +1,98 @@
+<script setup>
+import {ref, onMounted, computed} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import {advantages, monitorSystemList, remoteDeviceList} from './description.js'
+
+const route = useRoute()
+const router = useRouter()
+
+const detail = route.query
+
+const showMonitor = computed(() => detail.type === 'monitorSystem')
+
+onMounted(() => {})
+
+const toBack = () => {
+  router.back()
+}
+</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>
+
+      <!-- 核心优势 -->
+      <div class="text" v-if="showMonitor">
+        <div class="title">核心优势：</div>
+        <div v-html="advantages"></div>
+      </div>
+      <div class="text" v-if="!showMonitor">
+        <div v-html="remoteDeviceList[detail.id - 1].description"></div>
+      </div>
+    </div>
+
+    <!-- 介绍 -->
+    <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) {
+  margin-bottom: 40px;
+}
+
+.label {
+  margin: 64px 0 20px 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;
+  .img {
+    img {
+      width: 550px;
+      height: 550px;
+    }
+  }
+  .text {
+    font-size: 24px;
+    line-height: 5ex;
+    .title {
+      font-size: 32px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+  }
+}
+.descripition {
+  width: 1000px;
+  font-size: 20px;
+}
+
+.back {
+  padding: 10px 40px;
+  background: #0389ff;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+  margin-bottom: 60px;
+  font-size: 20px;
+  color: $white;
+  cursor: pointer;
+}
+</style>