可视化

src/views/DataVisualization/detailPage/components/wzcb.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="box">
     <div class="list" v-for="(item, index) in tableData" :key="index">
-      <div class="card_img"></div>
+      <div :class="'card_img card_img_' + index"></div>
       <div class="card_content">
         <span class="card_name">{{ item.name }}</span>
         <span class="card_value">{{ item.value }}</span>
@@ -51,40 +51,53 @@ onMounted(() => {});
 }
 .list {
   width: 49%;
-  height: 46%;
+  height: 45%;
   box-sizing: border-box;
   background: url("@/assets/emergencyImg/center_new/bj.png") no-repeat;
-  background-size: 100% auto;
+  background-size: 100% 100%;
   display: flex;
   color: #ffffff;
   display: flex;
   align-items: center;
 }
-.list .card_img{
-  flex: 10%;
-  /* background: aqua; */
+.list .card_img {
+  flex: 35%;
   height: 100%;
 }
-.list .card_content{
-  flex: 90%;
+.list .card_content {
+  flex: 65%;
   /* background: pink; */
+  display: flex;
+  align-items: center;
 }
-.card_content .card_name{
-  margin-right: 20px;
+.card_content .card_name {
+  flex: 30%;
 }
-.card_content .card_value{
+.card_content .card_value {
+  flex: 60%;
   font-size: 18px;
   font-weight: 700;
+  box-sizing: border-box;
+  padding-right: 10px;
   background: linear-gradient(to bottom, rgb(202, 226, 254), rgb(242, 248, 255));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  /* box-shadow: #ffffff 0 0 2px 5px; */
-
 }
 
-.list_left_3 .icon {
-  background: url("@/assets/emergencyImg/center_4.png") no-repeat;
-  /* background-size: 100% 100%; */
-  background-position: 65px 62px;
+.list .card_img_0 {
+  background: url("@/assets/emergencyImg/center_new/c.png") no-repeat 50% 50%;
+  background-size: auto 75%;
+}
+.list .card_img_1 {
+  background: url("@/assets/emergencyImg/center_new/d.png") no-repeat 50% 50%;
+  background-size: auto 75%;
+}
+.list .card_img_2 {
+  background: url("@/assets/emergencyImg/center_new/f.png") no-repeat 50% 50%;
+  background-size: auto 75%;
+}
+.list .card_img_3 {
+  background: url("@/assets/emergencyImg/center_new/l.png") no-repeat 50% 50%;
+  background-size: auto 75%;
 }
 </style>

src/views/DataVisualization/detailPage/index.vue

@@ -122,13 +122,13 @@ const selectHandle = (val: any) => {
 }
 .container .content .center .center_title {
   width: 100%;
-  height: 34%;
+  height: 25%;
   /* background: #0d4aabcb; */
 }
 .container .content .center .center_content {
-  width: 95%;
-  margin-left: 5%;
-  height: 46%;
+  width: 96%;
+  margin-left: 4%;
+  height: 55%;
   /* background: rgba(255, 192, 203, 0.168); */
   background: url("@/assets/img/bg.jpg") no-repeat;
   background-size: 100% 100%;