@charset "utf-8"; /* 弹窗验证组件 */ @import url('jigsaw.css'); /* 错误提示 */ .message-box { display: none; padding: 10px 10px; position: fixed; top: 50%; left: 50%; /* width: 3rem; */ /*height: .4rem;*/ /*line-height: .4rem;*/ font-size: 14px; color: #FFFFFF; text-align: center; background: rgba(0,0,0,0.7); border-radius: 5px; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 100; } /* 弹窗提示 */ .message_body { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: left; font-size: 14px; color: #333333; line-height: 19px; z-index: 99; } .message_body::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); } .message_main { position: relative; top: 42%; left: 50%; width: 260px; background-color: #fff; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 10; } .message_main .message_head { padding: 12px 20px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #F8F8F8; } #messageClose{ cursor: pointer; position: absolute; top: 10px; right: 20px; display: inline-block; width: 16px; height: 16px; background: url(../image/form/close.png) no-repeat; -o-background-size: cover; background-size: cover; } .message_main .message_cen { padding: 24px 20px; } .message_main .message_btn { padding: 0 20px 12px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } #messageSub { cursor: pointer; padding: 4px 16px; color: #FFFFFF; background: #2F8DED; /* border-radius: 5px; */ } /* 提交成功弹窗 */ .messageSub_main { position: relative; top: 42%; left: 50%; width: 690px; background-color: #fff; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 10; } .messageSub_main .message_head { padding: 19px 36px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; } .messageSub_main #messageClose { width: 26px; height: 26px; } .messageSub_main .message_cen { padding: 30px 0 100px 0; text-align: center; font-size: 16px; color: #676767; line-height: 21px; } .messageSub_main .message_img { margin: 0 auto 18px; width: 63px; height: 63px; background: url(../image/form/tijiao.png) no-repeat; -o-background-size: cover; background-size: cover; } .message_title { margin-bottom: 18px; font-weight: bold; font-size: 24px; color: #0B244B; line-height: 31px; } /* 自定义下拉选择框 */ .yq-select{ position:relative; width: 400px; height: 40px; background: #FFFFFF; } .yq-select1 { position:relative; /* width: auto; */ height: auto; background: #FFFFFF; } .yq-select .select-input{ display: block; width:100%; height:40px; line-height: 40px; padding: 0px 5px; border: 1px solid #ccc; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url("../image/icon/icon-xia.png") no-repeat 98% center; -o-background-size: 27px 27px; background-size: 27px 27px; } .yq-select .select-input.sel, .yq-select .is-focus .select-input { background: url("../image/icon/icon-shang.png") no-repeat 98% center; -o-background-size: 27px 27px; background-size: 27px 27px; } .yq-select .select-box{ display: none; /* padding: 0 14px; */ position: absolute; top: 50px; width: 100%; line-height: 40px; height: 240px; /* overflow-y: auto; */ z-index: 10; background: #fff; border-radius: 5px; border: 1px solid #E0E1E3; -webkit-box-shadow: 0px 0px 10px 0px rgba(177,175,182,0.09); box-shadow: 0px 0px 10px 0px rgba(177,175,182,0.09); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .yq-select .dis_flex { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .yq-select .select-li-val, .yq-select .layui-form-select .layui-anim { padding: 0 14px; width: -webkit-calc(100% + 8px); width: -moz-calc(100% + 8px); width: calc(100% + 8px); left: -4px; height: 240px; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; } .yq-select li, .yq-select .layui-form-select dd{ padding: 6px 3px; height: 27px; line-height: 27px; border-bottom: 1px solid #F1F4F6; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .yq-select li:hover, .yq-select .layui-form-select dd:hover{ color: #0068B7; background-color: transparent; } .yq-select li.selected, .yq-select .layui-form-select dd.layui-this{ position: relative; color: #0068B7; background-color: transparent; } .yq-select li.selected:before, .yq-select .layui-form-select dd.layui-this::before { content: "✔"; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #0068B7; font-size: 14px; } .select-li-lab { width: 104px; height: 240px; -webkit-box-shadow: 0px 0px 20px 0px rgba(177,175,182,0.34); box-shadow: 0px 0px 20px 0px rgba(177,175,182,0.34); overflow-y: auto; } .yq-select1 .select-li-lab, .yq-select1 .select-li-val{ height: auto; overflow: unset; } /* 隐藏滚动条 */ .select-li-lab::-webkit-scrollbar, .select-li-val::-webkit-scrollbar { /* display: none; */ /* scrollbar-width: none; -ms-overflow-style: none; */ /* width: 0; height: 0; z-index: 11; width: 6px; */ } .select-li-lab li { padding: 10px 10px; height: 20px; line-height: 20px; border: 0; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .select-li-lab li:hover, .select-li-lab li.selected { color: #fff; background: #0068B7; border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -ms-border-radius: 5px 0 0 5px; -o-border-radius: 5px 0 0 5px; } .select-li-lab li.selected:before { content: ""; } @media (max-width: 1200px) { .el-scrollbar { overflow: unset !important; } .message-box { padding: .15rem 0; width: 5.3rem; /*height: .7rem;*/ /*line-height: .7rem;*/ font-size: .28rem; } .yq-select{ width: 100%; height: .76rem; line-height: .76rem; font-size: .28rem; } .yq-select1 { width: 94%; height: auto; } .yq-select .select-input { padding: 0 .2rem; height: .76rem; line-height: .76rem; -o-background-size: .30rem .30rem; background-size: .30rem .30rem; } .yq-select .select-box { top: .76rem; height: 4.8rem; } /* .yq-select li { padding: .2rem 0; height: .4rem; line-height: .4rem; } */ .select-li-lab { width: 1.54rem; height: 4.8rem; } .select-li-lab li{ padding: 10px .16rem; height: 20px; line-height: 20px; } .yq-select .layui-form-select .layui-anim { left: -2px; width: 102%; height: 6.4rem; border: 1px solid #E0E1E3; } .yq-select .layui-form-select dd{ padding: .2rem .16rem; height: .4rem; line-height: .4rem; } .yq-select .select-li-val { height: 4.8rem; } .layui-form-select dl { top: .80rem !important; } /* 弹窗 */ .message_main { width: 4.74rem; font-weight: bold; font-size: .30rem; color: #333333; line-height: .42rem; } .message_main .message_head { padding: .16rem .36rem; } #messageClose { width: .26rem; height: .26rem; } .message_main .message_cen { padding: .48rem .36rem .38rem .36rem; font-size: .28rem; font-weight: 400; line-height: .40rem; } #messageSub { padding: .06rem .22rem; font-size: .26rem; font-weight: 400; line-height: .38rem; color: #FFFFFF; } .messageSub_main { width: 5.55rem; } .messageSub_main .message_cen { padding: 0 0 .65rem 0; font-weight: 400; font-size: .24rem; color: #333333; line-height: .33rem; } .messageSub_main .message_img { margin-bottom: .22rem; width: .82rem; height: .82rem; } .messageSub_main .message_title { margin-bottom: .1rem; font-weight: bold; font-size: .36rem; color: #0B244B; line-height: .50rem; } }