Inicio Explorar Axuda
Rexistro Iniciar sesión
noseCloud
/
Starboth-Cloud-H5
Seguir 2
Destacar 0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

需求添加应用到桌面

heyang %!s(int64=4) %!d(string=hai) anos
pai
efd99a2453
achega
c68401cf7f
Modificáronse 3 ficheiros con 131 adicións e 3 borrados
Dividir vista Mostrar estatísticas de Diff
  1. 104 0
      microserviceUserH5/static/css/webOnServer.css
  2. BIN=BIN
      microserviceUserH5/static/img/webOnServer/arrow.png
  3. 27 3
      microserviceUserH5/vcloud/webOnServer.html

+ 104 - 0
microserviceUserH5/static/css/webOnServer.css
Ver ficheiro 

@@ -30,4 +30,108 @@ ul, li {
 
   width: 100%;
 
   text-align: center;
 
   font-size: 0.4rem;
 
+  padding-top: 1.2rem;
 
+}
 
+
 
+.middle{
 
+  display: flex;
 
+}
 
+
 
+.phone{
 
+  width: 2.58rem;
 
+  height: 5.2rem;
 
+  margin: 0.72rem 0 0 0.76rem;
 
+  position: relative;
 
+}
 
+
 
+.arrow{
 
+  width: 1.3rem;
 
+  height: 0.48rem;
 
+  position: absolute;
 
+  right: -0.9rem;
 
+  bottom: 2.26rem;
 
+}
 
+
 
+.arrow-img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.app{
 
+  margin: 1.8rem 0 0 0.84rem;
 
+}
 
+
 
+.app-img{
 
+  width: 2rem;
 
+  height: 2rem;
 
+  border-radius: 0.38rem;
 
+}
 
+
 
+.app-text{
 
+  width: 2rem;
 
+  font-size: 0.32rem;
 
+}
 
+
 
+.footer-wrap{
 
+  position: fixed;
 
+  bottom: 0.84rem;
 
+  left: 50%;
 
+  margin-left: -2.99rem;
 
+  width: 5.98rem;
 
+  height: 1.6rem;
 
+  background-color: #FFFFFF;
 
+  box-shadow: 0 0.04rem 0.24rem 0 #D4DAE4;
 
+  border-radius: 0.2rem;
 
+}
 
+
 
+.top{
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  margin-top: 0.3rem;
 
+}
 
+
 
+.top-text{
 
+  font-size: 0.28rem;
 
+}
 
+
 
+.download-img{
 
+  width: 0.34rem;
 
+  height: 0.44rem;
 
+  margin-left: 0.14rem;
 
+}
 
+
 
+.bottom{
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  margin-top: 0.1rem;
 
+}
 
+
 
+.add-img{
 
+  width: 0.36rem;
 
+  height: 0.36rem;
 
+  margin-left: 0.14rem;
 
+}
 
+
 
+.left-text{
 
+  font-size: 0.28rem;
 
+}
 
+
 
+.right-text{
 
+  font-size: 0.28rem;
 
+}
 
+
 
+.down-img{
 
+  width: 0.42rem;
 
+  height: 0.28rem;
 
+  position: absolute;
 
+  left: 50%;
 
+  bottom: -0.56rem;
 
+  margin-left: -0.21rem;
 
 }

BIN=BIN
microserviceUserH5/static/img/webOnServer/arrow.png
Ver ficheiro


+ 27 - 3
microserviceUserH5/vcloud/webOnServer.html
Ver ficheiro 

@@ -17,12 +17,33 @@
 
 <body>
 
     <div class="container">
 
         <div class="title">添加应用到桌面</div>
 
-        <div>
 
-            <img src="../static/img/webOnServer/phone.png" />
 
+        <div class="middle">
 
+            <div class="phone">
 
+                <img class="img" src="../static/img/webOnServer/phone.png" />
 
+                <div class="arrow">
 
+                    <img class="arrow-img" src="../static/img/webOnServer/arrow.png" />
 
+                </div>
 
+            </div>
 
+            <div class="app">
 
+                <img class="app-img" src="" />
 
+                <div class="app-text"></div>
 
+            </div>
 
         </div>
 
         <a href="" id="qbt" style="display: none;"></a>
 
         <!--快捷方式参数url：url-->
 
         <span id="msg"></span>
 
+        <div class="footer-wrap">
 
+            <div class="top">
 
+                <span class="top-text">点击下方工具栏上的</span>
 
+                <img class="download-img" src="../static/img/webOnServer/download.png" />
 
+            </div>
 
+            <div class="bottom">
 
+                <span class="left-text">并选择</span>
 
+                <img class="add-img" src="../static/img/webOnServer/add.png" />
 
+                <span class="right-text">“添加到主屏幕”</span>
 
+            </div>
 
+            <img class="down-img" src="../static/img/webOnServer/down.png" />
 
+        </div>
 
     </div>
 
 </body>
 
 <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
 
@@ -61,7 +82,10 @@
 
             // todo 点击快捷方式 打开app引导页 样式
 
         }
 
         else {
 
-            document.getElementById("msg").innerHTML = '<div style="font-size:12px">添加快捷方式引导页</div>';
 
+            const appImg = document.getElementsByClassName("app-img")[0];
 
+            const appText = document.getElementsByClassName("app-text")[0];
 
+            appImg.src= icon;
 
+            appText.innerText = name || '';
 
             // todo 添加快捷方式引导页 样式
 
         }