@font-face { font-family: 'CustomFont'; src: url('ziti/ziti.ttf') format('truetype'); } * { font-family: 'CustomFont', sans-serif; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { position: relative; touch-action: auto; } img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } /* 顶部图标容器：包含返回图标和右侧图标组 */ .top-icons { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; } /* 左上角返回图标：dingbu/fanhui.png */ .left-icon { width: 30px; height: 30px; cursor: pointer; } /* 右侧图标容器：包含二维码、铃铛、设置图标 */ .right-icons { display: flex; align-items: center; gap: 18px; } /* 右侧图标：二维码(dingbu/erwima.png)、铃铛(dingbu/lingdang.png)、设置(dingbu/shezhi.png) */ .right-icon { width: 30px; height: 30px; cursor: pointer; } /* 头像容器：包含头像和头像框 */ .profile-image-container { position: relative; display: inline-block; } /* 用户头像：touxiang/tx.png */ .profile-image { border-radius: 50%; width: 90px; height: 90px; margin-top: 10px; margin-left: 10px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; pointer-events: auto; } /* 头像框 */ .profile-frame { position: absolute; top: calc(50% + 2px); left: calc(50% + 5px); transform: translate(-50%, -50%); width: 153.2px; height: 153.2px; z-index: 2; pointer-events: none; } .profile-image:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } /* 卡片容器：包含头像和名称 */ .card { display: flex; align-items: center; } /* 用户名称容器 */ .profile-name-container { margin-left: 14px; margin-top: -16px; display: flex; align-items: center; gap: 5px; /* 新增：放大用户名的核心样式 */ font-size: 16px; /* 控制用户名文字大小（放大），可根据需要调整数值 */ transform: scale(1.1); /* 整体缩放（可选），1.1 表示放大10%，1.2是放大20%，以此类推 */ transform-origin: left center; /* 缩放原点：以左侧居中为基准放大，避免位置偏移 */ } /* 用户名称文字：一人也可闯天下 */ .profile-text { font-weight: bold; cursor: pointer; transition: color 0.2s; } .profile-text:hover { color: #0099ff; } .profile-text.gold { color: #C89D57; } .profile-text.orange { color: #FF6B35; } /* 点赞容器：包含点赞图标和数量 */ .like-container { position: absolute; right: 20px; top: 70px; display: flex; flex-direction: column; align-items: center; } /* 点赞图标：dianzan/like.png */ .like-icon { width: 15px; height: 15px; cursor: pointer; transition: transform 0.2s; pointer-events: auto; } .like-icon:hover { transform: scale(1.2); } /* 点赞数量文字 */ .like-count { font-size: 12px; margin-top: 2px; } /* 位置信息容器：包含位置文字和箭头图标 */ .location-info { display: flex; align-items: center; margin-top: 10px; margin-left: 10px; } /* 位置文字：现居 黑龙江 · 哈尔滨 官方群1075567590 */ .location-text { font-size: 14px; color: rgba(81, 75, 75, 0.6); } /* 位置箭头图标：jiantou/1.png */ .location-icon { width: 20px; height: 20px; position: absolute; right: 10px; } /* 第一行图标容器：包含能量值、群主、铭牌、等级图标和右侧箭头 */ .first-icon-row { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding: 0 10px; } /* 左侧图标组：包含能量值、群主、铭牌、等级图标 */ .left-icons { display: flex; align-items: center; gap: 7px; } /* 第一行右侧箭头图标：jiantou/1.png */ .first-icon-row .right-icon { width: 20px; height: 20px; margin-left: auto; margin-right: 0; } /* 能量值图标：nengliangzhi/1.png */ .energy-icon { height: 17px; cursor: pointer; } /* 铭牌图标：https://tianquan.gtimg.cn/namePlate/item/20086/258/10.png */ #mpIcon { height: 17px; cursor: pointer; pointer-events: auto; } /* 群主图标：qunzhu/qunzhu.png */ #item1 { height: 14px; cursor: pointer; } #item2 { height: 18px; cursor: pointer; } #item3 { height: 18px; cursor: pointer; } /* 等级图标容器：包含皇冠、星星、太阳、月亮 */ .level-container { display: flex; align-items: center; gap: 2px; } /* 等级图标：皇冠、星星、太阳、月亮 */ .qq-level-icons img { height: 18px; cursor: pointer; } /* 第二行图标容器：包含VIP、SVIP、黄钻等图标 */ .second-icon-row { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding: 0 10px; } /* 第二行左侧图标组 */ .second-icon-row .left-icons { display: flex; align-items: center; gap: 5px; } /* 第二行图标：VIP、SVIP、黄钻、情侣、QQ音乐、腾讯视频、绿钻、熊猫 */ .second-icon-row .left-icons img { height: 38px; cursor: pointer; pointer-events: auto; } /* 大会员图标 */ #vipIcon { pointer-events: auto; } /* 超级会员图标 */ #svipIcon { pointer-events: auto; } /* 黄钻图标 */ #spaceIcon { pointer-events: auto; } /* 情侣图标 */ #levelIcon { pointer-events: auto; } /* 玩具图标 */ #toyIcon { pointer-events: auto; } /* 熊猫图标 */ #vip2Icon { pointer-events: auto; } /* QQ音乐图标 */ #qqmusicIcon { pointer-events: auto; } /* 腾讯视频图标 */ #txvideoIcon { pointer-events: auto; } /* 绿钻图标 */ #svipyyIcon { pointer-events: auto; } /* 第二行右侧箭头图标：jiantou/1.png */ .second-icon-row .right-icon { width: 20px; height: 20px; margin-left: auto; margin-right: 0; } /* 雪花文本容器 */ .snow-text { display: flex; align-items: center; margin-top: 15px; margin-left: 10px; } /* 雪花文本：编辑个签文字 */ .snow-text .text { font-weight: bold; font-size: 15px; } /* 铅笔图标：qianbi/1.png */ .snow-text .icon { width: 18px; height: 18px; margin-left: 5px; cursor: pointer; } /* 分隔线 */ hr { border: none; border-top: 1px solid rgba(224, 224, 224, 0.3); margin: 15px 10px; } /* 标签下方的分隔线 */ .tag-divider { width: 112%; height: 12px; background-color: #F3F3F7; margin: 49px 0 49px -10%; } /* 等级弹窗容器 */ .level-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); justify-content: center; align-items: center; z-index: 10000; animation: fadeIn 0.3s ease; } /* 粒子画布 */ .particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 弹窗内容容器 */ .modal-content { background-color: white; border-radius: 20px; width: 450px; max-width: 90%; max-height: 90vh; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); animation: slideUp 0.3s ease; display: flex; flex-direction: column; position: relative; z-index: 1; } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* 弹窗头部 */ .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 30px; border-bottom: 2px solid #f0f0f0; } /* 弹窗标题 */ .modal-title { font-size: 20px; font-weight: bold; color: #333; } /* 关闭按钮 */ .close-btn { font-size: 32px; cursor: pointer; color: #999; line-height: 1; transition: all 0.3s ease; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .close-btn:hover { color: #333; background-color: #f0f0f0; transform: rotate(90deg); } /* 弹窗主体 */ .modal-body { padding: 30px; background-color: white; overflow-y: auto; flex: 1; } /* 等级输入区域 */ .level-input-section { display: flex; align-items: center; margin-bottom: 25px; gap: 15px; padding: 15px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .level-input-section label { font-size: 15px; font-weight: 600; color: #333; white-space: nowrap; } .level-input-section input { width: 100px; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 16px; font-weight: bold; color: #333; background-color: white; transition: all 0.3s ease; text-align: center; } .level-input-section input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .update-btn { padding: 12px 35px; background-color: white; color: #333; border: 2px solid #e0e0e0; border-radius: 25px; cursor: pointer; font-size: 16px; font-weight: 600; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .update-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); border-color: #667eea; } .update-btn:active { transform: translateY(0); } /* 颜色选择区域 */ .color-selection-section { display: flex; flex-direction: column; margin: 20px 0; gap: 12px; } .color-selection-section label { font-size: 15px; font-weight: 600; color: #333; white-space: nowrap; } .crown-color-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 15px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; border: 2px solid #e0e0e0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .crown-color-option { width: 42px; height: 42px; cursor: pointer; border: 2px solid transparent; border-radius: 10px; background-color: white; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .crown-color-option:hover { transform: scale(1.15) translateY(-3px); border-color: #667eea; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3); } .crown-color-option.selected { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3), 0 6px 20px rgba(102, 126, 234, 0.4); transform: scale(1.1); } .crown-color-option img { width: 100%; height: 100%; object-fit: contain; } /* 弹窗底部 */ .modal-footer { display: flex; justify-content: flex-end; margin-top: 25px; padding-top: 25px; border-top: 2px solid #f0f0f0; } .divider-thin { position: absolute; top: 260px; left: 20px; right: 20px; height: 0.7px; background-color: #f5f5f5; } .add-tag-button { position: absolute; top: 315px; left: 15px; display: flex; align-items: center; background-color: white; border: 0.6px solid #d0d0d0; border-radius: 6px; padding: 4px 8px; height: 18px; } .add-tag-button img { width: 14px; height: 14px; margin-left: -4px; margin-right: 0; } .add-tag-button span { font-size: 12px; color: #000; margin-right: 8px; } .profile-completion { position: absolute; top: 331px; left: 10px; display: flex; align-items: center; width: calc(100% - 20px); } .profile-completion .icon { width: 20px; height: 20px; margin-right: 10px; } .profile-completion .text { font-size: 13px; color: #000; margin-right: 20px; } .profile-completion .completion-action { font-size: 12px; color: #4073DE; position: absolute; right: 30px; } .profile-completion .more-icon { width: 20px; height: 20px; position: absolute; right: 10px; } .profile-completion { position: absolute; top: 378px; left: 8px; display: flex; align-items: center; width: calc(100% - 20px); } .profile-completion .icon { width: 21px; height: 21px; margin-right: 10px; } .profile-completion .text { font-size: 14px; color: #000; margin-right: 20px; } .profile-completion .completion-action { font-size: 12px; color: #4073DE; position: absolute; right: 20px; } .profile-completion .more-icon { width: 20px; height: 20px; position: absolute; right: -1px; } .qq-space-title { position: absolute; top: 339px; left: 10px; display: flex; align-items: center; width: calc(100% - 20px); } .qq-space-title { width: 20px; height: 20px; margin-right: 10px; } .qq-space-title { font-size: 13px; color: #000; margin-right: 5px; } .qq-space-title { font-size: 12px; color: #4073DE; margin-left: 10px; } .qq-space-title { width: 20px; height: 20px; margin-left: auto; margin-right: 0; } .qq-space-title { position: absolute; top: 440px; left: 8px; display: flex; align-items: center; width: calc(100% - 40px); } .qq-space-title .icon { width: 21px; height: 21px; margin-right: 10px; } .qq-space-title .text { font-size: 14px; color: #000; margin-right: 5px; } .qq-space-title .share-action { font-size: 12px; color: #4073DE; position: absolute; right: 1px; } .qq-space-title .completion-action { font-size: 12px; color: #4073DE; margin-left: 290px; } .qq-space-title .more-icon { width: 20px; height: 20px; position: absolute; right: -20px; } .image-gallery { display: none; gap: 2px; margin-top: 12px; padding: 0 10px; flex-wrap: wrap; } .image-gallery.has-images { display: flex; } .gallery-image { width: 99px; height: 99px; border-radius: 0px; overflow: hidden; background-color: #f0f0f0; flex-shrink: 0; } .gallery-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .box3 { position: absolute; top: 80px; left: 109px; z-index: 1000; } .box3 .i3 { width: auto; height: 13.1px; margin-left: 5px; display: inline-block; vertical-align: middle; } .box3 .i3.no-bg-icon { margin-left: -3px; } .box3 .i2 { width: auto; height: 29px; vertical-align: middle; margin-right: -3px; position: relative; z-index: 1001; } .box3 p { height: 19px; line-height: 18px; background: linear-gradient(to right, #454545, #303030); border: 0; color: #F8D49C; font-weight: 420; font-size: 1em; padding: 0 8px 0 5px; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; display: inline-block; vertical-align: middle; position: relative; z-index: 1000; margin-top: px; letter-spacing: 0.488px; } .box3 p.gold { background: linear-gradient(to right, #EDC386, #DAA45F) !important; color: #000000 !important; } .box3 p.orange { background: linear-gradient(to right, #FF8A48, #FF5D0D) !important; color: #ffffff !important; } .box3 p.no-bg { background: transparent !important; color: #999999 !important; font-size: 0.85em !important; } .box3 .list { display: none; } .box3 section { display: flex; align-items: center; position: relative; z-index: 1000; } .last { display: grid; align-items: center; justify-content: space-between; grid-template-columns: repeat(3, 1fr); gap: 2vw; position: fixed; bottom: 33px; left: 0; width: 100%; padding: 10px; box-sizing: border-box; padding-bottom: max(10px, env(safe-area-inset-bottom)); z-index: 999; } .last button { width: 100%; border: none; border: 1.5px solid #E6E6E6; height: 35%; padding-bottom: 33%; position: relative; border-radius: 15px; background-color: #fff; cursor: pointer; } .last span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 500; color: #000; font-size: 1rem; } .last button:last-child { background-color: #0099ff; border-color: #0099ff; } .last button:last-child span { color: #fff !important; } /* 头像更换弹窗 */ .avatar-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10001; } .avatar-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: avatarModalSlideIn 0.3s ease-out; } @keyframes avatarModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .avatar-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .avatar-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .avatar-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .avatar-modal-close:hover { color: #333; } .avatar-modal-body { padding: 30px 25px; display: flex; flex-direction: column; gap: 15px; } .avatar-btn { width: 100%; padding: 15px 20px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 10px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; } .avatar-btn:hover { background-color: #f8f9fa; border-color: #0099ff; } .avatar-btn span { font-size: 1rem; color: #333; font-weight: 500; } .avatar-frame-section { margin-top: 20px; } .avatar-frame-section label { display: block; margin-bottom: 15px; font-size: 1rem; color: #333; font-weight: 500; } .avatar-frame-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding: 10px; max-height: 300px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; } .avatar-frame-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; background-color: #fff; } .avatar-frame-option:hover { border-color: #0099ff; background-color: #e3f2fd; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .avatar-frame-option.selected { border-color: #0099ff; background-color: #bbdefb; box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.2); } .avatar-frame-option-img { width: 50px; height: 50px; object-fit: contain; } .avatar-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; } .avatar-confirm-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .avatar-confirm-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } /* 名称更改弹窗 */ .name-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10002; } .name-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: nameModalSlideIn 0.3s ease-out; } @keyframes nameModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .name-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .name-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .name-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .name-modal-close:hover { color: #333; } .name-modal-body { padding: 30px 25px; } .name-input { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .name-input:focus { border-color: #0099ff; } .name-input::placeholder { color: #999; } .name-color-section { margin-top: 20px; display: block !important; visibility: visible !important; } .color-label { font-size: 0.9rem; color: #666; margin-bottom: 10px; display: block !important; visibility: visible !important; } .color-options { display: flex !important; gap: 15px; flex-wrap: wrap; visibility: visible !important; } .color-option { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: block !important; visibility: visible !important; flex-shrink: 0; } .color-option:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .color-option.selected { border-color: #0099ff; box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.3); } .name-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .name-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .name-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .name-confirm-btn { padding: 10px 30px; background-color: #0099ff; border: 2px solid #0099ff; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .name-confirm-btn:hover { background-color: #0088ee; border-color: #0088ee; } /* 点赞数量修改弹窗 */ .like-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10003; } .like-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: likeModalSlideIn 0.3s ease-out; } @keyframes likeModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .like-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .like-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .like-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .like-modal-close:hover { color: #333; } .like-modal-body { padding: 30px 25px; } .like-input { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .like-input:focus { border-color: #0099ff; } .like-input::placeholder { color: #999; } .like-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .like-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .like-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .like-confirm-btn { padding: 10px 30px; background-color: #0099ff; border: 2px solid #0099ff; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .like-confirm-btn:hover { background-color: #0088ee; border-color: #0088ee; } .qq-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10004; } .qq-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; max-height: 80vh; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: qqModalSlideIn 0.3s ease-out; display: flex; flex-direction: column; } @keyframes qqModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .qq-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .qq-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .qq-modal-close { font-size: 28px; line-height: 1; cursor: pointer; color: #999; transition: color 0.2s; } .qq-modal-close:hover { color: #333; } .qq-modal-body { padding: 30px 25px; overflow-y: auto; flex: 1; } .qq-input { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .qq-input:focus { border-color: #0099ff; } .qq-input::placeholder { color: #999; } .qq-lianghao-section { margin-top: 20px; } .qq-lianghao-label { font-size: 0.9rem; color: #666; margin-bottom: 10px; } .qq-lianghao-options { display: flex; gap: 15px; flex-wrap: wrap; } .qq-lianghao-option { width: 60px; height: 60px; border: 3px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; background-color: #fff; } .qq-lianghao-option:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .qq-lianghao-option.selected { border-color: #0099ff; box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.3); } .qq-lianghao-option img { width: 100%; height: 100%; object-fit: contain; padding: 1px; } .qq-lianghao-option img.small-icon { transform: scale(0.7); } .qq-lianghao-none { font-size: 0.9rem; color: #666; font-weight: 500; } .qq-toggle-section { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; } .qq-toggle-label { font-size: 0.95rem; color: #333; font-weight: 500; } .qq-toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; } .qq-toggle-switch input { opacity: 0; width: 0; height: 0; } .qq-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.3s; border-radius: 28px; } .qq-toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .qq-toggle-switch input:checked + .qq-toggle-slider { background-color: #0099ff; } .qq-toggle-switch input:checked + .qq-toggle-slider:before { transform: translateX(22px); } .qq-input-section { display: flex; flex-direction: column; margin-top: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; } .qq-input-label { font-size: 0.95rem; color: #333; font-weight: 500; margin-bottom: 10px; } .qq-input-field { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95rem; color: #333; outline: none; transition: border-color 0.3s; } .qq-input-field:focus { border-color: #0099ff; } .qq-input-field::placeholder { color: #999; } .qid-golden-border { display: inline-block; vertical-align: middle; border: 1px solid #F9DA94; border-radius: 4px; padding: 2px; position: relative; z-index: 1000; } #signatureIdText { height: 19px; line-height: 19px; background: linear-gradient(to right, #2D0D03, #442519); border: 0; color: #F9DA94; font-weight: 400; font-size: 1em; padding: 0 8px 0 12.5px; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; display: inline-block; vertical-align: middle; position: relative; z-index: 1000; margin-left: 1px; transform: translateY(-1.5px); } .qq-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .qq-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .qq-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .qq-confirm-btn { padding: 10px 30px; background-color: #0099ff; border: 2px solid #0099ff; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .qq-confirm-btn:hover { background-color: #0088ee; border-color: #0088ee; } .signature-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10005; } .signature-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: signatureModalSlideIn 0.3s ease-out; } @keyframes signatureModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .signature-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .signature-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .signature-modal-close { font-size: 1.8rem; color: #999; cursor: pointer; transition: color 0.2s; line-height: 1; } .signature-modal-close:hover { color: #333; } .signature-modal-body { padding: 30px 25px; } .signature-input { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .signature-input:focus { border-color: #0099ff; } .signature-input::placeholder { color: #999; } .signature-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .signature-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .signature-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .signature-confirm-btn { padding: 10px 30px; background-color: #0099ff; border: 2px solid #0099ff; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .signature-confirm-btn:hover { background-color: #0088ee; border-color: #0088ee; } /* 图片上传弹窗 */ .image-upload-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10006; } .image-upload-content { background-color: #fff; border-radius: 15px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: imageUploadModalSlideIn 0.3s ease-out; } @keyframes imageUploadModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .image-upload-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; position: sticky; top: 0; background-color: #fff; z-index: 10; } .image-upload-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .image-upload-close { font-size: 1.8rem; color: #999; cursor: pointer; transition: color 0.2s; line-height: 1; } .image-upload-close:hover { color: #333; } .image-upload-body { padding: 25px; } .upload-all-section { margin-bottom: 0; } .upload-item { margin-bottom: 25px; } .upload-item:last-child { margin-bottom: 0; } .upload-label { display: block; margin-bottom: 10px; font-size: 1rem; color: #333; font-weight: 500; } .upload-all-preview { width: 100%; aspect-ratio: 1; border: 2px dashed #ccc; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; background-color: #f9f9f9; transition: all 0.3s; position: relative; } .upload-all-preview:hover { border-color: #0099ff; background-color: #f0f8ff; } .upload-preview { width: 100%; aspect-ratio: 1; border: 2px dashed #ccc; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; background-color: #f9f9f9; transition: all 0.3s; position: relative; } .upload-preview:hover { border-color: #0099ff; background-color: #f0f8ff; } .upload-preview img, .upload-all-preview img { width: 100%; height: 100%; object-fit: cover; display: none; } .upload-preview.has-image img, .upload-all-preview.has-image img { display: block; } .upload-preview.has-image .upload-placeholder, .upload-all-preview.has-image .upload-placeholder { display: none; } .upload-placeholder { color: #999; font-size: 0.95rem; text-align: center; padding: 20px; } .upload-preview:hover .upload-placeholder, .upload-all-preview:hover .upload-placeholder { color: #0099ff; } .image-upload-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background-color: #fff; border-top: 1px solid #f0f0f0; } .image-upload-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .image-upload-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .image-upload-confirm-btn { padding: 10px 30px; background-color: #0099ff; border: 2px solid #0099ff; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .image-upload-confirm-btn:hover { background-color: #0088ee; border-color: #0088ee; } /* 状态控制弹窗 */ .status-control-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10014; } .status-control-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: statusControlModalSlideIn 0.3s ease-out; display: flex; flex-direction: column; } @keyframes statusControlModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .status-control-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; } .status-control-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .status-control-close { font-size: 1.8rem; color: #999; cursor: pointer; transition: color 0.2s; line-height: 1; } .status-control-close:hover { color: #333; } .status-control-body { padding: 25px 25px; flex: 1; } .toggle-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #f0f0f0; } .toggle-item:last-child { border-bottom: none; } .toggle-label { font-size: 1rem; color: #333; font-weight: 500; } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.3s; border-radius: 28px; } .toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .toggle-switch input:checked + .toggle-slider { background-color: #0099ff; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .status-control-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; } .status-control-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .status-control-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .status-control-confirm-btn { padding: 10px 30px; background-color: #0099ff; border: 2px solid #0099ff; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .status-control-confirm-btn:hover { background-color: #0088ee; border-color: #0088ee; } .location-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10007; } .location-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: locationModalSlideIn 0.3s ease-out; } @keyframes locationModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .location-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .location-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .location-modal-close { font-size: 1.8rem; color: #999; cursor: pointer; transition: color 0.2s; line-height: 1; } .location-modal-close:hover { color: #333; } .location-modal-body { padding: 30px 25px; } .location-input-group { margin-bottom: 20px; } .location-input-group:last-child { margin-bottom: 0; } .location-input-group label { display: block; margin-bottom: 8px; font-size: 0.95rem; color: #666; font-weight: 500; } .location-input { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .location-input:focus { border-color: #0099ff; } .location-input::placeholder { color: #999; } .location-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .location-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .location-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .location-confirm-btn { padding: 10px 30px; background-color: #0099ff; border: 2px solid #0099ff; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .location-confirm-btn:hover { background-color: #0088ee; border-color: #0088ee; } /* 大会员等级修改弹窗 */ .vip-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10008; } .vip-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: vipModalSlideIn 0.3s ease-out; } @keyframes vipModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .vip-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .vip-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .vip-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .vip-modal-close:hover { color: #333; } .vip-modal-body { padding: 30px 25px; max-height: 400px; overflow-y: auto; } .vip-selection-section { margin-bottom: 20px; } .vip-selection-section label { display: block; margin-bottom: 15px; font-size: 1rem; color: #333; font-weight: 500; } .vip-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding: 10px; max-height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; } .vip-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; background-color: #fff; } .vip-option:hover { border-color: #0099ff; background-color: #f0f8ff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .vip-option.selected { border-color: #0099ff; background-color: #e6f3ff; box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.2); } .vip-option-img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 5px; } .vip-option-label { font-size: 0.85rem; color: #666; font-weight: 500; } .vip-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .vip-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .vip-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .vip-confirm-btn { padding: 10px 30px; background-color: #0099ff; border: 2px solid #0099ff; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .vip-confirm-btn:hover { background-color: #0088ee; border-color: #0088ee; } /* 超级会员等级修改弹窗 */ .svip-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10009; } .svip-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: svipModalSlideIn 0.3s ease-out; } @keyframes svipModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .svip-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .svip-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .svip-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .svip-modal-close:hover { color: #333; } .svip-modal-body { padding: 30px 25px; max-height: 400px; overflow-y: auto; } .svip-selection-section { margin-bottom: 20px; } .svip-selection-section label { display: block; margin-bottom: 15px; font-size: 1rem; color: #333; font-weight: 500; } .svip-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding: 10px; max-height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; } .svip-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; background-color: #fff; } .svip-option:hover { border-color: #ff6b6b; background-color: #fff0f0; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .svip-option.selected { border-color: #ff6b6b; background-color: #ffe6e6; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); } .svip-option-img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 5px; } .svip-option-label { font-size: 0.85rem; color: #666; font-weight: 500; } .svip-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .svip-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .svip-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .svip-confirm-btn { padding: 10px 30px; background-color: #ff6b6b; border: 2px solid #ff6b6b; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .svip-confirm-btn:hover { background-color: #ff5252; border-color: #ff5252; } /* 状态包裹器：圆形容器 */ .status-wrapper { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 2px 6px; border-radius: 20px; border: 1px solid #e0e0e0; } .status-icon { width: 16px; height: 16px; margin-right: 0px; } .status-text { font-size: 11px; color: #000; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; } /* 黄钻等级修改弹窗 */ .huangzuan-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10010; } .huangzuan-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: huangzuanModalSlideIn 0.3s ease-out; } @keyframes huangzuanModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .huangzuan-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .huangzuan-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .huangzuan-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .huangzuan-modal-close:hover { color: #333; } .huangzuan-modal-body { padding: 30px 25px; max-height: 400px; overflow-y: auto; } .huangzuan-selection-section { margin-bottom: 20px; } .huangzuan-selection-section label { display: block; margin-bottom: 15px; font-size: 1rem; color: #333; font-weight: 500; } .huangzuan-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding: 10px; max-height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; } .huangzuan-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; background-color: #fff; } .huangzuan-option:hover { border-color: #ffd700; background-color: #fffbe6; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .huangzuan-option.selected { border-color: #ffd700; background-color: #fff9c4; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2); } .huangzuan-option-img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 5px; } .huangzuan-option-label { font-size: 0.85rem; color: #666; font-weight: 500; } .huangzuan-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .huangzuan-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .huangzuan-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .huangzuan-confirm-btn { padding: 10px 30px; background-color: #ffd700; border: 2px solid #ffd700; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #333; font-weight: 500; transition: all 0.2s; } .huangzuan-confirm-btn:hover { background-color: #ffcc00; border-color: #ffcc00; } /* 情侣等级修改弹窗 */ .love-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10011; } .love-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: loveModalSlideIn 0.3s ease-out; } @keyframes loveModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .love-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .love-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .love-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .love-modal-close:hover { color: #333; } .love-modal-body { padding: 30px 25px; max-height: 400px; overflow-y: auto; } .love-selection-section { margin-bottom: 20px; } .love-selection-section label { display: block; margin-bottom: 15px; font-size: 1rem; color: #333; font-weight: 500; } .love-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding: 10px; max-height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; } .love-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; background-color: #fff; } .love-option:hover { border-color: #ff69b4; background-color: #fff0f5; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .love-option.selected { border-color: #ff69b4; background-color: #ffe6f0; box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2); } .love-option-img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 5px; } .love-option-label { font-size: 0.85rem; color: #666; font-weight: 500; } .love-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .love-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .love-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .love-confirm-btn { padding: 10px 30px; background-color: #ff69b4; border: 2px solid #ff69b4; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .love-confirm-btn:hover { background-color: #ff1493; border-color: #ff1493; } /* 玩具等级修改弹窗 */ .toy-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10012; } .toy-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: toyModalSlideIn 0.3s ease-out; } @keyframes toyModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .toy-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .toy-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .toy-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .toy-modal-close:hover { color: #333; } .toy-modal-body { padding: 30px 25px; max-height: 400px; overflow-y: auto; } .toy-selection-section { margin-bottom: 20px; } .toy-selection-section label { display: block; margin-bottom: 15px; font-size: 1rem; color: #333; font-weight: 500; } .toy-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding: 10px; max-height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; } .toy-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; background-color: #fff; } .toy-option:hover { border-color: #00bcd4; background-color: #e0f7fa; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .toy-option.selected { border-color: #00bcd4; background-color: #b2ebf2; box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2); } .toy-option-img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 5px; } .toy-option-label { font-size: 0.85rem; color: #666; font-weight: 500; } .toy-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .toy-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .toy-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .toy-confirm-btn { padding: 10px 30px; background-color: #00bcd4; border: 2px solid #00bcd4; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .toy-confirm-btn:hover { background-color: #0097a7; border-color: #0097a7; } /* 熊猫修改弹窗 */ .panda-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 10013; } .panda-modal-content { background-color: #fff; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: pandaModalSlideIn 0.3s ease-out; } @keyframes pandaModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .panda-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f0f0f0; } .panda-modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 600; } .panda-modal-close { font-size: 28px; cursor: pointer; color: #999; line-height: 1; transition: color 0.2s; } .panda-modal-close:hover { color: #333; } .panda-modal-body { padding: 30px 25px; max-height: 400px; overflow-y: auto; } .panda-selection-section { margin-bottom: 20px; } .panda-selection-section label { display: block; margin-bottom: 15px; font-size: 1rem; color: #333; font-weight: 500; } .panda-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding: 10px; max-height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; } .panda-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; background-color: #fff; } .panda-option:hover { border-color: #4CAF50; background-color: #e8f5e9; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .panda-option.selected { border-color: #4CAF50; background-color: #c8e6c9; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2); } .panda-option-img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 5px; } .panda-option-label { font-size: 0.85rem; color: #666; font-weight: 500; } .panda-modal-footer { padding: 15px 25px 25px; display: flex; justify-content: flex-end; gap: 10px; } .panda-cancel-btn { padding: 10px 30px; background-color: #fff; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #666; font-weight: 500; transition: all 0.2s; } .panda-cancel-btn:hover { background-color: #f8f9fa; border-color: #999; color: #333; } .panda-confirm-btn { padding: 10px 30px; background-color: #4CAF50; border: 2px solid #4CAF50; border-radius: 8px; cursor: pointer; font-size: 1rem; color: #fff; font-weight: 500; transition: all 0.2s; } .panda-confirm-btn:hover { background-color: #45a049; border-color: #45a049; }