<template>
  <div class="dkjc">
    <div class="top">
      镇江市本地缴存职工向长三角范围内（上海、浙江、江苏、安徽）的公积金中心申请公积金异地贷款的，或长三角范围内缴存职工向我中心申请公积金异地贷款的，可通过长三角政务服务“一网通办”平台，申请开具或注销《异地贷款职工住房公积金缴存使用证明》（以下简称“异地缴存证明”）。
    </div>
    <div class="card" v-for="(item, index) in mockData" :key="index">
      <div class="title">{{ item.title }}</div>
      <div class="detail" v-if="item.detail" v-html="item.detail">
        {{ item.detail }}
      </div>
      <div class="title1" v-html="item.title1">{{ item.title1 }}</div>
      <div class="img1" v-if="item.img1">
        <img style="width: 100%; height: 100%" :src="item.img1" alt="" />
      </div>
      <div class="detail1" v-if="item.detail1">{{ item.detail1 }}</div>
      <div class="img2" v-if="item.img2">
        <img style="width: 100%; height: 100%" :src="item.img2" alt="" />
      </div>
      <div class="img3" v-if="item.img3">
        <img style="width: 100%; height: 100%" :src="item.img3" alt="" />
      </div>
      <div class="title2">{{ item.title2 }}</div>
      <div class="img4" v-if="item.img4">
        <img style="width: 100%; height: 100%" :src="item.img4" alt="" />
      </div>
      <div class="title3">{{ item.title3 }}</div>
      <div class="img5" v-if="item.img5">
        <img style="width: 100%; height: 100%" :src="item.img5" alt="" />
      </div>
      <div class="title4">{{ item.title4 }}</div>
      <div class="img6" v-if="item.img6">
        <img style="width: 100%; height: 100%" :src="item.img6" alt="" />
      </div>
      <div class="title5">{{ item.title5 }}</div>
      <div class="img7" v-if="item.img7">
        <img style="width: 100%; height: 100%" :src="item.img7" alt="" />
      </div>
      <div class="title6">{{ item.title6 }}</div>
      <div class="img8" v-if="item.img8">
        <img style="width: 100%; height: 100%" :src="item.img8" alt="" />
      </div>
    </div>
    <div class="bottom">
      <div class="tips">温馨提示：</div>
      <div class="tip">
        办理过程中如遇登录问题，可先登录国家政务服务平台，进行四级实名认证后重新登录。如遇其他问题，可咨询镇江市住房公积金服务热线
        <a href="tel:0511-12329">0511-12329</a>。
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mockData: [
        {
          title: "一、申请",
          title1:
            '<span>1.通过镇江市住房公积金管理中心官网“长三角住房公积金一体化服务”专栏登录，或直接登录网址：<a href="http://csj.sh.gov.cn/govService">http://csj.sh.gov.cn/govService</a></span>',
          img1: require("./images/1-1.png"),
          detail1:
            "在长三角“一网通办”平台首页，“特色专栏”中选择“长三角住房公积金服务”进入长三角住房公积金服务专栏，选择“开具公积金异地贷款缴存使用证明”。",
          img2: require("./images/1-2.png"),
          img3: require("./images/1-3.png"),
          title2:
            "2.职工选择自己所属地区，使用账号密码登录或打开手机APP扫码登录。",
          img4: require("./images/1-4.png"),
          title3:
            "3.进入申请页面，仔细阅读“办理须知”后，点击“开始办理”申请开具证明。",
          img5: require("./images/1-5.png"),
          title4:
            "4.填写申报信息，注意正确选择缴存地中心和贷款地中心，如下图：",
          img6: require("./images/1-6.png"),
          title5: "5. 点击“提交”后，显示“提交成功”，表明申请开具完成。",
          img7: require("./images/1-7.png"),
          title6: "6.“办件中心”显示“预审通过”表示开具证明成功",
          img8: require("./images/1-8.png"),
        },
        {
          title: "二、注销",
          detail:
            "<span>如缴存职工通过长三角“一网通办”平台开具过异地缴存证明，但没有使用该证明办理异地贷款的，如需重新开具的，必须先通过“一网通办”平台提交原证明的注销申请，后台审核通过后可再次开具。<br><br>其中，贷款中心未读取查询过的原证明在注销申请提交后可自动注销，贷款中心已读取查询过的证明，须由贷款中心核实注销原因后进行注销。</span>",
          title1:
            "<span>1.登录长三角“一网通办”平台后，找到页面最上方人形图标和名字，点击即可进入“办件中心”查看“我的办件”。</span>",
          img1: require("./images/2-1.png"),
          title2:
            "2.对于状态是“预审通过”的证明， 选择“查看详情” 后点击“注销”。",
          img4: require("./images/2-2.png"),
          title3:
            "3.提交注销申请（贷款中心已读取查询过的证明，注销申请提交后须由贷款中心核实注销原因后进行注销）。",
          img5: require("./images/2-3.png"),
          title4:
            "4.完成注销（办理信息—办理环节，显示：办结，就表示证明已注销成功）。",
          img6: require("./images/2-4.png"),
        },
      ],
    };
  },
};
</script>

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

  .top {
    margin: 20px 0;
  }

  .card {
    .title {
      font-size: 30px;
      font-weight: 600;
    }

    .detail {
      margin-top: 20px;
    }

    .title1 {
      margin: 20px 0;
    }

    .img1 {
      margin-bottom: 20px;
    }

    .detail1 {
      margin-bottom: 20px;
    }

    .img3 {
      margin: 20px 0;
    }

    .img4 {
      margin: 20px 0;
    }

    .img5 {
      margin: 20px 0;
    }

    .img6 {
      margin: 20px 0;
    }

    .img7 {
      margin: 20px 0;
    }

    .img8 {
      margin: 20px 0;
    }
  }

  .bottom {
    .tips {
      font-size: 30px;
      font-weight: 600;
    }

    .tip {
      margin: 20px 0;
    }
  }
}
</style>