|
|
@@ -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>
|
|
|
|
