import { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import { AtButton } from "taro-ui";
import { AtSearchBar } from "taro-ui";
import { Picker } from "@tarojs/components";
import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtAvatar,
  AtAccordion,
} from "taro-ui";
import { AtToast } from "taro-ui";
import { AtIcon } from "taro-ui";
import iphone from "../../images/iphone.jpg";

const Index = () => {
  useEffect(() => {
    const isPC = window.innerWidth > 1600;

    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;
