迭代四

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -1,57 +1,73 @@
 <template>
   <div class="left-section">
+    <div class="weather-card">
+      <div class="card-content">
+        <div class="weather-box">
+          <div class="weather-item">
+            <div class="weatherBox1">天气</div>
+            <div class="weatherBox2">天气图片</div>
+          </div>
+          <div class="weather-item">
+            <div class="weatherBox1">温度</div>
+            <div class="weatherBox2">31℃</div>
+          </div>
+          <div class="weather-item">
+            <div class="weatherBox1">湿度</div>
+            <div class="weatherBox2">45%</div>
+          </div>
+          <div class="weather-item">
+            <div class="weatherBox1">风力风向</div>
+            <div class="weatherBox2">北风1级</div>
+          </div>
+          <div class="weather-item">
+            <div class="weatherBox1">降雨量</div>
+            <div class="weatherBox2">0.0mm</div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="event-card">
+      <div class="title gradient-text">灾害信息</div>
       <div class="card-content">
-        <div class="event-box">
-          <div style="padding-top: 15px">
-            <div class="label-box">
-              <div class="gradient-text">{{ eventData.event_title }}</div>
-            </div>
-            <div class="time-text">{{ eventData.report_time }}</div>
-            <div class="address-box">
-              <i class="address-icon"></i>
-              <div class="address-text">{{ eventData.address }}</div>
+        <div class="eventBox1">
+          <div class="icon1"></div>
+          <div class="line"></div>
+          <div class="duration-box">
+            <div class="gradient-text text">持续时长</div>
+            <div class="time-box">
+              <span class="time-text">{{ eventData.duration?.day }}</span>
+              <span>天</span>
+              <span class="time-text">{{ eventData.duration?.hour }}</span>
+              <span>小时</span>-->
+              <span class="time-text">{{ eventData.duration?.minute }}</span>
+              <span>分</span>-->
+              <span class="time-text">{{ eventData.duration?.second }}</span>
+              <span>秒</span>
             </div>
           </div>
-          <div style="margin-left: 95px">
-            <div class="flex">
-              <div class="status-box warning-status">
-                <div class="text">
-                  <dict-tag :options="mm_event_level" :value="eventData.event_level" />
-                </div>
-              </div>
-              <div class="status-box danger-status">
-                <div class="text">
-                  <dict-tag :options="mm_event_type" :value="eventData.event_type" />
-                </div>
-              </div>
-              <div class="status-box">
-                <div class="text">
-                  <dict-tag :options="mm_event_state" :value="eventData.event_status" />
-                </div>
-              </div>
+          <div style="margin-left: 20px">
+            <div class="line2"></div>
+            <div class="finish-btn" @click="endProcess">
+              <div class="finish-icon"></div>
+              <div class="finish-text">结束处置</div>
             </div>
-            <div class="unit-box">报送单位：{{ eventData.event_source }}</div>
           </div>
         </div>
-        <div class="line"></div>
-        <div class="duration-box">
-          <div class="gradient-text text">持续时长</div>
-          <div class="time-box">
-            <span class="time-text">{{ eventData.duration?.day }}</span>
-            <span>天</span>
-            <span class="time-text">{{ eventData.duration?.hour }}</span>
-            <span>小时</span>
-            <span class="time-text">{{ eventData.duration?.minute }}</span>
-            <span>分</span>
-            <span class="time-text">{{ eventData.duration?.second }}</span>
-            <span>秒</span>
+        <div class="event-box">
+          <div class="event-item">
+            <div class="eventBox2">灾害事件</div>
+            <div class="eventBox3">{{ eventData.event_title }}</div>
+          </div>
+          <div class="event-item">
+            <div class="eventBox2">灾害地点</div>
+            <div class="eventBox3">{{ eventData.address }}</div>
+          </div>
+          <div class="event-item">
+            <div class="eventBox2">灾害级别</div>
+            <div class="eventBox3">
+              <dict-tag :options="mm_event_level" :value="eventData.event_level" />
+            </div>
           </div>
-        </div>
-        <div class="line2"></div>
-        <div class="finish-btn" @click="endProcess">
-          <div class="finish-icon"></div>
-          <div class="finish-text">结束处置</div>
         </div>
       </div>
     </div>
@@ -97,7 +113,6 @@
     <VideoMonitor />
   </div>
 </template>
-
 <script lang="ts" setup name="LeftSection">
 import { getEventDetail } from '@/api/duty/eventing';
 import VideoMonitor from '@/views/emergencyCommandMap/LeftSection/VideoMonitor.vue';
