Added MobileSimulator Component

src/components/MobileSimulatorContainer/MobileSimulatorContainer.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import MobileSimulatorContainer from ".";
+
+const meta: Meta<typeof MobileSimulatorContainer> = {
+  component: MobileSimulatorContainer,
+  decorators: [
+    // MARK: 当需要进行自定义Block容器时 在此处定义
+    (Story) => {
+      return (
+        <div className="w-full min-h-96 mx-auto flex justify-center items-center">
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+type MobileSimulatorContainerStory = StoryObj<typeof meta>;
+
+export const Dark: MobileSimulatorContainerStory = {
+  args: {
+    className: "",
+    children: "",
+  },
+};
+
+export default meta;

src/components/MobileSimulatorContainer/index.tsx

@@ -0,0 +1,27 @@
+import "./style.css";
+
+/**
+ * @name MobileSimulatorContainerProps
+ * @description MobileSimulatorContainer 组件的属性
+ * @param {string} className - 类名
+ * @param {React.CSSProperties} style - 样式
+ */
+export type MobileSimulatorContainerProps = {
+  style?: React.CSSProperties;
+  className?: string;
+  children?: JSX.Element | JSX.Element[] | React.ReactNode | React.ReactNode[];
+};
+
+/**
+ * @name 容器组件
+ */
+const MobileSimulatorContainer = (props: MobileSimulatorContainerProps) => {
+  const { className, style, children } = props;
+  return (
+    <div className={`mobile ${className}`} style={style}>
+      <div className="mobile-content">{children}</div>
+    </div>
+  );
+};
+
+export default MobileSimulatorContainer;

src/components/MobileSimulatorContainer/style.css

@@ -0,0 +1,26 @@
+.mobile {
+  height: 500px;
+  min-width: 300px;
+  background-image: url("/images/mobiles-imulator-container.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.mobile-content {
+  position: absolute;
+  left: 40px;
+  top: 55px;
+  font-size: 14px;
+  word-break: break-all;
+  line-height: 1.6;
+  width: 190px;
+  height: 405px;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.mobile-content::-webkit-scrollbar {
+  display: none;
+}