手机模型

skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css

@@ -2550,6 +2550,108 @@ body .layer-ext-winconfirm {
 .member-list-div{
 	height: calc(100vh - 140px);
 }
+
+/* 样式1 */
+.iphone {
+    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.7);
+    border: 5px solid #d9dbdc;
+    background: #f8f8f8;
+    padding: 15px;
+    border-radius: 50px;
+    height: 100%;
+    position: relative;
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+}
+.iphone-top {
+    padding: 5px 80px 20px;
+    position: relative;
+}
+.iphone-top .speaker {
+    display: block;
+    width: 70px;
+    height: 6px;
+    margin: 0 auto;
+    border-radius: 6px;
+    background: #292728;
+}
+.iphone-top .camera {
+    display: block;
+    margin: 0 auto;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin-bottom: 13px;
+    background: #333;
+}
+.iphone-top .sensor {
+    display: block;
+    width: 15px;
+    height: 15px;
+    float: left;
+    background: #333;
+    margin-top: -5px;
+    border-radius: 50%;
+}
+.iphone .top-bar, .iphone .bottom-bar {
+    display: block;
+    width: 100%;
+    height: 15px;
+    border-left: 5px solid #BBB;
+    border-right: 5px solid #BBB;
+    position: absolute;
+    left: -5px;
+}
+.iphone .top-bar {
+    top: 65px;
+}
+.iphone .bottom-bar {
+    bottom: 65px;
+}
+.iphone-screen {
+    background: #eee;
+    border: 1px solid #fff;
+    height: calc(100vh - 145px);
+    width: 100%;
+    margin: 0 auto;
+    border: 2px solid rgba(0, 0, 0, 0.9);
+    border-radius: 3px;
+    overflow: hidden;
+}
+.iphone-screen img {
+    width: 100%;
+}
+.iphone .buttons .on-off, .iphone .buttons .up, .iphone .buttons .down, .iphone .buttons .sleep {
+    display: block;
+    background: #CCC;
+    position: absolute;
+    border-radius: 2px 0px 0px 2px;
+}
+.iphone .buttons .on-off {
+    height: 40px;
+    width: 3px;
+    top: 100px;
+    left: -8px;
+}
+.iphone .buttons .up, .iphone .buttons .down, .iphone .buttons .sleep {
+    height: 60px;
+    width: 5px;
+    left: -10px;
+}
+.iphone .buttons .up {
+    top: 170px;
+}
+.iphone .buttons .down {
+    top: 250px;
+}
+.iphone .buttons .sleep {
+    left: auto;
+    right: -10px;
+    top: 170px;
+    border-radius: 0px 2px 2px 0px;
+}
+
+
 /*** 小程序页面管理end ***/
 
 /*******************************************自定义样式end********************************************/

skyeye-web/src/main/webapp/tpl/rmmysmpropage/mysmpropagelist.html

@@ -47,7 +47,15 @@
 			</div>
     	</div>
     	<div class="layui-col-xs6 center-content">
-	    	22
+	    	<div class="iphone layui-col-xs8 layui-col-xs-offset2 layui-col-sm6 layui-col-sm-offset3 layui-col-md4 layui-col-md-offset4">
+				<div class="iphone-top"> <span class="camera"></span> <span class="sensor"></span> <span class="speaker"></span> </div>
+				<div class="top-bar"></div>
+				<div class="iphone-screen">
+					
+				</div>
+				<div class="buttons"> <span class="on-off"></span> <span class="sleep"></span> <span class="up"></span> <span class="down"></span> </div>
+				<div class="bottom-bar"></div>
+			</div>
     	</div>
     	<div class="layui-col-xs3 right-menu">
     		<div class="layui-tab layui-tab-card hei-100-per">