feat: 完成登录页面的 UI 变更

commons/basic/src/main/ets/components/generalComp/YTButton.ets

@@ -30,7 +30,7 @@ export struct YTButton {
   }
 
   aboutToAppear(): void {
-    if (!this.bgc) {
+    if (!this.bgc && !this.btLinearGradient) {
       this.btLinearGradient = { angle: 92, colors: [['#FF4597F7', 0.023], ['#FF6B6DF7', 1.081]] }
     }
   }

features/feature/src/main/ets/components/ytBuildComp.ets

@@ -46,29 +46,36 @@ export struct ytBuildComp {
       })
 
       if(!this.isLogin && this.checkLogin){
-        Row() {
-          Text("登录使用更多功能")
-            .fontSize(20)
-            .fontWeight(400)
-            .fontColor(Color.White)
+        Column(){
+          Row() {
+            Text("登录使用更多功能")
+              .fontSize(20)
+              .fontWeight(400)
+              .fontColor(Color.White)
 
-          Text("马上登录")
-            .fontSize(14)
-            .fontWeight(500)
-            .borderRadius(20)
-            .padding({ top: 5, bottom: 5, left: 10, right: 10 })
-            .linearGradient({
-              colors: [['#30E3CE', 0.5], ['#91F1FF', 1]]
-            })
-            .onClick(this.toLogin)
+            Text("马上登录")
+              .fontSize(14)
+              .fontWeight(500)
+              .borderRadius(20)
+              .padding({ top: 5, bottom: 5, left: 10, right: 10 })
+              .linearGradient({
+                colors: [['#30E3CE', 0.5], ['#91F1FF', 1]]
+              })
+              .onClick(this.toLogin)
+          }
+          .width("100%")
+          .alignItems(VerticalAlign.Center)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .padding({ left: 20, right: 20, top:  18, bottom: 18 })
+          .backgroundColor('rgba(0, 0, 0, 0.3)')
         }
-        .width("100%")
-        .alignItems(VerticalAlign.Center)
-        .justifyContent(FlexAlign.SpaceBetween)
-        .padding({ left: 20, right: 20, top:  18, bottom: 18 })
-        .backgroundColor('rgba(0, 0, 0, 0.5)')
+        .width('100%')
+        .height('100%')
+        .justifyContent(FlexAlign.End)
+        .alignItems(HorizontalAlign.Center)
+        .backgroundColor('rgba(0, 0, 0, 0.2)')
         .alignRules({
-          bottom: { anchor: "__container__", align: VerticalAlign.Bottom},
+          top: { anchor: "__container__", align: VerticalAlign.Top},
           left: { anchor: "__container__", align: HorizontalAlign.Start},
         })
       }

features/feature/src/main/ets/view/ThirdView.ets

@@ -1,8 +1,11 @@
 import { BigWheelView } from "../components/bigwheel/BigWheelView";
+import { ytBuildComp } from "../components/ytBuildComp";
 
 @Component
 export struct ThirdView {
   build() {
-    BigWheelView()
+    ytBuildComp(){
+      BigWheelView()
+    }
   }
 }

features/user/src/main/ets/components/LoginInput.ets

@@ -14,6 +14,7 @@ export struct LoginInput {
   @Require inputChange: (_: string) => void
   @State private time: number = 61
   private declare setIntervalId: number
+  btLinearGradient?: LinearGradientOptions
   click: () => void = () => {
   }
 
@@ -48,7 +49,8 @@ export struct LoginInput {
           .fontSize(12)
           .fontColor(Color.White)
           .borderRadius(16)
-          .backgroundColor($r('[basic].color.main_ac_color_dark'))
+          .backgroundColor(this.btLinearGradient ? Color.Transparent : $r('[basic].color.main_ac_color_dark'))
+          .linearGradient(this.btLinearGradient)
           .onClick(() => {
             this.loginCollect.requestSmsCode((res) => {
               if (res.smsCode) {

features/user/src/main/ets/pages/LoginPage.ets

@@ -3,9 +3,6 @@ import { LoginCollect } from 'basic/src/main/ets/models/LoginCollect'
 import { RegisterOrResetPassComp } from '../views/RegisterOrResetPassView'
 import { LoginView } from '../views/LoginView'
 
-// import { OtherLoginMethods } from '../views/OtherLoginMethods'
-
-
 @Builder
 function LoginBuilder() {
   NavDestination() {
@@ -20,6 +17,10 @@ struct LoginPage {
   @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) private safeBottom: number = 0
   @State private tabBarIndex: number = 0
   private tabController: TabsController = new TabsController()
+  private linearInfo1: LinearGradientOptions = {
+    colors: [ ['#F7FCF3', 0.1], ['#DEFE9E', 1] ],
+    angle: 90
+  }
 
   aboutToAppear(): void {
 
@@ -34,7 +35,7 @@ struct LoginPage {
             .fontWeight(400)
             .alignSelf(ItemAlign.End)
             .textAlign(TextAlign.Center)
-            .fontColor($r('[basic].color.main_ac_color_light'))
+            .fontColor('#3E5100')
             .onClick(() => {
               yTRouter.routerBack()
             })
@@ -43,24 +44,30 @@ struct LoginPage {
             .borderRadius(12)
             .backgroundColor('#4DFFFFFF')
             .margin({ bottom: 24, right: 28, top: 20 })
-          Text('你好，\n欢迎来到盒小仓')
+          Text('HELLO，\n欢迎来到萌食记')
             .lineHeight(40)
             .fontSize(28)
             .fontWeight(600)
-            .fontColor($r('[basic].color.main_ac_color_dark'))
+            .fontColor('#0E2E1A')
         }
         .padding({ left: 16, })
         .height(193)
         .width('100%')
         .alignItems(HorizontalAlign.Start)
+      }
+      .padding({ top: this.safeTop })
+      .backgroundImage($r('app.media.loginPage_Bg'))
+      .backgroundImageSize(ImageSize.Cover)
 
+      Column(){
         Row() {
           Text('注册')
             .fontSize(16)
             .fontWeight(600)
             .layoutWeight(1)
-            .fontColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? '#FF141111' : '#80141111')
-            .backgroundColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? Color.White : Color.Transparent)
+            .fontColor(this.tabBarIndex == 0 ? '#FF141111' : '#80141111')
+            .backgroundColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? 'rgba(255,255,255,0.5)' : Color.Transparent)
+            // .linearGradient(this.tabBarIndex == 0 ? this.linearInfo1 : this.linearInfo2)
             .textAlign(TextAlign.Center)
             .height(48)
             .borderRadius({ topLeft: 12, topRight: 12, bottomRight: this.tabBarIndex == 1 ? 12 : 0 })
@@ -68,19 +75,21 @@ struct LoginPage {
               this.tabBarIndex = 0
               this.tabController.changeIndex(0)
             })
+
           Text('登录')
             .fontSize(16)
             .fontWeight(600)
             .borderRadius({
               topLeft: 12,
               topRight: 12,
-              bottomLeft: this.tabBarIndex == 0 || this.tabBarIndex == 2 ? 12 : 0
+              bottomLeft: this.tabBarIndex == 0 ? 12 : 0
             })
-            .backgroundColor(this.tabBarIndex == 1 ? Color.White : Color.Transparent)
+            .backgroundColor(this.tabBarIndex == 1 ? 'rgba(255,255,255,0.5)' : Color.Transparent)
             .layoutWeight(1)
             .height(48)
             .textAlign(TextAlign.Center)
-            .fontColor(this.tabBarIndex == 1 ? '#FF141111' : '#80141111')
+            .fontColor(this.tabBarIndex == 1 || this.tabBarIndex == 2 ? '#FF141111' : '#80141111')
+            // .linearGradient(this.tabBarIndex == 1 || this.tabBarIndex == 2 ? this.linearInfo1 : this.linearInfo2)
             .onClick(() => {
               this.tabBarIndex = 1
               this.tabController.changeIndex(1)
@@ -90,39 +99,37 @@ struct LoginPage {
         .alignItems(VerticalAlign.Center)
         .justifyContent(FlexAlign.SpaceBetween)
         .width('100%')
+        .linearGradient(this.linearInfo1)
 
-      }
-      .padding({ top: this.safeTop })
-      .linearGradient({ angle: 135, colors: [['#CAE2F9', -0.1571], ['#D4D1F4', 0.4709], ['#EDF5FD', 1.1235]] })
-      .margin({ bottom: 20 })
+        Tabs({ controller: this.tabController }) {
+          TabContent() {
+            RegisterOrResetPassComp({ loginCollect: new LoginCollect("register") })
 
+          }
+          .padding({ left: 20, right: 20 })
 
-      Tabs({ controller: this.tabController }) {
-        TabContent() {
-          RegisterOrResetPassComp({ loginCollect: new LoginCollect("register") })
-
-        }
-        .padding({ left: 20, right: 20 })
-
-        TabContent() {
-          LoginView({
-            forgetPassClick: () => {
-              this.tabBarIndex = 2
-              this.tabController.changeIndex(2)
-            }
-          })
-        }
-        .padding({ left: 20, right: 20 })
+          TabContent() {
+            LoginView({
+              forgetPassClick: () => {
+                this.tabBarIndex = 2
+                this.tabController.changeIndex(2)
+              }
+            })
+          }
+          .padding({ left: 20, right: 20 })
 
-        TabContent() {
-          RegisterOrResetPassComp({ loginCollect: new LoginCollect("reset") })
+          TabContent() {
+            RegisterOrResetPassComp({ loginCollect: new LoginCollect("reset") })
+          }
+          .padding({ left: 20, right: 20 })
         }
-        .padding({ left: 20, right: 20 })
+        .scrollable(false)
+        .layoutWeight(1)
+        .barHeight(0)
+        .padding({top: 20})
       }
-      .scrollable(false)
-      .layoutWeight(1)
-      .barHeight(0)
-
+      // .backgroundImage(this.tabBarIndex == 0 ? $r('app.media.loginPage_Bg_left') : $r('app.media.loginPage_Bg_right'))
+      // .backgroundImageSize(ImageSize.Contain)
     }
 
     .padding({
@@ -132,4 +139,3 @@ struct LoginPage {
     .height('100%')
   }
 }
-

features/user/src/main/ets/views/LoginView.ets

@@ -72,7 +72,11 @@ export struct LoginView {
           inputChange: (value: string) => {
             this.loginCollect.smsCode = value
           },
-          marginBottom: 19
+          marginBottom: 19,
+          btLinearGradient: {
+            colors: [ ['#95C50A', 1] ],
+            angle: 135
+          }
         })
       }
 
@@ -85,7 +89,7 @@ export struct LoginView {
       Row() {
         if (!this.loginCollect.isPassword) {
           Text('密码登录')
-            .fontColor($r('[basic].color.main_ac_color_dark'))
+            .fontColor($r('[basic].color.main_blank'))
             .fontSize(12)
             .fontWeight(700)
             .onClick(() => {
@@ -94,16 +98,15 @@ export struct LoginView {
           Blank()
         } else {
           Text('验证码登录')
-            .fontColor($r('[basic].color.main_ac_color_dark'))
+            .fontColor($r('[basic].color.main_blank'))
             .fontWeight(700)
             .fontSize(12)
             .onClick(() => {
               this.loginCollect.isPassword = false
-              this.loginCollect.password = ''
             })
           Blank()
           Text('忘记密码?')
-            .fontColor($r('[basic].color.main_ac_color_dark'))
+            .fontColor($r('[basic].color.main_blank'))
             .fontSize(12)
             .fontWeight(700)
             .onClick(() => {
@@ -119,12 +122,24 @@ export struct LoginView {
         btContent: '登录',
         click: () => {
           this.loginCollect.executeLogin("common")
-        }
+        },
+        btFontColor: Color.Black,
+        btFontSize: 18,
+        btLinearGradient: {
+          colors: [ ['#B9FD2A', 0.5], ['#F5FD6D', 1] ],
+          angle: 135
+        },
+        btPadding: {
+          top: 12,
+          bottom: 12,
+        },
+        btHeight: 48
       })
 
 
+
       Text('未注册的手机号码登陆后将自动注册')
-        .fontColor($r('[basic].color.main_ac_color_dark'))
+        .fontColor($r('[basic].color.main_blank'))
         .fontSize(12)
         .margin({ top: 16, bottom: 56 })
         .alignSelf(ItemAlign.Start)

features/user/src/main/ets/views/RegisterOrResetPassView.ets

@@ -41,6 +41,10 @@ export struct RegisterOrResetPassComp {
         loginCollect: this.loginCollect,
         inputChange: (value) => {
           this.loginCollect.smsCode = value
+        },
+        btLinearGradient: {
+          colors: [ ['#95C50A', 1] ],
+          angle: 135
         }
       })
       LoginInput({
@@ -76,12 +80,23 @@ export struct RegisterOrResetPassComp {
         click: () => {
           this.loginCollect.executeLogin("common")
         },
-        btBorderRadius: 32
+        btBorderRadius: 32,
+        btLinearGradient: {
+          colors: [ ['#B9FD2A', 0.5], ['#F5FD6D', 1] ],
+          angle: 135
+        },
+        btPadding: {
+          top: 12,
+          bottom: 12,
+        },
+        btHeight: 48,
+        btFontColor: Color.Black,
+        btFontSize: 18
       })
 
       Text('注册成功后将自动登录')
         .fontSize(10)
-        .fontColor($r('[basic].color.main_ac_color_dark'))
+        .fontColor($r('[basic].color.main_blank'))
         .margin({ top: 16 })
     }
     .width('100%')