diff --git a/src/views/Hazardous/components/Air.vue b/src/views/Hazardous/components/Air.vue
new file mode 100644
index 0000000..c2ea0fc
--- /dev/null
+++ b/src/views/Hazardous/components/Air.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="img-box">
+        <svg t="1695353681154" class="icon" viewBox="0 0 1332 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="6587" xmlns:xlink="http://www.w3.org/1999/xlink" width="166.5" height="128">
+            <path
+                d="M407.556511 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 33.464018 126.458762 35.225282 35.225282 0 0 1 8.101814 30.998248 84.188424 84.188424 0 0 1-35.225281 42.270338 35.225282 35.225282 0 0 0 15.146871 63.757761 39.452316 39.452316 0 0 0 17.260388-4.579287 153.934482 153.934482 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288zM959.88893 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338 35.225282 35.225282 0 0 0-13.73786 48.258637 35.225282 35.225282 0 0 0 30.998248 17.964893 39.452316 39.452316 0 0 0 17.260388-4.579286 155.343493 155.343493 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-26.771214-69.746058zM683.722721 774.956201a35.225282 35.225282 0 0 1 14.090112-22.191928 35.225282 35.225282 0 0 0-35.225281-60.939738 105.675846 105.675846 0 0 0-46.497373 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338A35.225282 35.225282 0 0 0 637.577601 1021.533174a39.452316 39.452316 0 0 0 17.260389-4.579287 155.343493 155.343493 0 0 0 70.450563-87.710952 108.141615 108.141615 0 0 0-18.669399-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288z"
+                fill="#20AEC5" p-id="6588"></path>
+            <path
+                d="M1141.299132 239.179664m-52.837923 0a52.837923 52.837923 0 1 0 105.675846 0 52.837923 52.837923 0 1 0-105.675846 0Z"
+                fill="#20AEC5" p-id="6589"></path>
+            <path
+                d="M1224.78305 0H105.675846a105.675846 105.675846 0 0 0-105.675846 105.675846v428.69168a105.675846 105.675846 0 0 0 105.675846 105.675845h1119.107204a105.675846 105.675846 0 0 0 105.675845-105.675845V105.675846a105.675846 105.675846 0 0 0-105.675845-105.675846zM105.675846 70.450564h1119.107204a35.225282 35.225282 0 0 1 35.225282 35.225282v281.802254H70.450564V105.675846a35.225282 35.225282 0 0 1 35.225282-35.225282z m1119.107204 499.142243H105.675846a35.225282 35.225282 0 0 1-35.225282-35.225281V457.928664h1189.557768v77.847873a35.225282 35.225282 0 0 1-35.225282 33.81627z"
+            fill="#20AEC5" p-id="6590"></path>
+    </svg>
+</div></template>
+
+<script setup lang='ts'>
+</script>
+
+<style scoped>
+
+.img-box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+.img-box svg {
+    width: 100%;
+    height: 100%;
+}
+.img-box::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 40%;
+    background-color: #100c2a;
+    box-sizing: border-box;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    animation: myfirst 1.5s linear infinite;
+}
+
+@keyframes myfirst
+{
+    0%   {height: 40%;} 
+    25%  {height: 25%;}
+    50%  {height: 10%;}
+    100% {height: 0;}
+}
+</style>
diff --git a/src/views/Hazardous/components/Border.vue b/src/views/Hazardous/components/Border.vue
index bbfc060..7fb8f51 100644
--- a/src/views/Hazardous/components/Border.vue
+++ b/src/views/Hazardous/components/Border.vue
@@ -1,16 +1,78 @@
 <template>
   <div class="border-container">
-    
+    <img src="../image/u91.svg" alt="" class="border-w">
+    <img src="../image/u93.svg" alt="" class="border-t">
+    <div class="top">
+      {{ prop.title }}
+    </div>
+    <div class="content">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script setup lang='ts'>
+const prop = defineProps({
+  title: {
+    type: String,
+    default: '边框'
+  }
+})
 </script>
 
 <style scoped>
 .border-container {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
+  position: relative;
 }
 
