xiongzhu 3 лет назад
Родитель
Сommit
ad0dfef7da

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
src/main/resources/static/css/devices.min.css


+ 96 - 24
src/main/resources/static/download_raex.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>下载APP</title>
     <script src="/static/js/jquery.min.js"></script>
+    <link href="/static/css/devices.min.css" rel="stylesheet">
     <style>
         a {
             padding: 0;
@@ -42,14 +43,14 @@
 
         body {
             display: flex;
-            flex-direction: column;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
         }
 
         .icon {
-            width: 60vw;
-            height: 60vw;
+            width: 200px;
+            height: 200px;
+            display: none;
         }
 
         .btn-download {
@@ -67,6 +68,10 @@
             margin-top: 30px;
         }
 
+        .btn-download:first-child {
+            margin-top: 0;
+        }
+
         .btn-download svg {
             width: 20px;
             margin-right: 6px;
@@ -93,31 +98,87 @@
             top: 0;
             width: 200px;
         }
+
+        .btns {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-left: 30px;
+        }
+
+        @media (max-width: 800px) {
+            #device {
+                display: none;
+            }
+
+            .icon {
+                display: inherit;
+            }
+
+            body {
+                flex-direction: column;
+            }
+
+            .btns {
+                margin-left: 0;
+                margin-top: 30px;
+            }
+        }
+
+        .screen-icon-wrapper {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #181818;
+        }
+
+        .screen-icon {
+            width: 200px;
+        }
     </style>
 </head>
 
 <body>
 <img src="img/app_icon_raex.png" class="icon"/>
-<a class="btn-download" id="btn-ios"
-   href="https://itunes.apple.com/cn/app/id1598469798" style="display: none">
-    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="apple"
-         class="svg-inline--fa fa-apple fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-        <path fill="currentColor"
-              d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
-        </path>
-    </svg>
-    <span class="text">下载iOS版</span>
-</a>
-<a class="btn-download" id="btn-android" style="display: none">
-    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="android"
-         class="svg-inline--fa fa-android fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 576 512">
-        <path fill="currentColor"
-              d="M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55">
-        </path>
-    </svg>
-    <span class="text">下载Android版</span>
-</a>
+<div class="marvel-device note8" id="device">
+    <div class="inner"></div>
+    <div class="overflow">
+    </div>
+    <div class="speaker"></div>
+    <div class="sleep"></div>
+    <div class="volume"></div>
+    <div class="screen">
+        <div class="screen-icon-wrapper">
+            <img src="img/app_icon_raex.png" class="screen-icon"/>
+        </div>
+    </div>
+</div>
+<div class="btns">
+    <a class="btn-download" id="btn-ios"
+       href="https://itunes.apple.com/cn/app/id1598469798" style="display: none">
+        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="apple"
+             class="svg-inline--fa fa-apple fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 384 512">
+            <path fill="currentColor"
+                  d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
+            </path>
+        </svg>
+        <span class="text">下载iOS版</span>
+    </a>
+    <a class="btn-download" id="btn-android" style="display: none">
+        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="android"
+             class="svg-inline--fa fa-android fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 576 512">
+            <path fill="currentColor"
+                  d="M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55">
+            </path>
+        </svg>
+        <span class="text">下载Android版</span>
+    </a>
+</div>
 <div class="mask">
     <img src="img/zhifu_img_liulanqi_ios.png"/>
 </div>
@@ -139,6 +200,17 @@
             $('#btn-ios').show();
         }
     });
+
+    try {
+        $('#device').css('zoom', window.innerHeight / 822 * 0.8)
+    } catch {
+    }
+    window.addEventListener('resize', function () {
+        try {
+            $('#device').css('zoom', window.innerHeight / 822 * 0.8)
+        } catch {
+        }
+    })
 </script>
 </body>
 

Некоторые файлы не были показаны из-за большого количества измененных файлов