部分详情页

src/components/detail/CardTitle.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="card_detail_title" v-if="title">
     <p class="title">
-      {{ title }}<span class="blue_text">{{ blue_title }}</span>
+      <span class="blue_text">{{ blue_title }}</span
+      >{{ title }}
     </p>
     <p class="en">{{ en }}</p>
   </div>
@@ -17,24 +18,24 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 .card_detail_title {
-  padding: 29px 23px;
+  padding: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #f9f9f9;
   .title {
-    font-size: 22px;
-    font-family: DFPYuanW7-GB;
+    font-size: 10px;
+    font-family: Alibaba PuHuiTi;
     font-weight: 400;
-    color: #000000;
+    color: #000;
     letter-spacing: 2px;
     .blue_text {
-      color: $theme_color;
+      color: $theme-color;
     }
   }
   .en {
-    font-size: 14px;
-    font-family: 'ZonaPro';
+    font-size: 5px;
+    font-family: Zona Pro;
     font-weight: bold;
     color: #929292;
   }

src/components/detail/Paragraph.vue

@@ -1,31 +1,21 @@
 <template>
-  <article
-    :class="isHtml ? 'para_noindent' : 'paragraph_container'"
-    v-html="text"
-  ></article>
+  <article class="paragraph_container">{{ 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-size: 8px;
+  font-family: Source Han Sans CN;
   font-weight: 300;
-  color: #aaaaaa;
-  line-height: 27px;
-  text-indent: 28px;
+  color: #4f4f4f;
+  line-height: 15px;
+  padding: 20px;
+  background: #fff;
 }
 </style>

src/pages/Detail.vue

@@ -1,22 +1,29 @@
 <template>
   <div class="detail_container">
     <SubNavigation title="国网照明巡检摄像头 - 详情页" />
-    <!-- <video
-      v-if="item?.video"
+    <Paragraph
+      text="电力运维人员的日常工作有相当一部分是需要走到第一线去的，如设备检修、线路巡检 电源放电等。电力运维人员的一线工作呈现出“点多、"
+    />
+    <CardTitle title="设计" blue_title="研发型外观" en="APPEARANCE" />
+    <video
       controls
       style="width: 100%; height: auto; object-fit: fill"
       controlslist="nodownload"
     >
-      <source :src="item?.video" />
-    </video> -->
+      <source :src="MP4" />
+    </video>
   </div>
 </template>
 
 <script setup>
 import SubNavigation from 'cpns/SubNavigation'
+import Paragraph from 'cpns/detail/Paragraph'
+import CardTitle from 'cpns/detail/CardTitle'
+import MP4 from '@/static/video/a.mp4'
 </script>
 
 <style lang="scss" scoped>
 .detail_container {
+  padding-top: $sub-header-height;
 }
 </style>