<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成功提示弹窗‑横向布局</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:#44484c;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
}
/*遮罩层*/
.modal-mask{
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
display:flex;
align-items:center;
justify-content:center;
}
/*弹窗主体 横向布局*/
.modal-success{
width:520px;
background:#ffffff;
border-radius:16px;
padding:26px 30px;
box-shadow:0 14px 32px rgba(0,0,0,0.12);
display:flex;
align-items:center;
gap:20px;
}
/*左侧绿色对勾图标*/
.modal-icon-wrap{
width:52px;
height:52px;
border-radius:50%;
background:rgba(0,180,104,0.12);
display:flex;
align-items:center;
justify-content:center;
flex‑shrink:0;
}
.modal-icon{
color:#00b468;
font-size:28px;
font-weight:bold;
}
/*中间文字区域*/
.modal-text-wrap{
flex:1;
}
.modal-title{
font-size:17px;
font-weight:600;
color:#1d2129;
margin-bottom:4px;
}
.modal-desc{
color:#4e5969;
}
/*右侧按钮*/
.modal-btn-wrap{
flex‑shrink:0;
}
.btn-confirm{
min-width:104px;
padding:10px 22px;
background:#165DFF;
color:#fff;
border:none;
border-radius:9px;
cursor:pointer;
transition:0.2s ease;
}
.btn-confirm:hover{
background:#0e4bdb;
}
</style>
</head>
<body>
<div class="modal-mask">
<div class="modal-success">
<!--左侧成功图标-->
<div class="modal-icon-wrap">
<div class="modal-icon">✓</div>
</div>
<!--中间文字区域-->
<div class="modal-text-wrap">
<div class="modal-title">操作成功</div>
<div class="modal-desc">好友申请已发送</div>
</div>
<!--右侧确定按钮-->
<div class="modal-btn-wrap">
<button class="btn-confirm">确定</button>
</div>
</div>
</div>
</body>
</html>
400 186 1886
