.words-mask { z-index: 50; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } .words-mask .content { position: absolute; left: 0; right: 0; top: 1.14rem; bottom: 0; display: flex; flex-direction: column; background: #fff; border-radius: 0.06rem 0.06rem 0px 0px; } .words-mask .content .title-box { padding: 0 0.3rem 0.3rem; position: relative; border-bottom: 1px solid #f5f6f9; } .words-mask .content .title-box .tab-box { position: relative; display: flex; justify-content: space-between; padding: 0.4rem 2.2rem 0.3rem; font-size: 0.32rem; color: #9f9f9f; } .words-mask .content .title-box .tab-box .on { color: #3875ea; font-weight: bold; } .words-mask .content .title-box .tab-box .right-icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .words-mask .content .title-box .tab-box .right-icon .iconfont { margin-left: 0.2rem; font-size: 0.48rem; color: #c8cad0; } .words-mask .content .title-box .input-box { display: flex; align-items: center; width: 6.9rem; height: 0.64rem; padding-right: 0.05rem; margin-left: 0.18rem; border-radius: 0.32rem; overflow: hidden; } .words-mask .content .title-box .input-box>>>.ivu-input { background: #f5f6f9; } .words-mask .content .title-box .input-box>>>.ivu-input, .words-mask .content .title-box .input-box .ivu-input:hover, .words-mask .content .title-box .input-box .ivu-input:focus { border: transparent; box-shadow: none; } .words-mask .content .title-box .icon-cha1 { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .words-mask .content .scroll-box { flex: 1; display: flex; overflow: hidden; } .words-mask .content .scroll-box .scroll-left { width: 1.76rem; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #f5f6f9; } .words-mask .content .scroll-box .scroll-left .left-item { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 1.09rem; color: #282828; font-size: 0.26rem; } .words-mask .content .scroll-box .scroll-left .left-item.active { color: #3875ea; background: #fff; } .words-mask .content .scroll-box .scroll-left .left-item.active:after { content: ' '; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.06rem; height: 0.46rem; background: #3875ea; } .words-mask .content .scroll-box .scroll-left .left-item.add_cate { color: #9f9f9f; font-size: 0.26rem; } .words-mask .content .scroll-box .scroll-left .left-item.add_cate .iconfont { margin-right: 0.1rem; font-size: 0.24rem; } .words-mask .content .scroll-box .right-box { flex: 1; overflow: scroll; -webkit-overflow-scrolling: touch; } .words-mask .content .scroll-box .msg-item { padding: 0.25rem 0.3rem; color: #888; font-size: 0.28rem; } .words-mask .content .scroll-box .msg-item .title { margin-right: 0.2rem; color: #282828; } .words-mask .content .scroll-box .msg-item.add-mg { display: flex; align-items: center; justify-content: flex-end; font-size: 0.28rem; padding: 0.15rem 0.3rem; } .words-mask .content .scroll-box .msg-item.add-mg .iconfont { font-size: 0.36rem; margin-right: 0.1rem; } .words-box .mask-title { position: relative; text-align: center; margin-bottom: 0.5rem; color: #282828; font-size: 0.32rem; font-weight: bold; } .words-box .mask-title .iconfont { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #c8cad0; font-size: 0.44rem; font-weight: normal; } .words-box .input-box { height: 0.68rem; margin-top: 0.32rem; background: #f5f5f5; border-radius: 0.14rem; } .words-box .input-box.text-area { height: 1.92rem; } .words-box .input-box.text-area textarea { display: block; height: 100%; } .words-box .subBtn { width: 100%; height: 0.86rem; margin-top: 0.6rem; margin-bottom: 0.3rem; font-size: 0.3rem !important; border-radius: 0.43rem; } .words-box .subBtn[disabled] { background: #c8cad0; color: #fff; font-size: 0.3rem !important; } .edit-box { z-index: 99; position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; background: #fff; } .edit-box .head { padding: 0.4rem 0.3rem 0.3rem; } .edit-box .head .tit-bar { position: relative; text-align: center; font-size: 0.32rem; color: #282828; font-weight: bold; } .edit-box .head .tit-bar span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #3875ea; font-size: 0.28rem; font-weight: normal; } .edit-box .head .input-box { margin-top: 0.3rem; background: #f5f6f9; border-radius: 0.39rem; } .edit-box .scroll-box { flex: 1; display: flex; overflow: hidden; } .edit-box .scroll-box .scroll-left { display: flex; flex-direction: column; position: relative; width: 1.76rem; height: 100%; background: #f5f6f9; } .edit-box .scroll-box .scroll-left .top { flex: 1; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .edit-box .scroll-box .scroll-left .left-item { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 1.09rem; color: #282828; font-size: 0.26rem; } .edit-box .scroll-box .scroll-left .left-item.active { color: #3875ea; background: #fff; } .edit-box .scroll-box .scroll-left .left-item.active:after { content: ' '; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.06rem; height: 0.46rem; background: #3875ea; } .edit-box .scroll-box .scroll-left .left-item.add_cate { color: #9f9f9f; font-size: 0.26rem; } .edit-box .scroll-box .scroll-left .left-item.add_cate .iconfont { margin-right: 0.1rem; font-size: 0.24rem; } .edit-box .scroll-box .scroll-left .left-item.edits-box { color: #3875ea; } .edit-box .scroll-box .right-box { flex: 1; padding-left: 0.3rem; } .edit-box .scroll-box .msg-item { padding: 0.25rem 0.3rem 0.25rem 0; color: #888; font-size: 0.28rem; } .edit-box .scroll-box .msg-item .title { margin-right: 0.2rem; color: #282828; } .edit-box .scroll-box .msg-item.add-mg { display: flex; align-items: center; justify-content: flex-end; font-size: 0.28rem; padding: 0.15rem 0.3rem; } .edit-box .scroll-box .msg-item.add-mg .iconfont { font-size: 0.36rem; margin-right: 0.1rem; } .edit-box .scroll-box .msg-item .edit-bar { display: flex; align-items: center; justify-content: flex-end; margin-top: 0.25rem; padding-bottom: 0.1rem; border-bottom: 1px solid #f0f2f7; } .edit-box .scroll-box .msg-item .edit-bar .iconfont { margin-left: 0.3rem; font-size: 0.32rem; } .cate-list .list-box { max-height: 7.5rem; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .cate-list .list-box .item { display: flex; align-items: center; justify-content: space-between; height: 1rem; border-bottom: 1px solid #f0f2f7; color: #282828; font-size: 0.28rem; } .cate-list .list-box .item .iconfont { color: #9f9f9f; font-size: 0.32rem; margin-left: 0.4rem; } .kf_mobile .ivu-modal-wrap { display: flex; align-items: center; justify-content: center; } .vertical-center-modal { display: flex; align-items: center; justify-content: center; } .ivu-modal { top: 0; } .noinput input, .noinput textarea { border-color: transparent !important; background: transparent !important; resize: none; } .noinput input:hover, .noinput input:focus, .noinput textarea:hover, .noinput textarea:focus { border-color: transparent !important; box-shadow: none !important; }