<template>
  <div class="main-body">
    <topheader title="保单官网查询指引"></topheader>
    <div class="guide-content">
      <p class="step-title">第一步：保险类型选择【平安财产保险保单查验】</p>
      <img src="../assets/guide-step1.png" alt />
      <p class="step-title">第二步：输入保单号和验真码</p>
      <img src="../assets/guide-step2.png" alt />
      <div class="query-link" @click="queryLink">去查询</div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import Topheader from "@/components/Topheader";
export default {
  name: "protocol",
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  watch: {},
  components: {
    Topheader
  },
  beforeDestroy() {},
  methods: {
    queryLink: function() {
      window.location.href =
        "https://property.pingan.com/kehufuwu/fuwugongju/chanxianbaodanchayan.shtml";
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-body {
  background: #fff;
  /* height: 100vh; */
  padding: 0.3rem;
  font-size: 0.24rem;
}

.guide-content {
  margin: 0.9rem 0 1.2rem;
}
.guide-content p {
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}

.guide-content img {
  width: 100%;
  min-height: 2rem;
}
.query-link {
  height: 0.84rem;
  line-height: 0.84rem;
  font-size: 0.32rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(22, 169, 255, 1) 0%,
    rgba(26, 201, 255, 1) 100%
  );
}
</style>
