<template>
  <div class="result">
    <u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32" 
      :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
    <div class="header-content-bg">
      <image src="/static/img/result.png" class="success-img" />
      <h2>上报成功！</h2>
      <div class="result-btn" hover-class="text-hover" @click="back">前往查看</div>
    </div>
    
  </div>
</template>

<script>
  export default {
    appName:"上报事件",
    customNavigation: true,
    data () {
      return {
        id: '',
        backgroundNavbar: {
          background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
          backgroundSize: 'cover',
        },
      }
    },

    onLoad (query) {
      this.id = query.id
    },

    methods: {
      back () {
        uni.redirectTo({
          url: './PhotoDetail?id=' + this.id
        })
      }
    }
  }
</script>

<style lang="scss">
  .result {
    box-sizing: border-box;
    text-align: center;
    .header-content-bg {
      width: 100%;
      height: 592px;
      background-image: url('https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png');
      background-size: 100%;
    }
    .success-img {
      padding-top: 80px;
      width: 220px;
      height: 220px;
    }

    h2 {
      margin: 32px 0 80px;
      font-weight: 600;
      font-size: 40px;
      color: #333;
    }

    .result-btn {
      width: 320px;
      height: 88px;
      line-height: 88px;
      margin: 0 auto;
      text-align: center;
      background: #4181FF;
      color: #fff;
      font-size: 34px;
      border-radius: 16px;
    }
  }
</style>
