From a3072ae35f4301de0adda3b01bf7ef960923ed30 Mon Sep 17 00:00:00 2001 From: "201530126012@qq.com" <22279326bbq> Date: Thu, 10 Jan 2019 02:29:51 +0800 Subject: [PATCH] Page for User information Blanks --- Front-end/个人信息表单/index.html | 55 ++++ Front-end/个人信息表单/style.css | 336 ++++++++++++++++++++++++ 2 files changed, 391 insertions(+) create mode 100644 Front-end/个人信息表单/index.html create mode 100644 Front-end/个人信息表单/style.css diff --git a/Front-end/个人信息表单/index.html b/Front-end/个人信息表单/index.html new file mode 100644 index 0000000..5f9ef25 --- /dev/null +++ b/Front-end/个人信息表单/index.html @@ -0,0 +1,55 @@ + + + + + 填写信息 + + + + + + + + +
+
+ + + +
+ 填写身份信息 +
+ + + +
+
+
+
+

请填写对应的真实信息！

+
+
+

您的个人信息:

+ + + + +
+
+

请确保填写的信息无误！

+
+
+ +
+
+
+ +
+ + diff --git a/Front-end/个人信息表单/style.css b/Front-end/个人信息表单/style.css new file mode 100644 index 0000000..40f8b51 --- /dev/null +++ b/Front-end/个人信息表单/style.css @@ -0,0 +1,336 @@ +/* + +*/ +html,body { + color: #333; + margin: 0; + height: 100%; + font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: normal; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +a { + text-decoration: none; + color: #000; +} + +a, label, button, input, select { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +img { + border: 0; +} + +body { + background: #fff; + color: #666; +} + +html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + color: #08acee; +} + +button { + outline: 0; +} + +img { + border: 0; +} + +button,input,optgroup,select,textarea { + margin: 0; + font: inherit; + color: inherit; + outline: none; +} + +li { + list-style: none; +} + +a { + color: #666; +} + +.clearfix::after { + clear: both; + content: "."; + display: block; + height: 0; + visibility: hidden; +} + +.clearfix { +} + +/* 必要布局样式css */ +.aui-flexView { + width: 100%; + height: 100%; + margin: 0 auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.aui-scrollView { + width: 100%; + height: 100%; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + position: relative; + margin-top: 0; +} + +.aui-navBar { + height: 44px; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + z-index: 1002; + background: #fff; + padding-bottom: 20px; +} + +.aui-navBar-item { + height: 44px; + min-width: 25%; + -webkit-box-flex: 0; + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + padding: 0 0.9rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + font-size: 0.7rem; + white-space: nowrap; + overflow: hidden; + color: #a0a0a0; + position: relative; +} + +.aui-navBar-item:first-child { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + margin-right: -25%; + font-size: 0.9rem; + font-weight: bold; +} + +.aui-navBar-item:last-child { + -webkit-box-ordinal-group: 4; + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.aui-center { + -webkit-box-ordinal-group: 3; + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + height: 44px; + width: 50%; + margin-left: 25%; +} + +.aui-center-title { + text-align: center; + width: 100%; + white-space: nowrap; + overflow: hidden; + display: block; + text-overflow: ellipsis; + font-size: 0.95rem; + color: #333; +} + +.icon { + width: 20px; + height: 20px; + display: block; + border: none; + float: left; + background-size: 20px; + background-repeat: no-repeat; +} + +.icon-return { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACh0lEQVRoQ+3ZMW8TMRQH8PcOsTBQISExVCIRCwgWFvZ+hZYBpIrEcTYkBsTGlI2VDamL3YEBpWJoR1BJaOlXYEzyDYp0bMRGRjnJoDuWs/1e3EbKeHf55b33vzsb4YJ98IJ54RKce8XZV1gIcQ8AviDiD2vtC631pzZFYQ2WUt611p4CwM0VcqqU2soSXIN1ztdKqTfZgRuw75RSz9tg3bHsWjomlh04NpYVOAWWDbjf7z8oimLipbH7bUopJdvO7L/Hk8+wwyLiCSLe8H6cww4BwGYFTo0lbWkKLBmYCksCrsNaa99rrZ/FmFnS0GrCdrvd3mg0MqEDqu58yVKaAzZZSwshHgLAsX/rcW2csrJVtaNXeIWdIuL16qJU2OgVrsMCwEGn03mSamaThVYTtizLp+PxeJkioJKFFldslJbmjA0O5o4NCm7AHpZluUM5s1FCSwjxCAA++7ceADiczWaPJ5PJL6qAihJaUspdY8w+Il7xLsASG6SlhRA/EfGa91BxNJ/Pd7hVNtiT1mAwOAeADXdCa637Hi0Wi3zBUsptY8wHRLzqwIh/nlbzbWmna0roLEOrmo11QQd9W1oHdFDwOrR3cLCH/uuFn0uQRQE7dMPKJHl6RwNzRUcF/w9N9VIRHVyhazbLDihWP5KAHbphOzQ5OhmYCzopmAM6OZgaTQL20FMAuOUtHESfaTLwCn3HWnuWEk0KpkCTg1OjWYArtDHmKyJu+jMdeh+KDdghh8NhZ7lcfvPRoXcaWYFToNmBY6NZgj20m+nb3pr3W631yzY7GWzBDtXr9TaLojjz0N+VUvezBXvoPQBw0Fda649Zg9vg6o5l3dKhse58l+AY/yqnc/4GvNDoTFOq8FwAAAAASUVORK5CYII="); +} + +.aui-view-box { + padding: 1rem; +} + +.aui-view-box-item h2 { + font-size: 0.8rem; + color: #484848; + padding: 0.8rem 0; +} + +.aui-view-box-item textarea { + background: #f4f4f4; + border-radius: 5px; + padding: 0.8rem; + border: none; + width: 100%; + font-size: 0.8rem; + resize: none; + height: 10rem; +} + +.aui-view-box-item input { + background: #f4f4f4; + border-radius: 5px; + padding: 0.8rem; + border: none; + width: 100%; + font-size: 0.8rem; + resize: none; + margin-bottom: 0.8rem; +} + +.aui-view-box-item p { + color: #bdbdbd; + font-size: 0.8rem; + padding-bottom: 1rem; +} + +.aui-btn-submit button { + text-align: center; + position: relative; + border: none; + pointer-events: auto; + width: 100%; + display: block; + font-size: 0.8rem; + height: 3rem; + line-height: 3rem; + margin-top: 0.5rem; + border-radius: 50px; + background: #17bd88; + color: #fff; +} + +.aui-footer { + width: 100%; + position: relative; + z-index: 100; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding: .104rem 0 .07rem; + background-color: rgba(255, 255, 255, 0.96); +} + +.aui-footer-fixed { + position: fixed; + bottom: 0; + left: 0; + z-index: 49; +} + +.aui-footer p { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + color: #979797; +} + +.aui-footer p { + color: #999; + font-size: 0.8rem; + padding-bottom: 15px; +} + +.aui-footer p em { + color: #17bd88; + font-style: normal; +}