.yzm_login_content { height: 230px; text-align: center; .yzm_login_content_form { width:320px; margin: 0 auto; } } .login_content { height: 320px; position: relative; /* 添加相对定位,用于三角形按钮定位 */ .login_content_item { height: 230px; display: flex; .login_content_left { width: 300px; .login_content_left_top { text-align: center; } .login_content_left_bottom { text-align: center; height: 30px; line-height: 30px; background-color: aqua; border-radius: 5px; color: aliceblue; width: 224px; margin: 50px auto 0 auto; background: linear-gradient( to right, rgb(32, 120, 203), rgb(76, 149, 218) ); border: 1px solid rgb(66, 141, 214); } .login_content_left_bottom:hover { background: linear-gradient( to right, rgb(90, 152, 209), rgb(76, 149, 218) ); } } .login_content_right { flex: 1; padding-left: 40px; border-left: 1px solid rgb(126, 126, 126); font-size: 10px; .login_content_right_item { display: flex; height: 38px; margin-bottom: 15px; .login_content_right_item_icon { border-radius: 50%; text-align: center; width: 40px; border: 1px solid rgb(126, 126, 126); font-size: 25px; height: 38px; } .login_content_right_item_text { line-height: 38px; margin-left: 20px; } } } } .login_protocol { margin-top: 40px; .protocol_span { color: rgb(29, 128, 227); } } } /* 添加三角形按钮样式 */ .qr-trigger { position: absolute; bottom: 0px; right: 0px; cursor: pointer; } /* 二维码登录相关样式 */ .qr-code-section { display: flex; justify-content: space-around; .qr-code { height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } } .custom-alert { position: fixed; top: 0; left: 0; right: 0; bottom: 300px; display: flex; align-items: center; justify-content: center; z-index: 9999; /* 关键属性:确保它在其他组件之上 */ } .custom-alert-content { width: 300px; height: 120px; background-color: rgba(0, 0, 0, 0.7); /* 灰色 + 30% 透明度 */ border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }