page.tsx 1.52 KB
import React, { useState, useEffect } from 'react';
import MainTitleList from '@/components/MainTitleList'; // 确保你有相应的React版本
import MainTitleListOdd from '@/components/MainTitleListOdd'; // 确保你有相应的React版本
import { useCategoryStore } from '@/stores/category'; // 确保你有相应的React版本
import { isMobile } from '@/utils'; // 确保你有相应的React版本
import { Carousel } from '@mui/material';

const HomePage = () => {
  const store = useCategoryStore();
  const [lab, setLab] = useState({ categoryDisplayName: '', list: [] });

  useEffect(() => {
    if (store?.list?.[3]) {
      setLab(store.list[3]);
    }
  }, [store]);

  const banners = [
    '/banner/banner1.jpg',
    '/banner/banner2.jpg',
    '/banner/banner3.jpg',
    '/banner/banner4.jpg',
  ];

  const mobileBanners = [
    '/mobile/banner-index1.png',
    '/mobile/banner-index2.png',
    '/mobile/banner-index3.png',
  ];

  // ... 其他数据如 materials, tests, batteries, packs 保持不变

  console.log(
    '%c [ banners ]-111',
    'font-size:13px; background:pink; color:#bf2c9f;',
    banners
  );

  return (
    <div className="tw-w-full">
      <Carousel hideDelimiterBackground showArrowsOnHover height="auto">
        {banners.map((banner) => (
          <CarouselItem src={banner} cover alt="canrud" key={banner} />
        ))}
      </Carousel>
      {/* 其他部分 */}
      {/* ... 其他代码保持不变,只是将Vue特有的语法替换成React的语法 */}
    </div>
  );
};

export default HomePage;