feat: 设置css宽高比_旋转

src/pages/index/index.jsx

@@ -22,11 +22,29 @@ import {
 } from "taro-ui";
 import { AtToast } from "taro-ui";
 import { AtIcon } from "taro-ui";
+import iphone from "../../images/iphone.jpg";
 
 const Index = () => {
-  useEffect(() => {}, []);
+  useEffect(() => {
+    const isPC = window.innerWidth > 1600;
 
-  return <View className="index">11221</View>;
+    if (isPC) {
+      const app = document.querySelector(".index");
+      if (app) {
+        // 设置旋转后容器为屏幕高度宽、屏幕宽度高（注意：旋转后逻辑反转）
+        app.style.width = `${window.innerHeight}px`;
+        app.style.height = `${window.innerWidth}px`;
+      }
+    }
+  }, []);
+
+  return (
+    <View className="index">
+      <View className="index_backImg">
+        <Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />
+      </View>
+    </View>
+  );
 };
 
 export default Index;

src/pages/index/index.scss

@@ -1,15 +1,49 @@
 .index {
   width: 100vw;
   height: 100vh;
+  // overflow: hidden; // 防止溢出
 
-  // PC 浏览器下旋转
-  @media (min-width: 1600px) {
+  .index_backImg {
+    width: 100%;
+    height: 100%;
+    background-color: yellowgreen;
+
+    .index_backImg_bg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+
+// PC 浏览器下旋转
+@media (min-width: 1600px) {
+  .index {
     position: absolute;
     top: 0;
     left: 0;
     width: 750px; // 根据标准宽度调整
     height: 1334px; // 保持竖屏比例
+    // width: 100vw; // 使容器宽度始终填满视口
+    // height: 100vh; // 使容器高度始终填满视口
     transform: rotate(-90deg) translate(-100vh, 0);
     transform-origin: top left;
+
+    .index_backImg {
+      width: 100%;
+      height: 100%;
+      // width: 100vw;
+      // height: 100vh;
+      background-color: yellow;
+
+      .index_backImg_bg {
+        width: 100%;
+        height: 100%;
+        // object-fit: cover; // 确保图片铺满并保持宽高比
       }
+    }
+
+
+  }
+
 }