远程桌面

talkview/src/less/app.main.less

@@ -294,7 +294,7 @@ body {
 }
 #details-right {
     min-width: 220px;
-    height: 420px;
+    height: 480px;
     margin: auto;
     overflow: hidden;
     text-align: center;
@@ -405,4 +405,58 @@ body {
             box-shadow:0px 0px 1px #ccc;
         }
     }
+    #remote {
+        margin: 5px auto;
+        #backgroundImg {
+            margin: -50px auto -20px;
+            background-image: url(../img/remote.png);
+            height: 200px;
+            .glyphicon {
+                float: right;
+                margin-top: 75px;
+                color: #fff;
+                font-size: 36px;
+                position:relative;
+                animation-name:arrow;
+                animation-duration:1.5s;
+                animation-timing-function:linear;
+                animation-iteration-count:infinite;
+                animation-direction:normal;
+                /* Safari and Chrome: */
+                -webkit-animation-name:arrow;
+                -webkit-animation-duration:1.5s;
+                -webkit-animation-timing-function:linear;
+                -webkit-animation-iteration-count:infinite;
+                -webkit-animation-direction:normal;
+            }
+        }
+        p {
+            margin-top: 10px;
+            font-size: 12px;
+        }
+        button {
+            height: 25px;
+            width: 70px;
+            padding: 0px;
+            margin: 15px 8px;
+        }
+    }
+}
+
+@keyframes arrow
+{
+	0%   {opacity:1;left:50px; top:0px;}
+    
+    50%  {opacity:0.5;left:-50px; top:0px;}
+    
+	100% {opacity:0;left:-150px; top:0px;}
+}
+
+@-webkit-keyframes arrow /* Safari and Chrome */
+{
+	0%   {opacity:1;left:50px; top:0px;}
+    
+    50%  {opacity:0.5;left:-50px; top:0px;}
+    
+	100% {opacity:0;left:-150px; top:0px;}
 }

talkview/src/templates/details-right.html

@@ -21,7 +21,20 @@
         </div>
     </div>
     <div style="border-top:solid 1px #ddd;margin:0px 6px"></div>
-    <div id="userCode">
+    <div id="userCode" ng-show="false">
         <div id="code" qrcode ng-user="user"> </div>
     </div>
+    <div id="remote" ng-show="true">
+        <div id="backgroundImg">
+            <span class="glyphicon glyphicon-arrow-left unConnect"></span>
+        </div>
+        <p class="unConnect" ng-show="true">您正在邀请对方使用远程协助 . . .</p>
+        <button type="button" class="btn btn-warning unConnect" ng-show="true">取消</button>
+        <p class="unConnect" ng-show="false">对方正在邀请您远程控制他的电脑</p>
+        <button type="button" class="btn btn-success unConnect" ng-show="false">接受</button><button type="button" class="btn btn-warning unConnect" ng-show="false">拒绝</button>
+        <p class="inConnect hide" ng-show="true">对方正在控制您的计算机</p>
+        <button type="button" class="btn btn-danger inConnect hide" ng-show="true">断开</button>
+        <p class="inConnect hide" ng-show="false">您正在控制对方的计算机</p>
+        <button type="button" class="btn btn-danger inConnect hide" ng-show="false">断开</button>
+    </div>
 </div>