321

src/config/ballSetting.ts

-export const baasPage = [
+export const baasBalls = [
     {
         page:0,
         setting: [
@@ -29,11 +29,11 @@ export const baasPage = [
         page: 1,
         setting: [
             {
-                size: "10%",
+                size: "30%",
                 position: ["-50px", "55%"],
                 rotation: "210",
                 zIndex: "9999",
-                color: "white",
+                color: "blue",
             },
             {
                 size: "25%",

src/config/bgSetting.ts

@@ -5,7 +5,24 @@ export const baasBg = [
     },
     {
         page:1,
-        config:[]
+        config:     [
+            {
+              size: ["80%","40%"],
+              position: ["-10%", "45%"],
+              align:'right',
+              zIndex: "-99",
+              rotation:'70',
+              color: "cyan",
+              blur:'30px'
+          },
+          {
+              size:[ "85%",'30%'],
+              align: "right",
+              position: ["-85px", "10%"],
+              zIndex: "-90",
+              color: "blue",
+            },
+          ]
     },
     {
         page:2,

src/layouts/GradientLay.tsx

@@ -77,7 +77,7 @@ export const GradientLay = (props: BgAnimeType) => {
 
   return (
     <div className=" relative h-full w-full overflow-hidden">
-        <div className="w-full h-full min-w-[1200px] absolute top-0 left-0  z-[-1] ">
+        <div className="w-full h-full absolute top-0 left-0  z-[-999] ">
              {props.config && props.config.length > 0
                     ? props.config.map((i,index) => {
                         return <BgImgHodler key={index} config={i}></BgImgHodler>;

src/layouts/PageLayout.tsx

 import { IProps } from "@/common/Iprops.interface"
+import { BallAnime } from "./BallAnime"
+import { GradientLay } from "./GradientLay"
 
 interface PageLayoutType extends IProps{
-    bgColor?: string
     className?:string
+    ballConfig?:any
+    gradientConfig?:any
 }
 
 export const PageLayout=(props:PageLayoutType)=>{
-    const {children,bgColor,className} = props
+    const {children,className,ballConfig,gradientConfig} = props
     return(
-        <div className={`w-screen h-screen pt-16 min-w-[1200px] ${className}`}>
-            {children}    
+        <GradientLay config={gradientConfig}>
+        <div className={`h-screen w-screen relative ${className}`}>
+         
+            <BallAnime config={ballConfig}>
+                
+            <div className='h-[calc(100vh-70px)] w-full  py-20 flex-col items-center'>
+                {children}    
+            </div>
+            </BallAnime>
         </div>
+        </GradientLay>
         
     )
 }
\ No newline at end of file

src/views/Baas33/index.tsx

@@ -7,10 +7,11 @@ import { AppContianer } from '@/layouts/AppContianer';
 import { Features } from './Features';
 import { Advantages } from './Advantages';
 import { Service } from './Service';
-import {baasPage} from '@/config/ballSetting'
+import {baasBalls} from '@/config/ballSetting'
 import { GradientLay } from '@/layouts/GradientLay';
 import { HeroBaas } from './HeroBaas';
 import { Ball } from '@/components/Ball';
+import { baasBg } from '@/config/bgSetting';
 export interface IAppProps {
 }
 
@@ -22,30 +23,9 @@ export default function Baas33 () {
   return (
     <ScrollView>
       <div className="vertival-content">
-      {/* <PageLayout>
-        <BallAnime config={baasPage[0].setting}>
-          <>
-            <div className="z-[1020] flex-col  h-[100vh-68px] items-center justify-center"> 
-                  <AppContianer>
-                      <div className=" translate-y-[8vh]">
-                        <div className=" text-4xl  font-mono  tracking-widest font-medium">复杂美区块链开放服务平台</div>
-                        <div className="flex gap-x-5 mt-5">
-                          <StyledButton text='开发者实验室'  color="black"></StyledButton>
-                          <StyledButton text='开发者文档'  color="black"></StyledButton>
-                          <StyledButton text='一键搭建'  color="red"></StyledButton>
-                        </div>
-                      </div>
-                  </AppContianer>
-                  <Ball size='8rem' gradient={1} colors={['#87df83','#772891','#421891']}></Ball>
-                  <HeroBaas></HeroBaas>
-            </div>
-          </>
-        </BallAnime>
-      </PageLayout> */}
-      <div className='h-full w-full relative'>
-        <BallAnime config={baasPage[0].setting}>
-          <div className='h-[calc(100%-70px)] w-full  py-20 flex-col items-center'>
-            <AppContianer>
+      <PageLayout ballConfig={baasBalls[0].setting}>
+        <>
+        <AppContianer>
                 <div className="translate-y-[8vh]">
                   <div className=" text-4xl  font-mono  tracking-widest font-medium">复杂美区块链开放服务平台</div>
                   <div className="flex gap-x-5 mt-5">
@@ -55,15 +35,16 @@ export default function Baas33 () {
                   </div>
                 </div>
             </AppContianer>
-            <div className=" min-w-[1200px] w-full">
+            <div className="w-full">
                <HeroBaas></HeroBaas>
             </div>
 
-          {/* <Ball size='12rem' color='blue'></Ball> */}
-          </div>    
-        </BallAnime>
-      </div>
-      <GradientLay config={
+        </>
+      </PageLayout>
+      <PageLayout ballConfig={baasBalls[1].setting} gradientConfig={baasBg[1].config}>
+        <Features></Features>
+      </PageLayout>
+      {/* <GradientLay config={
         [
           {
             size: ["80%","40%"],
@@ -75,18 +56,16 @@ export default function Baas33 () {
             blur:'30px'
         },
         {
-            size:[ "25%",'30%'],
+            size:[ "85%",'30%'],
             align: "right",
             position: ["-85px", "10%"],
             zIndex: "-90",
             color: "blue",
-        },
+          },
         ]
       }>
-      <PageLayout>
-        <BallAnime config={baasPage[1].setting}>
-          <Features />
-        </BallAnime>
+      <PageLayout ballConfig={baasPage[1].setting}>
+         <div>dsfklsdjf</div>
       </PageLayout>
       </GradientLay>
       <PageLayout>
@@ -98,7 +77,7 @@ export default function Baas33 () {
         <BallAnime config={baasPage[3].setting}>
           <Service></Service>
         </BallAnime>
-      </PageLayout>
+      </PageLayout> */}
       </div>
     </ScrollView>
   );