@charset "utf-8"; html, body, form { width: 100%; height: 100%; margin: 0; font-size: 14px; background-color: #F8F8F8; font-family: "微软雅黑"; color: #333333; } a { text-decoration: none; } input:-ms-input-placeholder { font-size: 13px; color: #BFBFBF; } input::-webkit-input-placeholder { font-size: 13px; color: #BFBFBF; } input::-moz-placeholder { font-size: 13px; color: #BFBFBF; } input[type=text], textarea, input[type=number], input[type=password] { border: none; outline: none; background-color: rgba(0, 0, 0, 0); } textarea:-ms-input-placeholder { font-size: 13px; color: #BFBFBF; } textarea::-webkit-input-placeholder { font-size: 13px; color: #BFBFBF; } textarea::-moz-placeholder { font-size: 13px; color: #BFBFBF; 1 } .clear { clear: both; } .banner-area { width: 100%; height: 180px; overflow: hidden; position: relative; } .cartoon { position: relative; padding: 0; width: 100%; height: 180px; overflow: hidden; } .cartoon>.cartoon-main { position: relative; margin: 0; padding: 0; width: 100%; height: 180px; transform: translateX(-100%); transition: all 0.3s ease 0s; } .cartoon>.cartoon-main>div { position: absolute; height: 180px; width: 100%; overflow: hidden; } .cartoon>.cartoon-main>div>img { width: 100%; height: 100%; } .cartoon>.cartoon-Index { position: absolute; bottom: 8px; text-align: center; left: 0; width: 100%; } .cartoon>.cartoon-Index>span { width: 8px; height: 3px; background-color: #FFFFFF; margin: 0 2px; display: inline-block; filter: alpha(Opacity=80); -moz-opacity: 0.5; opacity: 0.5; } .cartoon>.cartoon-Index>.selected { width: 12px; filter: alpha(Opacity=80); -moz-opacity: 1; opacity: 1; } .ender { width: 100%; height: 50px; padding: 6px 0; text-align: center; line-height: 25px; color: #CDCDCD; } .ender>div { width: 100%; height: 25px; overflow: hidden; text-align: center; position: relative; } .ender>div>img { position: absolute; top: 50%; left: 50%; margin-left: 0; transform: translate(-50%, -50%); height: 200%; width: auto; } .ender>div>span { font-size: 11px; } /* 日期框 */ .alert-hide, .alert-datetime-hide { height: 100%; width: 100%; position: fixed; top: 0; left: 0; background-color: #000000; filter: alpha(Opacity=80); -moz-opacity: 0.5; opacity: 0.5; z-index: 6; } .select-area, .select-type-area, .select-content-area, .select-datetime-area { width: 100%; height: 0; position: fixed; bottom: 0; left: 0; background-color: #FFFFFF; z-index: 7; overflow-y: scroll; } .select-content-area{ height: 100% !important; top: 100%; } .select-area>.select-title, .select-type-area>.select-title, .select-content-area>.select-title, .select-datetime-area>.select-title { width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #F0F0F0; color: #777777; font-size: 14px; position: relative; top: 0; left: 0; } .select-area>.select-title>.select-btn, .select-content-area>.select-title>.select-btn, .select-datetime-area>.select-title>.select-btn { width: 60px; position: absolute; top: 0; right: 0; color: #F2AA3E; } .select-area>.select-title>.cancel-btn, .select-content-area>.select-title>.cancel-btn, .select-datetime-area>.select-title>.cancel-btn { width: 60px; position: absolute; top: 0; left: 0; color: #777777; font-size: 18px; } .select-datetime-area>.select-title>.cancel-btn { font-size: 14px !important; } .select-area>.select-options { width: 100%; line-height: 40px; font-size: 12px; } .select-area>.select-options>.radio { width: 92%; height: 40px; border-bottom: 1px solid #F0F0F0; padding: 0 4%; } .select-area>.select-options>.check { width: 28%; box-sizing: border-box; margin: 15px 0 0 4%; border: 2px solid #EDEDED; border-radius: 5px; text-align: center; float: left; line-height: 30px; } .select-area>.select-options>.selected { border: 2px solid #EF5C0C !important; color: #EF5C0C !important; } .select-options>.check-data { display: none; } .select-list-height { width: 100%; height: 40px; } .select-list-area { width: 50%; height: 100%; float: left; overflow-y: scroll; } .select-list-area>.list-type { width: 100%; height: 40px; background-color: #FFFFFF; line-height: 40px; box-sizing: border-box; padding: 0 8%; font-size: 12px; } .select-list-area>.selected { background-color: #F8F8F8; color: #EF5C0C; } .select-list-area>.list-type>span { float: right; } .select-list-area>.list-detail { width: 100%; height: 40px; background-color: #F8F8F8; line-height: 40px; box-sizing: border-box; padding: 0 8%; font-size: 12px; } .select-content-area { background-color: #F0F0F0 !important; } .select-content-area>.model-content { background-color: #FFFFFF !important; padding: 15px 0; margin-bottom: 10px; } .alert-datetime-hide { z-index: 8 !important; } .select-datetime-area { z-index: 9 !important; } .select-datetime-area>.datetime-area { width: 100%; height: 150px; margin: 20px 0; text-align: center; color: #777777; line-height: 30px; position: relative; overflow: hidden; } .select-datetime-area>.datetime-area>.datetime-options { height: 150px; float: left; overflow-y: scroll; } .select-datetime-area>.datetime-area>.datetime-year { width: 100% !important; } .select-datetime-area>.datetime-area>.datetime-year-month { width: 50% !important; } .select-datetime-area>.datetime-area>.datetime-year-month-day { width: 33.3% !important; } .select-datetime-area>.datetime-area>.datetime-year-month-day-hour { width: 25% !important; } .select-datetime-area>.datetime-area>.datetime-year-month-day-hour-minute { width: 20% !important; } .select-datetime-area>.datetime-area>.datetime-options>div { width: 100%; height: 30px; } .select-datetime-area>.datetime-area>.shelter-area { width: 100%; height: 30px; position: absolute; background-color: #EDEDED; top: 60px; left: 0; z-index: -1; } /* 颜色选择 */ .select-color{ width: 100%; height: 0; position: fixed; bottom: 0; left: 0; background-color: #FFFFFF; z-index: 9; } .select-color > .select-title{ width: 100%; height: 40px; text-align: center; position: relative; line-height: 40px; font-size: 14px; background-color: #F0F0F0; } .select-color > .select-title > .select-btn{ width: 60px; position: absolute; top: 0; right: 0; color: #F2AA3E; } .select-color > .select-title > .cancel-btn { width: 60px; position: absolute; top: 0; left: 0; color: #777777; } .select-color > .color-content{ width: 100%; height: 320px; overflow-y: scroll; } #color_more{ display: none; } .select-color > .color-content > .color-btn-area{ width: 350px; margin: 10px auto; } .select-color > .color-content > .color-btn-area > .color-btn{ width: 50px; height: 50px; margin: 10px; float: left; background-color: #0088CC; border-radius: 10px; position: relative; box-shadow:1px 1px 3px #ACACAC; } .select-color > .color-content > .color-btn-area > .color-btn > .color-selected{ width: 15px; height: 15px; position: absolute; bottom: -5px; right: -5px; border-radius: 50%; border: 2px solid #FFFFFF; background-color: #006DCC; text-align: center; font-size: 10px; line-height: 15px; color: #FFFFFF; } .select-color > .color-content > .more-btn{ width: 320px; height: 40px; background-color: #F0F0F0; line-height: 40px; text-align: center; margin: 30px auto; color: #777777; font-weight: bold; font-size: 14px; border-radius: 5px; } .select-color > .color-content > .more-bar-area{ width: 320px; margin: 23px auto 0 auto; } .select-color > .color-content > .more-bar-area > .more-bar{ width: 255px; height: 10px; float: left; position: relative; margin: 5px 0; } .select-color > .color-content > .more-bar-area > .more-bar-r{ background-image: linear-gradient(to right, rgb(0,0,0), rgb(255,0,0)); } .select-color > .color-content > .more-bar-area > .more-bar-g{ background-image: linear-gradient(to right, rgb(0,0,0), rgb(0,255,0)); } .select-color > .color-content > .more-bar-area > .more-bar-b{ background-image: linear-gradient(to right, rgb(0,0,0), rgb(0,0,255)); } .select-color > .color-content > .more-bar-area > .more-bar > div{ width: 20px; height: 20px; border-radius: 50%; background-color: #FFFFFF; position: absolute; top: -6px; left: 250px; background-image: linear-gradient(to right, #F0F0F0, #FFFFFF); box-shadow:1px 1px 2px #ACACAC; touch-action: none; } .select-color > .color-content > .more-bar-area > .more-number{ width: 50px; height: 20px; float: right; position: relative; text-align: center; line-height: 20px; font-size: 14px; color: #777777; font-weight: bold; } .select-color > .color-content > .more-color-area{ width: 320px; margin: 20px auto 0 auto; color: #777777; font-size: 14px; } .select-color > .color-content > .more-color-area > .more-color{ width: 320px; height: 40px; background-color: rgb(255,255,255); margin: 10px auto 0 auto; box-shadow:1px 1px 3px #ACACAC; } /* 未知 */ .model-content>.title { color: #ACACAC; font-size: 10px; line-height: 20px; text-align: center; } .model-content>.horizontal-item { width: 50%; float: left; text-align: center; } .model-content>.horizontal-33 { width: 33.3% !important; } .model-content>.input-item { width: 100%; text-align: center; margin: 10px 0; } .model-content>.horizontal-item>.title, .model-content>.input-item>.title { color: #ACACAC; font-size: 10px; line-height: 20px; } .model-content>.horizontal-33>.info { width: 100%; height: 40px; overflow: hidden; } .model-content>.horizontal-item>.info, .model-content>.input-item>.info { color: #333333; font-size: 16px; line-height: 40px; } .model-content>.input-item>.info>input { width: 90%; height: 40px; text-align: center; font-size: 18px; box-sizing: border-box; } .model-content>.input-item>.info>input:-ms-input-placeholder { font-size: 18px; color: #BFBFBF; } .model-content>.input-item>.info>input::-webkit-input-placeholder { font-size: 18px; color: #BFBFBF; } .model-content>.input-item>.info>input::-moz-placeholder { font-size: 18px; color: #BFBFBF; } .model-content>.add-experience { width: 150px; height: 35px; border: 1px solid #EF5C0C; border-radius: 50px; text-align: center; line-height: 35px; color: #EF5C0C; margin: 20px auto; } .model-content>textarea { width: 100%; height: 100px; line-height: 20px; } /* 单选 */ .select-area { width: 100%; height: 0; position: absolute; bottom: 0px; left: 0; background-color: #FFFFFF; } .select-area>.select-title { width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #F0F0F0; color: #777777; font-size: 14px; position: relative; } .select-area>.select-title>.select-btn { width: 60px; position: absolute; top: 0; right: 0; color: #F2AA3E; } .select-area>.select-options { width: 100%; line-height: 40px; font-size: 12px; } .select-area>.select-options>.Radio { width: 90%; margin:0px auto; height: 40px; border-bottom: 1px solid #F0F0F0; padding: 0 4%; } .select-area>.select-options>.Check { width: 90%; box-sizing: border-box; margin: 15px 0 0 4%; border: 2px solid #EDEDED; border-radius: 5px; text-align: center; float: left; line-height: 30px; } .selected { background-color: #F8F8F8; color: #EF5C0C; } /* 多选框 */ .select-type-area { width: 100%; height: 0; position: absolute; bottom: 0px; left: 0; background-color: #FFFFFF; } .select-type-area>.select-title { width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #F0F0F0; color: #777777; font-size: 14px; position: relative; } .select-type-area>.select-title>.select-btn { width: 60px; position: absolute; top: 0; right: 0; color: #F2AA3E; } .select-list-height { width: 100%; height: 40px; } .select-list-area { width: 50%; height: 100%; float: left; overflow-y: scroll; } .select-list-area>.list-type { width: 100%; height: 40px; background-color: #FFFFFF; line-height: 40px; box-sizing: border-box; padding: 0 8%; font-size: 12px; } .select-list-area>.list-type>span { float: right; } .select-list-area>.list-detail { width: 100%; height: 40px; background-color: #F8F8F8; line-height: 40px; box-sizing: border-box; padding: 0 8%; font-size: 12px; }