first commit

2026-03-05 09:08:21 +08:00
commit 0a61c4ddec
2189 changed files with 38610 additions and 0 deletions
@@ -0,0 +1,170 @@
+/* 首次引导页样式 */
+
+.onboarding-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+}
+
+/* 顶部 */
+.header {
+  padding: 24rpx 40rpx 24rpx;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-bottom: 1rpx solid #F5F5F5;
+}
+.header-title {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #333;
+  display: block;
+}
+.header-sub {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16rpx;
+}
+.sub-text {
+  font-size: 26rpx;
+  color: #999;
+}
+.sub-warn {
+  font-size: 22rpx;
+  color: var(--color-primary);
+}
+
+/* 网格滚动 */
+.grid-scroll {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.grid-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+}
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 24rpx 20rpx 200rpx;
+  gap: 16rpx;
+}
+
+/* 网格项 */
+.grid-item {
+  width: calc(33.33% - 12rpx);
+  box-sizing: border-box;
+  background: #F8F8F8;
+  border-radius: 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 28rpx 16rpx;
+  position: relative;
+  border: 4rpx solid transparent;
+  transition: all 0.3s ease;
+}
+.grid-item.selected {
+  border-color: var(--color-primary);
+  background: var(--color-primary-light);
+  box-shadow: 0 8rpx 24rpx rgba(255, 157, 66, 0.15);
+  transform: scale(1.02);
+}
+
+/* 图标 */
+.item-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16rpx;
+}
+.icon-emoji {
+  font-size: 40rpx;
+}
+
+/* 文字 */
+.item-name {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #333;
+  text-align: center;
+  line-height: 1.3;
+  margin-bottom: 6rpx;
+}
+.item-tag {
+  font-size: 18rpx;
+  color: #999;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* 选中对勾 */
+.check-mark {
+  position: absolute;
+  top: 12rpx;
+  right: 12rpx;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background: var(--color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.check-icon {
+  font-size: 22rpx;
+  color: #FFF;
+  font-weight: 700;
+}
+
+/* 底部 */
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 24rpx 40rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  background: linear-gradient(to top, #FFFFFF, #FFFFFF, rgba(255,255,255,0));
+}
+.confirm-btn {
+  width: 100%;
+  height: 100rpx;
+  border-radius: 999rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.confirm-btn.active {
+  background: var(--color-primary);
+  color: #FFF;
+  box-shadow: 0 12rpx 32rpx rgba(255, 157, 66, 0.3);
+}
+.confirm-btn.active:active {
+  transform: scale(0.97);
+}
+.confirm-btn.disabled {
+  background: #E5E5E5;
+  color: #BBB;
+}
+.confirm-btn::after {
+  border: none;
+}