替换下载背景图片

pages/down.vue

@@ -1,115 +1,112 @@
 <template>
-	<view>
-		<!-- <navbar backColor="#fff" :config="config"></navbar> -->
-		<view class="backBox">
-			<image src="/static/down/download_pattern_left.png" mode=""></image>
-			<image src="/static/down/download_pattern_right.png" mode=""></image>
-		</view>
-		<view>
-			<view class="top-box">
-				<!-- <image src="@/static/logo.png" mode="" class="logo"></image> -->
-				<image src="/static/login/logo.png" mode="" class="logo"></image>
-			</view>
-			<view class="btn-row">
-				<button class="btn" @click="downLoad(1)">
-					<image src="/static/login/android.png" mode="" class="logo"></image>
-					安卓下载
-				</button>
-				<button class="btn" @click="downLoad(2)">
-					<image src="/static/login/ios.png" mode="" class="logo"></image>
-					IOS下载
-				</button>
-			</view>
-		</view>
-		<image class="bottomBg" mode="widthFix" src="/static/down/top_bg_mobile.png"></image>
-	</view>
+  <view class="bg">
+    <!-- <navbar backColor="#fff" :config="config"></navbar> -->
+    <view class="top-box">
+      <image src="/static/login/logo.png" mode="" class="logo"></image>
+    </view>
+    <view class="btn-row">
+      <button class="btn" @click="downLoad(1)">
+        <image src="/static/login/android.png" mode="" class="logo"></image>
+        安卓下载
+      </button>
+      <button class="btn" @click="downLoad(2)">
+        <image src="/static/login/ios.png" mode="" class="logo"></image>
+        IOS下载
+      </button>
+    </view>
+  </view>
 </template>
 
 
 
 <script>
-	export default {
-		data() {
-			return {
-				config: {
-					back: true, //false是tolbar页面 是则不写
-					title: "下载",
-					color: "#fff",
-					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
-					backgroundColor: [1, "#3775F6"],
-					statusBarFontColor: "#ffffff",
-				},
-				appInfo: null,
-			};
-		},
-		onLoad(options) {
-			this.getData();
-		},
-		methods: {
-			getData() {
-				this.$http.get("/app/config/info").then((res) => {
-					if (res && res.code == 200) {
-						this.appInfo = res.data;
-					}
-				});
-			},
-			downLoad(type) {
-				window.location.href = type == 1 ? this.appInfo.android_link : this.appInfo.ios_link;
-			},
-		},
-	};
+  export default {
+    data() {
+      return {
+        config: {
+          back: true, //false是tolbar页面 是则不写
+          title: "下载",
+          color: "#1A1A1A",
+          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
+          backgroundColor: [1, "#fff"],
+          statusBarFontColor: "#1A1A1A",
+        },
+        appInfo: null,
+      };
+    },
+    onLoad(options) {
+      this.getData();
+    },
+    methods: {
+      getData() {
+        this.$http.get("/app/config/info").then((res) => {
+          if (res && res.code == 200) {
+            this.appInfo = res.data;
+          }
+        });
+      },
+      downLoad(type) {
+        window.location.href = type == 1 ? this.appInfo.android_link : this.appInfo.ios_link;
+      },
+    },
+  };
 </script>
 
+<style>
+  page {
+    width: 100%;
+    height: 100%;
+  }
+</style>
 <style lang='scss' scopd>
-	.backBox{
-		display: flex;
-		justify-content: space-between;
-		>image{
-			width: 21.66%;
-		}
-	}
-	.top-box {
-		display: flex;
-		width: 100%;
-		align-items: center;
-		justify-content: center;
-		position: relative;
-		top: -80rpx;
+  .bg {
+    width: 100%;
+    height: 100%;
+    background: url('../static/bg.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .top-box {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    top: 400rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    
+    .logo {
+      width: 186rpx;
+      height: 186rpx;
+    }
+  }
 
-		.logo {
-			width: 186rpx;
-			height: 186rpx;
-		}
-	}
+  .btn-row {
+    position: fixed;
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
+    bottom: 400rpx;
+    left: 50%;
+    transform: translateX(-50%);
 
-	.btn-row {
-		margin-top: 100rpx;
-		display: flex;
-		justify-content: space-around;
-		flex-direction: column;
-		align-items: center;
+    .btn {
+      border-radius: 60rpx;
+      width: 80%;
+      background: #E6E6E6;
+      color: #30AFB5;
+      margin-top: 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-		.btn {
-			border-radius: 60rpx;
-			width: 80%;
-			background: #3D93FC;
-			color: #fff;
-			margin-top: 30rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			image{
-				width: 40rpx;
-				height: 40rpx;
-				margin-right: 10rpx;
-			}
-		}
-	}
-	.bottomBg{
-		width: 100%;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		transform: rotate(180deg);
-	}
-</style>
+      image {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 10rpx;
+      }
+    }
+  }
+</style>