<template>
  <div class="warn">
    <div class="head"></div>
    <div class="main">
      <div class="message">
        <div class="icon-txt">
          <span class="font_family icon-yujingquzanzu-01"></span>
          <span>干旱与汛情预警</span>
        </div>
        <div class="img-bg">中度干旱</div>
        <van-button @click="realBtn" type="danger">干旱预警处理</van-button>
      </div>
      <div class="warn-num">
        <div class="left box">
          <h4>巡查隐患</h4>
          <span>5</span>
        </div>
        <div class="right box">
          <h4>系统预警</h4>
          <span>3</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Warn',
  data () {
    return {

    }
  },
  methods: {
    realBtn () {
      this.$router.push('/mobile-terminal/warn/real-han')
    }
  }
}
</script>

<style lang="scss" scoped>
.warn {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  overflow: auto;
  .head {
    height: 76px;
    background: url("~@/assets/mobile/warn_head.png") no-repeat top center /
      cover;
  }
  .main {
    height: 541px;
    padding: 10px 13px;
    overflow: auto;
    .message {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 349px;
      margin-bottom: 10px;
      background-color: #fff;
      .icon-txt {
        align-self: start;
        display: flex;
        align-items: center;
        margin: 15px 0 0 15px;
        span:nth-child(1) {
          margin-right: 4px;
          color: #ff5a5a;
          font-size: 20px;
        }
        span:nth-child(2) {
          color: #333;
          font-size: 14px;
        }
      }
      .img-bg {
        width: 163px;
        height: 180px;
        background: url("~@/assets/mobile/img_bg.png") no-repeat center / 100%
          100%;
        color: #fff;
        text-align: center;
        line-height: 180px;
      }
      .van-button {
        height: 36px;
        margin-bottom: 36px;
        padding: 0 41px;
        border-radius: 18px;
        background-color: #ff5a5a;
        border: 1px solid #ff5a5a;
      }
    }
    .warn-num {
      display: flex;
      .box {
        display: flex;
        flex: 1;
        height: 77px;
        color: #333;
        padding-top: 16px;
        h4 {
          position: relative;
          font-size: 14px;
          margin-left: 42px;
        }
        span {
          margin-left: 34px;
          margin-top: 3px;
          font-size: 25px;
          font-weight: 700;
        }
      }
      .left {
        margin-right: 10px;
        background: #fff url("~@/assets/mobile/orange_bg.png") no-repeat bottom
          center / 100% 20px;
        h4 {
          &::before {
            content: "";
            position: absolute;
            left: -30px;
            top: -3px;
            display: block;
            width: 20px;
            height: 20px;
            background: url("~@/assets/mobile/warn_icon.png") no-repeat top
              center / cover;
          }
        }
      }
      .right {
        background: #fff url("~@/assets/mobile/warn_bg.png") no-repeat bottom
          center / 100% 20px;
        h4 {
          &::before {
            content: "";
            position: absolute;
            left: -30px;
            top: -3px;
            display: block;
            width: 20px;
            height: 20px;
            background: url("~@/assets/mobile/orange_icon.png") no-repeat top
              center / cover;
          }
        }
      }
    }
  }
}
</style>
