diff --git a/contact-center/app/src/main/resources/static/im/css/ukefu.css b/contact-center/app/src/main/resources/static/im/css/ukefu.css index bcc33433..94b1a272 100644 --- a/contact-center/app/src/main/resources/static/im/css/ukefu.css +++ b/contact-center/app/src/main/resources/static/im/css/ukefu.css @@ -1,177 +1,217 @@ -*{ - margin: 0; - padding: 0; +* { + margin: 0; + padding: 0; } -body{ - overflow: hidden; - border:none; + +body { + overflow: hidden; + border: none; } -img{ - border:none; + +img { + border: none; } -html,body,.large{ - height: 100%; - font-family: 'Microsoft Yahei', 'Tahoma, Arial'; - font-size: 14px; - font-weight: 200; + +html, body, .large { + height: 100%; + font-family: 'Microsoft Yahei', 'Tahoma, Arial'; + font-size: 14px; + font-weight: 200; } -input, textarea, select, button{ - font-family: 'Microsoft Yahei', 'Tahoma, Arial'; + +input, textarea, select, button { + font-family: 'Microsoft Yahei', 'Tahoma, Arial'; } -p{margin: 0 0 10px;} -ul,li{ - list-style: none; + +p { + margin: 0 0 10px; } -input,textarea{ - padding:4px 6px; - color: #555; - vertical-align: middle; - /*width: 206px;*/ + +ul, li { + list-style: none; +} + +input, textarea { + padding: 4px 6px; + color: #555; + vertical-align: middle; + /*width: 206px;*/ } /*万能清浮动*/ -.clearfix:before,.clearfix:after{ - display:block; - content:""; +.clearfix:before, .clearfix:after { + display: block; + content: ""; } -.clearfix:after{ - clear:both; + +.clearfix:after { + clear: both; } -.clearfix{zoom:1;} + +.clearfix { + zoom: 1; +} + /*header*/ -#header{ - width: 100%; - height: 50px; - position: absolute; +#header { + width: 100%; + height: 50px; + position: absolute; z-index: 100000; - top:0px; + top: 0px; } -#header img{ - border: 0; + +#header img { + border: 0; } -#header .logo{ - height: 50px; - display: inline-block; - float: left; + +#header .logo { + height: 50px; + display: inline-block; + float: left; } -#header .logo img{ - height: 50px; + +#header .logo img { + height: 50px; } -#header .toggle-color{ - float: left; - margin-left: 50%; - position: relative; - left:-25%; - padding-top: 12px; + +#header .toggle-color { + float: left; + margin-left: 50%; + position: relative; + left: -25%; + padding-top: 12px; } -#header .toggle-color a{ - width: 15px; - height: 15px; - background-color: #fff; - display: inline-block; - border:1px solid #fff; - border-radius: 5px; + +#header .toggle-color a { + width: 15px; + height: 15px; + background-color: #fff; + display: inline-block; + border: 1px solid #fff; + border-radius: 5px; } -#header .toggle-color #skin1{ - border-color: #377FED; + +#header .toggle-color #skin1 { + border-color: #377FED; } -#header .toggle-color #skin2{ - border-color: #67CAFF; + +#header .toggle-color #skin2 { + border-color: #67CAFF; } -#header .toggle-color #skin3{ - border-color: #8E8E8E; + +#header .toggle-color #skin3 { + border-color: #8E8E8E; } -#header .toggle-color #skin4{ - border-color: #32c24d; + +#header .toggle-color #skin4 { + border-color: #32c24d; } -#header .toggle-color #skin5{ - border-color: #E45DB3; + +#header .toggle-color #skin5 { + border-color: #E45DB3; } -#header .toggle-color #skin6{ - border-color: #FF626F; + +#header .toggle-color #skin6 { + border-color: #FF626F; } -#header .head-rig{ - float: right; - height: 50px; + +#header .head-rig { + float: right; + height: 50px; } -#header .head-rig li{ - float:left; - width: 103px; - height:28px; - border:1px solid #c9c9c9; + +#header .head-rig li { + float: left; + width: 103px; + height: 28px; + border: 1px solid #c9c9c9; margin-top: 10px; border-radius: 5px; margin-right: 10px; } + /*#header .head-rig li:hover{ background-color:#458604; }*/ -#header .head-rig li a{ - display: block; - color: #fff; - font-size: 15px; - font-weight: bold; - line-height:28px; - text-align: center; - text-decoration: none; +#header .head-rig li a { + display: block; + color: #fff; + font-size: 15px; + font-weight: bold; + line-height: 28px; + text-align: center; + text-decoration: none; } + /*containter*/ -#containter{ - width: 100%; - height: 100%; - position: relative; - overflow: hidden; +#containter { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; } -.content{ - height: 100%; + +.content { + height: 100%; } -.content-left{ - height: 100%; - margin-right: 280px; + +.content-left { + height: 100%; + margin-right: 280px; } -.content-left form{ - height: 40%; + +.content-left form { + height: 40%; } -.content-rig{ - width: 280px; - height: 100%; - border-left:1px solid #c9c9c9; - background-color: #fff; - position: absolute; - right: 0; - top:0; + +.content-rig { + width: 280px; + height: 100%; + border-left: 1px solid #c9c9c9; + background-color: #fff; + position: absolute; + right: 0; + top: 0; } -.content-head{ - height: 30px; - background-color: #EDF0F2; - border-bottom: 1px solid #c9c9c9; + +.content-head { + height: 30px; + background-color: #EDF0F2; + border-bottom: 1px solid #c9c9c9; } -.content-head p{ - font-size: 14px; - line-height: 30px; - color:#555; - font-weight:500; - margin-left: 10px; + +.content-head p { + font-size: 14px; + line-height: 30px; + color: #555; + font-weight: 500; + margin-left: 10px; } -#queneindex{ - margin-left: 0; + +#queneindex { + margin-left: 0; } -.content-list{ - margin-top: 0px; - margin-bottom: 20px; - padding-bottom: 20px; + +.content-list { + margin-top: 0px; + margin-bottom: 20px; + padding-bottom: 20px; } -.content-list li p{ - margin-top: 10px; - margin-left: 5px; + +.content-list li p { + margin-top: 10px; + margin-left: 5px; } -.content-pic{ - border-top: 1px solid #b8b8b8; - position: absolute; + +.content-pic { + border-top: 1px solid #b8b8b8; + position: absolute; bottom: 0px; } -#connect-message{ - display: inline-block; + +#connect-message { + display: inline-block; background: #CCCCCC; color: #fff; padding: 3px 6px; @@ -181,43 +221,51 @@ input,textarea{ -webkit-border-radius: 3px; border-radius: 3px; } -.session-message{ - display: inline-block; - background-color: #CCCCCC !important; - color: #fff; - padding: 3px 6px !important; - font-size: 15px; - text-align: center !important;; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; -} -.clearfix{ - -} -#in{ - float: left; -} -#out{ - float: right; -} -#agentno{ - margin-left: 0; + +.session-message { + display: inline-block; + background-color: #CCCCCC !important; + color: #fff; + padding: 3px 6px !important; + font-size: 15px; + text-align: center !important;; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; } -.message{ - padding:10px; - background-color: #EAEAEA; +.clearfix { + +} + +#in { + float: left; +} + +#out { + float: right; +} + +#agentno { + margin-left: 0; +} + +.message { + padding: 10px; + background-color: #EAEAEA; border-radius: 4px; - margin-top:10px; + margin-top: 10px; } -.chat-block{ - padding:10px; - margin-top:10px; + +.chat-block { + padding: 10px; + margin-top: 10px; } -.welcome{ - + +.welcome { + } + .welcome-message { margin: 12px; padding: 8px; @@ -225,105 +273,124 @@ input,textarea{ border-radius: 5px; background-color: #fff; } -.connect-message{ - text-align:center; - background-color:#FFFFFF; -} -.chat-above{ - margin-top:51px; - padding: 0px 5px; - height: 60%; - overflow: auto; -} -.chat-above div.chat-content{ - margin-top:8px; - margin-bottom: 5px; - font-size: 15px; - float: left; + +.connect-message { + text-align: center; + background-color: #FFFFFF; } -.opt{ - float: right; +.chat-above { + margin-top: 51px; + padding: 0px 5px; + height: 60%; + overflow: auto; } -.opt li{ - float: left; - padding: 5px; - margin-right: 10px; + +.chat-above div.chat-content { + margin-top: 8px; + margin-bottom: 5px; + font-size: 15px; + float: left; } -.opt li a{ - display: block; - color:#fff; - text-decoration: none; + +.opt { + float: right; } -.opt li a img{ - border:none; + +.opt li { + float: left; + padding: 5px; + margin-right: 10px; } -.chat-title p{ - font-size: 12px; + +.opt li a { + display: block; + color: #fff; + text-decoration: none; } -.chat-title{ - margin-bottom: 10px; + +.opt li a img { + border: none; } -.chat-left{ - display: inline-block; - float: left; + +.chat-title p { + font-size: 12px; } -.chat-right{ - display: inline-block; - float: right; + +.chat-title { + margin-bottom: 10px; } -.chat-left .user-img{ - float: left; - margin-top: 6px; + +.chat-left { + display: inline-block; + float: left; +} + +.chat-right { + display: inline-block; + float: right; +} + +.chat-left .user-img { + float: left; + margin-top: 6px; border-radius: 50%; - height:45px; - width:45px; + height: 45px; + width: 45px; } -.chat-left .chat-message{ - display:block; - margin-left:60px; + +.chat-left .chat-message { + display: block; + margin-left: 60px; text-align: left; } -.chat-left .chat-message .user{ - color:#4665d4; + +.chat-left .chat-message .user { + color: #4665d4; font-weight: 400; } -.chat-left .chat-message .time{ - color:#aaaaaa; - margin-left:5px; + +.chat-left .chat-message .time { + color: #aaaaaa; + margin-left: 5px; } -.chat-right .user-img{ - float:right; - margin-top: 6px; +.chat-right .user-img { + float: right; + margin-top: 6px; border-radius: 50%; - height:45px; - width:45px; + height: 45px; + width: 45px; } -.chat-right .chat-message{ - display:block; - margin-right:60px; + +.chat-right .chat-message { + display: block; + margin-right: 60px; text-align: right; } -.chat-right .chat-message .user{ - color:#4665d4; + +.chat-right .chat-message .user { + color: #4665d4; font-weight: 400; } -.chat-right .chat-message .time{ - color:#aaaaaa; - margin-right:5px; + +.chat-right .chat-message .time { + color: #aaaaaa; + margin-right: 5px; } -.chatting-left{ - display:block; - margin-left: 60px; - position: relative; +.chatting-left { + display: block; + margin-left: 60px; + position: relative; } -.chatting-right{ - display:block; - margin-right: 60px; - position: relative; + +.chatting-right { + display: block; + margin-right: 60px; + position: relative; } + .chatting-left .arrow { position: absolute; height: 0; @@ -333,8 +400,9 @@ input,textarea{ left: 16px; border-color: #ffffff #ffffff #dddddd; } -.chatting-right .arrow{ - position: absolute; + +.chatting-right .arrow { + position: absolute; height: 0; font-size: 0; border: 6px solid #eef0f0; @@ -342,6 +410,7 @@ input,textarea{ right: 16px; border-color: #ffffff #ffffff #c7dcfa; } + .chatting-left div.chat-content { font-size: 14px; border-radius: 3px; @@ -353,137 +422,156 @@ input,textarea{ border: 1px solid #DDDDDD; float: left; min-width: 25px; - line-height:25px; + line-height: 25px; word-break: break-all; } -.chatting-left div.chat-content *:not(img){ - background-color: #EDEDED !important; + +.chatting-left div.chat-content *:not(img) { + background-color: #EDEDED !important; } -.chatting-right div.chat-content *:not(img){ - background-color: #c7dcfa !important; + +.chatting-right div.chat-content *:not(img) { + background-color: #c7dcfa !important; } -.chatting-left div.chat-content img{ - max-width:100%; + +.chatting-left div.chat-content img { + max-width: 100%; } -.chatting-right div.chat-content img{ - max-width:100%; + +.chatting-right div.chat-content img { + max-width: 100%; } -.chatting-left div.chat-content a{ - color:#4665d4; + +.chatting-left div.chat-content a { + color: #4665d4; text-decoration: none; } -.chatting-right div.chat-content{ - font-size: 13px; - border-radius: 3px; - padding:4px; - margin-bottom: 0; - padding-right: 5px; - padding-left:5px; - border: 1px solid #b2e5f9; +.chatting-right div.chat-content { + font-size: 13px; + border-radius: 3px; + padding: 4px; + margin-bottom: 0; + padding-right: 5px; + padding-left: 5px; + border: 1px solid #b2e5f9; float: right; min-width: 45px; - word-break:break-all; - line-height:25px; + word-break: break-all; + line-height: 25px; } -.chatting-right div.chat-content a{ - color:#4665d4; + +.chatting-right div.chat-content a { + color: #4665d4; text-decoration: underline; } -.chatting-left div.chat-content span{ - color: #000000; - font-size: 14px; -} -.chat-bottom{ - /*height: 40%;*/ - position: absolute; - background-color: #edf0f2; - bottom: 0; - right:280px; - left: 0; -} -.chat-bottom .ke-edit{ - height: 100px !important; -} -.mobile-chat-bottom{ - /*height: 40%;*/ - position: absolute; - background-color: #edf0f2; - border-top:1px solid #CCCCCC; - bottom: 0; - right:0px; - left: 0; - width:100%; - height:55px; - min-height:55px; - padding-top:5px; +.chatting-left div.chat-content span { + color: #000000; + font-size: 14px; } -.mobile-chat-bottom .chat-type{ - position: absolute; +.chat-bottom { + /*height: 40%;*/ + position: absolute; + background-color: #edf0f2; + bottom: 0; + right: 280px; + left: 0; +} + +.chat-bottom .ke-edit { + height: 100px !important; +} + +.mobile-chat-bottom { + /*height: 40%;*/ + position: absolute; + background-color: #edf0f2; + border-top: 1px solid #CCCCCC; + bottom: 0; + right: 0px; + left: 0; + width: 100%; + height: 55px; + min-height: 55px; + padding-top: 5px; +} + +.mobile-chat-bottom .chat-type { + position: absolute; left: 5px; - top:5px; + top: 5px; } -.mobile-chat-bottom .btn-push{ - position: absolute; + +.mobile-chat-bottom .btn-push { + position: absolute; right: 5px; - width:70px; - top:9px; + width: 70px; + top: 9px; } -.mobile-chat-bottom .send-btn{ - width: 96px; - height: 34px; - float: right; - background-color: #8ECA51; - margin-left: 20px; - margin-right: 20px; - border: none; - cursor: pointer; - border-radius: 3px; - font-weight: bold; - margin-top: 10px; - margin-bottom:10px; + +.mobile-chat-bottom .send-btn { + width: 96px; + height: 34px; + float: right; + background-color: #8ECA51; + margin-left: 20px; + margin-right: 20px; + border: none; + cursor: pointer; + border-radius: 3px; + font-weight: bold; + margin-top: 10px; + margin-bottom: 10px; } -.mobile-chat-bottom .special{ - color:#fff; + +.mobile-chat-bottom .special { + color: #fff; } -.mobile-chat-bottom .ke-container{ - position: absolute !important; - left:40px !important; - width:calc(100% - 120px) !important; - z-index:100000; - min-height:35px; + +.mobile-chat-bottom .ke-container { + position: absolute !important; + left: 40px !important; + width: calc(100% - 120px) !important; + z-index: 100000; + min-height: 35px; } -.mobile-chat-bottom .ke-toolbar{ - display:none !important; + +.mobile-chat-bottom .ke-toolbar { + display: none !important; } -.mobile-chat-bottom .ke-statusbar{ - display:none !important; + +.mobile-chat-bottom .ke-statusbar { + display: none !important; } -.mobile-chat-bottom .ke-table td{ - min-width: 40px; + +.mobile-chat-bottom .ke-table td { + min-width: 40px; padding: 5px; } + .mobile-chat-bottom .imgFile { position: absolute; display: inline-block; border-radius: 4px; - width:45px; - height:45px; + width: 45px; + height: 45px; overflow: hidden; text-decoration: none; text-indent: 0; line-height: 20px; } + .mobile-chat-bottom #message { position: absolute; left: 80px; width: calc(100% - 160px); - border:1px solid #cccccc; - font-size:16px; - height:40px; + border: 1px solid #cccccc; + font-size: 16px; + height: 40px; } + .mobile-chat-bottom .imgFile input { position: absolute; font-size: 100px; @@ -491,662 +579,812 @@ input,textarea{ top: 0; opacity: 0; } + /*留言板*/ -.leaveMessBox{ - width:520px; - margin:0 auto; +.leaveMessBox { + width: 520px; + margin: 0 auto; } -#leaveInfo{margin-top:30px;} -.leaveMessBox input{ - margin-bottom:0; + +#leaveInfo { + margin-top: 30px; } -.leaveMessBox b{color:red;} + +.leaveMessBox input { + margin-bottom: 0; +} + +.leaveMessBox b { + color: red; +} + input.radioIn { - margin: 0; - vertical-align: middle; - /*display: none;*/ + margin: 0; + vertical-align: middle; + /*display: none;*/ } -.radioIco,.btn{ - /*background-image: url(../img/sprite.png);*/ - background-repeat:no-repeat; + +.radioIco, .btn { + /*background-image: url(../img/sprite.png);*/ + background-repeat: no-repeat; } + .radioIco.checked { - background-position: -64px -223px; + background-position: -64px -223px; } -.radioIco{ - display: inline-block; - width: 16px; - height: 20px; - background-position: -30px -223px; - vertical-align: middle; - margin-right: 7px; + +.radioIco { + display: inline-block; + width: 16px; + height: 20px; + background-position: -30px -223px; + vertical-align: middle; + margin-right: 7px; } -.leaveMessBox label{ - font-size: 14px; - margin-right: 50px; - height: 30px; - line-height: 30px; - vertical-align: middle; - display: inline-block; - cursor: pointer; + +.leaveMessBox label { + font-size: 14px; + margin-right: 50px; + height: 30px; + line-height: 30px; + vertical-align: middle; + display: inline-block; + cursor: pointer; } -#leaveThem{width:406px;} + +#leaveThem { + width: 406px; +} + .submitBtn { - font-family: "Microsoft Yahei","Helvetica","Simsun","Arial"; - color: #fff; - text-align: center; - width: 96px !important; - height: 35px; - /*line-height: 35px;*/ - background-position: 0 0; - border: 0; - font-size: 15px; - font-weight: bold; - cursor: pointer; - text-shadow:none; + font-family: "Microsoft Yahei", "Helvetica", "Simsun", "Arial"; + color: #fff; + text-align: center; + width: 96px !important; + height: 35px; + /*line-height: 35px;*/ + background-position: 0 0; + border: 0; + font-size: 15px; + font-weight: bold; + cursor: pointer; + text-shadow: none; } -.btn:active,.btn:hover,.btn:focus{ - color:#fff; - background-position: 0 0 !important; - -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; - background-color: #32c24d; - *background-color: #32c24d; + +.btn:active, .btn:hover, .btn:focus { + color: #fff; + background-position: 0 0 !important; + -webkit-transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; + background-color: #32c24d; + *background-color: #32c24d; } + p.submitBtnWrap { - text-align: right; - padding-right: 17px; - margin-top: 24px; - clear: left; + text-align: right; + padding-right: 17px; + margin-top: 24px; + clear: left; } -#leaveContent{ - width: 416px; - height: 159px; - padding: 3px 0 3px 3px; - resize: none; - vertical-align: top; + +#leaveContent { + width: 416px; + height: 159px; + padding: 3px 0 3px 3px; + resize: none; + vertical-align: top; } -.chat-bottom .send-btn{ - width: 120px; - height: 34px; - float: right; - background-color: #e7e1d3; - margin-left: 20px; - margin-right: 20px; - border: none; - cursor: pointer; - border-radius: 3px; - font-weight: bold; - margin-top: 10px; - margin-bottom:10px; + +.chat-bottom .send-btn { + width: 120px; + height: 34px; + float: right; + background-color: #e7e1d3; + margin-left: 20px; + margin-right: 20px; + border: none; + cursor: pointer; + border-radius: 3px; + font-weight: bold; + margin-top: 10px; + margin-bottom: 10px; } -.chat-bottom .special{ - color:#fff; + +.chat-bottom .special { + color: #fff; } -.lit-chat{ - padding: 0 10px; + +.lit-chat { + padding: 0 10px; } -.little-content{ - width: 582px; - height: 409px; - margin: 0 auto; - margin-top: 40px; - position: relative; + +.little-content { + width: 582px; + height: 409px; + margin: 0 auto; + margin-top: 40px; + position: relative; } -.little-content-head{ - height: 30px; - border-radius:3px; - border-bottom-left-radius: 0; + +.little-content-head { + height: 30px; + border-radius: 3px; + border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.little-content .lit-chat{ - height: 60%; - overflow: auto; - scrollBar-face-color:#EDF0F2; - scrollBar-hightLight-color:red; - scrollBar-3dLight-color:orange; - scrollBar-darkshadow-color:blue; - scrollBar-shadow-color:#fff; - scrollBar-arrow-color:#fff; - scrollBar-track-color:#fff; - scrollBar-base-color:pink; + +.little-content .lit-chat { + height: 60%; + overflow: auto; + scrollBar-face-color: #EDF0F2; + scrollBar-hightLight-color: red; + scrollBar-3dLight-color: orange; + scrollBar-darkshadow-color: blue; + scrollBar-shadow-color: #fff; + scrollBar-arrow-color: #fff; + scrollBar-track-color: #fff; + scrollBar-base-color: pink; } -.lit-chat-left{ - margin-top: 20px; + +.lit-chat-left { + margin-top: 20px; } -.lit-chat-left .time{ - color: #9f9f9f; - font-size: 12px; + +.lit-chat-left .time { + color: #9f9f9f; + font-size: 12px; } -.lit-chat-left div.chat-content{ - color: #386a03; + +.lit-chat-left div.chat-content { + color: #386a03; } -.chat-box{ - position: relative; - margin-top: 5px; + +.chat-box { + position: relative; + margin-top: 5px; } -.lit-chat-left .chat-box img{ - position: absolute; - top:-7px; - left:12px; + +.lit-chat-left .chat-box img { + position: absolute; + top: -7px; + left: 12px; } -.chat-box div.chat-content{ - display: inline-block; - line-height: 30px; - padding-left: 5px; - font-size: 12px; - border-radius: 3px; - border: 1px solid #d4d4d4; - background-color: #f1f1f1; + +.chat-box div.chat-content { + display: inline-block; + line-height: 30px; + padding-left: 5px; + font-size: 12px; + border-radius: 3px; + border: 1px solid #d4d4d4; + background-color: #f1f1f1; } -.lit-chat-right{ - margin-top: 20px; + +.lit-chat-right { + margin-top: 20px; } -.lit-chat-right .time{ - color: #9f9f9f; - font-size: 12px; + +.lit-chat-right .time { + color: #9f9f9f; + font-size: 12px; } -.lit-chat-right p{ - width: 100%; - text-align: right; - color: #386a03; - float: right; + +.lit-chat-right p { + width: 100%; + text-align: right; + color: #386a03; + float: right; } -.lit-chat-right .chat-box{ - float: right; + +.lit-chat-right .chat-box { + float: right; } -.lit-chat-right .chat-box img{ - position: absolute; - top:-7px; - right:12px; + +.lit-chat-right .chat-box img { + position: absolute; + top: -7px; + right: 12px; } -.little-content .bot-chat{ - height: 40%; + +.little-content .bot-chat { + height: 40%; } -.bot-chat button{ - color: #fff; - font-weight: bold; - padding: 8px 20px; - margin: 5px; - float: right; - border: none; - border-radius: 3px; - cursor: pointer; + +.bot-chat button { + color: #fff; + font-weight: bold; + padding: 8px 20px; + margin: 5px; + float: right; + border: none; + border-radius: 3px; + cursor: pointer; } -.bot-chat .ke-edit{ - height: 80px !important; + +.bot-chat .ke-edit { + height: 80px !important; } -.service{ - width:600px; - height: 255px; - margin: 20px auto; - background-color: #32c24d; + +.service { + width: 600px; + height: 255px; + margin: 20px auto; + background-color: #32c24d; } -.service .white-box{ - color: #32c24d; - width: 520px; - height: 180px; - position: relative; - margin:10px auto; - background-color: #fff; + +.service .white-box { + color: #32c24d; + width: 520px; + height: 180px; + position: relative; + margin: 10px auto; + background-color: #fff; } -.icon-box li a{ - color: #fff; - text-decoration: none; + +.icon-box li a { + color: #fff; + text-decoration: none; } -.white-box h1{ - margin:10px; - padding-top: 10px; + +.white-box h1 { + margin: 10px; + padding-top: 10px; } -.white-box h1 .small{ - font-size: 16px; - font-weight:500; + +.white-box h1 .small { + font-size: 16px; + font-weight: 500; } -.white-box h2{ - margin:10px; - margin-left:25px; - padding-top: 10px; + +.white-box h2 { + margin: 10px; + margin-left: 25px; + padding-top: 10px; } -.white-box h3{ - margin:10px; - margin-left:35px; - padding-top: 10px; + +.white-box h3 { + margin: 10px; + margin-left: 35px; + padding-top: 10px; } -.white-box img{ - position: absolute; - top:-5px; - right:0; + +.white-box img { + position: absolute; + top: -5px; + right: 0; } -.service-btn button{ - font-size: 16px; - background-color:#fec92c; - margin-left: 40px; - padding: 3px 20px; - border-radius: 3px; - cursor:pointer; - border: 1px solid #d5a312; + +.service-btn button { + font-size: 16px; + background-color: #fec92c; + margin-left: 40px; + padding: 3px 20px; + border-radius: 3px; + cursor: pointer; + border: 1px solid #d5a312; } -.service-btn button a{ - color: #a37b0b; - text-decoration: none; + +.service-btn button a { + color: #a37b0b; + text-decoration: none; } -.medium{ - position: fixed; - right: 0; - bottom: 10px; - width: 25px; - line-height: 23px; + +.medium { + position: fixed; + right: 0; + bottom: 10px; + width: 25px; + line-height: 23px; font-size: 15px; text-align: center; margin: 0 auto; padding: 15px 5px; border-radius: 20px; } -.medium a{ - color:#fff; - text-decoration: none; + +.medium a { + color: #fff; + text-decoration: none; } + /*调查问卷弹框*/ .diaShade { - position: absolute; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - z-index:100000; - background-color: #000; - background-color: rgba(0,0,0,0.5); - _background-color: #000; - filter: alpha(opacity=50) + position: absolute; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100000; + background-color: #000; + background-color: rgba(0, 0, 0, 0.5); + _background-color: #000; + filter: alpha(opacity=50) } -.dialogWrap{ - width:600px; - height:342px; - border-radius: 1px; - position: absolute; - left:50%; - top:20%; - z-index:100001; - margin-top:10px; - margin-left:-270px; - background-color: #f7f7f7; - color: #323232; + +.dialogWrap { + width: 600px; + height: 342px; + border-radius: 1px; + position: absolute; + left: 50%; + top: 20%; + z-index: 100001; + margin-top: 10px; + margin-left: -270px; + background-color: #f7f7f7; + color: #323232; } -.dialogWrap h2{ - margin:0; + +.dialogWrap h2 { + margin: 0; } -.dialogCon{padding:15px;} + +.dialogCon { + padding: 15px; +} + .diaHeader span { - float: left; - font-size: 20px; - font-weight: bold; - margin-right: 15px; + float: left; + font-size: 20px; + font-weight: bold; + margin-right: 15px; } -.diaHeader hr{ - width: 440px; - float: left; - border: 0; - font-size: 0; - height: 0; - background: transparent; - border-bottom: 1px dashed #c9c9c9; - margin-top: 13px; + +.diaHeader hr { + width: 440px; + float: left; + border: 0; + font-size: 0; + height: 0; + background: transparent; + border-bottom: 1px dashed #c9c9c9; + margin-top: 13px; } -.dialogCon .title{ - font-size:18px; - font-weight:500; - margin-top:10px; + +.dialogCon .title { + font-size: 18px; + font-weight: 500; + margin-top: 10px; } -.dialogCon .radio{margin-right:30px;} -.dialogCon #descript{ - width:455px; - height:130px; - resize: none; - position: relative; - top:10px; - left:45px; + +.dialogCon .radio { + margin-right: 30px; } -.submitBtnWrap .submitBtn{ - border-radius: 5px; + +.dialogCon #descript { + width: 455px; + height: 130px; + resize: none; + position: relative; + top: 10px; + left: 45px; } -.btn:focus{outline: none;} -#bar{ - position: relative; + +.btn:focus { + outline: none; } -#surplus{ - font-weight:400; + +#bar { + position: relative; } + +#surplus { + font-weight: 400; +} + .ukefu-im-theme .theme1 { background-color: #377FED !important; - border-color: #377FED !important; - color:#FFFFFF; + border-color: #377FED !important; + color: #FFFFFF; } + .ukefu-im-theme .theme2 { background-color: #67CAFF !important; border-color: #67CAFF !important; - color:#FFFFFF; + color: #FFFFFF; } + .ukefu-im-theme .theme3 { background-color: #8E8E8E !important; border-color: #8E8E8E !important; - color:#FFFFFF; + color: #FFFFFF; } + .ukefu-im-theme .theme4 { background-color: #32c24d !important; border-color: #32c24d !important; - color:#FFFFFF; + color: #FFFFFF; } + .ukefu-im-theme .theme5 { background-color: #E45DB3 !important; border-color: #E45DB3 !important; - color:#FFFFFF; + color: #FFFFFF; } + .ukefu-im-theme .theme6 { background-color: #FF626F !important; border-color: #FF626F !important; - color:#FFFFFF; + color: #FFFFFF; } .ukefu-theme-border-1 { - border:1px solid #377FED !important; + border: 1px solid #377FED !important; } + .ukefu-theme-border-2 { - border:1px solid #67CAFF !important; + border: 1px solid #67CAFF !important; } + .ukefu-theme-border-3 { - border:1px solid #8E8E8E !important; + border: 1px solid #8E8E8E !important; } + .ukefu-theme-border-4 { - border:1px solid #1E90FF !important; + border: 1px solid #1E90FF !important; } + .ukefu-theme-border-5 { - border:1px solid #E45DB3 !important; + border: 1px solid #E45DB3 !important; } + .ukefu-theme-border-6 { - border:1px solid #FF626F !important; + border: 1px solid #FF626F !important; } .ukefu-im-theme .arrow1 { - border-color: #FFFFFF #FFFFFF #377FED !important; + border-color: #FFFFFF #FFFFFF #377FED !important; } + .ukefu-im-theme .arrow2 { border-color: #FFFFFF #FFFFFF #67CAFF !important; } + .ukefu-im-theme .arrow3 { border-color: #FFFFFF #FFFFFF #8E8E8E !important; } + .ukefu-im-theme .arrow4 { border-color: #FFFFFF #FFFFFF #1E90FF !important; } + .ukefu-im-theme .arrow5 { border-color: #FFFFFF #FFFFFF #E45DB3 !important; } + .ukefu-im-theme .arrow6 { border-color: #FFFFFF #FFFFFF #FF626F !important; } -.ukefu-media-image{ - max-height:150px; - max-width:200px; -} -.ukefu-point-text{ - max-width:850px; - max-height:610px; - margin: 0 auto; -} -.leaveCon{ - width: 550px; - margin: 10px auto; - overflow: hidden; - zoom:1; -} -.leaveCon p{ - overflow: hidden; - zoom:1; - margin: 10px auto; -} -.leaveCon label{ - font-size: 14px; - margin-right: 50px; - height: 30px; - line-height: 30px; - vertical-align: middle; - display: inline-block; - cursor: pointer; -} -input.radioIn{ - margin: 0; - vertical-align: middle; - display: none; -} -.leaveCon .txt01{ - font-size: 14px; - font-family:"Microsoft Yahei","Helvetica","Simsun","Arial"; - color: #333; -} -.leaveCon span{ - display: inline-block; - width: 82px; -} -.txt01{ - width: 296px; - height: 33px; - line-height: 33px\9; - border: 1px solid #d8d8d8; - border-radius: 3px; - padding: 0; - padding-left: 3px; - vertical-align: middle; - margin-right: 8px; -} -.txt02{ width: 416px;} -.txt03{ - width: 416px; - height: 159px; - padding: 3px 0 3px 3px; - resize: none; - vertical-align: top; - overflow-y: auto; -} -.leaveCon b{ - color: #f00; -} -p.submitBtnWrap{ - text-align: right; - padding-right: 17px; - margin-top: 24px; - clear: left; -} -.submitBtnWrap .submitBtn{ - margin-left: 14px; -} -.submitBtn{ - font-family:"Microsoft Yahei","Helvetica","Simsun","Arial"; - color: #fff; - text-align: center; - width: 96px; - height: 35px; - background-position: 0 0; - border: 0; - font-size: 15px; - font-weight: 400; - cursor: pointer; + +.ukefu-media-image { + max-height: 150px; + max-width: 200px; } -.ukef-leavemsg-tip{ - width: 520px; +.ukefu-point-text { + max-width: 850px; + max-height: 610px; + margin: 0 auto; +} + +.leaveCon { + width: 550px; + margin: 10px auto; + overflow: hidden; + zoom: 1; +} + +.leaveCon p { + overflow: hidden; + zoom: 1; + margin: 10px auto; +} + +.leaveCon label { + font-size: 14px; + margin-right: 50px; + height: 30px; + line-height: 30px; + vertical-align: middle; + display: inline-block; + cursor: pointer; +} + +input.radioIn { + margin: 0; + vertical-align: middle; + display: none; +} + +.leaveCon .txt01 { + font-size: 14px; + font-family: "Microsoft Yahei", "Helvetica", "Simsun", "Arial"; + color: #333; +} + +.leaveCon span { + display: inline-block; + width: 82px; +} + +.txt01 { + width: 296px; + height: 33px; + line-height: 33px \9; + border: 1px solid #d8d8d8; + border-radius: 3px; + padding: 0; + padding-left: 3px; + vertical-align: middle; + margin-right: 8px; +} + +.txt02 { + width: 416px; +} + +.txt03 { + width: 416px; + height: 159px; + padding: 3px 0 3px 3px; + resize: none; + vertical-align: top; + overflow-y: auto; +} + +.leaveCon b { + color: #f00; +} + +p.submitBtnWrap { + text-align: right; + padding-right: 17px; + margin-top: 24px; + clear: left; +} + +.submitBtnWrap .submitBtn { + margin-left: 14px; + border-radius: 5px; +} + +.submitBtnWrap .cancelBtn { + border-radius: 5px; + margin-left: 14px; + height: 35px; + justify-items: center; + margin-top: 8px !important; + + /* screen width sm */ + @media (min-width: 576px) { + width: 84px; + height: 27px; + margin-top: 0 !important; + border: 0; + } +} + +.submitBtn { + font-family: "Microsoft Yahei", "Helvetica", "Simsun", "Arial"; + color: #fff; + text-align: center; + width: 96px; + height: 35px; + background-position: 0 0; + border: 0; + font-size: 15px; + font-weight: 400; + cursor: pointer; +} + +.ukef-leavemsg-tip { + width: 520px; margin: 60px auto 0px auto; font-size: 16px; } -.ukefu-func-tab{ - position: absolute; + +.ukefu-func-tab { + position: absolute; right: 0px; bottom: 0px; } -.ukefu-func-tab li{ - float:left; - padding: 5px 10px 5px 10px; - border-top-right-radius: 3px; + +.ukefu-func-tab li { + float: left; + padding: 5px 10px 5px 10px; + border-top-right-radius: 3px; border-top-left-radius: 3px; - color:#FFFFFF; + color: #FFFFFF; } -.ukefu-func-tab li a{ - text-decoration: none; - color:#ffffff; + +.ukefu-func-tab li a { + text-decoration: none; + color: #ffffff; } -.ukefu-func-tab li.cur{ - border: 1px solid #FFFFFF; + +.ukefu-func-tab li.cur { + border: 1px solid #FFFFFF; border-bottom: 0px; background-color: #FFFFFF; } -.ukefu-func-tab li.cur a{ - border: 1px solid #FFFFFF; + +.ukefu-func-tab li.cur a { + border: 1px solid #FFFFFF; border-bottom: 0px; background-color: #FFFFFF; color: #333333 !important; } -.ukefu-ask-item{ - border-bottom: 1px solid #F0F0F0; - position: relative; - width: 100%; - line-height: 1.5em; - padding: 10px 0 10px 10px; -} -.ukefu-ask-item a{ - text-decoration: none; - color: #555555; -} -.ukefu-form-label { - text-align: left; - padding-left: 0px; - padding-bottom: 6px; - padding-top: 6px; - width: 100%; -} -.layui-input-block { - padding: 9px 15px 5px 0px; - margin-left: 0px; - min-height: 20px; -} -.ukefu-form-item { - margin-bottom:0px !important; -} -.ukefu-askqs a{ - text-decoration: none; - margin-left:10px; - margin-right:10px; -} -.ukefu-askqs .ukefu-askqs-resolved{ - padding:5px 10px 5px 10px; -} -.ukefu-func-tab li.cur{ - border: 1px solid #FFFFFF; - border-bottom: 0px; - background-color: #FFFFFF; -} -.ukefu-func-tab li.cur a{ - border: 1px solid #FFFFFF; - border-bottom: 0px; - background-color: #FFFFFF; - color: #333333 !important; -} -.ukefu-ask-item{ - border-bottom: 1px solid #F0F0F0; - position: relative; - width: 100%; - line-height: 1.5em; - padding: 10px 0 10px 10px; -} -.ukefu-ask-item a{ - text-decoration: none; - color: #555555; -} -.ukefu-form-label { - text-align: left; - padding-left: 0px; - padding-bottom: 6px; - padding-top: 6px; - width: 100%; -} -.layui-input-block { - padding: 9px 15px 5px 0px; - margin-left: 0px; - min-height: 20px; -} -.ukefu-form-item { - margin-bottom:0px !important; -} -.ukefu-askqs a{ - text-decoration: none; - margin-left:10px; - margin-right:10px; - color:#4665d4; -} -.ukefu-askqs-resolved{ - padding:5px 5px 5px 0px; -} -.ukefu-askqs-unresolved{ - padding:5px 5px 5px 5px; -} -.ukefu-message-file{ - min-height:50px; - padding-right:10px; - padding-left:10px; - font-size:14px; -} -.ukefu-message-file .ukefu-file-icon{ - width:48px; - height:48px; - float:left; -} -.ukefu-message-file .ukefu-file-icon{ - line-height:60px; -} -.ukefu-message-file .ukefu-file-icon img{ - width:32px; - height:32px; - margin:5px 3px 3px 0px; -} -.ukefu-message-file .ukefu-file-desc{ - margin-left:0px; - float:left; - padding-top:0px; -} -.ukefu-message-file .ukefu-file-desc div{ - padding-bottom:0px; - max-width:350px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.ukefu-message-file .ukefu-file-desc a{ - text-decoration: none !important; -} -.ukefu-xiaoe-topictype{ + +.ukefu-ask-item { border-bottom: 1px solid #F0F0F0; position: relative; width: 100%; line-height: 1.5em; - padding: 2px 0px; + padding: 10px 0 10px 10px; } -.ukefu-xiaoe-topictype-title{ + +.ukefu-ask-item a { + text-decoration: none; + color: #555555; +} + +.ukefu-form-label { + text-align: left; + padding-left: 0px; + padding-bottom: 6px; + padding-top: 6px; + width: 100%; +} + +.layui-input-block { + padding: 9px 15px 5px 0px; + margin-left: 0px; + min-height: 20px; +} + +.ukefu-form-item { + margin-bottom: 0px !important; +} + +.ukefu-askqs a { + text-decoration: none; + margin-left: 10px; + margin-right: 10px; +} + +.ukefu-askqs .ukefu-askqs-resolved { + padding: 5px 10px 5px 10px; +} + +.ukefu-func-tab li.cur { + border: 1px solid #FFFFFF; + border-bottom: 0px; + background-color: #FFFFFF; +} + +.ukefu-func-tab li.cur a { + border: 1px solid #FFFFFF; + border-bottom: 0px; + background-color: #FFFFFF; + color: #333333 !important; +} + +.ukefu-ask-item { + border-bottom: 1px solid #F0F0F0; + position: relative; + width: 100%; + line-height: 1.5em; + padding: 10px 0 10px 10px; +} + +.ukefu-ask-item a { + text-decoration: none; + color: #555555; +} + +.ukefu-form-label { + text-align: left; + padding-left: 0px; + padding-bottom: 6px; + padding-top: 6px; + width: 100%; +} + +.layui-input-block { + padding: 9px 15px 5px 0px; + margin-left: 0px; + min-height: 20px; +} + +.ukefu-form-item { + margin-bottom: 0px !important; +} + +.ukefu-askqs a { + text-decoration: none; + margin-left: 10px; + margin-right: 10px; + color: #4665d4; +} + +.ukefu-askqs-resolved { + padding: 5px 5px 5px 0px; +} + +.ukefu-askqs-unresolved { + padding: 5px 5px 5px 5px; +} + +.ukefu-message-file { + min-height: 50px; + padding-right: 10px; + padding-left: 10px; + font-size: 14px; +} + +.ukefu-message-file .ukefu-file-icon { + width: 48px; + height: 48px; + float: left; +} + +.ukefu-message-file .ukefu-file-icon { + line-height: 60px; +} + +.ukefu-message-file .ukefu-file-icon img { + width: 32px; + height: 32px; + margin: 5px 3px 3px 0px; +} + +.ukefu-message-file .ukefu-file-desc { + margin-left: 0px; + float: left; + padding-top: 0px; +} + +.ukefu-message-file .ukefu-file-desc div { + padding-bottom: 0px; + max-width: 350px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.ukefu-message-file .ukefu-file-desc a { + text-decoration: none !important; +} + +.ukefu-xiaoe-topictype { + border-bottom: 1px solid #F0F0F0; + position: relative; + width: 100%; + line-height: 1.5em; + padding: 2px 0px; +} + +.ukefu-xiaoe-topictype-title { height: 37px; line-height: 37px; color: #555555 !important; font-size: 13px; - font-weight:400; - - position: relative; + font-weight: 400; + + position: relative; padding: 0 15px 0 10px; background-color: #f2f2f2; } -.info-list{ - margin-top:10px; + +.info-list { + margin-top: 10px; } + .info-list .ukefu-suggest-item { font-size: 14px; padding: 0 0 11px 18px; @@ -1154,45 +1392,53 @@ p.submitBtnWrap{ background: url(/images/circle.png) no-repeat left 8px; } -.loading{ - margin: -3px auto; +.loading { + margin: -3px auto; } -.loading span{ - display: inline-block; - width: 7px; - height: 7px; - margin-right: 5px; - border-radius: 50%; - background-color: #19a55d !important; - -webkit-animation: load 1.04s ease infinite; + +.loading span { + display: inline-block; + width: 7px; + height: 7px; + margin-right: 5px; + border-radius: 50%; + background-color: #19a55d !important; + -webkit-animation: load 1.04s ease infinite; } -.loading span:last-child{ - margin-right: 0px; + +.loading span:last-child { + margin-right: 0px; } -@-webkit-keyframes load{ - 0%{ - opacity: 1; - } - 100%{ - opacity: 0; - } + +@-webkit-keyframes load { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } } -.loading span:nth-child(1){ - -webkit-animation-delay:0.13s; + +.loading span:nth-child(1) { + -webkit-animation-delay: 0.13s; } -.loading span:nth-child(2){ - -webkit-animation-delay:0.26s; + +.loading span:nth-child(2) { + -webkit-animation-delay: 0.26s; } -.loading span:nth-child(3){ - -webkit-animation-delay:0.39s; + +.loading span:nth-child(3) { + -webkit-animation-delay: 0.39s; } -.loading span:nth-child(4){ - -webkit-animation-delay:0.52s; + +.loading span:nth-child(4) { + -webkit-animation-delay: 0.52s; } -.chat-writing-message{ - font-size: 13px; - margin-top:8px; - margin-left:5px; + +.chat-writing-message { + font-size: 13px; + margin-top: 8px; + margin-left: 5px; border-radius: 3px; padding: 2px 4px 6px; margin-bottom: 5px; diff --git a/contact-center/app/src/main/resources/templates/apps/im/chatbot/index.pug b/contact-center/app/src/main/resources/templates/apps/im/chatbot/index.pug index d0d64511..6d12b7c3 100644 --- a/contact-center/app/src/main/resources/templates/apps/im/chatbot/index.pug +++ b/contact-center/app/src/main/resources/templates/apps/im/chatbot/index.pug @@ -605,6 +605,7 @@ html //- 按钮 p.submitBtnWrap(style='margin-top: 0px') input.btn.submitBtn#submitBtn(type='submit', value='提 交') + input.btn.cancelBtn#cancelBtn(value='取 消', onclick='popup(\"none\")') script. var service_end = false; diff --git a/contact-center/app/src/main/resources/templates/apps/im/index.pug b/contact-center/app/src/main/resources/templates/apps/im/index.pug index 0082826e..147a8a74 100644 --- a/contact-center/app/src/main/resources/templates/apps/im/index.pug +++ b/contact-center/app/src/main/resources/templates/apps/im/index.pug @@ -499,6 +499,7 @@ html //- 按钮 p.submitBtnWrap(style='margin-top: 0px') input.btn.submitBtn#submitBtn(type='submit', value='提 交') + input.btn.cancelBtn#cancelBtn(value='取 消', onclick='popup(\"none\")') script. function chatScorllBottom(box) { diff --git a/contact-center/app/src/main/resources/templates/apps/im/mobile.pug b/contact-center/app/src/main/resources/templates/apps/im/mobile.pug index 9c50fc34..128c06b5 100644 --- a/contact-center/app/src/main/resources/templates/apps/im/mobile.pug +++ b/contact-center/app/src/main/resources/templates/apps/im/mobile.pug @@ -305,6 +305,7 @@ html // 按钮 p.submitBtnWrap(style='background:#fff;position: fixed;bottom: 0px;left:0px;width: 100%;height:100px;padding-right: 0px;margin-bottom: 0px;z-index: 10') input.btn.submitBtn#submitBtn(type='submit', style='width: 85% !important;display: block;margin: 0 auto;', value='提 交') + input.btn.cancelBtn#cancelBtn(style='width: 85% !important;display: block;margin: 0 auto;', value='取 消', onclick='popup(\'none\')',) script. var service_end = false; // 调查问卷