<html>
<head>
  <title>文件生成</title>
   <style>
    .header {
      width: 100%;
      height: 50px;
      background: rgb(44, 58, 74);
      font-size: 25px;
      font-weight: 500px;
      line-height: 50px;
      color: #fff;
      padding-left: 15px;
      margin-bottom: 25px;
    }

    .message {
      color: red;
      padding: 20px 0px;
    }

    .form {
      width: 500px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .2);
      border-color: rgba(0, 0, 0, .2);
      padding: 0px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
    }

    .title {
      font-size: 14px;
      color: #606266;
      line-height: 20px;
      box-sizing: border-box;
      margin-right: 20px;
    }

    .file-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-bottom: 20px;
      width: 100%;
    }

    .file-name {
      font-size: 14px;
      color: #606266;
      line-height: 20px;
      margin-left: 10px;
    }

    .file {
      position: relative;
      display: inline-block;
      background: #409eff;
      border: 1px solid #409eff;
      border-radius: 4px;
      padding: 4px 12px;
      overflow: hidden;
      color: #fff;
      text-decoration: none;
      text-indent: 0;
      line-height: 20px;
      font-size: 14px;
    }

    .file input {
      position: absolute;
      font-size: 100px;
      right: 0;
      top: 0;
      opacity: 0;
    }

    .file:hover {
      background: #409eff;
      border-color: #409eff;
      color: #fff;
      text-decoration: none;
    }

    .number input {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
      width: 100%;
    }

    .submitBtn {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: 0;
      margin: 20px 0px;
      transition: .1s;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
    }
  </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
    $(document).ready(function () {
      $(".file").on("change", "input[type='file']", function () {
        var filePath = $(this).val();
        var arr = filePath.split('\\');
        var fileName = arr[arr.length - 1];
        document.getElementById('showFileName').innerHTML = fileName;
      })
    });
   </script>
</head>
<!--<body>-->
<!--  {% if message %}-->
<!--  <p style="color:red">{{ message }}</p>-->
<!--  {% endif %}-->
<!--  <form action="/generation" method="post" enctype="multipart/form-data">-->
<!--    <legend>Please sign in:</legend>-->
<!--    <p><input name="dxf_file" placeholder="dxf_file" type="file"></p>-->
<!--    <p><input name="area" placeholder="面积" type="number"></p>-->
<!--    <p><button type="submit">提交户型轮廓文件</button></p>-->
<!--  </form>-->
<!--</body>-->

<body style="margin: 0;padding: 0; background: #F2F6FC;">
  <div class="header">mvp</div>
  <form action="/excel_upload" method="post" enctype="multipart/form-data">
  <div class="form">
    <div class="message">
        {% if message %}
        {{ message }}
        {% endif %}
    </div>
    <div class="file-row">
      <div class="title">文件:</div>
      <a href="javascript:;" class="file">选择文件
        <input name="mvp_excel" placeholder="mvp_excel" type="file">
      </a>
      <div class="file-name" id="showFileName"></div>
    </div>
    <div class="file-row">
      <div class="title">邮箱:</div>
      <div class="number">
        <input name="email" placeholder="请输入邮箱" type="number">
      </div>
    </div>
    <button type="submit" class="submitBtn">确认更新</button>
  </div>
  </form>
</body>
</html>