/* ============================================================ OPC 创业伙伴调研 · 小程序样式 延续站点「暗色 + 蓝紫科技」视觉语言; 非 tab 页(navigateTo 进入),无固定底栏,正常留白。 ============================================================ */ .sv { padding: 24rpx 32rpx 72rpx; position: relative; z-index: 2;} /* ---------- 区块头 ---------- */ .sv-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6rpx; margin: 32rpx 0 24rpx; } .sv-no { font-family: 'BubbledotICG', monospace; color: #6f6f6f; font-size: 26rpx; letter-spacing: 2rpx; } .sv-title { font-size: 40rpx; font-weight: 800; letter-spacing: -0.5rpx; line-height: 1.3; /* 蓝紫科技感渐变标题 */ background: linear-gradient(120deg, #8fc3ff 0%, #a8a0ff 45%, #e0a0ff 80%, #7fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .sv-en { font-family: 'BubbledotICG', monospace; color: #5b5b5b; font-size: 24rpx; letter-spacing: 2rpx; text-transform: uppercase; } /* ---------- 欢迎页 ---------- */ .sv-intro { display: block; font-size: 28rpx; color: #c4c2c3; line-height: 1.75; margin-bottom: 24rpx; } .sv-features { display: flex; flex-wrap: wrap; gap: 14rpx; margin-bottom: 36rpx; } .sv-feature { font-size: 24rpx; color: #d8d6d7; background: rgba(255, 255, 255, 0.05); border: 1rpx solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 10rpx 24rpx; line-height: 1.4; } .sv-feature::before { content: '·'; color: #a8c4ff; margin-right: 8rpx; } .sv-start { width: 100%; } /* ---------- 答题进度 ---------- */ .sv-quiz-head { padding-top: 8rpx; } .sv-quiz-top { display: flex; align-items: baseline; justify-content: space-between; } .sv-quiz-title { font-size: 30rpx; font-weight: 700; color: #fff; } .sv-progress-text { font-family: 'BubbledotICG', monospace; font-size: 24rpx; color: #8e8e8e; letter-spacing: 1rpx; } .sv-progress { height: 12rpx; border-radius: 999px; background: rgba(255, 255, 255, 0.1); margin: 22rpx 0 18rpx; overflow: hidden; } .sv-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5b8cff, #9d6bff); box-shadow: 0 0 12rpx rgba(160, 180, 255,0.6); transition: width 0.35s ease; } .sv-part { display: block; font-size: 24rpx; color: #a8c4ff; margin-bottom: 8rpx; } /* 分部横幅 */ .sv-sec-banner { display: inline-block; font-size: 24rpx; font-weight: 600; color: #a8c4ff; background: rgba(160, 180, 255,0.1); border: 1rpx solid rgba(160, 180, 255,0.3); border-radius: 999px; padding: 8rpx 26rpx; margin: 8rpx 0 20rpx; } /* ---------- 问题卡片 ---------- */ .sv-qcard { background: linear-gradient(180deg, #0e0e12, #0a0a0d); border: 1rpx solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 34rpx 32rpx; margin-top: 8rpx; box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.45); } .sv-qnum { display: flex; justify-content: space-between; align-items: center; font-size: 22rpx; color: #6f6f6f; margin-bottom: 16rpx; } .sv-qnum .sv-flag { font-size: 20rpx; color: #a8c4ff; font-weight: 600; } .sv-check { color: #a8c4ff; font-size: 24rpx; display: inline-flex; align-items: center; } .sv-qtext { display: block; font-size: 32rpx; font-weight: 700; color: #fff; line-height: 1.55; margin-bottom: 26rpx; } .sv-qhint { font-size: 22rpx; font-weight: 400; color: #8e8e8e; margin-left: 10rpx; } /* 单选 / 多选 */ .sv-opts { display: flex; flex-direction: column; gap: 14rpx; } .sv-opt { display: flex; align-items: flex-start; gap: 16rpx; background: #141417; border: 1rpx solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 22rpx 24rpx; transition: all 0.2s ease; } .sv-opt.sel { border-color: #a8c4ff; background: rgba(160, 180, 255,0.08); box-shadow: 0 0 0 1rpx rgba(160, 180, 255,0.5), 0 0 22rpx rgba(160, 180, 255,0.14); } .sv-opt-dot { width: 32rpx; height: 32rpx; border-radius: 50%; border: 2rpx solid #5b5b5b; flex-shrink: 0; margin-top: 4rpx; display: flex; align-items: center; justify-content: center; font-size: 16rpx; color: transparent; transition: all 0.2s ease; } .sv-opt.sel .sv-opt-dot { border-color: #a8c4ff; background: #a8c4ff; color: #000; box-shadow: 0 0 10rpx rgba(160, 180, 255,0.6); } .sv-opt-text { font-size: 27rpx; color: #c4c2c3; line-height: 1.55; flex: 1; } /* 量表(Likert 1–5) */ .sv-likert { display: flex; flex-direction: column; gap: 14rpx; } .sv-lk { display: flex; align-items: center; gap: 20rpx; background: #141417; border: 1rpx solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 20rpx 24rpx; transition: all 0.2s ease; } .sv-lk.sel { border-color: #a8c4ff; background: rgba(160, 180, 255,0.08); box-shadow: 0 0 0 1rpx rgba(160, 180, 255,0.5), 0 0 22rpx rgba(160, 180, 255,0.14); } .sv-lk-v { width: 48rpx; height: 48rpx; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #c4c2c3; font-size: 26rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; } .sv-lk.sel .sv-lk-v { background: linear-gradient(135deg, #5b8cff, #9d6bff); color: #000; box-shadow: 0 0 14rpx rgba(160, 180, 255,0.55); } .sv-lk-l { font-size: 28rpx; color: #c4c2c3; } /* 填空 */ .sv-textarea { width: 100%; box-sizing: border-box; min-height: 160rpx; background: #141417; color: #fff; border: 1rpx solid rgba(255, 255, 255, 0.14); border-radius: 16px; padding: 22rpx 24rpx; font-size: 28rpx; line-height: 1.6; } /* ---------- 底部导航 ---------- */ .sv-nav { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin: 32rpx 0 8rpx; } .sv-nav-btn { flex-shrink: 0; line-height: 2.5; padding: 0 26rpx; font-size: 27rpx; } .sv-nav-info { font-family: 'BubbledotICG', monospace; font-size: 26rpx; color: #8e8e8e; letter-spacing: 2rpx; } .sv-nav-empty { width: 128rpx; flex-shrink: 0; } /* ---------- 成功页 ---------- */ .sv-thanks { background: linear-gradient(135deg, #161618, #221d2e); border: 1rpx solid rgba(255, 255, 255, 0.18); border-radius: 20px; padding: 36rpx 32rpx; margin: 24rpx 0 20rpx; font-size: 28rpx; color: #cfcfcf; line-height: 1.75; } .note { display: block; margin: 20rpx 0; font-size: 24rpx; color: #8e8e8e; line-height: 1.6; } .err-text { display: block; margin-top: 20rpx; font-size: 26rpx; color: #f0b8b8; text-align: center; }