<!--
 * @Description: file content
 * @Version: 2.0
 * @Author: ljl
 * @Date: 2022-06-16 09:49:18
 * @LastEditors: ljl
 * @LastEditTime: 2022-07-01 15:27:03
 * @FilePath: \sui-shen-ban_alipay\src\views\applyNotice.vue
-->
<template>
  <div>
    <header>
      <div class="top">
        <div class="back" @click="back()"></div>
        <span>{{$route.meta.title}}</span>
      </div>
    </header>
    <div id="main">
      <div class="title">亲属信息</div>
      <div class="textTitle">添加须知</div>
      <div class="text">
        这里是申请须知文案，由于依申请公开政府信息涉及到一定的流程，并需要一定的时间办理，因此建议你在正式提交政府
        信息公开申请之前，先通过本网站的"搜索"功能进行查找。
        国家卫生健康委员会依申请公开系统使用须知本系统只受理公民、法人和其他组织根据自身生产、生活、科研等特殊需要向国家卫生健康委员会申请
        获取除主动公开以外的政府信息公开申请。
      </div>
      <div class="handle" @click="change()">
        <div class="change1" v-if="isChange == 0"></div>
        <div class="change2" v-else>
          <div class="gou"></div>
        </div>
        <div>我已阅读并遵守以上规定</div>
      </div>
    </div>
    <footer>
      <van-button
        block
        type="info"
        :disabled="isChange == 0"
        @click="toAddRelative()"
        >下一步</van-button
      >
    </footer>
  </div>
</template>
<script>
import Vue from "vue";
import { Button } from "vant";
Vue.use(Button);
export default {
  name: "ApplyNotice",
  data() {
    return {
      isChange: 0,
      queryInfo:{}
    };
  },
  created() {
    this.queryInfo = this.$route.query;
  },
  methods: {
    back() {
      this.$router.go(-1);
    },

    // 勾选
    change() {
      this.isChange = this.isChange == 0 ? 1 : 0;
    },

    toAddRelative(){
      this.$router.push({ name: "AddRelative", query: this.queryInfo });
    }
  },
};
</script>
<style lang="scss" scoped>
header {
  width: 100%;
}
.top {
  background-color: #cbb486;
  height: 50px;
  line-height: 50px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.125rem;
  position: relative;
}
.back {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-top: 0.25rem solid #fff;
  border-right: 0.25rem solid #fff;
  -webkit-transform: translateY(-50%) rotate(-135deg);
}
#main {
  padding: 10px 15px;
  font-family: "PingFang SC-Medium";
  text-align: left;
  .title {
    font-size: 18px;
    margin: 20px 0;
  }
  .textTitle {
    margin: 10px 0;
  }
  .text {
    font-size: 14px;
    font-family: "PingFang SC-Regular";
    color: #999999;
    line-height: 24px;
  }
  .handle {
    display: flex;
    align-items: center;
    height: 40px;
    color: #666666;
    font-family: "PingFang SC-Regular";
    font-size: 16px;
  }
  .change1 {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 50%;
    border: 1px solid #bcbec0;
  }
  .change2 {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 50%;
    background: #cbb486;
    border: 1px solid #bcbec0;
    display: flex;
    justify-content: center;
    align-items: center;
    .gou {
      width: 9px;
      height: 4px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      -webkit-transform: translateY(-10%) rotate(135deg);
    }
  }
}
footer {
  button {
    width: calc(100% - 30px);
    height: 50px;
    background: linear-gradient(270deg, #b9916a 0%, #e4c995 100%);
    border-radius: 4px;
    border: none;
    color: #fff;
    font-family: "PingFang SC-Regular";
    font-size: 18px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>