35 lines
784 B
TypeScript
35 lines
784 B
TypeScript
import { useScale } from "@/contexts/ScaleContext";
|
|
|
|
/**
|
|
* 横屏提示组件
|
|
* 在移动端竖屏时显示提示，引导用户横屏观看
|
|
*/
|
|
export function RotateHint() {
|
|
const { isMobilePortrait } = useScale();
|
|
|
|
if (!isMobilePortrait) return null;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
inset: 0,
|
|
background:
|
|
"rgba(0,0,0,0.55) radial-gradient(circle at center, rgba(255,255,255,0.1), rgba(0,0,0,0.6))",
|
|
color: "#fff",
|
|
zIndex: 9999,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
textAlign: "center",
|
|
padding: "24px",
|
|
fontSize: "20px",
|
|
lineHeight: 1.5,
|
|
}}
|
|
>
|
|
请横屏观看，以获得最佳体验
|
|
</div>
|
|
);
|
|
}
|
|
|