dating_touchme_app/lib/pages/discover/settlement_page.dart

import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class SettlementPage extends StatefulWidget {
  const SettlementPage({super.key});

  @override
  State<SettlementPage> createState() => _SettlementPageState();
}

class _SettlementPageState extends State<SettlementPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "", backgroundColor: Colors.transparent, color: Colors.white,),
      backgroundColor: const Color.fromRGBO(19, 16, 47, 1),
      body: Container(
        padding: EdgeInsets.only(
          top: 100.w,
          right: 25.w,
          bottom: 25.w,
          left: 25.w
        ),
        child: Column(
          children: [
            Text(
              "开心的橘子",
              style: TextStyle(
                fontSize: 14.w,
                color: Colors.white
              ),
            ),
            SizedBox(height: 62.w,),
            Stack(
              clipBehavior: Clip.none,
              children: [
                Container(
                  width: 325.w,
                  height: 154.w,
                  padding: EdgeInsets.only(
                    top: 70.w,
                    right: 26.w,
                    bottom: 47.w,
                    left: 26.w,
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(width: 1.w, color: const Color.fromRGBO(117, 98, 249, 1)),
                    color: const Color.fromRGBO(117, 98, 249, .2)
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          RichText(
                            text: TextSpan(
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500
                              ),
                              children: [
                                TextSpan(
                                  text: "0.35",
                                  style: TextStyle(
                                    fontSize: 23.w,
                                  )
                                ),
                                TextSpan(
                                  text: "小时",
                                    style: TextStyle(
                                      fontSize: 12.w,
                                    )
                                )
                              ]
                            ),
                          ),
                          Text(
                            "今日总开播",
                            style: TextStyle(
                              fontSize: 12.w,
                              color: const Color.fromRGBO(117, 98, 249, 1)
                            ),
                          )
                        ],
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          RichText(
                            text: TextSpan(
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.w500
                                ),
                                children: [
                                  TextSpan(
                                      text: "0.35",
                                      style: TextStyle(
                                        fontSize: 23.w,
                                      )
                                  ),
                                  TextSpan(
                                      text: "小时",
                                      style: TextStyle(
                                        fontSize: 12.w,
                                      )
                                  )
                                ]
                            ),
                          ),
                          Text(
                            "今日总开播",
                            style: TextStyle(
                                fontSize: 12.w,
                                color: const Color.fromRGBO(117, 98, 249, 1)
                            ),
                          )
                        ],
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          RichText(
                            text: TextSpan(
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.w500
                                ),
                                children: [
                                  TextSpan(
                                      text: "0.35",
                                      style: TextStyle(
                                        fontSize: 23.w,
                                      )
                                  ),
                                  TextSpan(
                                      text: "小时",
                                      style: TextStyle(
                                        fontSize: 12.w,
                                      )
                                  )
                                ]
                            ),
                          ),
                          Text(
                            "今日总开播",
                            style: TextStyle(
                                fontSize: 12.w,
                                color: const Color.fromRGBO(117, 98, 249, 1)
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
                Positioned(
                  left: 117.w,
                  top: -52.w,
                  child: Container(
                    width: 90.w,
                    height: 90.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(90.w)),
                      border: Border.all(width: 2.w, color: Colors.white)
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(86.w)),
                      child: Image.asset(
                        Assets.imagesUserAvatar,
                        width: 86.w,
                        height: 86.w,
                      ),
                    ),
                  ),
                )
              ],
            ),
            SizedBox(height: 18.w,),
            Image.asset(
              Assets.imagesSettlementToday,
              width: 325.w,
            ),
            SizedBox(height: 7.w,),
            Image.asset(
              Assets.imagesSettlementMonth,
              width: 325.w,
            ),
            Spacer(),
            Container(
              width: 325.w,
              height: 45.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(42.w)),
                  color: const Color.fromRGBO(117, 98, 249, 1)
              ),
              child: Center(
                child: Text(
                  "返回首页",
                  style: TextStyle(
                      fontSize: 14.w,
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}