down.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <view class="bg">
  3. <!-- <navbar backColor="#fff" :config="config"></navbar> -->
  4. <view class="top-box">
  5. <image src="/static/login/logo.png" mode="" class="logo"></image>
  6. </view>
  7. <view class="btn-row">
  8. <button class="btn" @click="downLoad(1)">
  9. <image src="/static/login/android.png" mode="" class="logo"></image>
  10. 安卓下载
  11. </button>
  12. <button class="btn" @click="downLoad(2)">
  13. <image src="/static/login/ios.png" mode="" class="logo"></image>
  14. IOS下载
  15. </button>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. config: {
  24. back: true, //false是tolbar页面 是则不写
  25. title: "下载",
  26. color: "#1A1A1A",
  27. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  28. backgroundColor: [1, "#fff"],
  29. statusBarFontColor: "#1A1A1A",
  30. },
  31. appInfo: null,
  32. };
  33. },
  34. onLoad(options) {
  35. this.getData();
  36. },
  37. methods: {
  38. getData() {
  39. this.$http.get("/app/config/info").then((res) => {
  40. if (res && res.code == 200) {
  41. this.appInfo = res.data;
  42. }
  43. });
  44. },
  45. downLoad(type) {
  46. window.location.href = type == 1 ? this.appInfo.android_link : this.appInfo.ios_link;
  47. },
  48. },
  49. };
  50. </script>
  51. <style>
  52. page {
  53. width: 100%;
  54. height: 100%;
  55. }
  56. </style>
  57. <style lang='scss' scopd>
  58. .bg {
  59. width: 100%;
  60. height: 100%;
  61. background: url('../static/bg.png') no-repeat;
  62. background-size: 100% 100%;
  63. }
  64. .top-box {
  65. position: absolute;
  66. display: flex;
  67. width: 100%;
  68. align-items: center;
  69. justify-content: center;
  70. top: 400rpx;
  71. left: 50%;
  72. transform: translateX(-50%);
  73. .logo {
  74. width: 186rpx;
  75. height: 186rpx;
  76. }
  77. }
  78. .btn-row {
  79. position: fixed;
  80. display: flex;
  81. width: 100%;
  82. justify-content: space-around;
  83. flex-direction: column;
  84. align-items: center;
  85. bottom: 400rpx;
  86. left: 50%;
  87. transform: translateX(-50%);
  88. .btn {
  89. border-radius: 60rpx;
  90. width: 80%;
  91. background: #E6E6E6;
  92. color: #30AFB5;
  93. margin-top: 30rpx;
  94. display: flex;
  95. align-items: center;
  96. justify-content: center;
  97. image {
  98. width: 40rpx;
  99. height: 40rpx;
  100. margin-right: 10rpx;
  101. }
  102. }
  103. }
  104. </style>