@@ -239,114 +254,113 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 74px;
-  .event-card {
+  .weather-card {
     width: 2599px;
-    height: 422px;
-    background: url('@/assets/images/emergencyCommandMap/eventBox.png') no-repeat 100% 100%;
+    height: 300px;
+    background: url('@/assets/images/emergencyCommandMap/videoBox1.png') no-repeat 100% 100%;
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     .card-content {
-      width: 2541px;
-      height: 260px;
-      background: url('@/assets/images/emergencyCommandMap/eventContent.png') no-repeat 100% 100%;
-      margin-top: 120px;
-      padding-top: 30px;
-      padding-left: 60px;
+      width: 2387px;
+      height: 180px;
+      margin-top: 30px;
+      //padding-top: 30px;
+      padding-left: 200px;
+      padding-right: 220px;
+    }
+    .weather-box {
       display: flex;
-      .event-box {
-        display: flex;
-        .label-box {
-          font-size: 44px;
-          background-image: url('@/assets/images/emergencyCommandMap/labelBox.png');
-          background-repeat: no-repeat;
-          background-size: 311px 56px;
-          padding-left: 60px;
-        }
-        .time-text {
-          font-size: 32px;
-          color: #00e8ff;
+      justify-content: space-between;
+      align-items: center;
+      color: #fff;
+      .weather-item {
+        font-size: 38px;
+        margin-top: -20px;
+        .weatherBox1 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          height: 60px;
           padding-left: 60px;
-          font-family: 'BEBAS-1';
+          margin-left: -30px;
         }
-        .address-box {
+        .weatherBox2 {
           display: flex;
+          justify-content: center;
           align-items: center;
-          padding-left: 40px;
-          .address-icon {
-            width: 60px;
-            height: 71px;
-            background: url('@/assets/images/emergencyCommandMap/address.png') no-repeat 100% 100%;
-          }
-          .address-text {
-            font-size: 32px;
-            color: #a8ccde;
-            width: 500px;
-          }
+          width: 317px;
+          height: 82px;
+          margin-top: 10px;
         }
       }
-      .status-box {
-        width: 113.31px;
-        height: 31px;
-        border-radius: 4px;
-        color: #fff;
-        position: relative;
-        margin-left: 10px;
-        .text {
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          top: 0;
-          left: -5px;
-          text-align: center;
-          font-size: 24px;
-          color: #fff;
-          font-family: 'YouSheBiaoTiHei';
-        }
-        &:first-child {
-          margin-left: 0;
-        }
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: #40c75f;
-          transform: skewX(-20deg);
-          transform-origin: top left;
-        }
+    }
+  }
+  .event-card {
+    width: 2599px;
+    height: 400px;
+    background: rgba(0, 4, 52, 1) no-repeat 100% 100%;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .title {
+      position: absolute;
+      top: 600px;
+      left: 200px;
+      font-size: 60px;
+    }
+    .card-content {
+      width: 2387px;
+      height: 350px;
+      background: url('@/assets/images/emergencyCommandMap/comprehensiveDutyContent.png') no-repeat 100% 100%;
+      margin-top: 90px;
+      //padding-top: 30px;
+      padding-left: 200px;
+      padding-right: 220px;
+    }
+    .eventBox1 {
+      display: flex;
+      justify-content: right;
+      align-items: center;
+      font-family: 'BEBAS-1';
+      font-size: 38px;
+      color: #00e8ff;
+      margin-top: -35px;
+      .icon1 {
+        width: 143px;
+        height: 143px;
+        background: url('@/assets/images/emergencyCommandMap/time.png') no-repeat 100% 100%;
       }
-      .warning-status {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          transform: skewX(-20deg);
-          transform-origin: top left;
-          background: #ffaf00;
+    }
+    .event-box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #fff;
+      .event-item {
+        font-size: 38px;
+        margin-top: -20px;
+        .eventBox2 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          height: 60px;
+          padding-left: 60px;
+          margin-left: -30px;
         }
-      }
-      .danger-status {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          transform: skewX(-20deg);
-          transform-origin: top left;
-          background: #ff2f3c;
+        .eventBox3 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 600px;
+          height: 82px;
+          margin-top: 10px;
         }
       }
-      .unit-box {
-        margin-top: 55px;
-        font-size: 32px;
-        text-align: right;
-        color: #a8ccde;
-      }
     }
   }
   .duty-card {
@@ -421,7 +435,6 @@ onMounted(() => {
   .line {
     width: 2px;
     height: 189px;
-    background-image: url('@/assets/images/emergencyCommandMap/line.png');
     background-repeat: no-repeat;
     background-size: 2px 154px;
     background-position: center center;
@@ -429,9 +442,8 @@ onMounted(() => {
     margin-right: 65px;
   }
   .duration-box {
-    width: 893px;
+    width: 1000px;
     height: 284px;
-    background: url('@/assets/images/emergencyCommandMap/durationBg.png') no-repeat 100% 100%;
     padding-left: 180px;
     .text {
       font-size: 44px;
@@ -465,10 +477,6 @@ onMounted(() => {
   .line2 {
     width: 2px;
     height: 189px;
-    background-image: url('@/assets/images/emergencyCommandMap/line.png');
-    background-repeat: no-repeat;
-    background-size: 2px 154px;
-    background-position: center center;
     margin-left: 82px;
     margin-right: 113px;
   }
@@ -499,6 +507,7 @@ onMounted(() => {
     }
   }
 }
+
 @keyframes slide {
   0% {
     transform: translateX(-80%);