123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- <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>
|