+.border-w {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.border-t {
+  width: 55%;
+  height: 10%;
+  position: absolute;
+  top: 0;
+  left: 22.5%;
+}
+
+
+
+.top {
+  width: 55%;
+  height: 10%;
+  font-size: 20px;
+  font-weight: 700;
+  position: absolute;
+  top: 0;
+  left: 22.5%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.top::after {
+  content: '';
+  border-width: 0px;
+  position: absolute;
+  left: 22.5%;
+  bottom: -3px;
+  width: 55%;
+  height: 6px;
+  background: -webkit-linear-gradient(0deg, rgba(25, 126, 207, 1) 0%, rgba(25, 126, 207, 1) 0%, rgba(50, 214, 249, 1) 100%, rgba(50, 214, 249, 1) 100%);
+  background: -moz-linear-gradient(90deg, rgba(25, 126, 207, 1) 0%, rgba(25, 126, 207, 1) 0%, rgba(50, 214, 249, 1) 100%, rgba(50, 214, 249, 1) 100%);
+  background: linear-gradient(90deg, rgba(25, 126, 207, 1) 0%, rgba(25, 126, 207, 1) 0%, rgba(50, 214, 249, 1) 100%, rgba(50, 214, 249, 1) 100%);
+  border: none;
+  border-radius: 25px;
+  -moz-box-shadow: 0px -2px 20px rgba(45, 196, 240, 1);
+  -webkit-box-shadow: 0px -2px 20px rgba(45, 196, 240, 1);
+  box-shadow: 0px -2px 20px rgba(45, 196, 240, 1);
+}
 </style>
diff --git a/src/views/Hazardous/components/Card.vue b/src/views/Hazardous/components/Card.vue
new file mode 100644
index 0000000..7d22857
--- /dev/null
+++ b/src/views/Hazardous/components/Card.vue
@@ -0,0 +1,203 @@
+<template>
+    <div class="card-container">
+        <div class="title">
+            {{ porptitle }}
+        </div>
+        <div class="content" :class="{ noborder }">
+            <div v-if="prop.config.type == 1" class="type1">
+                <div class="img">
+                    <img :src="prop.config.image">
+                </div>
+                <div class="text">
+                    20%RH
+                </div>
+            </div>
+            <div v-if="prop.config.type == 2" class="type2">
+                <div class="img2" :class="prop.config.classArr">
+                    <img :src="prop.config.image">
+                </div>
+                <div class="text2">
+                    <div class="text2-l"></div>
+                    <div class="text2-r">开启</div>
+                </div>
+            </div>
+            <div v-if="prop.config.type == 3" class="type3">
+                <div class="img3">
+                    <img :src="prop.config.image">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { number } from 'echarts/core';
+import { computed } from 'vue'
+const prop = defineProps({
+    title: {
+        type: String,
+        default: '卡片'
+    },
+    noborder: {
+        type: Boolean,
+        default: false
+    },
+    config: {
+        type: Object,
+        default: () => {
+            return {
+                type: 1,
+                image: '',
+                classArr:[]
+            }
+        }
+    }
+})
+
+const porptitle = computed(() => {
+    return prop.title.split('').join(' ')
+})
+</script>
+
+<style scoped>
+.card-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.title {
+    width: 100%;
+    height: 35%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 28px;
+    font-weight: 700;
+    color: #66ffff;
+}
+
+.content {
+    width: 100%;
+    height: 65%;
+    border-right: 2px solid #53FFC3;
+    font-size: 14px;
+    color: #53FFC3;
+}
+
+.noborder {
+    border: none;
+}
+
+.type1 {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.type2 {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.img img {
+    height: 100%;
+}
+
+.img {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 15px;
+}
+
+.img2 {
+    width: 167px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.img2 img {
+    width: 100%;
+}
+.text2 {
+    width: 80px;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.text2-l {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #53FFC3;
+}
+.text2-r {
+    font-size: 14px;
+}
+
+.type3 {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.img3 {
+    width: 130px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.img3 img {
+    width: 100%;
+}
+
+
+.kongtiao::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 40%;
+    background-color: #100c2a;
+    box-sizing: border-box;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    animation: kongtiao 1.5s linear infinite;
+}
+
+.paifeng {
+    animation: paifeng 2s linear infinite;
+}
+
+@keyframes kongtiao
+{
+    0%   {height: 40%;} 
+    25%  {height: 25%;}
+    50%  {height: 10%;}
+    100% {height: 0;}
+}
+
+@keyframes paifeng
+{
+    0%   {transform: rotate(0deg);} 
+    25%  {transform: rotate(90deg);} 
+    50%  {transform: rotate(180deg);} 
+    100% {transform: rotate(360deg);} 
+}
+</style>
diff --git a/src/views/Hazardous/image/kongtiao.svg b/src/views/Hazardous/image/kongtiao.svg
new file mode 100644
index 0000000..58e6f3d
--- /dev/null
+++ b/src/views/Hazardous/image/kongtiao.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695353681154" class="icon" viewBox="0 0 1332 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6587" xmlns:xlink="http://www.w3.org/1999/xlink" width="166.5" height="128"><path d="M407.556511 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 33.464018 126.458762 35.225282 35.225282 0 0 1 8.101814 30.998248 84.188424 84.188424 0 0 1-35.225281 42.270338 35.225282 35.225282 0 0 0 15.146871 63.757761 39.452316 39.452316 0 0 0 17.260388-4.579287 153.934482 153.934482 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288zM959.88893 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338 35.225282 35.225282 0 0 0-13.73786 48.258637 35.225282 35.225282 0 0 0 30.998248 17.964893 39.452316 39.452316 0 0 0 17.260388-4.579286 155.343493 155.343493 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-26.771214-69.746058zM683.722721 774.956201a35.225282 35.225282 0 0 1 14.090112-22.191928 35.225282 35.225282 0 0 0-35.225281-60.939738 105.675846 105.675846 0 0 0-46.497373 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338A35.225282 35.225282 0 0 0 637.577601 1021.533174a39.452316 39.452316 0 0 0 17.260389-4.579287 155.343493 155.343493 0 0 0 70.450563-87.710952 108.141615 108.141615 0 0 0-18.669399-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288z" fill="#20AEC5" p-id="6588"></path><path d="M1141.299132 239.179664m-52.837923 0a52.837923 52.837923 0 1 0 105.675846 0 52.837923 52.837923 0 1 0-105.675846 0Z" fill="#20AEC5" p-id="6589"></path><path d="M1224.78305 0H105.675846a105.675846 105.675846 0 0 0-105.675846 105.675846v428.69168a105.675846 105.675846 0 0 0 105.675846 105.675845h1119.107204a105.675846 105.675846 0 0 0 105.675845-105.675845V105.675846a105.675846 105.675846 0 0 0-105.675845-105.675846zM105.675846 70.450564h1119.107204a35.225282 35.225282 0 0 1 35.225282 35.225282v281.802254H70.450564V105.675846a35.225282 35.225282 0 0 1 35.225282-35.225282z m1119.107204 499.142243H105.675846a35.225282 35.225282 0 0 1-35.225282-35.225281V457.928664h1189.557768v77.847873a35.225282 35.225282 0 0 1-35.225282 33.81627z" fill="#20AEC5" p-id="6590"></path></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/paifeng.svg b/src/views/Hazardous/image/paifeng.svg
new file mode 100644
index 0000000..2785795
--- /dev/null
+++ b/src/views/Hazardous/image/paifeng.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695625025523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16590" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M515.2768 53.7088a457.8816 457.8816 0 1 0 0 915.7632 457.8816 457.8816 0 0 0 0-915.7632z m0 877.4144c-231.2192 0-419.4304-188.3136-419.4304-419.4816 0-231.2704 188.2112-419.4816 419.4304-419.4816s419.4304 188.2112 419.4304 419.4816c0 231.168-188.2112 419.4816-419.4304 419.4816z" fill="#20AEC5" p-id="16591"></path><path d="M511.3856 563.968a13.4144 13.4144 0 0 1 0.8704-1.6896 193.3824 193.3824 0 0 1-54.1696-76.4928l-2.048-0.3072 0.256 0.7168c-8.6528 2.3552-17.92 4.6592-27.5968 6.5536-33.0752 6.4-66.048-0.6656-97.792-7.4752-39.3216-8.3968-76.544-16.384-106.3936 4.7104a111.7184 111.7184 0 0 0-29.3888 149.0432c16.1792 26.7776 43.2128 45.2608 76.032 52.0704 9.1648 1.8944 18.3296 2.816 27.7504 2.816 34.304 0 70.4-12.4416 103.936-36.1984 36.1984-25.6 75.2128-61.9008 107.6736-94.3104a5.12 5.12 0 0 0 0.8704 0.5632z" fill="#20AEC5" p-id="16592"></path><path d="M570.6752 516.5056l-1.6896-0.9216a194.56 194.56 0 0 1-76.544 54.2208l-0.2048 1.9968 0.7168-0.2048c2.3552 8.704 4.7104 17.8688 6.5024 27.5456 6.4 33.0752-0.7168 65.8944-7.424 97.8432-8.5504 39.3216-16.4864 76.4416 4.608 106.3936a111.7184 111.7184 0 0 0 148.992 29.3376c26.7776-16.2816 45.4144-43.3152 52.224-76.1344 1.792-9.0112 2.8672-18.2272 2.8672-27.6992 0-34.3552-12.4928-70.3488-36.4032-103.936-25.5488-36.0448-61.7984-75.2128-94.208-107.6224l0.5632-0.8192z" fill="#20AEC5" p-id="16593"></path><path d="M519.168 449.6384l-0.8192 1.6896c23.7568 20.48 42.496 46.6432 54.1184 76.4928a14.848 14.848 0 0 1 2.0992 0.3072l-0.2048-0.768c8.704-2.4064 17.92-4.608 27.5456-6.5024 33.0752-6.3488 65.8944 0.6144 97.7408 7.4752 39.424 8.448 76.4928 16.4352 106.4448-4.7616a111.5136 111.5136 0 0 0 29.3376-148.9408c-16.1792-26.8288-43.3152-45.312-76.032-52.1728a135.1168 135.1168 0 0 0-27.648-2.816c-34.4064 0-70.5536 12.4416-104.0896 36.2496-36.1472 25.6-75.1616 61.9008-107.52 94.3104l-0.9728-0.5632z" fill="#20AEC5" p-id="16594"></path><path d="M475.4944 506.6752c0.512 0.3072 1.1264 0.512 1.6896 0.8192 20.5312-23.7056 46.6432-42.496 76.544-54.1696 0-0.6656 0.1536-1.3312 0.2048-2.048l-0.7168 0.2048a359.6288 359.6288 0 0 1-6.5024-27.5968c-6.4-33.024 0.7168-65.9456 7.424-97.792 8.4992-39.3728 16.4864-76.4928-4.608-106.3936a111.6672 111.6672 0 0 0-148.9408-29.3888c-26.8288 16.2816-45.3632 43.3152-52.1728 76.1856a138.6496 138.6496 0 0 0-2.816 27.7504c0 34.304 12.3904 70.4 36.2496 103.936 25.7024 36.096 61.9008 75.2128 94.3104 107.6224-0.3072 0.256-0.4608 0.5632-0.6656 0.8704z" fill="#20AEC5" p-id="16595"></path><path d="M449.536 439.7056h122.1632v122.112H449.536z" fill="#20AEC5" p-id="16596"></path></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/ranqi.svg b/src/views/Hazardous/image/ranqi.svg
new file mode 100644
index 0000000..3e1e4d0
--- /dev/null
+++ b/src/views/Hazardous/image/ranqi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#20AEC5" d="M786.304491 191.066121a49.764069 49.764069 0 0 0-83.196103 46.692212 174.430228 174.430228 0 0 1 3.686228 23.704489C620.373065 62.560141 513.216485 13.615234 467.036248 1.634995a49.866464 49.866464 0 0 0-62.461073 45.617063c-10.23952 186.256874-103.009574 318.0395-159.070948 381.319735-2.457485-10.23952-4.607784-21.605388-6.450898-33.892812a49.815266 49.815266 0 0 0-96.097897-9.778742c-30.718561 84.220054-85.858378 227.010165-92.155683 242.932619-0.665569 1.740718-1.228742 3.481437-1.791916 5.426946-63.280235 240.167948 124.154183 346.300576 183.082623 373.076921a49.968859 49.968859 0 0 0 70.089516-53.501493c-11.724251-72.342211 20.479041-145.759571 25.854789-156.920649a796.122702 796.122702 0 0 0 82.684126-173.150288c1.689521 4.505389 3.327844 9.164371 4.812574 13.976946a49.815266 49.815266 0 0 0 93.230833 5.11976c19.915867-46.077841 31.79371-101.780832 38.654189-146.42514 198.595496 164.651486 151.493703 395.09189 131.168254 464.87422a49.815266 49.815266 0 0 0 47.920955 63.689817 50.276045 50.276045 0 0 0 21.656586-5.119761c205.660765-99.016161 234.024236-254.759265 236.584116-272.217646v-0.614371-2.406288c25.905986-299.454771-130.144303-486.172423-198.441903-552.575711z m121.491908 545.254454c-1.740718 10.23952-20.479041 105.518256-140.332626 183.133821 21.400597-124.154183 21.656585-355.106563-213.340405-516.12302a49.968859 49.968859 0 0 0-49.149697-4.095808 49.508081 49.508081 0 0 0-28.721854 40.087722 847.013117 847.013117 0 0 1-17.919161 106.746999 167.262564 167.262564 0 0 0-23.90928-28.670657 49.866464 49.866464 0 0 0-83.144904 26.725148c-5.887724 30.052992-26.366765 110.791609-89.902988 211.804477a53.911074 53.911074 0 0 0-2.662276 4.761377 402.259554 402.259554 0 0 0-36.657482 151.74969c-60.61796-39.626943-134.393704-118.573645-98.248197-257.933516 5.938922-15.35928 34.455986-89.391012 61.437121-160.70927 1.587126 3.532634 3.174251 6.911676 5.11976 10.23952a49.200895 49.200895 0 0 0 35.838321 25.598801 50.122452 50.122452 0 0 0 42.442812-13.106586c44.234728-42.135626 184.311365-192.656574 210.575735-426.783206 47.255386 25.957184 126.970051 97.275443 189.431125 290.699981a49.815266 49.815266 0 0 0 93.077239 4.761377 279.385311 279.385311 0 0 0 21.707783-80.89221c64.048199 82.632929 141.51017 227.419745 124.358974 432.00536z" /></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/shidu.svg b/src/views/Hazardous/image/shidu.svg
new file mode 100644
index 0000000..8afe60c
--- /dev/null
+++ b/src/views/Hazardous/image/shidu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695623192300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12699" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M619.52 267.52C536.4224 141.7728 454.7584 40.3968 451.2768 36.1472L422.0928 0l-29.2352 36.1472c-3.4304 4.2496-85.1456 105.6256-168.2432 231.3216a1781.76 1781.76 0 0 0-116.6336 200.1408C70.5536 544.9728 52.3264 606.0032 52.3264 654.2336a369.7664 369.7664 0 0 0 631.1936 261.4784 367.3088 367.3088 0 0 0 108.288-261.4784c0-48.2304-18.2272-109.312-55.6544-186.6752a1781.76 1781.76 0 0 0-116.6336-200.0384zM422.0928 948.8896a294.9632 294.9632 0 0 1-294.6048-294.6048c0-66.56 56.6784-189.0304 159.5392-344.832 51.6096-78.2336 103.7824-148.0704 135.0656-188.7744 31.2832 40.704 83.4048 110.4896 135.0656 188.7232 102.912 155.8016 159.5392 278.272 159.5392 344.832a294.9632 294.9632 0 0 1-294.6048 294.656zM915.8656 99.4816c-26.4704-38.4-52.48-69.3248-53.5552-70.656l-14.336-17.0496-14.336 17.0496c-1.0752 1.28-27.136 32.256-53.5552 70.656-37.5296 54.4768-55.808 94.208-55.808 121.4976 0 65.8432 55.5008 119.3984 123.6992 119.3984S971.6736 286.72 971.6736 221.0304c0-27.2896-18.2272-67.072-55.808-121.5488z m-67.9424 203.3664c-47.5136 0-86.1696-36.7104-86.1696-81.92 0-31.3344 48.128-102.4 86.1696-150.3232 38.0416 47.9232 86.1696 119.04 86.1696 150.3232 0 45.312-38.656 81.92-86.1696 81.92z" fill="#66ffff" p-id="12700"></path><path d="M422.0928 818.0224a165.4272 165.4272 0 0 1-165.2736-165.2736 37.5808 37.5808 0 0 0-75.1104 0 240.64 240.64 0 0 0 240.64 240.64 37.5808 37.5808 0 1 0 0-75.1104z" fill="#66ffff" p-id="12701"></path></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/u21.svg b/src/views/Hazardous/image/u21.svg
new file mode 100644
index 0000000..4d3d9c5
--- /dev/null
+++ b/src/views/Hazardous/image/u21.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="88px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -270 -286 )">
+    <path d="M 47.80912797656249 64.43590847222222  C 47.80912797656249 57.56321585972223  44.561428679687495 51.421889597222226  39 47.28240985416667  L 39 16.03532027777778  C 39.4712582578125 7.755016347222222  32.321369976562494 0.9777777777777779  23.5985062734375 0.9777777777777779  C 14.875642570312507 0.9777777777777779  7.7257542890625 7.755016347222222  8 16.03532027777778  L 8 47.98016559722222  C 3.1044514765625024 52.099479009722224  0.19087202343749965 57.92889903472222  0.19087202343749965 64.43590847222222  C 0.19087202343749965 76.90812472291665  10.851080476562501 87.02222222222223  24 87.02222222222223  C 37.148919523437506 87.02222222222223  47.80912797656249 76.90946908333332  47.80912797656249 64.43590847222222  Z M 42.965078687500004 64.42515308472223  C 42.965078687500004 74.34699805347222  34.459461546875005 82.41488312291668  24 82.41488312291668  C 13.540538453124995 82.41488312291668  5.0349213125 74.34834249791666  5.0349213125 64.42515308472223  C 5.0349213125 59.426586702083334  7.16751296875 54.76815955416666  11.040827468750003 51.326435554166665  L 13 49.971256729166676  L 13 16.024564890277777  C 12.569803578124997 10.252955052083335  17.519726234375 5.56226165763889  23.5985062734375 5.562261741666668  C 29.677286312499994 5.562261825694446  34.62720896875 10.254299580555557  34 16.024564890277777  L 34 49.389121359722225  L 36.3225575 50.76581095972222  C 40.54236658593751 54.195435127777785  42.965078687500004 59.17249073541666  42.965078687500004 64.42515308472223  Z M 38.12102939843749 64.42918633402778  C 38.12102939843749 60.516914088888896  36.311557671875 56.811683095138896  33.164231828125 54.259967452777786  L 29 51.506588252777796  L 29 16.024564890277777  C 29.781784679687505 12.84769232847222  26.9465789375 10.157501009027778  23.594381359375 10.157501009027778  C 20.242183781250006 10.157501009027778  17.4069780390625 12.846347884027777  17.4069780390625 16.024564890277777  L 17.4069780390625 17.813992464583333  L 21.437040046874998 17.813992464583333  L 21.437040046874998 20.619804241666667  L 17.4138528671875 20.619804241666667  L 17.4138528671875 25.151855628472223  L 21.443914960937498 25.151855628472223  L 21.443914960937498 27.95766732152778  L 17.4138528671875 27.95766732152778  L 17.4138528671875 32.48971870833334  L 21.443914960937498 32.48971870833334  L 21.443914960937498 35.29553048541667  L 17.4138528671875 35.29553048541667  L 17.4138528671875 39.831615121527776  L 21.443914960937498 39.831615121527776  L 21.443914960937498 42.637426814583335  L 17.4138528671875 42.637426814583335  L 17.4138528671875 51.95562572291665  L 14.355900648437505 54.67673876041667  C 11.468445765625003 57.24996526180555  9.8789706015625 60.7118555923611  9.8789706015625 64.42918633402778  C 9.8789706015625 71.82351524027779  16.203871773437506 77.82367702083333  24 77.82367702083333  C 31.796128226562494 77.82367702083333  38.12102939843749 71.80872651944443  38.12102939843749 64.42918633402778  Z M 34.88982984375 64.42649752916667  C 34.8939547578125 70.12147521041666  30.005906156250006 74.75973611180555  24 74.75973602777779  C 17.99409384375 74.75973602777779  13.106045242187498 70.1214751263889  13.106045242187498 64.42515308472223  C 13.106045242187498 61.56556445416667  14.333901078124995 58.88747296666667  16.565491187499994 56.90713722222222  L 20.639552507812496 53.27719394097222  L 20.639552507812496 47.67363705347222  L 26.551960124999994 47.67363705347222  L 26.551960124999994 52.91688845972222  L 31.061889656250003 56.580442347916666  C 33.495601671875 58.56077809236111  34.88982984375 61.42036672291667  34.88982984375 64.42649752916667  Z " fill-rule="nonzero" fill="#20aec5" stroke="none" transform="matrix(1 0 0 1 270 286 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/u91.svg b/src/views/Hazardous/image/u91.svg
new file mode 100644
index 0000000..b4a7f1d
--- /dev/null
+++ b/src/views/Hazardous/image/u91.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="605px" height="580px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip34">
+      <path d="M 0 28.722044728434504  L 13.401898734177166 0.926517571884942  L 590.1621835443038 0.926517571884942  L 605 28.722044728434504  L 605 551.2779552715655  L 590.1621835443038 579.0734824281149  L 13.401898734177166 579.0734824281149  L 11.908908029106671 575.9770209109546  L 0 551.2779552715655  L 0 28.722044728434504  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1305 -462 )">
+    <path d="M 0 28.722044728434504  L 13.401898734177166 0.926517571884942  L 590.1621835443038 0.926517571884942  L 605 28.722044728434504  L 605 551.2779552715655  L 590.1621835443038 579.0734824281149  L 13.401898734177166 579.0734824281149  L 11.908908029106671 575.9770209109546  L 0 551.2779552715655  L 0 28.722044728434504  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0" transform="matrix(1 0 0 1 1305 462 )" />
+    <path d="M 0 28.722044728434504  L 13.401898734177166 0.926517571884942  L 590.1621835443038 0.926517571884942  L 605 28.722044728434504  L 605 551.2779552715655  L 590.1621835443038 579.0734824281149  L 13.401898734177166 579.0734824281149  L 11.908908029106671 575.9770209109546  L 0 551.2779552715655  L 0 28.722044728434504  Z " stroke-width="2" stroke="#27b0db" fill="none" transform="matrix(1 0 0 1 1305 462 )" mask="url(#clip34)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/u93.svg b/src/views/Hazardous/image/u93.svg
new file mode 100644
index 0000000..d4bc056
--- /dev/null
+++ b/src/views/Hazardous/image/u93.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="315px" height="51px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1437 -467 )">
+    <path d="M 1.4870330000751721 0.3787878787878734  C -6.038990043016383 13.958700852129802  64.68593601386186 49.5  64.68593601386186 49.5  L 250.3172215476603 49.5  C 250.3172215476603 49.5  320.68264249168084 13.7307535696334  313.3390964444111 0.3787878787878734  " stroke-width="1" stroke="#27b0db" fill="none" transform="matrix(1 0 0 1 1437 467 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/xielou.svg b/src/views/Hazardous/image/xielou.svg
new file mode 100644
index 0000000..cb3e03d
--- /dev/null
+++ b/src/views/Hazardous/image/xielou.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695625265174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17857" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M831.937316 825.418217H191.059745a40.117532 40.117532 0 0 1-40.117531-40.117531V533.563173a361.057786 361.057786 0 1 1 721.112634 0v251.737513a40.117532 40.117532 0 0 1-40.117532 40.117531z m-600.760039-80.235063h560.642508V533.563173c0-154.452498-125.367287-280.822723-280.822723-280.822722S231.177277 378.107738 231.177277 533.563173zM872.054848 1024H151.945152a94.2762 94.2762 0 0 1 0-188.5524h720.109696a94.2762 94.2762 0 0 1 0 188.5524zM151.945152 915.682664a14.041136 14.041136 0 0 0 0 28.082272h720.109696a14.041136 14.041136 0 0 0 0-28.082272z" fill="#20AEC5" p-id="17858"></path><path d="M512 158.464251a40.117532 40.117532 0 0 1-40.117532-40.117532V40.117532a40.117532 40.117532 0 0 1 80.235064 0v78.229187a40.117532 40.117532 0 0 1-40.117532 40.117532zM701.555338 195.572968a40.117532 40.117532 0 0 1-35.10284-59.17336l37.108716-69.202742a40.38331 40.38331 0 1 1 71.208619 38.111655l-37.108716 69.202742a40.117532 40.117532 0 0 1-36.105779 21.061705zM841.966699 313.919687a40.117532 40.117532 0 0 1-29.08521-67.196866l53.155729-57.167483a40.117532 40.117532 0 0 1 59.17336 54.158668l-53.15573 57.167483a40.117532 40.117532 0 0 1-30.088149 13.038198zM323.4476 195.572968a40.117532 40.117532 0 0 1-35.10284-21.061705l-37.108717-69.202742a40.38331 40.38331 0 0 1 71.208619-38.111655l37.108717 69.202742a40.117532 40.117532 0 0 1-35.10284 59.17336zM182.033301 313.919687a40.117532 40.117532 0 0 1-29.085211-13.038198l-53.15573-57.167483a40.117532 40.117532 0 0 1 59.17336-54.158668l53.15573 57.167483a40.117532 40.117532 0 0 1-29.085211 67.196866zM438.785504 726.127326a40.117532 40.117532 0 0 1-28.082272-68.199804l134.393732-135.39667H381.618022a40.117532 40.117532 0 0 1-28.082273-68.199804l153.44956-153.449559a40.423428 40.423428 0 0 1 57.167482 57.167483l-85.249755 85.249755h162.476004a40.117532 40.117532 0 0 1 28.082272 68.199804L466.867777 714.092067a40.117532 40.117532 0 0 1-28.082273 12.035259z" fill="#20AEC5" p-id="17859"></path></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/yanwu.svg b/src/views/Hazardous/image/yanwu.svg
new file mode 100644
index 0000000..5a32d26
--- /dev/null
+++ b/src/views/Hazardous/image/yanwu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#20AEC5" d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 832C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384zM404.96 770.432a278.208 278.208 0 0 1-90.688-60.672 278.432 278.432 0 0 1-60.704-90.72 32 32 0 0 0-59.136 24.512 341.6 341.6 0 0 0 74.592 111.456 342.176 342.176 0 0 0 111.456 74.56 31.936 31.936 0 0 0 41.792-17.312 31.968 31.968 0 0 0-17.312-41.824zM211.744 422.272a31.872 31.872 0 0 0 41.824-17.28 278.08 278.08 0 0 1 60.704-90.72 278.304 278.304 0 0 1 90.688-60.704 32 32 0 0 0-24.512-59.136 342.016 342.016 0 0 0-111.456 74.56 342.144 342.144 0 0 0-74.56 111.488 32 32 0 0 0 17.312 41.792zM619.04 253.568a278.784 278.784 0 0 1 90.72 60.704 278.56 278.56 0 0 1 60.672 90.688 32 32 0 1 0 59.136-24.512 342.176 342.176 0 0 0-74.56-111.456 342.432 342.432 0 0 0-111.456-74.592 32.032 32.032 0 0 0-24.512 59.168zM812.256 601.728a32.096 32.096 0 0 0-41.824 17.312 278.336 278.336 0 0 1-60.672 90.72 278.336 278.336 0 0 1-90.72 60.672 32 32 0 0 0 24.512 59.136 342.176 342.176 0 0 0 111.456-74.56 342.848 342.848 0 0 0 74.56-111.456 32 32 0 0 0-17.312-41.824zM348.576 348.576a230.208 230.208 0 0 0-50.112 74.944 32 32 0 0 0 59.136 24.544 166.784 166.784 0 0 1 36.256-54.208 166.4 166.4 0 0 1 54.208-36.288 32.032 32.032 0 0 0-24.512-59.136 230.592 230.592 0 0 0-74.976 50.144zM575.968 357.568c20.288 8.416 38.528 20.64 54.176 36.256s27.84 33.888 36.288 54.208a32 32 0 1 0 59.136-24.544 230.816 230.816 0 0 0-50.144-74.944 230.4 230.4 0 0 0-74.944-50.112 32 32 0 1 0-24.512 59.136zM448.032 666.432a166.56 166.56 0 0 1-54.208-36.288 166.912 166.912 0 0 1-36.288-54.176 32 32 0 0 0-59.136 24.512 230.464 230.464 0 0 0 50.144 74.944 229.952 229.952 0 0 0 74.944 50.144 32 32 0 0 0 24.544-59.136zM675.392 675.392a230.144 230.144 0 0 0 50.144-74.944 32 32 0 1 0-59.136-24.512c-8.416 20.288-20.64 38.528-36.288 54.176s-33.92 27.872-54.176 36.288a32 32 0 1 0 24.512 59.136 228.96 228.96 0 0 0 74.944-50.144zM640 512c0-70.592-57.408-128-128-128s-128 57.408-128 128 57.408 128 128 128 128-57.408 128-128z m-128 64c-35.296 0-64-28.704-64-64s28.704-64 64-64 64 28.704 64 64-28.704 64-64 64z" /></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/index.vue b/src/views/Hazardous/index.vue
index 7399b87..c880b9c 100644
--- a/src/views/Hazardous/index.vue
+++ b/src/views/Hazardous/index.vue
@@ -2,14 +2,45 @@
     <div class="container">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'危废品箱物联检测系统'" :titleTip="[]"
+                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'危废品箱物联检测系统'" :titleTip="[]"
                     :typeFun="['time']" :alarmType="[]"></header2>
             </div>
         </div>
         <div class="content">
-            <div class="img-box">
-                <svg  t="1695353681154" class="icon" viewBox="0 0 1332 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6587" xmlns:xlink="http://www.w3.org/1999/xlink" width="166.5" height="128"><path d="M407.556511 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 33.464018 126.458762 35.225282 35.225282 0 0 1 8.101814 30.998248 84.188424 84.188424 0 0 1-35.225281 42.270338 35.225282 35.225282 0 0 0 15.146871 63.757761 39.452316 39.452316 0 0 0 17.260388-4.579287 153.934482 153.934482 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288zM959.88893 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338 35.225282 35.225282 0 0 0-13.73786 48.258637 35.225282 35.225282 0 0 0 30.998248 17.964893 39.452316 39.452316 0 0 0 17.260388-4.579286 155.343493 155.343493 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-26.771214-69.746058zM683.722721 774.956201a35.225282 35.225282 0 0 1 14.090112-22.191928 35.225282 35.225282 0 0 0-35.225281-60.939738 105.675846 105.675846 0 0 0-46.497373 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338A35.225282 35.225282 0 0 0 637.577601 1021.533174a39.452316 39.452316 0 0 0 17.260389-4.579287 155.343493 155.343493 0 0 0 70.450563-87.710952 108.141615 108.141615 0 0 0-18.669399-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288z" fill="#20AEC5" p-id="6588"></path><path d="M1141.299132 239.179664m-52.837923 0a52.837923 52.837923 0 1 0 105.675846 0 52.837923 52.837923 0 1 0-105.675846 0Z" fill="#20AEC5" p-id="6589"></path><path d="M1224.78305 0H105.675846a105.675846 105.675846 0 0 0-105.675846 105.675846v428.69168a105.675846 105.675846 0 0 0 105.675846 105.675845h1119.107204a105.675846 105.675846 0 0 0 105.675845-105.675845V105.675846a105.675846 105.675846 0 0 0-105.675845-105.675846zM105.675846 70.450564h1119.107204a35.225282 35.225282 0 0 1 35.225282 35.225282v281.802254H70.450564V105.675846a35.225282 35.225282 0 0 1 35.225282-35.225282z m1119.107204 499.142243H105.675846a35.225282 35.225282 0 0 1-35.225282-35.225281V457.928664h1189.557768v77.847873a35.225282 35.225282 0 0 1-35.225282 33.81627z" fill="#20AEC5" p-id="6590"></path></svg>
+            <div class="top">
+                <div class="card" style="width: 200px;">
+                    <Card :title="'湿度'" :config="config.shidu">
+                    </Card>
+                </div>
+                <div class="card" style="width: 200px;">
+                    <Card :title="'温度'" :config="config.wendu"></Card>
+                </div>
+                <div class="card" style="width: 400px;">
+                    <Card :title="'空调状态'" :type="2" :config="config.kongtiao"></Card>
+                </div>
+                <div class="card" style="width: 400px;">
+                    <Card :title="'排风状态'" :type="2" :config="config.paifeng"></Card>
+                </div>
+                <div class="card" style="width: 240px;">
+                    <Card :title="'泄露监测'" :type="3" :config="config.xielou"></Card>
+                </div>
+                <div class="card" style="width: 240px;">
+                    <Card :title="'烟雾监测'" :type="3" :config="config.yanwu"></Card>
+                </div>
+                <div class="card" style="width: 240px;">
+                    <Card :title="'可燃气体监测'" :type="3" :noborder="true" :config="config.ranqi"></Card>
+                </div>
             </div>
+            <div class="bottom">
+                <div class="box1">
+                    <Border>
+                    </Border>
+                </div>
+                <div class="box2">
+                    <Border></Border>
+                </div>
+            </div>
+
 
         </div>
     </div>
@@ -17,6 +48,47 @@
 
 <script setup lang='ts'>
 import header2 from '@/components/headerBox/header2.vue'
+import Border from './components/Border.vue';
+import Card from './components/Card.vue';
+
+const config = {
+    shidu: {
+        image: require('./image/shidu.svg'),
+        type: 1,
+        classArr:[]
+    },
+    wendu: {
+        image: require('./image/u21.svg'),
+        type: 1,
+        classArr:[]
+    },
+    kongtiao: {
+        image: require('./image/kongtiao.svg'),
+        type: 2,
+        classArr:['kongtiao']
+    },
+    paifeng: {
+        image: require('./image/paifeng.svg'),
+        type: 2,
+        classArr:['paifeng']
+    },
+    xielou: {
+        image: require('./image/xielou.svg'),
+        type: 3,
+        classArr:[]
+    },
+    yanwu: {
+        image: require('./image/yanwu.svg'),
+        type: 3,
+        classArr:[]
+    },
+    ranqi: {
+        image: require('./image/ranqi.svg'),
+        type: 3,
+        classArr:[]
+    },
+}
+
 </script>
 
 <style scoped>
@@ -30,47 +102,49 @@ import header2 from '@/components/headerBox/header2.vue'
 }
 
 .header {
-    height: 100px;
+    height: 150px;
     width: 1920px;
 }
 
 .content {
-    height: 980px;
+    height: 930px;
     width: 1920px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-between;
+    align-items: center;
     padding: 0 5px;
     box-sizing: border-box;
 }
 
-.img-box {
-    width: 100px;
-    height: 100px;
-    position: relative;
-}
-.img-box svg {
+.top {
     width: 100%;
+    height: 330px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.card {
     height: 100%;
-}
-.img-box::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 40%;
-    background-color: #100c2a;
     box-sizing: border-box;
-    left: 0;
-    bottom: 0;
-    z-index: 1;
-    animation: myfirst 1.5s linear infinite;
 }
 
-@keyframes myfirst
-{
-    0%   {height: 40%;} 
-    25%  {height: 25%;}
-    50%  {height: 10%;}
-    100% {height: 0;}
+.bottom {
+    width: 100%;
+    height: 580px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+.box1 {
+    width: 1256px;
+    height: 100%;
+}
+
+.box2 {
+    width: 610px;
+    height: 100%;
 }
 </style>