anyv / xkeasy · 提交

转到一个项目

作者 anyv
提交 e1afc4fc7ce3648d43a396bbf806710ebf6980cc 1 个父辈 cdbf4d1f
1 个管道 的构建 通过 耗费 0 秒

14

内嵌 并排对比
正在显示 1 个修改的文件 包含 142 行增加 和 0 行删除
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  6 + <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  7 + <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8 + <title>学考无忧-个人信息</title>
  9 + <link rel="stylesheet" href="__TMPL__/public/assets/css/reset.css" />
  10 + <link rel="stylesheet" href="__TMPL__/public/assets/css/log.css" />
  11 +</head>
  12 +
  13 +<body>
  14 +<div class="log_top_second">
  15 + <!-- 顶部 -->
  16 + <div class="ad_top" style="background-color:white;">
  17 + <img class="ad_topImg" src="__TMPL__/public/assets/images/left.png" alt="" />
  18 + <h1>个人信息</h1>
  19 + <p style="color:#FF7700;">保存</p>
  20 + </div>
  21 +</div>
  22 +<div class="log_two_input">
  23 + <div class="log_two_input_one">
  24 + <div class="log_two_input_title">
  25 + 姓名
  26 + </div>
  27 + <div class="log_two_input_contant">
  28 + <input type="text" placeholder="请输入姓名" />
  29 + </div>
  30 + </div>
  31 + <div class="log_two_input_one">
  32 + <div class="log_two_input_title">
  33 + 手机号
  34 + </div>
  35 + <div class="log_two_input_contant">
  36 + <input style="width:3rem" type="text" placeholder="请输入手机号" maxlength="11" />
  37 + </div>
  38 + <div class="log_two_input_btn">
  39 + 获取验证码
  40 + </div>
  41 + </div>
  42 + <div class="log_two_input_one">
  43 + <div class="log_two_input_title">
  44 + 输入验证码
  45 + </div>
  46 + <div class="log_two_input_contant">
  47 + <input type="text" placeholder="请输入验证码" />
  48 + </div>
  49 + </div>
  50 + <div class="log_two_input_one">
  51 + <div class="log_two_input_title">
  52 + 身份证号
  53 + </div>
  54 + <div class="log_two_input_contant">
  55 + <input type="text" placeholder="请输入身份证号" />
  56 + </div>
  57 + </div>
  58 +</div>
  59 +<div class="log_two_picture">
  60 + <div class="log_two_picture_title">
  61 + 上传证件照
  62 + </div>
  63 + <div class="log_two_picture_img">
  64 + <div class="log_two_pi_one">
  65 + <div class="log_two_pi_one_icon">
  66 + <img src="__TMPL__/public/assets/images/jiahao.png" id="img0" alt="" />
  67 + </div>
  68 + <div class="log_two_pi_one_p">
  69 + 正面
  70 + </div>
  71 + <div class="input_file">
  72 + <input type="file" onchange="addImg(this)" />
  73 + </div>
  74 + </div>
  75 + <div class="log_two_pi_one log_two_pi_two">
  76 + <div class="log_two_pi_one_icon">
  77 + <img src="__TMPL__/public/assets/images/jiahao.png" id="img1" alt="" />
  78 + </div>
  79 + <div class="log_two_pi_one_p">
  80 + 反面
  81 + </div>
  82 + <div class="input_file">
  83 + <input type="file" onchange="addImgOne(this)" />
  84 + </div>
  85 + </div>
  86 + </div>
  87 + <div class="log_two_picture_state">
  88 + <div class="log_two_ps_one">
  89 + 拍照示范
  90 + </div>
  91 + <div class="log_two_ps_two">
  92 + <img src="__TMPL__/public/assets/images/88.png" alt="" class="img1" />
  93 + <img src="__TMPL__/public/assets/images/89.png" alt="" class="img2" />
  94 + </div>
  95 + <div class="log_two_ps_three">
  96 + 请稳定拍摄，保证照片中的<span>证件完整</span>,字体清晰，亮度均匀，可以高通过率
  97 + </div>
  98 + </div>
  99 +</div>
  100 +<!-- 保存 -->
  101 +<div class="log_two_bottom_btn">
  102 + <a href="log_first.html">保存</a>
  103 +</div>
  104 +<script src="__TMPL__/public/assets/js/jquery.js"></script>
  105 +<script src="__TMPL__/public/assets/js/base.js"></script>
  106 +<script>
  107 + // 上传图片
  108 + function addImg(file) {
  109 + console.log(file.files);
  110 + if (file.files && file.files[0]) {
  111 + var reader = new FileReader();
  112 + reader.onload = function(evt) {
  113 + $("#img0").attr("src", evt.target.result);
  114 + $(".log_two_pi_one").addClass("log_two_pi_ones");
  115 + $(".log_two_pi_one_p").addClass("log_two_pi_one_ps");
  116 + $(".log_two_pi_one_icon").addClass("log_two_pi_one_icons");
  117 + };
  118 + reader.readAsDataURL(file.files[0]);
  119 + } else {
  120 + // $("#preview").html('<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
  121 + }
  122 + }
  123 +
  124 + function addImgOne(file) {
  125 + console.log(file.files);
  126 + if (file.files && file.files[0]) {
  127 + var reader = new FileReader();
  128 + reader.onload = function(evt) {
  129 + $("#img1").attr("src", evt.target.result);
  130 + $(".log_two_pi_one").addClass("log_two_pi_ones");
  131 + $(".log_two_pi_one_p").addClass("log_two_pi_one_ps");
  132 + $(".log_two_pi_one_icon").addClass("log_two_pi_one_icons");
  133 + };
  134 + reader.readAsDataURL(file.files[0]);
  135 + } else {
  136 + // $("#preview").html('<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
  137 + }
  138 + }
  139 +</script>
  140 +</body>
  141 +
  142 +</html>