Feedback 反馈

包含：弹窗、对话框、警告提示（横条）、消息提示（卡片）。每一条对应 UI 截图 + 查看代码（CSS + HTML）。

09 弹窗 / 对话框

弹窗（带按钮区）

查看代码（CSS + HTML）

/* CSS */
.fb-demo-box {
  background: #071a39;
  border-radius: 8px;
  border: 2px solid rgba(0, 238, 255, .65);
  box-shadow: inset 0 0 68px rgba(7, 63, 141, .65);
  padding: 16px;
}
.fb-demo-title {
  display: flex; align-items: center; justify-content: space-between;
  color: #E8FDFE; font-weight: 700;
}
.fb-x { color: #BFEFFF; cursor: pointer; }
.fb-demo-body { color: #B6C8E6; font-size: 12px; line-height: 18px; }
.fb-demo-ft { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.fb-btn {
  height: 28px; padding: 0 12px; border-radius: 2px;
  border: 1px solid #3B5DA8; background: #0D255A; color: #D6E6FF;
}
.fb-btn-primary {
  background: linear-gradient(180deg,#0F1F51 0%,#004891 100%);
  border-image: linear-gradient(150deg,#62CEFF 28%,#A8D5FF 82%) 1;
  box-shadow: inset 0 -4px 6px #2EAFFF;
}

/* HTML */
<div class="fb-demo-box">
  <div class="fb-demo-title">我是标题<span class="fb-x">×</span></div>
  <div class="fb-demo-body">我是内容我是内容我是内容...</div>
  <div class="fb-demo-ft">
    <button class="fb-btn">关闭</button>
    <button class="fb-btn fb-btn-primary">保存</button>
  </div>
</div>

示例（可直接在页面看到效果）

我是标题×

我是内容我是内容我是内容我是内容我是内容我是内容我是内容

对话框（带提示图标）

查看代码（CSS + HTML）

/* CSS：在“弹窗”基础上，增加左侧提示图标位 */
.fb-icon {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFCC00; color: #00132F; font-weight: 700;
  margin-right: 8px;
}

/* HTML */
<div class="fb-demo-box">
  <div class="fb-demo-title">
    <span><span class="fb-icon">!</span>确认删除这条信息吗?</span>
    <span class="fb-x">×</span>
  </div>
  <div class="fb-demo-body">我是内容我是内容我是内容...</div>
  <div class="fb-demo-ft">
    <button class="fb-btn">关闭</button>
    <button class="fb-btn fb-btn-primary">保存</button>
  </div>
</div>

示例（可直接在页面看到效果）

! 确认删除这条信息吗? ×

我是内容我是内容我是内容我是内容我是内容我是内容我是内容

10 警告提示 / 消息提示

警告提示（横条）

查看代码（CSS + HTML）

/* CSS */
.fb-alert {
  height: 40px;
  border-radius: 2px;
  padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
}
.fb-success { background:#034639; border:1px solid #00FF4D; }
.fb-warning { background:#3A341E; border:1px solid #FFCC00; }
.fb-info    { background:#113863; border:1px solid #0074FF; }
.fb-danger  { background:#3A1630; border:1px solid #FF383C; }

/* HTML（示例：成功） */
<div class="fb-alert fb-success">
  <span class="txt">恭喜！你提交的信息已经审核通过...</span>
  <span class="fb-x">×</span>
</div>

示例（可直接在页面看到效果）

✓ 恭喜！你所提交的信息已经审核通过，如有问题请联系客服。×

! 系统将于 15:00 - 17:00 进行升级，请及时保存你的资料！×

i 你好！欢迎使用，你可以根据自身需求添加业务模块。×

× 系统错误，请稍后重试。×

消息提示（卡片）

查看代码（CSS + HTML）

/* CSS */
.fb-toast {
  border-radius: 8px;
  padding: 16px;
  background: #0A2852;
  border: 2px solid rgba(0, 238, 255, .45);
  box-shadow: inset 0 0 68px rgba(7, 63, 141, .55);
}
.fb-toast-hd {
  display:flex; align-items:center; justify-content:space-between;
  color:#E8FDFE; font-weight:700; margin-bottom:8px;
}
.fb-toast-bd { color:#B6C8E6; font-size:12px; line-height:18px; }

/* HTML */
<div class="fb-toast">
  <div class="fb-toast-hd">已成功! <span class="fb-x">×</span></div>
  <div class="fb-toast-bd">你的信息已审核通过...</div>
</div>

示例（可直接在页面看到效果）

✓ 已成功!×

你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。

i 帮助信息×

你好，由于你的良好信用，我们决定赠送你三个月产品会员。欲了解会员特权与活动请前往会员专区查看。

! 请注意×

你所提交的信息已经审核失败，可以进入个人信息查看原因。如有疑问，请联系客服人员。

× 出错了!×

你的账号会员使用权限将于3天后到期，请及时跟进申请状况。如有问题，请联系审核人员。