APP页面改版

app.html

@@ -30,14 +30,26 @@
 			</div>
 		</div>
 		<div class="warpContent">
-       <div class="appDown autoHeight">
-       		<div class="phone"></div>
-       		<div class="title"></div>
-       		<div class="down">
-       			<div class="qrcode" title="扫描二维码下载"><div class="saoma"></div></div>
-       			<a href="http://cld.smartcost.com.cn/global/app/cld_app.apk" class="downButton" title="下载到电脑"></a>
-       		</div>
-       </div>
+	       <div class="appDown autoHeight">
+				<div class="iphone-panel">
+					<legend>iPhone</legend>
+					<p><h3>第一步 下载安装APP</h3></p>
+					<p><div class="qrcode qrcode2" title="扫描二维码下载"><div class="saoma"></div></div></p>
+					<p><h3>第二步 进入 设置-通用-设备管理（iOS 9+）</h3></p>
+					<p><img src="images/iphonedemo1.jpg"></p>
+					<p><img src="images/iphonedemo2.jpg"></p>
+					<p><h3>第三步 信任CLD APP应用</h3></p>
+					<p><img src="images/iphonedemo3.jpg"></p>
+					<p><img src="images/iphonedemo4.jpg"></p>
+				</div>
+				<div class="android-panel">
+					<legend>Android Phones</legend>
+					<p><h3>扫码下载</h3></p>
+					<p><div class="qrcode" title="扫描二维码下载"><div class="saoma"></div></div></p>
+					<p><h3>或 下载APK到电脑</h3></p>
+					<p><a href="http://cld.smartcost.com.cn/global/app/cld_app.apk" class="downButton" title="下载到电脑"></a></p>
+				</div>
+			</div>
 		</div>
 	</div>
 <script type="text/javascript">autoFlashHeight();</script>	

css/global.css

@@ -2510,43 +2510,35 @@ table .taC{
 .appDown {
   background:url(appbg.jpg) no-repeat center center;
   position:relative;
+  color:#fff;
 }
-.appDown .phone{
-  background:url(appphone.png) no-repeat 0 0;
-  width:516px;
-  height:697px;
-  position:absolute;
-  left:10%;
-  top:50%;
-  margin-top:-350px;
+.appDown legend{
+  color:#fff;
 }
-.appDown .title{
-  background:url(appphone.png) no-repeat 0 -697px;
-  height:102px;
-  width:400px;
-  position:absolute;
-  left:55%;
-  top:20%;
-
+.appDown .android-panel,.appDown .iphone-panel{
+  width:35%;
+  float:left;
+  border:1px solid #fff;
+  padding:30px 40px;
+  margin:30px;
+  border-radius: 10px;
+  background:rgb(0,0,0,.6);
 }
-.appDown .down {
-  position:absolute;
-  left:55%;
-  top:40%;
+.appDown .qrcode{
+  background:url(qrcode.png) no-repeat;
   width:220px;
+  height:220px;
+  margin:0 0 15px 0;
+  position: relative;
 }
-.appDown .down h1{
-  font-size:36px;
-  color:#fff;
-}
-.appDown .down .qrcode{
-  background:url(qrcode.png) no-repeat;
+.appDown .qrcode2{
+  background:url(qrcode2.png) no-repeat;
   width:220px;
   height:220px;
   margin:0 0 15px 0;
   position: relative;
 }
-.down .qrcode .saoma{
+.qrcode .saoma{
   width:160px;
   height:240px;
   background:url(weixin.png) no-repeat;
@@ -2560,7 +2552,7 @@ table .taC{
   -ms-transition: all 1.5s ease-in-out;
   transition: all 1.5s ease-in-out;
 }
-.down .qrcode:hover .saoma{
+.qrcode:hover .saoma{
  left:240px;
   opacity: 1;
 }