|
|
@@ -0,0 +1,337 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>聊天</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ font-family: -apple-system;
|
|
|
+ font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-title {
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 1px solid #F1F1F1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-title span {
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-content {
|
|
|
+ background-color: #ebebeb;
|
|
|
+ overflow: auto;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 156px;
|
|
|
+ top: 85px;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area {
|
|
|
+ height: 155px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-top: 1px solid #F1F1F1;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ background: #ffffff;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area-tool {
|
|
|
+ position: relative;
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area-tool img {
|
|
|
+ margin: 7px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area-textarea {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area-textarea textarea {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ padding: 5px 0 0;
|
|
|
+ height: 68px;
|
|
|
+ line-height: 20px;
|
|
|
+ border: none;
|
|
|
+ overflow: auto;
|
|
|
+ resize: none;
|
|
|
+ background: 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area-send-space {
|
|
|
+ position: relative;
|
|
|
+ height: 46px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area-send {
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ top: 3px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area-send-btn {
|
|
|
+ border-radius: 3px 0 0 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-bottom-area-send span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 32px;
|
|
|
+ margin-left: 5px;
|
|
|
+ padding: 0 20px;
|
|
|
+ background-color: #5FB878;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .chat-sender {
|
|
|
+ clear: both;
|
|
|
+ font-size: 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-sender div:nth-of-type(1) {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-sender div:nth-of-type(2) {
|
|
|
+ margin: 0 50px 2px 50px;
|
|
|
+ padding: 0px;
|
|
|
+ color: #848484;
|
|
|
+ font-size: 70%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-sender div:nth-of-type(3) {
|
|
|
+ background-color: white;
|
|
|
+ /*float: left;*/
|
|
|
+ margin: 0 50px 10px 50px;
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ border-radius: 7px;
|
|
|
+ text-indent: -12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-receiver {
|
|
|
+ clear: both;
|
|
|
+ font-size: 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-receiver div:nth-of-type(1) {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-receiver div:nth-of-type(2) {
|
|
|
+ margin: 0px 50px 2px 50px;
|
|
|
+ padding: 0px;
|
|
|
+ color: #848484;
|
|
|
+ font-size: 70%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-receiver div:nth-of-type(3) {
|
|
|
+ /*float:right;*/
|
|
|
+ background-color: #b2e281;
|
|
|
+ margin: 0px 50px 10px 50px;
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ border-radius: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-receiver div:first-child img,
|
|
|
+ .chat-sender div:first-child img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ /*border-radius: 10%;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-left_triangle {
|
|
|
+ height: 0px;
|
|
|
+ width: 0px;
|
|
|
+ border-width: 6px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: transparent white transparent transparent;
|
|
|
+ position: relative;
|
|
|
+ left: -22px;
|
|
|
+ top: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-right_triangle {
|
|
|
+ height: 0px;
|
|
|
+ width: 0px;
|
|
|
+ border-width: 6px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: transparent transparent transparent #b2e281;
|
|
|
+ position: relative;
|
|
|
+ right: -22px;
|
|
|
+ top: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-notice {
|
|
|
+ clear: both;
|
|
|
+ font-size: 70%;
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-notice span {
|
|
|
+ background-color: #cecece;
|
|
|
+ line-height: 25px;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <!-- title -->
|
|
|
+ <div class="chat-title">
|
|
|
+ <span>姓名或群名</span>
|
|
|
+ </div>
|
|
|
+ <div class="chat-content">
|
|
|
+ <!-- Left -->
|
|
|
+ <div class="chat-sender">
|
|
|
+ <div><img src="https://git.o2oa.net/uploads/-/system/project/avatar/20/logo_o2_1000_round.png?width=64"></div>
|
|
|
+ <div>阿奔 Ben</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-left_triangle"></div>
|
|
|
+ <span> 苹果增加三款配件的颜色选项</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Right -->
|
|
|
+ <div class="chat-receiver">
|
|
|
+ <div><img src="img/max.png"></div>
|
|
|
+ <div>好人·马克思</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-right_triangle"></div>
|
|
|
+ <span> 但是如果你正在再发新的APP跨平台项目，我建议你考虑一下Ionic2/Ionic3。 ionic2/Ionic3的架构使得“单一职责原则”得到了体现，组件、页面之间相互独立，有利于内聚和解耦。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Right -->
|
|
|
+ <div class="chat-sender">
|
|
|
+ <div><img src="img/adam.jpg"></div>
|
|
|
+ <div>阿达姆 Adam</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-left_triangle"></div>
|
|
|
+ <span> 一款接近原生的Html5移动App开发框架</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Notice/Center -->
|
|
|
+ <div class="chat-notice">
|
|
|
+ <span>2017年12月10日 23:13</span>
|
|
|
+ </div>
|
|
|
+ <!-- Left -->
|
|
|
+ <div class="chat-sender">
|
|
|
+ <div><img src="img/perry.png" /></div>
|
|
|
+ <div>佩里 Perry</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-left_triangle"></div>
|
|
|
+ <span> Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Left -->
|
|
|
+ <div class="chat-sender">
|
|
|
+ <div><img src="img/mike.png"></div>
|
|
|
+ <div>麦克</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-left_triangle"></div>
|
|
|
+ <span> 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Right -->
|
|
|
+ <div class="chat-receiver">
|
|
|
+ <div><img src="img/max.png"></div>
|
|
|
+ <div>好人·马克思</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-right_triangle"></div>
|
|
|
+ <span> 最后但并非最不重要的是</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Notice/Center -->
|
|
|
+ <div class="chat-notice">
|
|
|
+ <span>你被群主移除群聊</span>
|
|
|
+ </div>
|
|
|
+ <!-- Left -->
|
|
|
+ <div class="chat-sender">
|
|
|
+ <div><img src="img/mike.png"></div>
|
|
|
+ <div>麦克</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-left_triangle"></div>
|
|
|
+ <span> 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Right -->
|
|
|
+ <div class="chat-receiver">
|
|
|
+ <div><img src="img/max.png"></div>
|
|
|
+ <div>好人·马克思</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-right_triangle"></div>
|
|
|
+ <span> 最后但并非最不重要的是</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Notice/Center -->
|
|
|
+ <div class="chat-notice">
|
|
|
+ <span>你被群主移除群聊</span>
|
|
|
+ </div>
|
|
|
+ <!-- Left -->
|
|
|
+ <div class="chat-sender">
|
|
|
+ <div><img src="img/mike.png"></div>
|
|
|
+ <div>麦克</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-left_triangle"></div>
|
|
|
+ <span> 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Right -->
|
|
|
+ <div class="chat-receiver">
|
|
|
+ <div><img src="img/max.png"></div>
|
|
|
+ <div>好人·马克思</div>
|
|
|
+ <div>
|
|
|
+ <div class="chat-right_triangle"></div>
|
|
|
+ <span> 最后但并非最不重要的是</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Notice/Center -->
|
|
|
+ <div class="chat-notice">
|
|
|
+ <span>你被群主移除群聊</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="chat-bottom-area">
|
|
|
+ <div class="chat-bottom-area-tool">
|
|
|
+ <img src="./icons/icon-emoji.png" />
|
|
|
+ </div>
|
|
|
+ <div class="chat-bottom-area-textarea"><textarea></textarea></div>
|
|
|
+ <div class="chat-bottom-area-send-space">
|
|
|
+ <div class="chat-bottom-area-send">
|
|
|
+ <span class="chat-bottom-area-send-btn">发送</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
fancy
