创建详情组建

src/components/detail/CardTitle.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="card_detail_title" v-if="title">
+    <p class="title">
+      {{ title }}<span class="blue_text">{{ blue_title }}</span>
+    </p>
+    <p class="en">{{ en }}</p>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: String,
+  blue_title: String,
+  en: String,
+})
+</script>
+
+<style lang="scss" scoped>
+.card_detail_title {
+  padding: 29px 23px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #f9f9f9;
+  .title {
+    font-size: 22px;
+    font-family: DFPYuanW7-GB;
+    font-weight: 400;
+    color: #000000;
+    letter-spacing: 2px;
+    .blue_text {
+      color: $theme_color;
+    }
+  }
+  .en {
+    font-size: 14px;
+    font-family: 'ZonaPro';
+    font-weight: bold;
+    color: #929292;
+  }
+}
+</style>

src/components/detail/Img.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="card_detail_img" v-if="pic1">
+    <div class="double_wrap" v-if="double">
+      <img v-lazy="pic1" alt="" />
+      <img v-lazy="pic2" alt="" />
+    </div>
+    <img v-else v-lazy="pic1" class="sing_img" alt="" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  double: Boolean,
+  pic1: {},
+  pic2: {},
+})
+</script>
+
+<style lang="scss" scoped>
+.card_detail_img {
+  padding: 0 21px;
+  .double_wrap {
+    display: grid;
+    grid-template-rows: repeat(1, 1fr);
+    grid-template-columns: repeat((2, 1fr));
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 19px;
+    margin-bottom: 10px;
+    img {
+      width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+  }
+  .sing_img {
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+  }
+}
+</style>

src/components/detail/Intro.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="case_detail_intro">
+    <div class="wrap" v-for="(item, index) in cardIntro" :key="index">
+      <div class="title">
+        <div class="xuhao">{{ parseInt(index) + 1 }}</div>
+        <p>{{ item.title }}</p>
+      </div>
+      <div class="desc">{{ item.desc }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  cardIntro: Array,
+})
+</script>
+
+<style lang="scss" scoped>
+.case_detail_intro {
+  padding: 30px 25px;
+  .wrap {
+    margin-bottom: 20px;
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 19px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: bold;
+      color: #000000;
+      margin-bottom: 11px;
+      .xuhao {
+        width: 15px;
+        height: 15px;
+        border-radius: 50%;
+        border: solid 1px #000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 6px;
+      }
+    }
+    .desc {
+      font-size: 18px;
+      line-height: 26px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 300;
+      color: #aaaaaa;
+    }
+  }
+}
+</style>

src/components/detail/Paragraph.vue

@@ -0,0 +1,31 @@
+<template>
+  <article
+    :class="isHtml ? 'para_noindent' : 'paragraph_container'"
+    v-html="text"
+  ></article>
+</template>
+
+<script setup>
+const props = defineProps({
+  text: String,
+  isHtml: Boolean,
+})
+</script>
+
+<style lang="scss" scoped>
+.para_noindent {
+  padding: 30px 20px;
+  font-size: 18px;
+  font-weight: 300;
+  color: #aaaaaa;
+  line-height: 27px;
+}
+.paragraph_container {
+  padding: 30px 20px;
+  font-size: 18px;
+  font-weight: 300;
+  color: #aaaaaa;
+  line-height: 27px;
+  text-indent: 28px;
+}
+</style>

src/pages/Detail.vue

@@ -1,8 +1,20 @@
 <template>
-  <div class="detail_container">detail</div>
+  <div class="detail_container">
+    <SubNavigation title="国网照明巡检摄像头 - 详情页" />
+    <!-- <video
+      v-if="item?.video"
+      controls
+      style="width: 100%; height: auto; object-fit: fill"
+      controlslist="nodownload"
+    >
+      <source :src="item?.video" />
+    </video> -->
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import SubNavigation from 'cpns/SubNavigation'
+</script>
 
 <style lang="scss" scoped>
 .detail_container {