Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
bulomakaka
/
ekexiu.app
Obserwuj 2
Polub 1
Forkuj 0
Kod Problemy 0 Oczekujące zmiany 0 Commity 17 Wydania 0 Wiki

Brak opisu

Drzewo: 80340d7131
Gałęzie Tagi
ekexiu.app
/
app
/
html
/
chat_assess.html

chat_assess.html 10KB
Historia Czysty

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383 
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. 		<title></title>
  7. 		<link href="../css/mui.min.css" rel="stylesheet" />
  8. 		<link rel="stylesheet" type="text/css" href="../css/app.css" />
  9. 		<link href="../css/mui.imageviewer.css" rel="stylesheet" />
  10. 		<style>
  11. 			html,
  12. 			body {
  13. 				height: 100%;
  14. 				margin: 0px;
  15. 				padding: 0px;
  16. 				overflow: hidden;
  17. 				-webkit-touch-callout: none;
  18. 				-webkit-user-select: none;
  19. 			}
  20. 			footer {
  21. 				position: fixed;
  22. 				width: 100%;
  23. 				height: 50px;
  24. 				min-height: 50px;
  25. 				border-top: solid 1px #bbb;
  26. 				left: 0px;
  27. 				bottom: 0px;
  28. 				overflow: hidden;
  29. 				padding: 0px 50px;
  30. 				background-color: #fafafa;
  31. 			}
  32. 			.footer-left {
  33. 				position: absolute;
  34. 				width: 50px;
  35. 				height: 50px;
  36. 				left: 0px;
  37. 				bottom: 0px;
  38. 				text-align: center;
  39. 				vertical-align: middle;
  40. 				line-height: 100%;
  41.  				padding: 12px 4px;
  42.  			}
  43.  			.footer-right {
  44.  				position: absolute;
  45.  				width: 50px;
  46.  				height: 50px;
  47.  				right: 0px;
  48.  				bottom: 0px;
  49.  				text-align: center;
  50.  				vertical-align: middle;
  51.  				line-height: 100%;
  52.  				padding: 12px 5px;
  53.  				display: inline-block;
  54.  			}
  55.  			.footer-center {
  56.  				height: 100%;
  57.  				padding: 5px 0px;
  58.  			}
  59.  			.footer-center [class*=input] {
  60.  				width: 100%;
  61.  				height: 100%;
  62.  				border-radius: 5px;
  63.  			}
  64.  			.footer-center .input-text {
  65.  				background: #fff;
  66.  				border: solid 1px #ddd;
  67.  				padding: 10px !important;
  68.  				font-size: 16px !important;
  69.  				line-height: 18px !important;
  70.  				font-family: verdana !important;
  71.  				overflow: hidden;
  72.  			}
  73.  			.footer-center .input-sound {
  74.  				background-color: #eee;
  75.  			}
  76.  			.mui-content {
  77.  				height: 100%;
  78.  				padding: 44px 0px 50px 0px;
  79.  				overflow: auto;
  80.  				background-color: #eaeaea;
  81.  			}
  82.  			#msg-list {
  83.  				height: 100%;
  84.  				overflow: auto;
  85.  				-webkit-overflow-scrolling: touch;
  86.  			}
  87.  			.msg-item {
  88.  				padding: 8px;
  89.  				clear: both;
  90.  			}
  91.  			.msg-item .mui-item-clear {
  92.  				clear: both;
  93.  			}
  94.  			.msg-item .msg-user {
  95.  				width: 38px;
  96.  				height: 38px;
  97.  				border: solid 1px #d3d3d3;
  98.  				display: inline-block;
  99.  				background: #fff;
  100.  				border-radius: 3px;
  101.  				vertical-align: top;
  102.  				text-align: center;
  103.  				float: left;
  104.  				padding: 3px;
  105.  				color: #ddd;
  106.  			}
  107.  			
  108.  			.msg-item .msg-user-img{
  109.  				width: 38px;
  110.  				height: 38px;
  111.  				display: inline-block;
  112.  				border-radius: 3px;
  113.  				vertical-align: top;
  114.  				text-align: center;
  115.  				float: left;
  116.  				color: #ddd;
  117.  			}
  118.  			
  119.  			.msg-item .msg-content {
  120.  				display: inline-block;
  121.  				border-radius: 5px;
  122.  				border: solid 1px #d3d3d3;
  123.  				background-color: #FFFFFF;
  124.  				color: #333;
  125.  				padding: 8px;
  126.  				vertical-align: top;
  127.  				font-size: 15px;
  128.  				position: relative;
  129.  				margin: 0px 8px;
  130.  				max-width: 75%;
  131.  				min-width: 35px;
  132.  				float: left;
  133.  			}
  134.  			.msg-item .msg-content .msg-content-inner {
  135.  				overflow-x: hidden;
  136.  			}
  137.  			.msg-item .msg-content .msg-content-arrow {
  138.  				position: absolute;
  139.  				border: solid 1px #d3d3d3;
  140.  				border-right: none;
  141.  				border-top: none;
  142.  				background-color: #FFFFFF;
  143.  				width: 10px;
  144.  				height: 10px;
  145.  				left: -5px;
  146.  				top: 12px;
  147.  				-webkit-transform: rotateZ(45deg);
  148.  				transform: rotateZ(45deg);
  149.  			}
  150.  			.msg-item-self .msg-user,
  151.  			.msg-item-self .msg-content {
  152.  				float: right;
  153.  			}
  154.  			.msg-item-self .msg-content .msg-content-arrow {
  155.  				left: auto;
  156.  				right: -5px;
  157.  				-webkit-transform: rotateZ(225deg);
  158.  				transform: rotateZ(225deg);
  159.  			}
  160.  			.msg-item-self .msg-content,
  161.  			.msg-item-self .msg-content .msg-content-arrow {
  162.  				background-color: #4CD964;
  163.  				color: #fff;
  164.  				border-color: #2AC845;
  165.  			}
  166.  			footer .mui-icon {
  167.  				color: #999999;
  168.  			}
  169.  			footer .mui-icon:active {
  170.  				color: #FF9900 !important;
  171.  			}/*#007AFF*/
  172.  			footer .mui-icon-paperplane:before {
  173.  				content: "发送";
  174.  			}
  175.  			footer .mui-icon-paperplane {
  176.  				/*-webkit-transform: rotateZ(45deg);
  177.  				transform: rotateZ(45deg);*/
  178.  				
  179.  				font-size: 16px;
  180.  				word-break: keep-all;
  181.  				line-height: 100%;
  182.  				padding-top: 6px;
  183.  				color: rgba(0, 135, 250, 1);
  184.  			}
  185.  			#msg-sound {
  186.  				-webkit-user-select: none !important;
  187.  				user-select: none !important;
  188.  			}
  189.  			.rprogress {
  190.  				position: absolute;
  191.  				left: 50%;
  192.  				top: 50%;
  193.  				width: 140px;
  194.  				height: 140px;
  195.  				margin-left: -70px;
  196.  				margin-top: -70px;
  197.  				background-image: url(../images/arecord.png);
  198.  				background-repeat: no-repeat;
  199.  				background-position: center center;
  200.  				background-size: 30px 30px;
  201.  				background-color: rgba(0, 0, 0, 0.7);
  202.  				border-radius: 5px;
  203.  				display: none;
  204.  				-webkit-transition: .15s;
  205.  			}
  206.  			.rschedule {
  207.  				background-color: rgba(0, 0, 0, 0);
  208.  				border: 5px solid rgba(0, 183, 229, 0.9);
  209.  				opacity: .9;
  210.  				border-left: 5px solid rgba(0, 0, 0, 0);
  211.  				border-right: 5px solid rgba(0, 0, 0, 0);
  212.  				border-radius: 50px;
  213.  				box-shadow: 0 0 15px #2187e7;
  214.  				width: 46px;
  215.  				height: 46px;
  216.  				position: absolute;
  217.  				left: 50%;
  218.  				top: 50%;
  219.  				margin-left: -23px;
  220.  				margin-top: -23px;
  221.  				-webkit-animation: spin 1s infinite linear;
  222.  				animation: spin 1s infinite linear;
  223.  			}
  224.  			.r-sigh{
  225.  				display: none;
  226.  				border-radius: 50px;
  227.  				box-shadow: 0 0 15px #2187e7;
  228.  				width: 46px;
  229.  				height: 46px;
  230.  				position: absolute;
  231.  				left: 50%;
  232.  				top: 50%;
  233.  				margin-left: -23px;
  234.  				margin-top: -23px;
  235.  				text-align: center;
  236.  				line-height: 46px;
  237.  				font-size: 40px;
  238.  				font-weight: bold;
  239.  				color: #2187e7;
  240.  			}
  241.  			.rprogress-sigh{
  242.  				background-image: none !important;
  243.  			}
  244.  			.rprogress-sigh .rschedule{
  245.  				display: none !important;
  246.  			}
  247.  			.rprogress-sigh .r-sigh{
  248.  				display: block !important;
  249.  			}
  250.  			.rsalert {
  251.  				font-size: 12px;
  252.  				color: #bbb;
  253.  				text-align: center;
  254.  				position: absolute;
  255.  				border-radius: 5px;
  256.  				width: 130px;
  257.  				margin: 5px 5px;
  258.  				padding: 5px;
  259.  				left: 0px;
  260.  				bottom: 0px;
  261.  			}
  262.  			@-webkit-keyframes spin {
  263.  				0% {
  264.  					-webkit-transform: rotate(0deg);
  265.  				}
  266.  				100% {
  267.  					-webkit-transform: rotate(360deg);
  268.  				}
  269.  			}
  270.  			@keyframes spin {
  271.  				0% {
  272.  					transform: rotate(0deg);
  273.  				}
  274.  				100% {
  275.  					transform: rotate(360deg);
  276.  				}
  277.  			}
  278.  			#h {
  279.  				background: #fff;
  280.  				border: solid 1px #ddd;
  281.  				padding: 10px !important;
  282.  				font-size: 16px !important;
  283.  				font-family: verdana !important;
  284.  				line-height: 18px !important;
  285.  				overflow: visible;
  286.  				position: absolute;
  287.  				left: -1000px;
  288.  				right: 0px;
  289.  				word-break: break-all;
  290.  				word-wrap: break-word;
  291.  			}
  292.  			.cancel {
  293.  				background-color: darkred;
  294.  			}
  295.  		</style>
  296.  	</head>
  297.   	<body contextmenu="return false;">
  298.  		<header class="mui-bar mui-bar-nav toptitbox">
  299.  			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></span>
  300.  			<h1 class="mui-title toptit">对方姓名</h1>
  301.  			<span class="mui-icon mui-icon-contact mui-pull-right personhead"></span>
  302.  		</header>
  303.  		<pre id='h'></pre>
  304.  		<script id='msg-template' type="text/template">
  305.  			<% for(var i in record){ var item=record[i]; %>
  306.  				<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
  307.  					<% if(item.sender=='self' ) { %>
  308.  						<i class="msg-user mui-icon mui-icon-person"></i>
  309.  					<% } else { %>
  310.  						<img class="msg-user-img" src="../images/logo.png" alt="" />
  311.  					<% } %>
  312.  					<div class="msg-content">
  313.  						<div class="msg-content-inner">
  314.  							<% if(item.type=='text' ) { %>
  315.  								<%=( item.content|| '&nbsp;&nbsp;') %>
  316.  							<% } else if(item.type=='image' ) { %>
  317.  								<img class="msg-content-image" src="<%=(item.content)%>" style="max-width: 100px;" />
  318.  							<% } else if(item.type=='sound' ) { %>
  319.  								<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
  320.  								<span class="play-state">点击播放</span>
  321.  							<% } %>
  322.  						</div>
  323.  						<div class="msg-content-arrow"></div>
  324.  					</div>
  325.  					<div class="mui-item-clear"></div>
  326.  				</div>
  327.  			<% } %>
  328.  		</script>
  329.  		<div class="mui-content">
  330.  			<div class="operatebox">
  331.  				<div class="themespan mui-pull-left" style="width:70%;">
  332.  					<span class="">关于XXXXXX的咨询</span>
  333.  				</div>
  334.  				
  335.  				<div class="operatebtnbox mui-pull-right">
  336.  					<!--未评价-->
  337. 	                <button id='promptBtn' type="button" class="mui-btn mui-btn-block mui-btn-outlined frmbtn operatebtn" style="width:80px;">去评价</button>
  338.  					<div id="info">
  340. 				</div>
  341.  						
  342.  					<!--已评价-->
  343.  					<div class="">
  344.  						<span></span>
  345.  						<div>
  346.  							
  347.  						</div>
  348.  					</div>
  349.  				</div>
  350.  			</div>
  351.  			<div id='msg-list'>
  352.  			</div>
  353.  		</div>
  354.  		<div class="">
  355.  			
  356.  		</div>
  357.  		
  358.  		<script src="../js/public/mui.min.js"></script>
  359.  		<script src="../js/public/mui.imageViewer.js"></script>
  360.  		<script src="../js/public/arttmpl.js"></script>
  361.  		<script type="text/javascript" charset="utf-8">
  362.  		//mui初始化
  363. //			mui.init({
  364. //				swipeBack: true //启用右滑关闭功能
  365. //			});
  366. //			var info = document.getElementById("info");
  367. //			document.getElementById("promptBtn").addEventListener('tap', function(e) {
  368. //				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
  369. //				var btnArray = ['暂不评价', '发送'];
  370. //				mui.prompt('请您对此次咨询进行评价：', '性能好', 'Hello MUI', btnArray, function(e) {
  371. //					if (e.index == 1) {
  372. //						info.innerText = '谢谢你的评语：' + e.value;
  373. //					} else {
  374. //						info.innerText = '你点了取消按钮';
  375. //					}
  376. //				})
  377. //			});
  378. //			document.getElementById("toastBtn").addEventListener('tap', function() {
  379. //				mui.toast('欢迎体验Hello MUI');
  380. //			});	
  381. 		</script>
  382. 	</body>
  383. </html>