@media screen and (min-width: 768px) { .form .form-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 25px; } .form .form-item .form-label { font-size: 16px; color: #999; line-height: 40px; min-width: 100px; text-align: right; margin-right: 16px; } .form .form-item .form-label em { color: #ff0000; margin-right: 4px; } .form .form-item .form-control { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: #505050; font-size: 16px; } .form .form-item .form-control.input input { display: block; width: 100%; line-height: 40px; border: 1px solid #dedede; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 16px; border-radius: 4px; } .form .form-item .form-control.textarea textarea { display: block; width: 100%; line-height: 26px; border: 1px solid #dedede; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 8px 16px; border-radius: 2px; resize: none; } .form .form-item .form-control.select-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .form .form-item .form-control.select-group .select { width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; margin-right: 16px; border: 1px solid #e8e8e8; border-radius: 2px; } .form .form-item .form-control.select-group .select:last-child { margin-right: 0; } .form .form-item .form-control.select-group .select select { display: block; width: 100%; border: 0; line-height: 40px; padding: 0 16px; padding-right: 40px; color: #272727; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 2px; } .form .form-item .form-control.select-group .select::after { position: absolute; right: 0; top: 0; content: ""; z-index: 1; display: block; width: 40px; height: 40px; background: url(/img/icon-arrow-down.png) no-repeat center; background-size: 24px 24px; pointer-events: none; } .form .form-item .form-control.radio { line-height: 40px; } .form .form-item .form-control.radio label { margin-right: 35px; } .form .form-item .form-control.radio input { margin-right: 10px; } .form .form-item .form-control.upload-image input { display: none; } .form .form-item .form-control.upload-image .tip { width: 120px; height: 120px; border: 1px solid #dedede; margin-top: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 80px; text-align: center; font-size: 14px; color: #999; cursor: pointer; position: relative; } .form .form-item .form-control.upload-image .tip::before, .form .form-item .form-control.upload-image .tip::after { content: ""; display: block; position: absolute; background: #dedede; width: 2px; height: 30px; left: 50%; top: 50%; } .form .form-item .form-control.upload-image .tip::before { -webkit-transform: translateX(-50%) translateY(-80%); transform: translateX(-50%) translateY(-80%); } .form .form-item .form-control.upload-image .tip::after { -webkit-transform: translateX(-50%) translateY(-80%) rotateZ(90deg); transform: translateX(-50%) translateY(-80%) rotateZ(90deg); } .form .form-item .form-control.upload-file [type=file] { display: none; } .form .form-item .form-control.upload-file .button { line-height: 40px; width: 207px; background: #0688d2; color: #fff; text-align: center; margin-left: 16px; cursor: pointer; -webkit-transition: all 0.4s; transition: all 0.4s; } .form .form-item .form-control.upload-file .button:hover { background: #077ec4; } .form .form-submit { text-align: center; margin-top: 80px; } .form .form-submit button { width: 330px; height: 48px; background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0; cursor: pointer; margin: 0 24px; -webkit-transition: all 0.4s; transition: all 0.4s; } .form .form-submit [type=reset] { border: 1px solid #0688d2; color: #0688d2; line-height: 46px; } .form .form-submit [type=reset]:hover { border-color: #0679b8; color: #0679b8; } .form .form-submit [type=submit] { background: #0688d2; color: #fff; line-height: 48px; } .form .form-submit [type=submit]:hover { background: #077ec4; } } @media screen and (max-width: 768px) { .form .form-item { margin-bottom: 0.32rem; } .form .form-item.inline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .form .form-item.inline .form-label { line-height: 0.9rem; margin-right: 0.16rem; margin-bottom: 0; min-width: 1rem; } .form .form-item .form-label { font-size: 0.26rem; color: #999; margin-bottom: 0.16rem; } .form .form-item .form-label em { color: #ff0000; margin-right: 0.08rem; } .form .form-item .form-control { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: #505050; font-size: 0.24rem; } .form .form-item .form-control.input input { display: block; width: 100%; line-height: 0.9rem; border: 1px solid #dedede; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0.24rem; border-radius: 0.04rem; } .form .form-item .form-control.textarea textarea { display: block; width: 100%; line-height: 0.48rem; border: 0.01rem solid #dedede; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0.16rem 0.24rem; border-radius: 0.02rem; resize: none; } .form .form-item .form-control.select-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .form .form-item .form-control.select-group .select { width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; margin-right: 0.24rem; border: 0.01rem solid #e8e8e8; border-radius: 0.02rem; } .form .form-item .form-control.select-group .select:last-child { margin-right: 0; } .form .form-item .form-control.select-group .select select { display: block; width: 100%; border: 0; line-height: 0.9rem; padding: 0 0.24rem; padding-right: 0.4rem; color: #272727; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.02rem; } .form .form-item .form-control.select-group .select::after { position: absolute; right: 0; top: 0; content: ""; z-index: 1; display: block; width: 0.9rem; height: 0.9rem; background: url(/img/icon-arrow-down.png) no-repeat center; background-size: 0.24rem 0.24rem; pointer-events: none; } .form .form-item .form-control.radio { line-height: 0.9rem; } .form .form-item .form-control.radio label { margin-right: 0.35rem; } .form .form-item .form-control.radio input { margin-right: 0.1rem; } .form .form-item .form-control.upload-image input { display: none; } .form .form-item .form-control.upload-image .tip { width: 1.62rem; height: 1.62rem; border: 0.01rem solid #dedede; margin-top: 0.2rem; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 1.2rem; text-align: center; font-size: 0.24rem; color: #999; cursor: pointer; position: relative; } .form .form-item .form-control.upload-image .tip::before, .form .form-item .form-control.upload-image .tip::after { content: ""; display: block; position: absolute; background: #dedede; width: 2px; height: 30px; left: 50%; top: 50%; } .form .form-item .form-control.upload-image .tip::before { -webkit-transform: translateX(-50%) translateY(-80%); transform: translateX(-50%) translateY(-80%); } .form .form-item .form-control.upload-image .tip::after { -webkit-transform: translateX(-50%) translateY(-80%) rotateZ(90deg); transform: translateX(-50%) translateY(-80%) rotateZ(90deg); } .form .form-item .form-control.upload-file [type=file] { display: none; } .form .form-item .form-control.upload-file .button { line-height: 0.9rem; width: 2rem; background: #0688d2; color: #fff; text-align: center; margin-left: 0.24rem; cursor: pointer; -webkit-transition: all 0.4s; transition: all 0.4s; } .form .form-item .form-control.upload-file .button:hover { background: #077ec4; } .form .form-submit { text-align: center; margin-top: 1rem; } .form .form-submit button { width: 6rem; height: 0.9rem; background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0; cursor: pointer; -webkit-transition: all 0.4s; transition: all 0.4s; font-size: 0.26rem; } .form .form-submit [type=reset] { border: 0.01rem solid #0688d2; color: #0688d2; line-height: 0.88rem; } .form .form-submit [type=reset]:hover { border-color: #0679b8; color: #0679b8; } .form .form-submit [type=submit] { background: #0688d2; color: #fff; line-height: 0.9rem; } .form .form-submit [type=submit]:hover { background: #077ec4; } }