problem_check_system/lib/modules/login/views/login_page.dart

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,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}