<template>
  <div class="dkjc">
    <div class="card" v-for="(item, index) in mockData" :key="index">
      <div class="title" v-if="item.title">{{ item.title }}</div>
      <div class="title1" v-if="item.title1">{{ item.title1 }}</div>
      <div class="title3" v-if="item.title3">{{ item.title3 }}</div>
      <div class="detail1" v-if="item.detail1" v-html="item.detail1">
        {{ item.detail1 }}
      </div>
      <div class="img1" v-if="item.img1">
        <img style="width: 100%; height: 100%" :src="item.img1" alt="" />
      </div>
      <div class="img8" v-if="item.img8">
        <img style="width: 100%; height: 100%" :src="item.img8" alt="" />
      </div>
      <div class="detail2" v-if="item.detail2" v-html="item.detail2">
        {{ item.detail2 }}
      </div>
      <div class="img2" v-if="item.img2">
        <img style="width: 100%; height: 100%" :src="item.img2" alt="" />
      </div>
      <div class="img7" v-if="item.img7">
        <img style="width: 100%; height: 100%" :src="item.img7" alt="" />
      </div>
      <div class="detail6" v-if="item.detail6" v-html="item.detail6">
        {{ item.detail6 }}
      </div>
      <div class="title2" v-if="item.title2">{{ item.title2 }}</div>
      <div class="detail3" v-if="item.detail3" v-html="item.detail3">
        {{ item.detail3 }}
      </div>
      <div class="img3" v-if="item.img3">
        <img style="width: 180px; height: 180px" :src="item.img3" alt="" />
      </div>
      <div class="detail4" v-if="item.detail4" v-html="item.detail4">
        {{ item.detail4 }}
      </div>
      <div class="img9" v-if="item.img9">
        <img style="width: 100%; height: 100%" :src="item.img9" alt="" />
      </div>
      <div class="detail7" v-if="item.detail7" v-html="item.detail7">
        {{ item.detail7 }}
      </div>
      <div class="picture" style="display: flex">
        <div class="img4" v-if="item.img4">
          <img style="width: 130px" :src="item.img4" alt="" />
        </div>
        <div class="img5" v-if="item.img5">
          <img style="width: 130px" :src="item.img5" alt="" />
        </div>
      </div>
      <div class="img6" v-if="item.img6">
        <img style="width: 100%; height: 100%" :src="item.img6" alt="" />
      </div>
      <div class="detail5" v-if="item.detail5" v-html="item.detail5">
        {{ item.detail5 }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mockData: [
        {
          title: "1.个人住房公积金缴存贷款等信息查询：",
          title1: "（1）个人网上服务大厅",
          detail1:
            ' <span>访问个人网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt/login?zhlx=1">https://www.zjgjj.cn/hfmis_wt/login?zhlx=1</a>， 点击“信息查询”—“缴存明细”，进入缴存明细主界面，如下图所示：</span>',
          img1: require("./images/1-1-1.png"),
          detail2:
            "<span>点击“信息查询”—“贷款信息”，进入贷款信息主界面，如下图所示：</span>",
          img2: require("./images/1-1-2.png"),
          title2: "（2）微信公众号",
          detail3:
            "<span>搜索并关注“镇江住房公积金”微信公众号或用微信扫描以下二维码：</span>",
          img3: require("./images/1-2-1.png"),
          detail4:
            "<span>进入“镇江住房公积金”微信公众号，“我的公积金”—“账户查询”</span>",
          img4: require("./images/1-2-2.png"),
          img5: require("./images/1-2-3.png"),
        },
        {
          title: "2.出具贷款职工住房公积金缴存使用证明：",
          detail1:
            ' <span>访问个人网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt/login?zhlx=1">https://www.zjgjj.cn/hfmis_wt/login?zhlx=1</a>， 点击“出具证明”—“异地贷款缴存明细证明”，进入异地贷款缴存明细证明主界面，如下图所示：</span>',
          img1: require("./images/2-1.png"),
          detail2:
            "<span>请点击“生成”按钮（此时为亮色可点击状态），待生成完毕后，点击“点击查看”按钮即可查看生成的证明PDF档。点击“重新申请”按钮，可生成新的的证明。</span>",
        },
        {
          title: "3.正常退休提取住房公积金：",
          title1: "（1）个人网上服务大厅",
          detail1:
            ' <span>访问个人网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt/login?zhlx=1">https://www.zjgjj.cn/hfmis_wt/login?zhlx=1</a>，点击“业务办理”按钮，选择“我要提取”—“离退休销户提取”，进入离退休销户提取主界面，如下图所示：</span>',
          img1: require("./images/3-1.png"),
          detail2:
            "<span>确认信息无误后进行刷脸，刷脸成功后业务提交成功，业务经公积金中心审核通过后，资金3个工作日内到账。</span>",
          title2: "（2）微信公众号",
          detail3:
            "<span>搜索并关注“镇江住房公积金”微信公众号或用微信扫描以下二维码：</span>",
          img3: require("./images/1-2-1.png"),
          detail4:
            "<span>进入“镇江住房公积金”微信公众号—“我的公积金”—“业务办理”—“我要提取”—“离、退休提取”。</span>",
          img6: require("./images/3-2.png"),
          detail5:
            "<span>核对“个人、提取金额信息”—“获取验证码”—输入手机验证码—阅读并勾选“提取须知”。确认信息无误后—点击“提交”—“快速验证”刷脸成功—业务提交成功，三个工作日内资金到账。</span>"
        },
        {
          title: "4.住房公积金单位登记开户：",
          detail1:
            ' <span>访问个人网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt">https://www.zjgjj.cn/hfmis_wt</a>，选择单位缴存登记模块，如图所示：</span>',
          img1: require("./images/4-1.png"),
          detail2:
            "<span>（1）输入统一社会信用代码进行验证，如验证通过可点击下一步，输入单位经办人的姓名和身份证号码，单位经办人进行微信扫码刷脸，验证通过之后，如图所示：</span>",
          img2: require("./images/4-2.png"),
          img7: require("./images/4-3.png"),
          detail3:
            "<span>（2）三重验证通过之后点击下一步，进行单位缴存登记相关信息填写，录入单位缴存比例、个人缴存比例、起始缴存年月、受托银行、单位邮箱、单位经办人等信息，点击保存按钮，生成单位公积金账户，与此同时生成单位住房公积金缴存信息，审批通过之将此信息反馈至申请办理的企业。如图所示：</span>",
          img3: require("./images/4-4.png"),
        },
        {
          title: "5.住房公积金单位及个人缴存信息变更：",
          title1: "（1）单位网上服务大厅",
          detail1:
            ' <span>访问单位网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt">https://www.zjgjj.cn/hfmis_wt</a>，使用证书登录到单位网上服务大厅，点击“信息修改”—“单位信息修改”，如下图所示：</span>',
          img1: require("./images/5-1.png"),
          detail2:
            "<span>点击“信息修改”—“职工信息修改”，选中需要修改的职工，点击修改按钮，如下图所示：</span>",
          img2: require("./images/5-2.png"),
          title2: "（2）个人网上服务大厅",
          detail3:
            '<span> 访问个人网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt/login?zhlx=1">https://www.zjgjj.cn/hfmis_wt/login?zhlx=1</a>，点击“账户设置”—“个人信息”，如下图所示：</span>',
          img3: require("./images/5-3.png"),
        },
        {
          title: "6.购房提取住房公积金：",
          title1: "（1）个人网上服务大厅",
          detail1:
            ' <span>访问个人网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt/login?zhlx=1">https://www.zjgjj.cn/hfmis_wt/login?zhlx=1</a>，点击“业务办理”按钮，“我要提取”—“购买自住住房提取”，进入提取主界面，如下图所示：</span>',
          img1: require("./images/6-1.png"),
          img8: require("./images/6-2.png"),
          detail2:
            "<span>录入“房产信息、提取金额”—点击“收件扫描”上传文件—点击“获取验证码”—输入手机验证码—阅读并勾选“提取须知”。确认信息无误后点击“提交”—“快速验证”刷脸成功—业务提交成功，业务经公积金中心审核通过后，资金3个工作日内到账。</span>",
          title2: "（2）微信公众号",
          detail3:
            "<span>搜索并关注“镇江住房公积金”微信公众号或用微信扫描以下二维码：</span>",
          img3: require("./images/1-2-1.png"),
          detail4:
            "<span>进入“进入“镇江住房公积金”微信公众号—“我的公积金”—“业务办理”—“我要提取”—“购房提取”（根据购房类型选择相应的购房提取）。”</span>",

          img4: require("./images/6-3.png"),
          img5: require("./images/6-4.png"),
          detail5:
            "<span>录入“房产信息、提取金额”—点击“收件扫描”上传文件—点击“获取验证码”—输入手机验证码—阅读并勾选“提取须知”。确认信息无误后点击“提交”—“快速验证”刷脸成功—业务提交成功，业务经公积金中心审核通过后，资金3个工作日内到账。</span>",
        },
        {
          title: "7.开具住房公积金个人住房贷款全部还清证明：",
          detail1:
            ' <span>访问个人网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt/login?zhlx=1">https://www.zjgjj.cn/hfmis_wt/login?zhlx=1</a>，依次点击：“出具证明”—“贷款还清证明”，进入贷款还清证明主界面，如下图所示：</span>',
          img1: require("./images/7-1.png"),
          detail2:
            "<span>选择已还清的贷款账号，点击“生成”按钮（此时为亮色可点击状态），待生成完毕后，点击即可查看生成的证明PDF档。</span>",
        },
        {
          title: "8.提前还清住房公积金贷款：",
          title1: "（1）个人网上服务大厅",
          title3: "偿还公积金贷款提取",
          detail1:
            ' <span>访问个人网上服务大厅<a href="https://www.zjgjj.cn/hfmis_wt/login?zhlx=1">https://www.zjgjj.cn/hfmis_wt/login?zhlx=1</a>，点击“业务办理”按钮，选择“我要还贷”—“偿还公积金贷款提取”，进入偿还公积金贷款主界面，如下图所示：</span>',
          img1: require("./images/8-1.png"),
          detail2:
            "<div>在提前还款方式选项中选择提前还清，核对还清金额，阅读并勾选“提取须知”—点击“下一步”-点击“获取验证码”—输入手机验证码。确认信息无误后点击“提交”，业务受理成功。<div><span style='font-size:14px;line-height: 20px;'>现金结清公积金贷款</span><div>点击“业务办理”按钮，选择“我要还贷”—“现金结清公积金贷款”，进入贷款还清主界面，如下图所示：</div></div></div>",
          img2: require("./images/8-2.png"),
          detail6:
            "<span>进行银行卡校验通过后显示公积金贷款提前还清的本息合计，核对无误后阅读并勾选须知，点击完成进行刷脸认证，认证成功后申请提交成功。</span>",
          title2: "（2）微信公众号",
          detail3:
            "<span>搜索并关注“镇江住房公积金”微信公众号或用微信扫描以下二维码：</span>",
          img3: require("./images/1-2-1.png"),
          detail4:
            "<span>偿还公积金贷款提取<br>进入“镇江住房公积金”微信公众号—点击“我的公积金” —选择“业务办理”—点击“我要还贷”—选择“偿还公积金贷款提取”，进入偿还公积金贷款主界面，如下图所示：</span>",
          img9: require("./images/8-3.png"),
          detail7:
            "<span>在提前还款方式选项中选择提前还清，核对还清金额，点击“下一步”-点击“获取验证码”—输入手机验证码。确认信息无误后点击“提交”，业务受理成功。<br>现金结清公积金贷款：<br>进入“镇江住房公积金”微信公众号—点击“我的公积金” —选择“业务办理”—点击“我要还贷”—选择“现金结清公积金贷款”，进入现金结清公积金贷款主界面，如下图所示：</span>",
          img4: require("./images/8-4.png"),
          img5: require("./images/8-5.png"),
          detail5:
            "<span>进行银行卡校验通过后显示公积金贷款提前还清的本息合计，核对无误后阅读并勾选须知，点击完成进行刷脸认证，认证成功后申请提交成功。</span>",
        },
      ],
    };
  },
};
</script>

<style lang="stylus" scoped>
.dkjc {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: scroll;
  padding: 0 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40px;
  font-size: 26px;
  .title {
    font-size: 30px;
    font-weight: 600;
    margin-top: 20px;
  }

  .title1 {
    margin-top: 20px;
  }

  .title2 {
    margin-top: 20px;
  }

  .title3 {
    font-size: 30px;
    margin-top: 10px;
  }

  .detail1 {
    margin-bottom: 20px;
  }

  .detail2 {
    margin: 20px 0;
  }

  .detail5 {
    margin-bottom: 20px;
  }

  .detail6 {
    margin-top: 20px;
  }

  .img3 {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .img6 {
    margin-bottom: 20px;
  }

  .img7 {
    margin: 20px 0;
  }

  .img8 {
    margin: 20px 0;
  }

  .picture {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin: 10px 0;
  }
}
</style>