.empty_state_page { width: 100%; min-height: 100vh; // 白色渐变背景(从设计稿参考) background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%); position: relative; display: flex; flex-direction: column; overflow: hidden; &__content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; position: relative; min-height: calc(100vh - 98px); } // 空状态图片 &__icon { position: absolute; top: 178px; left: 50%; transform: translateX(-50%); width: 221.17px; height: 200px; opacity: 0.8; // 图片透明度 z-index: 0; } // 提示文字 &__tip { position: absolute; top: 418px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 8px 16px; background: rgba(0, 0, 0, 0.5); // 白色背景下使用浅色背景 border-radius: 4px; white-space: nowrap; &_text { font-family: 'PingFang SC'; font-weight: 400; font-size: 15px; line-height: 1.6; color: #ffffff; // 白色背景下使用深色文字 text-align: center; } } // 按钮区域 &__buttons { position: absolute; bottom: 110px; left: 0; right: 0; display: flex; flex-direction: column; gap: 10px; padding: 0 20px; z-index: 1; align-items: center; } // 按钮 &__button { display: flex; justify-content: center; align-items: center; width: 251px; height: 52px; border-radius: 16px; box-shadow: 0px 8px 64px 0px rgba(0, 0, 0, 0.1), 0px 4px 36px 0px rgba(0, 0, 0, 0.25); backdrop-filter: blur(32px); cursor: pointer; transition: opacity 0.3s; &:active { opacity: 0.8; } // 按钮文字样式 &_text { font-family: 'DingTalk JinBuTi'; font-weight: 400; font-size: 18px; line-height: 1.11; letter-spacing: -0.05em; text-align: center; color: #000000; } // 主要按钮(去看看其他球局) &--primary { background: #000000; border: 2px solid rgba(0, 0, 0, 0.06); .empty_state_page__button_text { color: #ffffff; // 黑色背景下使用白色文字 } } // 次要按钮(返回首页) &--secondary { background: linear-gradient(154deg, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%); border: 2px solid rgba(0, 0, 0, 0.06); } } }