diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9439107..e66583b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@types/three':
-        specifier: ^0.175.0
-        version: 0.175.0
       axios:
         specifier: ^1.8.3
         version: 1.8.3
@@ -35,9 +32,6 @@ importers:
       swiper:
         specifier: ^11.2.5
         version: 11.2.5
-      three:
-        specifier: ^0.175.0
-        version: 0.175.0
       unplugin-auto-import:
         specifier: ^19.1.1
         version: 19.1.1(@vueuse/core@9.13.0(vue@3.5.13(typescript@5.7.3)))
@@ -726,9 +720,6 @@ packages:
   '@tailwindcss/postcss@4.0.10':
     resolution: {integrity: sha512-3NEomQtd/JrNAaSkuklBLGQkyCpxZjOW8rf64x4lx+Umo7gh0kzwe83QmUF/GrVNgO6TdrCyHf4+41GZGR3EIg==}
 
-  '@tweenjs/tween.js@23.1.3':
-    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
-
   '@types/echarts@5.0.0':
     resolution: {integrity: sha512-5uc/16BlYpzH8kU/u8aeRRgY2FV6yRY7RjPnYfUFPowl0F3kvNgfaz09PmeVdLkqdAtMft3XkCfqiJPJjG2DNQ==}
     deprecated: This is a stub types definition. echarts provides its own type definitions, so you do not need this installed.
@@ -745,18 +736,9 @@ packages:
   '@types/node@14.18.63':
     resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==}
 
-  '@types/stats.js@0.17.3':
-    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
-
-  '@types/three@0.175.0':
-    resolution: {integrity: sha512-ldMSBgtZOZ3g9kJ3kOZSEtZIEITmJOzu8eKVpkhf036GuNkM4mt0NXecrjCn5tMm1OblOF7dZehlaDypBfNokw==}
-
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
-  '@types/webxr@0.5.22':
-    resolution: {integrity: sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==}
-
   '@videojs/http-streaming@3.17.0':
     resolution: {integrity: sha512-Ch1P3tvvIEezeZXyK11UfWgp4cWKX4vIhZ30baN/lRinqdbakZ5hiAI3pGjRy3d+q/Epyc8Csz5xMdKNNGYpcw==}
     engines: {node: '>=8', npm: '>=5'}
@@ -881,9 +863,6 @@ packages:
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
-  '@webgpu/types@0.1.60':
-    resolution: {integrity: sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==}
-
   '@xmldom/xmldom@0.8.10':
     resolution: {integrity: sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==}
     engines: {node: '>=10.0.0'}
@@ -1265,9 +1244,6 @@ packages:
       picomatch:
         optional: true
 
-  fflate@0.8.2:
-    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
-
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -1628,9 +1604,6 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  meshoptimizer@0.18.1:
-    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
-
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -2044,9 +2017,6 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  three@0.175.0:
-    resolution: {integrity: sha512-nNE3pnTHxXN/Phw768u0Grr7W4+rumGg/H6PgeseNJojkJtmeHJfZWi41Gp2mpXl1pg1pf1zjwR4McM1jTqkpg==}
-
   tinyglobby@0.2.12:
     resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
     engines: {node: '>=12.0.0'}
@@ -2774,8 +2744,6 @@ snapshots:
       postcss: 8.5.3
       tailwindcss: 4.0.10
 
-  '@tweenjs/tween.js@23.1.3': {}
-
   '@types/echarts@5.0.0':
     dependencies:
       echarts: 5.6.0
@@ -2790,21 +2758,8 @@ snapshots:
 
   '@types/node@14.18.63': {}
 
-  '@types/stats.js@0.17.3': {}
-
-  '@types/three@0.175.0':
-    dependencies:
-      '@tweenjs/tween.js': 23.1.3
-      '@types/stats.js': 0.17.3
-      '@types/webxr': 0.5.22
-      '@webgpu/types': 0.1.60
-      fflate: 0.8.2
-      meshoptimizer: 0.18.1
-
   '@types/web-bluetooth@0.0.16': {}
 
