聊天界面

talkview/src/less/app.main.less

@@ -458,4 +458,57 @@ body {
     50%  {opacity:0.5;left:-50px; top:0px;}
     
 	100% {opacity:0;left:-150px; top:0px;}
+}
+
+.app-voice-pause,.app-voice-play{
+  height: 30px;
+  width: 30px;
+  background-repeat: no-repeat;
+  background-image: url(../img/yuyin.png);
+  background-size: 100px 30px;
+  opacity: 1;
+}
+ .app-voice-you .app-voice-pause{
+  /*从未播放*/
+  background-position: -0px -5px;
+}
+.app-voice-you .app-voice-play{
+  /*播放中（不需要过渡动画）*/
+  background-position: -0px -5px;
+  -webkit-animation: voiceplay 1s infinite step-start;
+  -moz-animation: voiceplay 1s infinite step-start;
+  -o-animation: voiceplay 1s infinite step-start;
+  animation: voiceplay 1s infinite step-start;
+}
+
+@keyframes voiceplay {
+
+  0%  {background-position: -0px -5px;}
+
+  33.333333% {
+    background-position: -25px -5px;
+  }
+
+  66.666666% {
+    background-position: -50px -5px;
+  }
+
+  100% {background-position: -75px -5px;}
+
+}
+
+@-webkit-keyframes voiceplay {
+
+  0%  {background-position: -0px -5px;}
+
+  33.333333% {
+    background-position: -25px -5px;
+  }
+
+  66.666666% {
+    background-position: -50px -5px;
+  }
+
+  100% {background-position: -75px -5px;}
+
 }

talkview/src/templates/messages.html

@@ -217,23 +217,32 @@
             </div>-->
 
         <!-- 语音 -->
-        <!--<div class="feed-element">
-                <div class="media-body">
-                    <p>
-                        <strong>陆趣趣</strong><small class="text-muted">-Today 2:10 pm - 12.06.2014</small>
-                    </p>
-                    <div class="well m-l-xs m-t-xs fit-content">
-                        <div class="text-point"></div>
-                        <span class="text-message">
-                                <audio controls>
-                                    <source src="local://E:/LxtalkUIView/dist/img/111.mp3">
-                                    <source src="local://E:/LxtalkUIView/dist/img/111.ogg">
-                                    您的浏览器不支持 audio 元素。
-                                </audio>
-						</span>
-                    </div>
+        <div class="feed-element">
+            <div class="media-body">
+                <p>
+                    <strong>陆趣趣</strong><small class="text-muted">-Today 2:10 pm - 12.06.2014</small>
+                </p>
+                <div class="well m-l-xs m-t-xs fit-content">
+                    <div class="text-point"></div>
+                    <span class="text-message speech">
+                        <div class="app-voice-you">
+                            <img class="app-voice-headimg"/>
+                            <div class="app-voice-state-bg">
+                                <div class="app-voice-state app-voice-pause"></div>
+                            </div>
+                            <div class="app-voice-time app-voice-unread">
+                                1'6"
+                            </div>
+                        </div>
+                        <audio preload="auto" hidden="true">
+                            <source src="local://E:/LxtalkUIView/dist/img/111.mp3" type="audio/mpeg">
+                            <source src="local://E:/LxtalkUIView/dist/img/111.ogg" type="audio/mpeg">
+                            您的浏览器不支持 audio 元素。
+                        </audio>
+					</span>
                 </div>
-            </div>-->
+            </div>
+        </div>
     </div>
     <div>
         <p></p>