登陆页面写活

pages/index/index.vue

@@ -137,6 +137,7 @@ export default {
       loading: true, // 默认为true，等待API数据加载
       // 页面配置数据，完全依赖API
       pageConfig: {
+        login: { img: "" },
         background: { img: "" },
         announcement: { icon: "", text: "" },
         topIcons: {
@@ -275,6 +276,8 @@ export default {
       this.navigationItems = parsedConfig.navigationItems || [];
       this.bottomSection = parsedConfig.bottomSection || this.bottomSection;
       console.log("配置更新完成");
+      console.log("pageConfig.login.img", this.pageConfig.login.img);
+      uni.setStorageSync("loginImg", this.pageConfig.login.img);
     },
 
     /**

pages/login/login.vue

@@ -1,20 +1,21 @@
 <template>
   <view class="page">
-    <u-navbar
+    <!--    <u-navbar-->
-      :background="bgc"
+    <!--      :background="bgc"-->
-      :border-bottom="false"
+    <!--      :border-bottom="false"-->
-      :is-back="false"
+    <!--      :is-back="false"-->
-      :title="titleTxt"
+    <!--      :title="titleTxt"-->
-      height="36"
+    <!--      height="36"-->
-      title-color="#000"
+    <!--      title-color="#000"-->
-      title-size="36"
+    <!--      title-size="36"-->
-    >
+    <!--    >-->
-    </u-navbar>
+    <!--    </u-navbar>-->
+
+    <!-- 背景图 -->
+    <image :src="getLoginImg" class="bj" mode="aspectFill"></image>
+
     <view class="imgbox">
-      <image
+      <image :src="getLoginImg" mode=""></image>
-        mode=""
-        src="https://api.ccttiot.com/e3227491d46d2d7ac1c1c592e44f48bc-1754467412954.jpg"
-      ></image>
     </view>
     <button class="button" @click="goToLogin">授权登录</button>
     <view class="tip">
@@ -91,6 +92,7 @@ import { getPrivacyPolicy, getServiceTerms } from "@/api/article/article.js";
 export default {
   data() {
     return {
+      loginImg: "",
       bgc: {
         backgroundColor: "#fff",
       },
@@ -110,6 +112,11 @@ export default {
   },
   onLoad() {},
   onUnload() {},
+  computed: {
+    getLoginImg() {
+      return uni.getStorageSync("loginImg");
+    },
+  },
   methods: {
     userType(num) {
       this.chooseType = false;
@@ -324,22 +331,22 @@ page {
 }
 
 .imgbox {
-  margin: 102rpx auto;
+  //margin: 102rpx auto;
-  width: 750rpx;
+  //width: 750rpx;
-  height: 422rpx;
+  //height: 755rpx;
-  z-index: 0;
+  //z-index: 0;
 
   image {
-    width: 750rpx;
+    //width: 750rpx;
-    height: 422rpx;
+    //height: 422rpx;
   }
 }
 
 .button {
-  margin-top: 200rpx;
+  margin-top: 1200rpx;
   width: 586rpx;
-  height: 90rpx;
+  //height: 90rpx;
-  background: #4c97e7;
+  background: #522510;
   border-radius: 54rpx 54rpx 54rpx 54rpx;
   font-weight: 500;
   font-size: 40rpx;
@@ -347,7 +354,7 @@ page {
 }
 
 .tip {
-  margin-top: 128rpx;
+  margin-top: 64rpx;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -357,7 +364,7 @@ page {
   color: #979797;
 
   .link-text {
-    color: #4c97e7;
+    color: #522510;
     text-decoration: underline;
   }
 }
@@ -383,8 +390,8 @@ page {
 }
 
 .checkbox.checked {
-  background-color: #4c97e7;
+  background-color: #522510;
-  border-color: #4c97e7;
+  border-color: #522510;
 }
 
 .checkmark {
@@ -463,11 +470,20 @@ page {
 .popup-btn {
   width: 100%;
   height: 80rpx;
-  background: #4c97e7;
+  background: #522510;
   color: #fff;
   border: none;
   border-radius: 40rpx;
   font-size: 30rpx;
   font-weight: 500;
 }
+
+.bj {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
 </style>