/* ============================================================
* yjly 前台报名表单 - 可爱风覆盖层 Cute Front (2026-04-20)
*
* 覆盖原 globalMobile.css + registerForm.css + mui + layui
* 与后台 cute-theme.css 色系统一（糖果粉 + 马卡龙）
* ============================================================ */
:root {
--cute-primary: #FF9EAA;
--cute-primary-hover: #FF7B95;
--cute-primary-light: #FFE5E8;
--cute-primary-lighter: #FFF1F3;
--cute-mint: #A8E6CF;
--cute-sky: #C6DEF1;
--cute-lavender: #DBC5F0;
--cute-cream: #FFE5B4;
--cute-text: #5B4D5F;
--cute-text-secondary: #7A6F81;
--cute-text-muted: #A0969C;
--cute-border: #F5DFE3;
--cute-bg: #FFFAF7;
--cute-bg-gradient: linear-gradient(135deg, #FFF5F6 0%, #FFF8ED 45%, #F0E6FA 100%);
--cute-font: "Quicksand", "Nunito", "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "方正准圆简体", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, sans-serif;
}
/* ==== 全局 ==== */
html, body {
font-family: var(--cute-font) !important;
color: var(--cute-text) !important;
background: var(--cute-bg-gradient) !important;
background-attachment: fixed !important;
-webkit-font-smoothing: antialiased !important;
letter-spacing: 0.02em !important;
line-height: 1.6 !important;
}
::selection { background: var(--cute-primary-light); color: var(--cute-text); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--cute-primary-light); border-radius: 999px; }
/* ==== 标题 / 头图区 ==== */
h1, h2, h3, h4, h5, h6 { color: var(--cute-text) !important; font-weight: 600 !important; }
/* 顶部 header 区 */
.indexTop, .topBg, .topImage, .topImageBox {
background: linear-gradient(135deg, #FFB5C5 0%, #FF9EAA 60%, #DBC5F0 100%) !important;
color: #fff !important;
}
.indexTop h1, .indexTop h2, .indexTop h3, .indexTop p { color: #fff !important; }
/* ==== 容器 / 卡片 ==== */
.main, .content, .formBox, .formBoxMain,
.mainContent, .formContent, .mui-content, .register-main {
background: rgba(255, 255, 255, 0.95) !important;
border-radius: 0.4rem !important;
box-shadow: 0 4px 16px rgba(255, 158, 170, 0.12) !important;
margin: 0.2rem auto !important;
padding: 0.3rem 0.3rem !important;
max-width: 96%;
}
/* 每组 form-row 卡片化 */
.formRow, .form-item, .itemBox, .form-group,
.mui-input-row, .layui-form-item {
background: #fff !important;
border: 1px solid var(--cute-border) !important;
border-radius: 0.24rem !important;
padding: 0.2rem 0.24rem !important;
margin-bottom: 0.2rem !important;
box-shadow: 0 1px 3px rgba(255, 158, 170, 0.06) !important;
transition: box-shadow 0.2s;
}
.formRow:focus-within, .form-item:focus-within, .mui-input-row:focus-within {
box-shadow: 0 4px 10px rgba(255, 158, 170, 0.18) !important;
border-color: var(--cute-primary-light) !important;
}
/* ==== 标签 ==== */
.formRow .title, .formRow label, label, .mui-input-row label,
.layui-form-label, .formTitle, .lableTitle {
color: var(--cute-text) !important;
font-weight: 600 !important;
font-size: 0.28rem !important;
}
.formRow .title::before, .formTitle::before {
content: "♡ ";
color: var(--cute-primary);
margin-right: 4px;
}
/* 红色必填星号柔化 */
.required, .required-mark, .red, .mui-form .star, [class*="req"]:not(button) {
color: var(--cute-primary) !important;
}
/* ==== 输入控件 ==== */
.inputElement, input[type="text"], input[type="tel"], input[type="number"],
input[type="password"], input[type="email"], input[type="search"],
input[type="date"], textarea, select,
.layui-input, .layui-textarea, .layui-select,
.mui-input-group input, .mui-input {
background: #fff !important;
border: 1.5px solid var(--cute-border) !important;
border-radius: 0.2rem !important;
color: var(--cute-text) !important;
font-family: var(--cute-font) !important;
padding: 0.15rem 0.2rem !important;
box-shadow: none !important;
transition: all 0.2s !important;
outline: none !important;
}
.inputElement:focus, input:focus, textarea:focus, select:focus,
.layui-input:focus, .layui-textarea:focus {
border-color: var(--cute-primary) !important;
box-shadow: 0 0 0 4px rgba(255, 158, 170, 0.18) !important;
}
::placeholder { color: var(--cute-text-muted) !important; opacity: 1 !important; }
textarea {
min-height: 1.6rem !important;
line-height: 1.6 !important;
}
/* readonly 输入（地区选择器等）*/
input[readonly], .inputElement[readonly] {
background: #fff !important;
cursor: pointer !important;
}
/* ==== 单选/多选按钮 ==== */
input[type="radio"], input[type="checkbox"] {
accent-color: var(--cute-primary) !important;
transform: scale(1.15) !important;
cursor: pointer !important;
}
input[type="radio"] + span, input[type="checkbox"] + span,
input[type="radio"] + label, input[type="checkbox"] + label {
color: var(--cute-text) !important;
font-weight: 500;
}
/* layui 选项组 */
.layui-form-radio > i, .layui-form-checkbox i {
color: var(--cute-primary-light) !important;
}
.layui-form-radioed > i, .layui-form-checkbox[lay-skin="primary"].layui-form-checked i {
color: var(--cute-primary) !important;
}
.layui-form-radio:hover *, .layui-form-checkbox:hover * {
color: var(--cute-primary-hover) !important;
}
/* ==== 按钮 ==== */
.submit, .submitBtn, .btn, button, input[type="submit"], input[type="button"],
.mui-btn, .layui-btn,
.sendCode, .sendCodeBtn, #sendCode, .getcode, .btn-getcode {
background: linear-gradient(135deg, #FF9EAA 0%, #FFB5C5 100%) !important;
border: none !important;
color: #fff !important;
font-family: var(--cute-font) !important;
font-weight: 600 !important;
border-radius: 0.32rem !important;
padding: 0.18rem 0.4rem !important;
box-shadow: 0 4px 12px rgba(255, 158, 170, 0.25) !important;
transition: all 0.2s !important;
cursor: pointer !important;
letter-spacing: 0.02em;
}
.submit:hover, .submitBtn:hover, .btn:hover, button:hover,
input[type="submit"]:hover, input[type="button"]:hover,
.mui-btn:hover, .layui-btn:hover, .sendCode:hover {
background: linear-gradient(135deg, #FF7B95 0%, #FF9EAA 100%) !important;
box-shadow: 0 6px 16px rgba(255, 158, 170, 0.4) !important;
transform: translateY(-1px) !important;
}
.submit:active, .btn:active, button:active { transform: translateY(0) !important; }
/* 大号提交按钮 */
.submit, .submitBtn, .bigBtn, .fullBtn {
width: 92% !important;
margin: 0.3rem auto !important;
display: block !important;
height: 0.8rem !important;
line-height: 0.5 !important;
font-size: 0.32rem !important;
}
/* 验证码按钮（小尺寸）*/
.sendCode, .sendCodeBtn, #sendCode, .getcode {
min-width: 1.8rem !important;
font-size: 0.24rem !important;
padding: 0.1rem 0.2rem !important;
}
/* ==== 图片上传区 ==== */
.uploadBox, .uploadImg, .imgBox, .photoUpload, .imgUpload, .uploader,
.mui-input-row.upload {
background: var(--cute-primary-lighter) !important;
border: 2px dashed var(--cute-primary-light) !important;
border-radius: 0.3rem !important;
color: var(--cute-primary-hover) !important;
padding: 0.4rem !important;
text-align: center;
cursor: pointer !important;
transition: all 0.2s;
}
.uploadBox:hover, .uploadImg:hover, .imgBox:hover, .uploader:hover {
background: var(--cute-primary-light) !important;
border-color: var(--cute-primary) !important;
}
/* 已上传的图片缩略图 */
.imgList li, .imgBoxs, .previewBox, .img-item {
border-radius: 0.2rem !important;
overflow: hidden;
box-shadow: 0 2px 8px rgba(255, 158, 170, 0.15) !important;
border: 2px solid #fff !important;
}
/* ==== 协议 / 勾选 ==== */
.agreeBox, .xieyiBox, .protocolBox {
color: var(--cute-text-secondary) !important;
font-size: 0.24rem;
padding: 0.16rem 0.2rem !important;
text-align: center;
}
.agreeBox a, .xieyiBox a, .protocolBox a {
color: var(--cute-primary-hover) !important;
text-decoration: underline !important;
}
/* ==== layui 弹窗 / 选择器（省市区等）==== */
.layui-layer {
border-radius: 0.3rem !important;
border: 1px solid var(--cute-border) !important;
box-shadow: 0 20px 60px rgba(91, 77, 95, 0.2) !important;
overflow: hidden;
}
.layui-layer-title {
background: linear-gradient(to right, var(--cute-primary-lighter) 0%, #fff 80%) !important;
color: var(--cute-text) !important;
border-bottom: 1px dashed var(--cute-border) !important;
font-weight: 700;
}
.layui-layer-title::before { content: "♡ "; color: var(--cute-primary); }
.layui-layer-btn .layui-layer-btn0 {
background: linear-gradient(135deg, #FF9EAA, #FFB5C5) !important;
border: none !important;
color: #fff !important;
border-radius: 0.2rem !important;
}
.layui-layer-btn .layui-layer-btn1 {
background: #fff !important;
border: 1px solid var(--cute-border) !important;
color: var(--cute-text-secondary) !important;
border-radius: 0.2rem !important;
}
.layui-layer-setwin .layui-layer-close2,
.layui-layer-setwin .layui-layer-close1 {
background-position: -178px 0 !important;
}
/* ==== mobileSelect 地区选择器 ==== */
.mobileSelect .grayLayer { background: rgba(91, 77, 95, 0.35) !important; }
.mobileSelect .content {
background: #fff !important;
border-radius: 0.3rem 0.3rem 0 0 !important;
}
.mobileSelect .title {
background: var(--cute-primary-lighter) !important;
border-bottom: 1px dashed var(--cute-border) !important;
color: var(--cute-text) !important;
}
.mobileSelect .title .cancel, .mobileSelect .title .ensure {
color: var(--cute-primary-hover) !important;
font-weight: 600 !important;
}
.mobileSelect .wheels .wheel { color: var(--cute-text-secondary) !important; }
.mobileSelect .wheels .wheel .selectContainer li.selected {
color: var(--cute-primary-hover) !important;
font-weight: 700;
}
.mobileSelect .wheels .selectLine {
border-top: 1.5px solid var(--cute-primary-light) !important;
border-bottom: 1.5px solid var(--cute-primary-light) !important;
}
/* ==== 城市选择 dyselect ==== */
.dyselect-wrapper, .searchInput { background: #fff !important; }
.dyselect-tags li, .searchResult li { color: var(--cute-text) !important; }
.dyselect-tags li.tag-active,
.searchResult li.active,
.city_box .city_name.on,
.city_box li.on {
color: var(--cute-primary-hover) !important;
background: var(--cute-primary-lighter) !important;
border-radius: 0.1rem;
}
/* ==== 错误/提示 ==== */
.layui-layer-msg { border-radius: 0.3rem !important; font-family: var(--cute-font) !important; }
.toast, .error-tip, .mui-toast-container {
background: rgba(91, 77, 95, 0.92) !important;
color: #fff !important;
border-radius: 0.3rem !important;
}
/* ==== 跳转中间页（application/index/view/index/index.html）==== */
body#page-top {
background: var(--cute-bg-gradient) !important;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--cute-font) !important;
}
body#page-top::before {
content: "♡ 正在跳转到报名页 ♡";
color: var(--cute-primary-hover);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.1em;
animation: cuteFade 1.2s ease-in-out infinite alternate;
}
@keyframes cuteFade {
from { opacity: 0.5; transform: scale(0.95); }
to { opacity: 1; transform: scale(1.05); }
}
/* ==== success 成功页 ==== */
.successBox, .success-page, .submit-success {
background: var(--cute-bg-gradient) !important;
text-align: center;
padding: 1rem 0.4rem !important;
}
.successBox .icon, .success-page .icon {
color: var(--cute-success, #7DD8A6) !important;
font-size: 1.2rem !important;
}
.successBox h2, .success-page h2 {
color: var(--cute-primary-hover) !important;
}
.successBox h2::before, .success-page h2::before {
content: "✿ ";
color: var(--cute-primary);
}
/* ==== 协议页 xieyi.html ==== */
.xieyiContent, .protocol-content {
background: #fff !important;
border-radius: 0.3rem !important;
padding: 0.3rem !important;
color: var(--cute-text) !important;
box-shadow: 0 2px 12px rgba(255, 158, 170, 0.1);
}
.xieyiContent h1, .xieyiContent h2, .xieyiContent h3 {
color: var(--cute-primary-hover) !important;
}
/* ==== 响应式微调 ==== */
@media (max-width: 360px) {
.formRow, .form-item, .mui-input-row { padding: 0.16rem 0.2rem !important; }
.submit, .submitBtn { font-size: 0.3rem !important; }
}
/* ============================================================
* 2026-04-23 v2 前端报名页视觉修复 —— 精确版（替代旧 v1，范围更窄）
* 修 5 处：
* 1. 图片上传区背景丢失
* 2. 实名验证标题 + 说明文字未居中
* 3. 交友须知 checkbox 即使未勾也显对号
* 4. 婚姻状况 radio 文字错乱换行
* 5. 性别 radio 不要整行白卡片；只让 radio 本身醒目
* 只选中带真实 inputElement 的 li.re，不再用宽泛选择器影响 radio 行
* ============================================================ */
/* ---- 1. 输入行（含真实 input）做 flex 对齐，白色卡片 ---- */
.registerBox .section02 .inputBox li.re:has(input.inputElement) {
display: flex !important;
align-items: center !important;
padding: 0 !important;
height: 0.92rem !important;
background: #fff !important;
border: 1px solid var(--cute-border, #ffd7dd) !important;
border-radius: 0.2rem !important;
overflow: hidden !important;
}
.registerBox .section02 .inputBox li.re:has(input.inputElement) span.ab.pic {
position: static !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 0.7rem !important;
height: 100% !important;
left: auto !important;
top: auto !important;
color: var(--cute-primary, #ff9eaa) !important;
font-size: 0.38rem !important;
margin: 0 !important;
border-right: 1px solid var(--cute-border, #ffd7dd) !important;
}
.registerBox .section02 .inputBox li.re:has(input.inputElement) input.inputElement {
position: static !important;
flex: 1 1 auto !important;
width: auto !important;
height: 100% !important;
min-width: 0 !important;
left: auto !important;
top: auto !important;
border: none !important;
padding: 0 0.25rem !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
line-height: 1 !important;
}
/* ---- 2. radio 行保持透明背景，只让 radio 本身醒目 ---- */
.registerBox .section02 .inputBox li.re:not(:has(input.inputElement)) {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0.1rem 0 !important;
height: auto !important;
}
/* 性别/婚姻 radio 自身的定制样式 */
.layui-form input[type="radio"][name="sex"],
.layui-form input[type="radio"][name="hunyin"],
input[name="sex"][type="radio"],
input[name="hunyin"][type="radio"] {
-webkit-appearance: none !important;
appearance: none !important;
width: 0.36rem !important;
height: 0.36rem !important;
border: 0.04rem solid #ff6b85 !important;
border-radius: 50% !important;
background: #fff !important;
position: relative !important;
cursor: pointer !important;
vertical-align: middle !important;
margin: 0 0.1rem 0 0 !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
transition: all .15s !important;
}
.layui-form input[type="radio"][name="sex"]:checked,
.layui-form input[type="radio"][name="hunyin"]:checked,
input[name="sex"][type="radio"]:checked,
input[name="hunyin"][type="radio"]:checked {
background: #ff6b85 !important;
box-shadow: inset 0 0 0 0.08rem #fff !important;
}
/* ---- 3. 婚姻状况 radio：横向 flex，允许换行，每项足够空间 ---- */
.layui-form:has(> input[name="hunyin"]),
div.layui-form[class*="layui-form"]:has(> input[name="hunyin"]) {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.25rem 0.4rem !important;
align-items: center !important;
padding: 0.15rem 0 !important;
line-height: 1.6 !important;
}
/* 每个 radio + 其 title 显示的文字单元保持内联紧凑 */
.layui-form input[name="hunyin"] {
margin-right: 0.1rem !important;
}
/* layui 会把 radio 替换成 .layui-form-radio 整块 - 让它块内文字不换行 */
.layui-form-radio {
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
font-size: 0.28rem !important;
line-height: 1.2 !important;
}
.layui-form-radio > i {
font-size: 0.32rem !important;
margin-right: 0.08rem !important;
}
/* ---- 4. 实名验证标题和说明 居中 ---- */
.registerBox .section02 .inputBox:has(> div:first-child > :contains('实名验证')),
.registerBox .section02 .inputBox p,
.registerBox .section02 .inputBox > div[style*='text-align: center'] {
text-align: center !important;
}
/* 更通用写法：inputBox 里直接的 p 段居中，div 有明确 text-align: center 不动 */
.registerBox .section02 .inputBox > p {
text-align: center !important;
margin: 0 0 0.2rem 0 !important;
text-indent: 0 !important;
padding: 0 0.2rem !important;
}
.registerBox .section02 .inputBox > div[style*="text-align: center"] {
text-align: center !important;
width: 100% !important;
}
/* ---- 5. 图片上传区 ul.inputBox 不破坏 .upload-bg-all 的自有白底 ---- */
.registerBox .section02 .inputBox > div.upload-bg-all {
background-color: #fff !important;
margin-top: 0.2rem !important;
}
/* 上传区的 smallTitle 放在 ul 里时不被破坏 */
.registerBox .section02 .inputBox > .smallTitle {
display: inline-block !important;
margin-bottom: 0.12rem !important;
}
/* ---- 6. 验证码按钮容器 + 按钮尺寸（保留上一版，稍微压实）---- */
.registerBox .section02 .inputBox > div[style*="float: right"] {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
height: 0.92rem !important;
padding: 0 0 0 0.15rem !important;
box-sizing: border-box !important;
}
button.yzm, .layui-btn.yzm, #sendSmsButton {
height: 0.68rem !important;
line-height: 0.68rem !important;
padding: 0 0.26rem !important;
font-size: 0.26rem !important;
border-radius: 0.34rem !important;
margin: 0 !important;
white-space: nowrap !important;
}
/* ---- 7. 协议 checkbox（lay-skin=primary）未选去掉 ✓，已选粉色底白 ✓ ---- */
/* 未选状态：白底、粉色边框，完全无勾 */
.layui-form-checkbox[lay-skin="primary"] i {
width: 0.4rem !important;
height: 0.4rem !important;
line-height: 0.36rem !important;
border: 0.04rem solid #ff6b85 !important;
background: #fff !important;
color: transparent !important;
font-size: 0 !important;
border-radius: 4px !important;
transition: all .15s !important;
}
/* 已选状态：粉色底、白色 ✓ 对号 */
.layui-form-checkbox[lay-skin="primary"].layui-form-checked i {
background: #ff6b85 !important;
border-color: #ff6b85 !important;
color: #fff !important;
font-size: 0.28rem !important;
}
.layui-form-checkbox[lay-skin="primary"]:hover i {
box-shadow: 0 0 0 0.06rem rgba(255, 107, 133, 0.18) !important;
}
/* ---- 8. 全站 radio / checkbox 统一换色 ----
* 原 #ff6b85 粉色和粉色渐变 bg 太接近看不清
* 换成 #3b56ac 深靛蓝（跟 .smallTitle 同色），对比强、不刺眼
* 覆盖 sex / hunyin / is_liyi / liyi_haizi 四组 radio + 交友须知 checkbox
*/
input[type="radio"] {
-webkit-appearance: none !important;
appearance: none !important;
width: 0.36rem !important;
height: 0.36rem !important;
border: 0.04rem solid #3b56ac !important;
border-radius: 50% !important;
background: #fff !important;
position: relative !important;
cursor: pointer !important;
vertical-align: middle !important;
margin: 0 0.1rem 0 0 !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
transition: all .15s !important;
}
input[type="radio"]:checked {
background: #3b56ac !important;
box-shadow: inset 0 0 0 0.08rem #fff !important;
}
input[type="radio"]:hover {
box-shadow: 0 0 0 0.06rem rgba(59, 86, 172, 0.18) !important;
}
/* checkbox（lay-skin=primary）也换成同色，保持一致 */
.layui-form-checkbox[lay-skin="primary"] i {
border-color: #3b56ac !important;
}
.layui-form-checkbox[lay-skin="primary"].layui-form-checked i {
background: #3b56ac !important;
border-color: #3b56ac !important;
}
.layui-form-checkbox[lay-skin="primary"]:hover i {
box-shadow: 0 0 0 0.06rem rgba(59, 86, 172, 0.18) !important;
}
/* ---- 9. Layui 渲染出来的 radio 装饰元素 (.layui-form-radio > i) 换色 ----
* 原生 input[type=radio] 被 layui 隐藏了，可见元素是 .layui-form-radio > i 这个 icon 字体
* 之前的颜色是 --cute-primary-light（浅粉），在粉色 bg 上看不清
* 换成 #3b56ac（深靛蓝）解决对比度
*/
.layui-form-radio > i {
color: #3b56ac !important;
font-size: 24px !important;
}
.layui-form-radioed > i,
.layui-form-radio.layui-form-radioed > i {
color: #3b56ac !important;
}
.layui-form-radio:hover,
.layui-form-radio:hover *,
.layui-form-radio:hover > i {
color: #3b56ac !important;
}
/* 文字也要统一深色，避免 hover 时被改成浅色 */
.layui-form-radio span,
.layui-form-radio > div {
color: #333 !important;
}
/* ---- 10. 协议 checkbox 与"我已阅读并同意"文字大小对齐（2026-04-28 修） ----
* 之前 i 框用 0.4rem（受 rem.js 动态缩放），span 用 layui 默认 px，两者比例错位
* 把 i 锁回 px 跟 14px 文字匹配；整行 flex 居中；旁边《交友须知》 的 margin-top 归零
*
* 2026-04-28 v2（cute8）：用户说"《交友须知》和前面文字还有高度差"——
* 根因是左边 wrapper