maintenance_system/src/views/pvSystem/siteOverview/components/qixiang.vue

<template>
  <div class="cardItem">
    <el-card>
      <div class="tianqi"
        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px">
        <div>
          <img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
        </div>
        <div style="font-family: 'Alibaba-PuHuiTi-Bold'; font-size: 24px">31℃</div>
        <div>晴朗</div>
        <div style="color: rgba(154, 154, 154, 1); font-size: 14px">紫外线强度：<span>高</span></div>
        <div class="tianqi2">
          <div class="item">
            <div>
              <img src="/assets/shidu.png" alt="" />
            </div>
            <div class="text">相对湿度： <span>45%</span></div>
          </div>
          <div class="item">
            <div>
              <img src="/assets/qiangdu.png" alt="" />
            </div>
            <div class="text">光照强度： <span>45%</span></div>
          </div>
          <div class="item">
            <div>
              <img src="/assets/fengshu.png" alt="" />
            </div>
            <div class="text">风速： <span>2.3m/s</span></div>
          </div>
          <div class="item">
            <div>
              <img src="/assets/riluo.png" alt="" />
            </div>
            <div class="text">日落时间： <span>19.45</span></div>
          </div>
        </div>
      </div>
      <div class="weather-timeline">
        <div class="time-box">
          <div class="time-item">
            <div class="time">16:00</div>
            <div class="temp">30°C</div>
            <div class="img-box">
              <img src="/assets/sunny_s.png" alt="" />
            </div>
          </div>
          <div class="time-item">
            <div class="time">17:00</div>
            <div class="temp">29°C</div>
            <div class="img-box">
              <img src="/assets/sunny_s.png" alt="" />
            </div>
          </div>
          <div class="time-item">
            <div class="child">
              <div class="time">18:00</div>
              <div class="temp">25°C</div>
              <div class="img-box">
                <img src="/assets/rain.png" alt="" />
              </div>
            </div>
          </div>
          <div class="time-item show">
            <div class="time">现在</div>
            <div class="temp">25°C</div>
            <div class="img-box">
              <img src="/assets/rain_show.png" alt="" />
            </div>
          </div>
          <div class="time-item">
            <div class="time">20:00</div>
            <div class="temp">25°C</div>
            <div class="img-box">
              <img src="/assets/yin.png" alt="" />
            </div>
          </div>
          <div class="time-item">
            <div class="time">21:00</div>
            <div class="temp">20°C</div>
            <div class="img-box">
              <img src="/assets/yin.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.cardItem {
  padding: -20px !important;
}

.tianqi2 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 50px;

  img {
    width: 40px;
    height: 40x;
    display: block;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;

    .text {
      margin-top: 10px;
    }
  }
}

.weather-timeline {
  text-align: center;
  color: #fff;
  font-size: 14px;
  margin: 15px 0;

  .time {
    margin: 10px 0;
  }

  .img-box {
    width: 40px;
    height: 40px;
    margin: 10px 0;
  }

  img {
    width: 100%;
    height: 100%;
    display: block;
  }

  // img[src*='Sunny'] {
  //     width: 50px;
  //     height: 50px;
  // }

  // img[src*='rain'] {
  //     width: 60px;
  //     height: 60px;
  // }

  padding: 15px;
  background: linear-gradient(to right, #d6e2ff, #deebff);
  border-radius: 15px;

  .time-box {
    background: linear-gradient(to right, #447bff, #67a3fd);
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px 20px;
    align-items: center;
  }

  .time-item.show {
    color: rgba(24, 109, 245, 1);
    position: relative;
    // z-index: 888;
    background-color: #fff;
    padding: 0 5px;
  }

  .show::after {
    // color: rgba(24, 109, 245, 1);
    // position: relative;
    // z-index: 888;
    // background-color: #fff;
    content: '';
    position: absolute;
    width: 100%;
    height: 25px;
    // background-color: red;
    background-color: #fff;
    left: 0;
    border-radius: 0 0 25px 25px;
  }

  .show::before {
    // color: rgba(24, 109, 245, 1);
    // position: relative;
    // z-index: 888;
    // background-color: #fff;
    content: '';
    position: absolute;
    width: 100%;
    height: 25px;
    // background-color: red;
    background-color: #fff;
    left: 0;
    top: -25px;
    border-radius: 25px 25px 0 0;
  }

  // .show::after {
  //     content: '';
  //     position: absolute;
  //     height: 155px;
  //     background-color: #fff;
  //     z-index: 999;
  //     width: 100%;
  //     top: -25px;
  //     left: 0;
  //     border-radius: 20px;
  // }
}
</style>
<script setup></script>