-  '@types/webxr@0.5.22': {}
-
   '@videojs/http-streaming@3.17.0(video.js@8.22.0)':
     dependencies:
       '@babel/runtime': 7.26.10
@@ -2999,8 +2954,6 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@webgpu/types@0.1.60': {}
-
   '@xmldom/xmldom@0.8.10': {}
 
   acorn@8.14.1: {}
@@ -3420,8 +3373,6 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.2
 
-  fflate@0.8.2: {}
-
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -3730,8 +3681,6 @@ snapshots:
 
   merge2@1.4.1: {}
 
-  meshoptimizer@0.18.1: {}
-
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -4150,8 +4099,6 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  three@0.175.0: {}
-
   tinyglobby@0.2.12:
     dependencies:
       fdir: 6.4.3(picomatch@4.0.2)
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index 480502c..8f111cb 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -6,7 +6,7 @@
 @forward "element-plus/theme-chalk/src/common/var.scss" with (
   $colors: (
     "primary": (
-      "base": #2de6ff,
+      "base": #154DDD,
     ),
   ),
   $select-dropdown: (
@@ -29,8 +29,8 @@
 }
 
 .el-button:hover {
-  // color: white;
-  background-color: transparent;
+  color: white;
+  background-color: #154DDD;
   outline: none;
 }
 
diff --git a/src/views/dataView/DataOverview.vue b/src/views/dataView/DataOverview.vue
index 0ddc5c5..115f0ee 100644
--- a/src/views/dataView/DataOverview.vue
+++ b/src/views/dataView/DataOverview.vue
@@ -85,10 +85,10 @@ onUnmounted(() => {
       </div>
       <ul class="content-list-box">
         <li class="content-detail-box">
-          <Type1ObjectDetect typeKey="目标检测" :info="detailInfo" />
-          <Type2LicensePlateRecog typeKey="车牌识别" :info="detailInfo" />
+          <Type1ObjectDetect typeKey="目标检测" :info="detailInfo" v-if="false" />
+          <Type2LicensePlateRecog typeKey="车牌识别" :info="detailInfo" v-if="false" />
+          <Type4AudioDetection  typeKey="音频检测" :info="detailInfo" v-if="false" />
           <Type3CigaretteOffer typeKey="递烟" :info="detailInfo" />
-          <Type4AudioDetection  typeKey="音频检测" :info="detailInfo" />
         </li>
       </ul>
     </div>
diff --git a/src/views/dataView/components/Type1ObjectDetect.vue b/src/views/dataView/components/Type1ObjectDetect.vue
index 6115d46..899fdc4 100644
--- a/src/views/dataView/components/Type1ObjectDetect.vue
+++ b/src/views/dataView/components/Type1ObjectDetect.vue
@@ -7,7 +7,74 @@
  * @Description: 目标检测
 -->
 <template>
-    <div>
-        1
+    <div class="type-first">
+        <div class="type-first-top">
+            <span>←</span> <span>递烟</span>
+        </div>
+        <div class="type-first-mid">
+            <div class="type-first-mid-box" v-for="(item, index) in 8">
+                <div class="type-first-mid-box-video">
+                    <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
+                </div>
+                <div class="type-first-mid-box-text">
+                    123123
+                </div>
+            </div>
+        </div>
+        <div class="type-first-bottom"></div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup>
+defineOptions({
+  name: "Type1ObjectDetectWarp"
+});
+</script>
+<style lang="scss" scoped>
+.type-first {
+    .type-first-top {
+        cursor: pointer;
+        margin-bottom: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: bold;
+        font-size: 20px;
+        color: #1D2129;
+    }
+    .type-first-mid {
+        display: flex;
+        justify-self: start;
+        justify-content: space-between;
+        align-content: space-between;
+        flex-direction: row;
+        flex-wrap: wrap;
+        height: 744px;
+        .type-first-mid-box {
+            box-sizing: border-box;
+            width: 348px;
+            height: 360px;
+            background: #fff;
+            border-radius: 4px;
+            .type-first-mid-box-video {
+                box-sizing: border-box;
+                width: 100%;
+                height: 198px;
+                img {
+                    border-radius: 4px 4px 0 0;
+                }
+            }
+            .type-first-mid-box-text {
+                box-sizing: border-box;
+                width: 100%;
+                height: 162px;
+                padding: 16px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: bold;
+                font-size: 14px;
+                color: #1D2129;
+            }
+            
+        }
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/dataView/components/Type2LicensePlateRecog.vue b/src/views/dataView/components/Type2LicensePlateRecog.vue
index a3d9ba0..0d5f337 100644
--- a/src/views/dataView/components/Type2LicensePlateRecog.vue
+++ b/src/views/dataView/components/Type2LicensePlateRecog.vue
@@ -7,7 +7,92 @@
  * @Description: 车牌识别
 -->
 <template>
-    <div>
-        
+    <div class="type-second">
+        <div class="type-second-top">
+            <span>←</span> <span>车牌识别</span>
+        </div>
+        <div class="type-second-mid">
+            <div class="type-second-mid-video">
+                <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
+            </div>
+            <div class="type-second-mid-box">
+                <div class="type-second-mid-crad" v-for="(item, index) in 8">
+                    <div class="type-second-mid-crad-image">
+                        <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
+                    </div>
+                    <div class="type-second-mid-crad-text">
+                        123123
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="type-second-bottom"></div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script setup>
+defineOptions({
+  name: "Type2LicensePlateRecogWarp"
+});
+</script>
+<style lang="scss" scoped>
+.type-second {
+    .type-second-top {
+        cursor: pointer;
+        margin-bottom: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: bold;
+        font-size: 20px;
+        color: #1D2129;
+    }
+    .type-second-mid {
+        .type-second-mid-video {
+            box-sizing: border-box;
+            margin-bottom: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 324px;
+            border-radius: 4px;
+            img {
+                width: 720px;
+                height: 100%;
+                border-radius: 4px;
+            }
+        }
+        .type-second-mid-box {
+            display: flex;
+            justify-content: space-between;
+            align-content: space-between;
+            flex-direction: row;
+            flex-wrap: wrap;
+            height: 480px;
+            .type-second-mid-crad {
+                box-sizing: border-box;
+                width: 348px;
+                height: 232px;
+                background: #fff;
+                border-radius: 4px;
+                .type-second-mid-crad-image {
+                    box-sizing: border-box;
+                    width: 100%;
+                    height: 148px;
+                    img {
+                        border-radius: 4px 4px 0 0;
+                    }
+                }
+                .type-second-mid-crad-text {
+                    box-sizing: border-box;
+                    width: 100%;
+                    height: 84px;
+                    padding: 16px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: bold;
+                    font-size: 14px;
+                    color: #1D2129;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataView/components/Type3CigaretteOffer.vue b/src/views/dataView/components/Type3CigaretteOffer.vue
index 0f4ead5..5a053fc 100644
--- a/src/views/dataView/components/Type3CigaretteOffer.vue
+++ b/src/views/dataView/components/Type3CigaretteOffer.vue
@@ -7,7 +7,104 @@
  * @Description: 递烟
 -->
 <template>
-    <div>
-        
+    <div class="type-fourth">
+        <div class="type-fourth-top">
+            <span>←</span> <span>车牌识别</span>
+        </div>
+        <div class="type-fourth-mid">
+            <div class="type-fourth-mid-video">
+                <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
+            </div>
+            <div class="type-fourth-mid-tab">
+                <el-button  class="w-[76px] h-[32px!important]">全部</el-button>
+                <el-button  class="w-[76px] h-[32px!important]">人员</el-button>
+                <el-button  class="w-[76px] h-[32px!important]">车辆</el-button>
+                <el-button  class="w-[76px] h-[32px!important]">路灯</el-button>
+            </div>
+            <div class="type-fourth-mid-box">
+                <div class="type-fourth-mid-crad" v-for="(item, index) in 8">
+                    <div class="type-fourth-mid-crad-image">
+                        <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
+                    </div>
+                    <div class="type-fourth-mid-crad-text">
+                        123123
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="type-fourth-bottom"></div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script setup>
+defineOptions({
+  name: "Type3CigaretteOfferWarp"
+});
+</script>
+<style lang="scss" scoped>
+.type-fourth {
+    .type-fourth-top {
+        cursor: pointer;
+        margin-bottom: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: bold;
+        font-size: 20px;
+        color: #1D2129;
+    }
+    .type-fourth-mid {
+        .type-fourth-mid-video {
+            box-sizing: border-box;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 324px;
+            border-radius: 4px;
+            img {
+                width: 720px;
+                height: 100%;
+                border-radius: 4px;
+            }
+        }
+        .type-fourth-mid-tab {
+            box-sizing: border-box;
+            margin-top: 24px;
+            margin-bottom: 16px;
+            width: 100%;
+            height: 32px;
+        }
+        .type-fourth-mid-box {
+            display: flex;
+            justify-content: space-between;
+            align-content: space-between;
+            flex-direction: row;
+            flex-wrap: wrap;
+            height: 420px;
+            .type-fourth-mid-crad {
+                box-sizing: border-box;
+                width: 348px;
+                height: 202px;
+                background: #fff;
+                border-radius: 4px;
+                .type-fourth-mid-crad-image {
+                    box-sizing: border-box;
+                    width: 100%;
+                    height: 148px;
+                    img {
+                        border-radius: 4px 4px 0 0;
+                    }
+                }
+                .type-fourth-mid-crad-text {
+                    box-sizing: border-box;
+                    width: 100%;
+                    height: 54px;
+                    padding: 16px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: bold;
+                    font-size: 14px;
+                    color: #1D2129;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/dataView/components/Type4AudioDetection.vue b/src/views/dataView/components/Type4AudioDetection.vue
index bc8e9ee..5a79b3f 100644
--- a/src/views/dataView/components/Type4AudioDetection.vue
+++ b/src/views/dataView/components/Type4AudioDetection.vue
@@ -7,7 +7,83 @@
  * @Description: 音频检测
 -->
 <template>
-    <div>
-    
+    <div class="type-third">
+        <div class="type-third-top">
+            <span>←</span> <span>音频检测</span>
+        </div>
+        <div class="type-third-mid">
+            <BaseTable class="bg-transparent" :total="pagination.total" :pageSize="pagination.pageSize"
+                :dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage">
+              </BaseTable>
+        </div>
+        <div class="type-third-bottom"></div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script setup>
+import { BaseTable } from "@/components/CustomTable";
+defineOptions({
+  name: "Type4AudioDetectionWarp"
+});
+const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
+const listData = ref([]); // 列表数据
+const columns = [
+  {
+    label: "视频",
+    property: "station",
+  },
+  {
+    label: "告知执法依据",
+    property: "train_number",
+  },
+  {
+    label: "告知民警身份",
+    property: "train_model",
+  },
+  {
+    label: "告知申辩权利",
+    property: "train_carriage_number",
+  },
+  {
+    label: "告知复议诉讼等救济途径",
+    property: "alarm_type",
+    width: 190,
+  },
+  {
+    label: "告知执法全程被记录",
+    property: "fault_type",
+    width: 160,
+  },
+  {
+    label: "核实当事人身份信息",
+    property: "level",
+    width: 160,
+
+  },
+  {
+    label: "告知违法事实",
+    property: "created_at",
+  },
+  {
+    label: "语速(字/分钟)",
+    property: "created_at",
+  }
+]
+
+</script>
+<style lang="scss" scoped>
+.type-third {
+    .type-third-top {
+        cursor: pointer;
+        margin-bottom: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: bold;
+        font-size: 20px;
+        color: #1D2129;
+    }
+    .type-third-mid {
+        width: 100%;
+        height: 812px;
+        background: #fff;
+    }
+}
+</style>
\ No newline at end of file