You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
6.5 KiB
175 lines
6.5 KiB
import 'package:flutter/material.dart'; |
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
|
import 'package:get/get.dart'; |
|
import 'package:problem_check_system/modules/login/view_models/login_controller.dart'; |
|
|
|
class LoginPage extends StatelessWidget { |
|
final LoginController controller = Get.put(LoginController()); |
|
|
|
LoginPage({super.key}); |
|
|
|
@override |
|
Widget build(BuildContext context) { |
|
return Scaffold( |
|
resizeToAvoidBottomInset: false, |
|
body: Stack( |
|
children: [ |
|
// 背景设置 |
|
Container( |
|
decoration: BoxDecoration( |
|
image: DecorationImage( |
|
image: AssetImage('assets/images/background.png'), |
|
fit: BoxFit.fitWidth, |
|
), |
|
), |
|
), |
|
// 绝对定位的图片 |
|
Positioned( |
|
left: 28.5.w, |
|
top: 89.5.h, |
|
child: Image.asset( |
|
'assets/images/label.png', |
|
width: 171.5.w, |
|
height: 23.5.h, |
|
fit: BoxFit.fitWidth, |
|
), |
|
), |
|
Positioned( |
|
left: 28.5.w, |
|
top: 128.5.h, |
|
child: Image.asset( |
|
'assets/images/label1.png', |
|
width: 296.5.w, |
|
height: 35.5.h, |
|
fit: BoxFit.fitWidth, |
|
), |
|
), |
|
Positioned( |
|
left: 20.5.w, // 左侧距离20.5dp |
|
top: 220.5.h, // 顶部距离220.5dp |
|
child: Container( |
|
width: 334.w, // 宽度334dp |
|
height: 574.5.h, // 高度574.5dp |
|
decoration: BoxDecoration( |
|
color: const Color( |
|
0xFFFFFFFF, |
|
).withValues(alpha: 153), // 白色60%透明度 |
|
borderRadius: BorderRadius.all( |
|
Radius.circular(23.5.r), // 四个角都是23.5dp圆角 |
|
), |
|
), |
|
padding: EdgeInsets.all(24.w), |
|
child: Column( |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
const SizedBox(height: 16), |
|
Text( |
|
'账号', |
|
style: TextStyle(fontSize: 16.5.sp, color: Colors.black), |
|
), |
|
const SizedBox(height: 10.5), |
|
TextField( |
|
style: TextStyle(color: Colors.black), |
|
decoration: InputDecoration( |
|
// labelText: '账号', |
|
hintText: '请输入您的账号', |
|
hintStyle: TextStyle(color: Colors.grey), |
|
border: OutlineInputBorder(), |
|
), |
|
), |
|
const SizedBox(height: 22), |
|
Text( |
|
'密码', |
|
style: TextStyle(fontSize: 16.5.sp, color: Colors.black), |
|
), |
|
const SizedBox(height: 10.5), |
|
TextField( |
|
obscureText: true, |
|
style: TextStyle(color: Colors.black), |
|
decoration: InputDecoration( |
|
// labelText: '密码', |
|
hintText: '请输入您的密码', |
|
hintStyle: TextStyle(color: Colors.grey), |
|
border: OutlineInputBorder(), |
|
), |
|
), |
|
const SizedBox(height: 9.5), |
|
Row( |
|
mainAxisAlignment: MainAxisAlignment.end, |
|
children: [ |
|
Obx( |
|
() => Checkbox( |
|
value: controller.rememberPassword.value, |
|
onChanged: (value) => |
|
controller.rememberPassword.value = value!, |
|
), |
|
), |
|
Text( |
|
'记住密码', |
|
style: TextStyle( |
|
color: const Color(0xFF959595), // 颜色值 |
|
fontSize: 14.sp, // 响应式字体大小 |
|
), |
|
), |
|
], |
|
), |
|
const SizedBox(height: 138.5), |
|
SizedBox( |
|
width: double.infinity, |
|
child: ElevatedButton( |
|
onPressed: () { |
|
// 跳转到 HomePage |
|
Get.toNamed('/home'); |
|
// Navigator.push( |
|
// context, |
|
// MaterialPageRoute( |
|
// builder: (context) => const HomePage(), |
|
// ), |
|
// ); |
|
}, |
|
style: ElevatedButton.styleFrom( |
|
padding: EdgeInsets.zero, |
|
backgroundColor: Colors.transparent, |
|
shadowColor: Colors.transparent, |
|
shape: RoundedRectangleBorder( |
|
borderRadius: BorderRadius.circular(8.r), // 响应式圆角 |
|
), |
|
minimumSize: Size(double.infinity, 48.h), // 响应式高度 |
|
), |
|
child: Ink( |
|
decoration: BoxDecoration( |
|
gradient: LinearGradient( |
|
colors: [Color(0xFF418CFC), Color(0xFF3DBFFC)], |
|
begin: Alignment.centerLeft, |
|
end: Alignment.centerRight, |
|
), |
|
borderRadius: BorderRadius.circular(8.r), |
|
), |
|
child: Container( |
|
constraints: BoxConstraints(minHeight: 48.h), |
|
alignment: Alignment.center, |
|
padding: EdgeInsets.symmetric( |
|
vertical: 12.h, |
|
horizontal: 24.w, |
|
), |
|
child: Text( |
|
'登录', |
|
style: TextStyle( |
|
color: Colors.white, |
|
fontSize: 16.sp, |
|
fontWeight: FontWeight.w500, |
|
), |
|
), |
|
), |
|
), |
|
), |
|
), |
|
], |
|
), |
|
), |
|
), |
|
], |
|
), |
|
); |
|
} |
|
}
|
|
|