下载页

src/pages/download/Index.vue

@@ -1,22 +1,36 @@
 <template>
-  <div id="download" :class="{ app: true, block: type === 1 }">
+  <div
+    id="download"
+    :class="{ app: true, block: type === 1 }"
+    :style="{ width: client.width + 'px', height: client.height + 'px' }"
+    ref="download"
+  >
     <van-overlay :show="show" class-name="overlay">
       <div class="wrapper text">
         <div class="top"></div>
         请点击右上角选择“浏览器中打开”
       </div>
     </van-overlay>
-    <img src="../../assets/image/down.jpg" alt="" />
-    <div class="button">
+    <div class="main">
+      <img src="../../assets/image/down.jpg" style=" height: 100%" />
+      <div class="content" :style="{ fontSize: client.fs + 'px' }">
+        <div class="title">应用简介:</div>
+        <div class="body">
+          《智慧融媒APP》作为集团信息化统一入口，实现了信息化系统，实现办公自动化系统、综合信息服务系统，内容生产系统等多系统为一体的综合型掌上服务平台应用。目前已实现的业务功能包含了新闻资讯发布、党员管理、门禁系统及活动传播数据统计分析，后续会逐步拓展业务功能，最终实现集团办公信息化、自动化。
+        </div>
+      </div>
+    </div>
+    <div class="button" :style="{ width: client.width + 'px' }">
       <van-button
         type="danger"
-        style="border-color: #f51919; background-color: #f51919"
+        style="border-color: #FF6066; background-color: #FF6066"
         round
         hairline
         @click="down"
         block
-        >下载</van-button
       >
+        下载APP
+      </van-button>
     </div>
   </div>
 </template>
@@ -36,6 +50,11 @@ export default {
       isWindows: false,
       isIphone: false,
       show: false,
+      client: {
+        width: 0,
+        height: 0,
+        fs: 0
+      },
       url: {
         dev: {
           ios: "https://testflight.apple.com/join/idXh3Lwq",
@@ -54,7 +73,6 @@ export default {
   },
   methods: {
     down() {
-      console.log(this.url[this.$pageParams.env]);
       if (this.isIphone) {
         window.location.href = this.url[this.$pageParams.env].ios;
       } else {
@@ -64,6 +82,14 @@ export default {
   },
   mounted() {
     this.$pageParams = currentUrlToParams();
+    this.client = {
+      width:
+        document.documentElement.clientWidth >= 750
+          ? document.documentElement.clientHeight / 1.9
+          : document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight,
+      fs: 16
+    };
     sysConfig().then(res => {
       this.type = res.GRAY_MODE - 0;
     });
@@ -76,7 +102,6 @@ export default {
       this.show = true;
       return;
     }
-    console.log(this);
     if (this.$pageParams.env != "dev" && this.isIphone) {
       window.location.href = this.url.pro.ios;
     }
@@ -89,39 +114,68 @@ export default {
 #download {
   max-width: 750px;
   margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  font-size: 0;
+  overflow: hidden;
+  background-color: #ff7268;
+  .main {
+    overflow-y: scroll;
+    height: 100%;
+    position: relative;
+    .content {
+      .title {
+        padding-bottom: 10px;
+      }
+      .body {
+        line-height: 1.5em;
+        text-indent: 2em;
+        padding: 0 10px;
+      }
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding: 0 20px;
+      font-size: 16px;
+      top: 55%;
+      color: #ffffff;
+      text-shadow: 0px 7px 8px rgba(4, 0, 0, 0.32);
+    }
+  }
+  .text {
+    width: 9.5em;
+    float: right;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.6);
+    font-size: 14px;
+    border-radius: 10px;
+    margin: 1em;
+    padding: 10px;
+    .top {
+      transform: rotate(45deg);
+      -ms-transform: rotate(45deg); /* IE 9 */
+      -moz-transform: rotate(45deg); /* Firefox */
+      -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
+      -o-transform: rotate(45deg); /* Opera */
+      border: none;
+      border: 5px solid rgba(0, 0, 0, 0);
+      border-top-color: rgba(0, 0, 0, 0.6);
+      border-left-color: rgba(0, 0, 0, 0.6);
+      width: 0;
+      float: right;
+      margin-top: -14px;
+    }
+  }
   .button {
-    position: fixed;
+    position: absolute;
     bottom: 0;
-    padding: 1em 2em;
+    padding: 10px 20px;
     width: 100%;
+    max-width: 750px;
     background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
   }
 }
 .overlay {
   background-color: rgba(0, 0, 0, 0);
 }
-.text {
-  width: 9.5em;
-  float: right;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.6);
-  font-size: 14px;
-  border-radius: 10px;
-  margin: 1em;
-  padding: 10px;
-  .top {
-    transform: rotate(45deg);
-    -ms-transform: rotate(45deg); /* IE 9 */
-    -moz-transform: rotate(45deg); /* Firefox */
-    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-    -o-transform: rotate(45deg); /* Opera */
-    border: none;
-    border: 5px solid rgba(0, 0, 0, 0);
-    border-top-color: rgba(0, 0, 0, 0.6);
-    border-left-color: rgba(0, 0, 0, 0.6);
-    width: 0;
-    float: right;
-    margin-top: -14px;
-  }
-}
 </style>