<template>
  <div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button">为家人投保</cr-button>
        <cr-button class="policy-item-operation-button">电子保单</cr-button>
      </div>
      <cr-image
        class="policy-item-operation-image"
        width=""
        height=""
        fit="cover"
        :src="guarantee"
      />
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万意外险</p>
        <p class="policy-item-pro-type policy-item-pro-type_casualty">意外保障</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button policy-item-operation-button_paid"
          >开启自动续费</cr-button
        >
        <cr-button class="policy-item-operation-button">电子保单</cr-button>
        <p class="policy-item-operation-desc policy-item-operation-desc_result">
          有XX.X元扣费失败，请立即开通自动续费
        </p>
      </div>
      <cr-image
        class="policy-item-operation-image"
        width=""
        height=""
        fit="cover"
        :src="guarantee"
      />
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
        <p class="policy-item-pro-status">待生效</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button">为家人投保</cr-button>
        <cr-button class="policy-item-operation-button">电子保单</cr-button>
      </div>
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_illness">重疾保障</p>
        <p class="policy-item-pro-status">待支付</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button policy-item-operation-button_paid"
          >去支付</cr-button
        >
      </div>
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
        <p class="policy-item-pro-status">退款中</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button">联系客服</cr-button>
        <p class="policy-item-operation-desc policy-item-operation-desc_result">
          退保退款中，请注意查收
        </p>
      </div>
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
        <p class="policy-item-pro-status">出单中</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button">联系客服</cr-button>
        <p class="policy-item-operation-desc policy-item-operation-desc_wait">
          正在出单，请耐心等待…
        </p>
      </div>
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
        <p class="policy-item-pro-status">投保失败</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <p class="policy-item-operation-desc policy-item-operation-desc_result">
          很抱歉，被保人的核保未通过
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import guarantee from "@/assets/images/policy/guarantee@2x.png";

export default {
  name: "InsuranceRecommend",
  data() {
    return {
      guarantee
    };
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
