详情页

src/components/detail/Img.vue

@@ -1,16 +1,15 @@
 <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 class="double_wrap" v-if="pic2">
+      <img :src="pic1" alt="" />
+      <img :src="pic2" alt="" />
     </div>
-    <img v-else v-lazy="pic1" class="sing_img" alt="" />
+    <img v-else :src="pic1" class="sing_img" alt="" />
   </div>
 </template>
 
 <script setup>
 const props = defineProps({
-  double: Boolean,
   pic1: {},
   pic2: {},
 })
@@ -18,25 +17,24 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 .card_detail_img {
-  padding: 0 21px;
+  padding: 0 17px;
   .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;
+    column-gap: 13px;
     img {
       width: 100%;
       height: auto;
-      border-radius: 4px;
+      border-radius: 1px;
     }
   }
   .sing_img {
     width: 100%;
     height: auto;
-    border-radius: 4px;
+    border-radius: 1px;
   }
 }
 </style>

src/components/detail/Intro.vue

@@ -18,20 +18,20 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 .case_detail_intro {
-  padding: 30px 25px;
+  padding: 20px;
   .wrap {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     .title {
       display: flex;
       align-items: center;
-      font-size: 19px;
+      font-size: 10px;
       font-family: Alibaba PuHuiTi;
       font-weight: bold;
       color: #000000;
-      margin-bottom: 11px;
+      margin-bottom: 7px;
       .xuhao {
-        width: 15px;
-        height: 15px;
+        width: 10px;
+        height: 10px;
         border-radius: 50%;
         border: solid 1px #000;
         display: flex;
@@ -41,8 +41,8 @@ const props = defineProps({
       }
     }
     .desc {
-      font-size: 18px;
-      line-height: 26px;
+      font-size: 8px;
+      line-height: 12px;
       font-family: Alibaba PuHuiTi;
       font-weight: 300;
       color: #aaaaaa;

src/pages/Detail.vue

@@ -5,6 +5,11 @@
       text="电力运维人员的日常工作有相当一部分是需要走到第一线去的，如设备检修、线路巡检 电源放电等。电力运维人员的一线工作呈现出“点多、"
     />
     <CardTitle title="设计" blue_title="研发型外观" en="APPEARANCE" />
+    <Img :pic1="A1" :pic2="A1" />
+    <Intro :cardIntro="cardIntro" />
+    <Paragraph
+      text="电力运维人员的日常工作有相当一部分是需要走到第一线去的，如设备检修、线路巡检 电源放电等。电力运维人员的一线工作呈现出“点多、"
+    />
     <video
       controls
       style="width: 100%; height: auto; object-fit: fill"
@@ -19,7 +24,17 @@
 import SubNavigation from 'cpns/SubNavigation'
 import Paragraph from 'cpns/detail/Paragraph'
 import CardTitle from 'cpns/detail/CardTitle'
+import Img from 'cpns/detail/Img'
+import Intro from 'cpns/detail/Intro'
 import MP4 from '@/static/video/a.mp4'
+import A1 from '@/static/img/company.jpg'
+import { ref } from 'vue'
+const cardIntro = ref([
+  {
+    title: '主机模块',
+    desc: '内置自研电路板，光学机芯，电池，天线等。',
+  },
+])
 </script>
 
 <style lang="scss" scoped>