一周预报

src/views/disasterRiskMonitor/windAndFloodPrevention.vue

@@ -31,6 +31,24 @@
         <img class="img-box" :src="temp1" />
       </div>
     </div>
+    <div class="card">
+      <div class="card-header">
+        <i class="icon-line" />
+        <div class="text">一周预报</div>
+      </div>
+      <div class="card-content3">
+        <div v-for="(item, index) in weekForecast" :key="index" class="card-item">
+          <div class="text1">{{ item.name }}</div>
+          <div class="text1"><i :class="getClass(item.type1)" />{{ item.type1 }}</div>
+          <div class="text1">{{ item.data1 }}℃</div>
+          <div class="text1">{{ item.data2 }}</div>
+          <div class="text1">|</div>
+          <div class="text1"><i :class="getClass(item.type2)" />{{ item.type2 }}</div>
+          <div class="text1">{{ item.data3 }}℃</div>
+          <div class="text1">{{ item.data4 }}</div>
+        </div>
+      </div>
+    </div>
     <div class="card">
       <div class="card-header">
         <i class="icon-line" />
@@ -181,6 +199,15 @@ const liveMapState = reactive({
   playing: false,
   data: []
 });
+let weekForecast = ref([
+  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
+  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
+  { name: '今天', type1: '雷雨', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
+  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
+  { name: '今天', type1: '雷雨', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
+  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
+  { name: '今天', type1: '晴', data1: '32.6', data2: '小于3级', type2: '阴', data3: '32.6', data4: '小于3级' },
+]);
 let detailsData = ref({
   dataList: []
 });
@@ -214,6 +241,18 @@ const onSelectTypeConfirm = ({ selectedOptions }) => {
   initData();
 };
 
+const getClass = (name) => {
+  let res = ''
+  if (name === '晴') {
+    res = 'icon1'
+  } else if (name === '阴') {
+    res = 'icon2'
+  } else if (name === '雷雨') {
+    res = 'icon3'
+  }
+  return res
+}
+
 const initData = () => {
   getTemperature({ args: tabActive.value }).then(res => {
     liveMapState.data = res.data.max_level;
@@ -422,6 +461,35 @@ onMounted(() => {
         }
       }
     }
+    .card-content3 {
+      display: flex;
+      padding-bottom: 16px;
+      overflow-x: auto;
+      .card-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 60px;
+        height: 194px;
+        background-image: linear-gradient(180deg, #FFFFFF 0%, #F6F9FF 79%, #F8FAFF 100%);
+        border: 2px solid #FFFFFF;
+        box-shadow: 0 2px 1px -1px #bcd7ffb5, inset 0 1px 3px 6px #ace2ff08;
+        border-radius: 4px;
+        margin-left: 5px;
+        padding: 20px 5px;
+        &:first-child {
+          margin-left: 0;
+        }
+        .text1 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 12px;
+          color: #414F64;
+          line-height: 21px;
+        }
+      }
+    }
   }
   .btn {
     font-size: 14px;