index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title class="title">[文件管理器]</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <style type="text/css">
  8. .content {background: transparent;}
  9. .fixed {position: fixed;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;}
  10. .content .mask {top: 0;background: rgba(0,0,0,.4);z-index: 90;}
  11. .fixed-content{z-index: 91;position: fixed;bottom: 0;left: 0;right: 0;width: 100%;background: #fff;text-align: center;}
  12. .btn {position: relative;}
  13. .btn .file {position: absolute;z-index: 93;left: 0;right: 0;top: 0;bottom: 0;height: 60px;width: 100%;opacity: 0;}
  14. .btn-bg {margin-top: 10px;background: #0066CC;color: #fff;width: 80%;height: 40px;border: 0;border-radius: 5px;}
  15. .tis {top: 0;z-index: 95;display: none;justify-content: center;align-items: center;}
  16. .tis .tis-content {background: #fff;width: 60%;border-radius: 10px;padding: 20px 0;}
  17. .tis .tis-content img {width: 50px;height: 50px;}
  18. .tis-progress {margin: 10px 0;color: #999;}
  19. .cancel-btn {margin-top: 30px;height: 30px;line-height: 1;padding: 0 2em;background: #e3e3e3;color: #898989;border: 0;border-radius: 5px;}
  20. .menuImageTask{
  21. height: 60px;
  22. width: 60px;
  23. }
  24. .flex {
  25. display: flex;
  26. }
  27. .justify-center {
  28. justify-content: center;
  29. }
  30. .padding {
  31. padding: 10px;
  32. }
  33. .boderbo{
  34. border-bottom: 1px solid #F7F7F7;
  35. }
  36. .fixed-content_center{display: flex;justify-content: space-around;padding: 20px 20px;font-size: 16px;color: #101010;}
  37. .fixed-content_center .menuImageTask{width: 50px;height: 50px;}
  38. </style>
  39. </head>
  40. <body>
  41. <div class="content">
  42. <div class="fixed mask"></div>
  43. <div align="center" class="fixed tis">
  44. <div class="tis-content">
  45. <div class="tis-progress">
  46. 上传中..
  47. </div>
  48. </div>
  49. </div>
  50. <div class="fixed-content" style="border-radius: 10px 10px 0 0;">
  51. <div style="padding-top: 20px;">
  52. <text>目前只支持上传以下类型的文件</text>
  53. </div>
  54. <div class="fixed-content_center">
  55. <div>
  56. <image class="menuImageTask" src="../../static/task/excel.png"></image>
  57. <div>表格</div>
  58. </div>
  59. <div>
  60. <image class="menuImageTask" src="../../static/task/word.png"></image>
  61. <div>WORD文档</div>
  62. </div>
  63. <div>
  64. <image class="menuImageTask" src="../../static/task/pdf.png"></image>
  65. <div>PDF文档</div>
  66. </div>
  67. <div>
  68. <image class="menuImageTask" src="../../static/task/image.png"></image>
  69. <div>图片</div>
  70. </div>
  71. </div>
  72. <div class="btn " style="border-top: 1px solid #EAEAEA;padding-bottom: 15px;">
  73. <button type="button" class="btn-bg" style="background-color: white;color:#101010;font-weight: bold;font-size: 16px;">确定</button>
  74. <input class="file" type="file" />
  75. </div>
  76. </div>
  77. </div>
  78. <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  79. <script src="js/h5-uploader.js" type="text/javascript" charset="utf-8"></script>
  80. </body>
  81. </html>