<!--
 * @Author: song
 * @Date: 2021-12-06 20:47:28
 * @LastEditors: song
 * @LastEditTime: 2022-05-27 19:14:01
 * @Description: file content
 * @FilePath: \lancangrivervue3\src\views\FormalAnalysis\monitor\components\weather.vue
-->
<template>
  <div class="weather">
    <ul class="weather-list">
      <li>
        <div class="address"> 灵芝 </div>
        <div class="weather-content">
          <div class="weather-item">
            <div class="time"> 今天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
          </div>
          <div class="weather-item center">
            <div class="time"> 明天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
          </div>
          <div class="weather-item">
            <div class="time"> 后天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
            <!-- <div class="tem"> 18°C </div> -->
          </div>
        </div>
      </li>
      <li>
        <div class="address"> 灵芝 </div>
        <div class="weather-content">
          <div class="weather-item">
            <div class="time"> 今天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
          </div>
          <div class="weather-item center">
            <div class="time"> 明天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
          </div>
          <div class="weather-item">
            <div class="time"> 后天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
            <!-- <div class="tem"> 18°C </div> -->
          </div>
        </div>
      </li>
      <li>
        <div class="address"> 灵芝 </div>
        <div class="weather-content">
          <div class="weather-item">
            <div class="time"> 今天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
          </div>
          <div class="weather-item center">
            <div class="time"> 明天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
          </div>
          <div class="weather-item">
            <div class="time"> 后天 </div>
            <div class="date"> 27/7 </div>
            <div class="info"> 多云 <span>18°C</span></div>
            <div class="icon">
              <img src="../../assets/images/weatherIcon/大雨.png" alt="icon" />
            </div>
            <!-- <div class="tem"> 18°C </div> -->
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script></script>
<style scoped lang="less">
.weather {
  background: url('@/assets/images/weatherIcon/weather-bg.png') no-repeat;
  background-size: 100% auto;
  width: 100%;
  padding: 10px;
  border-radius: 0 0 0 36px;
  /*display: flex;*/
  /*justify-content: flex-start;*/
  /*align-items: center;*/

  .weather-list {
    width: 100%;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    li {
      width: 100%;
      height: 100px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      color: #ffffff;
      list-style: none;
      margin: 10px 0;
      cursor: pointer;
      .address {
        margin: auto;
        width: 90%;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
      }
      .weather-content {
        width: 100%;
        // height: 85%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .weather-item {
          width: 30%;
          // height: 90%;
          display: flex;
          flex-direction: column;
          // justify-content: space-evenly;
          align-items: center;
          div {
            font-family: 'Source Han Sans CN';
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 16px;
            display: flex;
            align-items: center;
            text-align: center;
            flex-shrink: 0;
            color: #ffffff;
          }
          .icon {
            height: 20px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .center {
          border-left: 1px solid rgba(222, 222, 222, 0.3);
          border-right: 1px solid rgba(222, 222, 222, 0.3);
        }
      }
    }
  }

  .tit {
    color: #5572e7;
    font-weight: 700;
  }

  .btn {
    background: #fff;
  }

  .colorScaleBg {
    padding-bottom: 0.1rem;

    // 色阶
    .colorScale {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      color: #666;
      padding-bottom: 0.1rem;
      border-bottom: 1px solid #f2f2f2;
      .colorDiv-bg {
        display: flex;
        width: 74%;
        padding-top: 0.08rem;
      }
      .colorDiv {
        flex: 1;
        margin-right: 0.01rem;
        .text {
          text-align: center;
          color: #666;
        }
        .bgc {
          flex: 1;
          height: 0.05rem;
        }
        .bgc1 {
          background: #a8f191;
        }
        .bgc2 {
          background: #0e7e1b;
        }
        .bgc3 {
          background: #52b0ff;
        }
        .bgc4 {
          background: #0000df;
        }
        .bgc5 {
          background: #fa11f9;
        }
        .bgc6 {
          background: #790000;
        }
      }

      .lColor {
        display: flex;
        align-items: center;
        margin-right: 0.1rem;
        width: 30%;
      }
    }
  }
  .btndiv {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btnL {
      border: 1px solid #5572e7;
      padding: 0.02rem;
      border-radius: 0.04rem;
    }
    .timer {
      color: #666;
    }
  }
  .font1 {
    color: #5572e7;
    font-weight: 700;
  }
  .font2 {
    color: #fff;
    background: #fe976a;
    border-radius: 0.1rem;
    padding: 0.02rem 0.06rem;
    margin-left: 0.15rem;
  }
  // 时间轴
  .timeDiv {
    .weeks {
      display: flex;
      text-align: center;
      width: 100%;
      justify-content: space-between;
      padding: 0.1rem 0 0.05rem;
      .hour {
        color: #fe976a;
      }
      .activeDay {
        color: #52b0ff;
      }
    }
    .times {
      display: flex;
      justify-content: space-between;
      .times-main {
        display: flex;
        width: calc(100% - 1rem);
        position: relative;
        .border-line {
          position: absolute;
          border: 1px solid;
          width: calc((100% / 24 * 23) + (100% / 24 / 2));
          top: 18px;
          left: calc((100% / 24) - (100% / 24 / 2));
          text-align: center;
        }
      }
      .times-item {
        flex: 1;
        text-align: center;
      }
      .times-item-line {
        background: url(https://i.tq121.com.cn/i/weatherMap/shuxian.png) no-repeat bottom;
        justify-content: center;
        position: relative;
        .activeLine {
          width: 4px;
          border: 1px solid #84a5f4;
          margin-top: 10px;
          position: absolute;
          left: 40%;
          top: 0;
          height: 20px;
          background: #a9d6ff;
          border-radius: 20px;
          z-index: 1;
        }
        img {
          vertical-align: bottom;
        }
      }
      .times-item-num {
        // color: #fe976a;
        margin-top: 10px;
      }
    }
  }
}

.mt10 {
  margin-top: 0.1rem;
}
.static {
  color: #666;
  padding: 0.1rem 0;
}
.title {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #0071c0;
}
.senvenday {
  margin-left: 0.1rem;
  color: #fff;
  .title {
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.14rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #0071c0;
  }
  .senvenBar {
    height: 3.2rem;
    background: #0065ac;
    text-align: center;
    border-radius: 0.08rem;
    .senvendays {
      top: 0.2rem;
      float: left;
      position: relative;
      width: 100%;
      height: 0.8rem;
      // background: red;
      font-size: 0.1rem;
      .one {
        float: left;
        width: 14.27%;
        height: 100%;
        img {
          width: 0.22rem;
        }
      }
    }
    .tempdayNight {
      clear: both;
      position: relative;
      top: 0.15rem;
      width: 100%;
      margin: 0 auto;
      height: 1.5rem;
      .temcontainer2 {
        width: 100%;
        height: 1.5rem;
      }
    }
    .senvennights {
      float: left;
      position: relative;
      width: 100%;
      top: 0.2rem;
      height: 0.6rem;
      // background: red;
      font-size: 0.1rem;
      .one {
        float: left;
        width: 14.27%;
        height: 100%;
        img {
          width: 0.22rem;
        }
      }
    }
  }
}
.threeday {
  padding-left: 0.1rem;

  .title {
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.14rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #0071c0;
  }
  .threedays {
    border-radius: 0.08rem;

    position: relative;
    width: 100%;
    height: 0.9rem;
    background-image: url('@/assets/images/weatherIcon/staic/bg0.png');
    background-repeat: no-repeat;
    background-size: cover;
    .one {
      position: relative;
      top: 0.1rem;
      height: 0.9rem;
      width: 33.33333%;
      float: left;
      text-align: center;
      color: #fff;
      .Lone {
        border-left: 0.01rem solid rgba(255, 255, 255, 0.1);
        border-right: 0.01rem solid rgba(255, 255, 255, 0.1);
      }
      p {
        font-size: 0.1rem;
      }
      .temp {
        font-size: 0.18rem;
      }
    }
  }
}
</style>
