feat(login、global):修改了全局样式，添加了登录页二维码弹窗

src/app/dialog/dialog.tsx

@@ -0,0 +1,33 @@
+import React from 'react'; // 引入 React
+
+// 定义 GeneralModal 组件，接收 isOpen 和 children 作为 props
+const GeneralModal = ({ isOpen, onClick, children }: { isOpen: boolean, onClick: () => void | null, children: React.ReactNode }) => {
+    // 如果 isOpen 是 false，则不显示模态框，直接返回 null
+    if (!isOpen) {
+        return null;
+    }
+
+    // 定义 modalClass 函数，返回模态框的样式类名字符串
+    const modalClass = (): string => {
+        // 返回样式类名字符串
+        return "w-80 h-80";
+    }
+
+    // 渲染模态框
+    return (
+        <div className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-white z-101">
+            {/* 模态框 */}
+            <div className={"rounded-3px border border-gray-300 shadow-md relative " + modalClass()}>
+                {/* 返回按钮 */}
+
+                {/* 模态框的内容 */}
+                {children}
+                <div className='w-15 shrink-0 b-1 border-black flex mt-100% ml-80% border-rd-10 justify-center'>
+                    <button onClick={onClick}  className='text-4'>返回</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GeneralModal; // 导出 GeneralModal 组件

src/app/login/page.tsx

@@ -1,22 +1,33 @@
 "use client";
+
 import React, { useState } from "react";
 import Image from "next/image";
+import GeneralModal from "../dialog/dialog"; // 引入GeneralModal组件
 
 const Login = () => {
     const [checked, setChecked] = useState(false);
     const [modalVisible, setModalVisible] = useState(false); // 用于管理模态框可见性的状态
 
-    const handleWechatLogin = () => {
-        // 处理微信登录按钮点击的函数
-        setModalVisible(true); // 当点击微信登录按钮时显示模态框
-    };
 
     const handleCancel = () => {
         // 处理模态框取消/关闭的函数
         setModalVisible(false); // 当取消时隐藏模态框
     };
 
+      // 定义关闭模态框的函数
+    const closeModal = () => {
+        setModalVisible(false);
+    };
 
+
+    const handleLogin = () => {
+    if (checked) {
+        setModalVisible(true);
+    } else {
+        alert("请先勾选同意!");
+    }
+    };
+
     // const [scanning, setScanning] = useState(false);
     // const handleScanLogin = () => {
     //      // 在此处可以触发后端请求，以获取微信用户的授权信息
@@ -34,31 +45,34 @@ const Login = () => {
     //     }, 3000); // 模拟3秒钟后扫码登录完成
     // }
 
-
     return (
         <div>
-            <div className="flex justify-center mt-73.6">
+            <div className="flex justify-center items-center mt-46">
                 <Image src={"/images/logo.png"} alt={"logo"} width={41} height={45}></Image>
                 <div className="ml-10px">
-                    <div className={"shrink-0 font-size-8.4 "}>
+                    <div className={"shrink-0 font-size-5.25 "}>
                         有记
                     </div>
-                    <div className="shrink-0 font-size-3.2">
+                    <div className="shrink-0 font-size-2">
                         YoNote
                     </div>
                 </div>
             </div>
-            <div className="flex flex-col items-center mt-37.6">
-                <button className="w-115.6 h-18.4 shrink-0 border-rd-10 bg-[#45E1B8] font-size-5.6" onClick={handleWechatLogin}>微信登录</button>
-                <button className="w-115.6 h-18.4 shrink-0  border-rd-10 border bg-[#fffdfc] mt-6 font-size-5.6">取消</button>
-                <div className="flex w-108.4 h-9.6 mt-13.7 font-size-4.8 " >
-                    <input type="checkbox" checked={checked} onChange={(e) => setChecked(e.target.checked)} className="w-8 h-8"/>
-                    <div className="ml-2.8">我已阅读并同意《用户协议》和《隐私协议》</div>
+            <div className="flex flex-col items-center mt-23.5">
+                <button className="w-72.25 h-11.5 shrink-0 border-rd-10 bg-[#45E1B8] font-size-3.5" onClick={handleLogin}>微信登录</button>
+                <button className="w-72.25 h-11.5 shrink-0  border-rd-10 border bg-[#fffdfc] mt-3.75 font-size-3.5" onClick={handleCancel}>取消</button>
+                <div className="flex w-67.75 h-6 mt-8.5575 text-3" >
+                    <input type="checkbox" checked={checked} onChange={(e) => setChecked(e.target.checked) } className="w-5 h-5" />
+                    <div className="ml-1.5">我已阅读并同意《用户协议》和《隐私协议》</div>
                 </div>
             </div>
-
+            <div>
+                <GeneralModal isOpen={modalVisible} onClick={closeModal}>
+                    {/* 这里放入模态框内部的内容 */}
+                    <div>此处放入微信二维码</div>
+                </GeneralModal>
+            </div>
         </div>
     );
 }
-export default Login;
-
+export default Login;

src/styles/globals.css

@@ -2,7 +2,7 @@
 @unocss all;
 
 html{
-  font-size: 2.6667vw;
+  font-size: 4.26672vw;
 }
 body {
   padding: 0;