feat: 首页新样式

src/pages/home/index.config.ts

@@ -1,4 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页',
-  navigationStyle:"custom"
-})
+  navigationBarTitleText: "首页",
+  navigationStyle: "custom",
+});

src/pages/home/index.scss

@@ -1,54 +1,154 @@
 .index {
-    .index-back {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 80;
-    }
+  .index-back {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 80;
+  }
 
-    .index-back-content {
-        z-index: 100;
-        color: #fff;
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-    }
+  .index-container {
+    background-image: url("../../assets/new-edition/background-image.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
 
-    .index-back-se {
-        font-size: 28px;
-        font-weight: 400;
-    }
+  .index-logo {
+    width: 332px;
+    height: 60px;
+    margin: 48px 32px 0;
+  }
 
-    .index-iocn-title {
-        width: 220px;
-        height: 44px;
-    }
+  .index-panel {
+    background-color: #ffffff;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    box-sizing: border-box;
+  }
 
-    .index-back-amount {
-        font-size: 80px;
-        font-weight: 500;
-    }
+  .index-back-content {
+    z-index: 100;
+    color: #333333;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    padding: 40px;
+    box-sizing: border-box;
+  }
 
-    .index-back-btn {
-        width: 354px;
-        height: 84px;
-    }
+  .index-back-se {
+    font-size: 28px;
+    font-weight: 400;
+    color: #14172f;
+  }
 
-    .index-process-img {
-        width: 104px;
-        height: 104px;
+  .index-step-container {
+    position: relative;
+    width: 100%;
+    height: 80px;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    border: 2px solid #ffffff;
+    box-sizing: border-box;
+    font-size: 24px;
+    color: #333333;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+    .background {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(255, 255, 255, 0.6);
+      filter: blur(8px);
     }
+  }
 
-    .background-content-i {
-        width: 40px;
-        height: 40px;
-    }
+  .index-iocn-title {
+    width: 220px;
+    height: 44px;
+  }
+
+  .index-back-amount {
+    font-size: 80px;
+    font-weight: 500;
+  }
 
-    .background-content-wrap {
-        padding: 24px;
+  .index-back-info {
+    display: flex;
+    color: #818aa4;
+    font-size: 24px;
+    .split-char {
+      width: 3px;
+      height: 30px;
+      background-color: #818aa4;
     }
-}
+  }
+
+  .index-back-btn-tip {
+    padding: 0 48px;
+    height: 56px;
+    width: fit-content;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    color: #ff6b00;
+    background-color: #fef6e9;
+    border: 2px solid #fbedd6;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
+  .index-back-btn-container {
+    width: 100%;
+    position: relative;
+  }
+
+  .index-back-btn {
+    position: relative;
+    width: 100%;
+    height: 100px;
+    color: #ffffff;
+    font-size: 38px;
+    background-image: linear-gradient(to right, #0095ff, #0057ff);
+  }
+
+  .index-platform-image {
+    aspect-ratio: auto;
+    margin: 0 auto;
+    width: 100%;
+    height: 370px;
+  }
+
+  .index-bottom-tip {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 32px 96px;
+    color: #c5c5c7;
+    font-size: 24px;
+    text-align: center;
+    margin-top: 40px;
+  }
+
+  .index-process-img {
+    width: 104px;
+    height: 104px;
+  }
+
+  .background-content-i {
+    width: 40px;
+    height: 40px;
+  }
+
+  .background-content-wrap {
+    padding: 24px;
+  }
+}

src/pages/home/index.tsx

@@ -1,152 +1,190 @@
-import UserApi from '@/apis/userApi';
-import Button from '@/component/button';
-import Flex from '@/component/flex';
-import Label from '@/component/label';
-import Layout from '@/component/layout';
-import Padding, { EdgeInsets } from '@/component/padding';
-import SizeBox from '@/component/sizeBox';
-import APPConfig from '@/config';
-import AppContext from '@/context/appContext';
-import UserHelper from '@/helper/userHelper';
-import ImageUtil from '@/utils/imgUtils';
-import RouteUtil from '@/utils/routeUtil';
-import { Image, ScrollView, View } from '@tarojs/components';
-import { pxTransform } from '@tarojs/taro';
-import { useRequest } from 'ahooks';
-import React, { useContext, useMemo } from 'react';
-import './index.scss'
-
-// const func = () => {
-//     return new Promise<string>(p => {
-//         setTimeout(() => {
-//             p("请求成功123123" + (+new Date()));
-//         }, 2000);
-//     })
-// }
-
-
-// const Example = () => {
-//     const result = useRequest(() => {
-//         return func();
-//     }, {
-//         pollingInterval: 3000
-//     })
-
-//     return (
-//         <View>
-//             <Label>
-//                 {
-//                     result.loading ? "请求中" : result.data
-//                 }
-//             </Label>
-//             <Button onClick={() => {
-//                 result.refresh();
-//             }} >更新</Button>
-//         </View>
-//     )
-// }
-
-
-
+import UserApi from "@/apis/userApi";
+import Button from "@/component/button";
+import Flex from "@/component/flex";
+import Label from "@/component/label";
+import Layout from "@/component/layout";
+import Padding, { EdgeInsets } from "@/component/padding";
+import SizeBox from "@/component/sizeBox";
+import APPConfig from "@/config";
+import AppContext from "@/context/appContext";
+import UserHelper from "@/helper/userHelper";
+import ImageUtil from "@/utils/imgUtils";
+import RouteUtil from "@/utils/routeUtil";
+import { Image, ScrollView, View, Text } from "@tarojs/components";
+import { pxTransform } from "@tarojs/taro";
+import { useRequest } from "ahooks";
+import React, { useContext, useMemo } from "react";
+import "./index.scss";
 
 const Home = () => {
-    const appContext = useContext(AppContext);
-    const { screenWidth } = appContext.systemInfo!;
-
-    const indexInfoResult = useRequest(() => {
-        return UserApi.getIndexInfoUsingPost({
-            params: { appId: APPConfig.APPID }
-        }).toData();
-    })
-    const imgBackStyle = useMemo(() => {
-        return { ...ImageUtil.calculationHeight(332 / 170, (screenWidth - 64 + 16) / 2), position: "relative" } as React.CSSProperties;
-    }, []);
-    const item = (index: number, title: string, desc: string) => {
-        return (
-            <View style={imgBackStyle} >
-                <Image className='background-image' src={require(`../../assets/icon_home_characteristic_b_${index}.png`)} />
-                <Flex rowGap="sm" className='background-content background-content-wrap' >
-                    <Flex columnGap="sm" direction="row" alignItem="center" >
-                        <Image className='background-content-i' src={require(`../../assets/icon_home_characteristic_i_${index}.png`)} />
-                        <Label bold >{title}</Label>
-                    </Flex>
-                    <Label style={{ fontSize: pxTransform(22) }} type="secondary" >{desc}</Label>
-                </Flex>
-            </View>
-        )
-    }
+  const appContext = useContext(AppContext);
+  const { screenWidth, statusBarHeight } = appContext.systemInfo!;
+
+  const indexInfoResult = useRequest(() => {
+    return UserApi.getIndexInfoUsingPost({
+      params: { appId: APPConfig.APPID },
+    }).toData();
+  });
+  const imgBackStyle = useMemo(() => {
+    return {
+      ...ImageUtil.calculationHeight(332 / 170, (screenWidth - 64 + 16) / 2),
+      position: "relative",
+    } as React.CSSProperties;
+  }, []);
+  const item = (index: number, title: string, desc: string) => {
     return (
-        <Layout safe className='index' bottomBarIndex={0} >
-            <ScrollView>
-                <Image style={ImageUtil.calculationHeight(750 / 88, appContext.systemInfo!.screenWidth)} src={require('../../assets/home_logo.png')} />
-                <SizeBox height={24} />
-                <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })} >
-                    <View style={{ ...ImageUtil.calculationHeight(686 / 380, appContext.systemInfo!.screenWidth - 32), position: "relative" }} >
-                        <Image src={require("@/assets/icon_home_back.png")} className="index-back" />
-                        <Flex alignItem="center" justifyContent="center" rowGap={24} className='index-back-content' >
-                            <Label className='index-back-se' >可用额度</Label>
-                            <Label className='index-back-amount' >200,000.00</Label>
-                            <Button onClick={() => {
-                                UserHelper.afterLogin({
-                                    pop: false,
-                                    callback: async () => {
-                                        indexInfoResult.data && RouteUtil.toWebViewPage({
-                                            url: indexInfoResult.data.link,
-                                        })
-                                    }
-                                })
-                            }} className='index-back-btn' color="white" fill >{indexInfoResult.data?.name || "立即申请"}</Button>
-                        </Flex>
-                    </View>
-                </Padding>
-                <Padding padding={EdgeInsets.symmetric({ vertical: 68 })} >
-                    <Flex alignItem="center" justifyContent='center' >
-                        <Image src={require('@/assets/icon_home_process.png')} className="index-iocn-title" />
-                    </Flex>
-
-                </Padding>
-                <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
-                    <Flex direction="row" justifyContent="space-around" >
-                        <Flex >
-                            <Image src={require('../../assets/icon_home_process_data.png')} className="index-process-img" />
-                            <Label size="sm" bold >填写资料</Label>
-                        </Flex>
-                        <Flex >
-                            <Image src={require('../../assets/icon_home_process_qualifications.png')} className="index-process-img" />
-                            <Label size="sm" bold >资质评估</Label>
-                        </Flex>
-                        <Flex >
-                            <Image src={require('../../assets/icon_home_process_capital.png')} className="index-process-img" />
-                            <Label size="sm" bold >匹配资金</Label>
-                        </Flex>
-                    </Flex>
-                </Padding>
-                <SizeBox height={24} />
-                <Padding padding={EdgeInsets.symmetric({ vertical: 68 })} >
-                    <Flex alignItem="center" justifyContent='center' >
-                        <Image src={require('@/assets/icon_home_characteristic.png')} className="index-iocn-title" />
-                    </Flex>
-                </Padding>
-
-                <Flex rowGap="sm" style={{ padding: "0 16PX" }} >
-                    <Flex direction="row" >
-                        {item(0, "产品丰富", "信用、抵押、质押均可")}
-                        <SizeBox width={16} />
-                        {item(1, "快速便捷", "最快10分钟出结果")}
-                    </Flex>
-                    <Flex direction="row" >
-                        {item(2, "场景多元", "可用于消费、经营等")}
-                        <SizeBox width={16} />
-                        {item(3, "信息保密", "严格保护申请人信息")}
-                    </Flex>
-                </Flex>
-            </ScrollView>
-        </Layout>
-    )
-}
+      <View style={imgBackStyle}>
+        <Image
+          className="background-image"
+          src={require(`../../assets/icon_home_characteristic_b_${index}.png`)}
+        />
+        <Flex
+          rowGap="sm"
+          className="background-content background-content-wrap"
+        >
+          <Flex columnGap="sm" direction="row" alignItem="center">
+            <Image
+              className="background-content-i"
+              src={require(`../../assets/icon_home_characteristic_i_${index}.png`)}
+            />
+            <Label bold>{title}</Label>
+          </Flex>
+          <Label style={{ fontSize: pxTransform(22) }} type="secondary">
+            {desc}
+          </Label>
+        </Flex>
+      </View>
+    );
+  };
+  return (
+    <Layout safe className="index" bottomBarIndex={0}>
+      <ScrollView className="index-container">
+        <SizeBox height={statusBarHeight} />
+        <Image
+          className="index-logo"
+          src={require("../../assets/new-edition/index-logo.png")}
+        />
+        <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
+          <View
+            style={{
+              ...ImageUtil.calculationHeight(
+                686 / 484,
+                appContext.systemInfo!.screenWidth - 32
+              ),
+              position: "relative",
+            }}
+            className="index-panel"
+          >
+            <Flex
+              alignItem="center"
+              justifyContent="center"
+              rowGap={24}
+              className="index-back-content"
+            >
+              <Label className="index-back-se">最高可申请（元）</Label>
+              <Label className="index-back-amount">200,000.00</Label>
+              <Flex
+                alignItem="center"
+                justifyContent="center"
+                direction="row"
+                className="index-back-info"
+                columnGap={12}
+              >
+                <Text>年利率7.2%起</Text>
+                <View className="split-char"></View>
+                <Text>期限3-36个月</Text>
+                <View className="split-char"></View>
+                <Text>持牌放款</Text>
+              </Flex>
+              <View className="index-back-btn-container">
+                <View className="index-back-btn-tip">
+                  现在申请，最快1分钟激活额度
+                </View>
+                <Button
+                  onClick={() => {
+                    UserHelper.afterLogin({
+                      pop: false,
+                      callback: async () => {
+                        indexInfoResult.data &&
+                          RouteUtil.toWebViewPage({
+                            url: indexInfoResult.data.link,
+                          });
+                      },
+                    });
+                  }}
+                  className="index-back-btn"
+                >
+                  {indexInfoResult.data?.name || "立即激活"}
+                </Button>
+              </View>
+            </Flex>
+          </View>
+          <View className="index-step-container">
+            <View className="background"></View>
+            <Flex
+              alignItem="center"
+              justifyContent="center"
+              direction="row"
+              columnGap={8}
+            >
+              <Text>01.提交申请</Text>
+              <Image
+                style={{ width: "24px", height: "24px" }}
+                src={require("../../assets/new-edition/icon-next.svg")}
+              />
+              <Text>02.需求评估</Text>
+              <Image
+                style={{ width: "24px", height: "24px" }}
+                src={require("../../assets/new-edition/icon-next.svg")}
+              />
+              <Text>03.签约办理</Text>
+            </Flex>
+          </View>
+        </Padding>
+
+        <SizeBox height={24} />
+        {/* <Padding padding={EdgeInsets.symmetric({ vertical: 68 })}>
+          <Flex alignItem="center" justifyContent="center">
+            <Image
+              src={require("@/assets/icon_home_characteristic.png")}
+              className="index-iocn-title"
+            />
+          </Flex>
+        </Padding> */}
+
+        {/* <Flex rowGap="sm" style={{ padding: "0 16PX" }}>
+          <Flex direction="row">
+            {item(0, "产品丰富", "信用、抵押、质押均可")}
+            <SizeBox width={16} />
+            {item(1, "快速便捷", "最快10分钟出结果")}
+          </Flex>
+          <Flex direction="row">
+            {item(2, "场景多元", "可用于消费、经营等")}
+            <SizeBox width={16} />
+            {item(3, "信息保密", "严格保护申请人信息")}
+          </Flex>
+        </Flex> */}
+        <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
+          <Image
+            src={require("../../assets/new-edition/platform.png")}
+            className="index-platform-image"
+          />
+        </Padding>
+
+        <Flex
+          justifyContent="center"
+          alignItem="center"
+          rowGap={24}
+          className="index-bottom-tip"
+        >
+          <View>
+            郑重声明：平台只提供贷款咨询和推荐服务，放款由银行或金融机构进行，贷款额度、放款时间以资金分审批结果为准，所有贷款申请在未成功贷款前绝不收取任何费用，为了保证您的资金安全，请不要相信任何要求您支付费用的信息、邮件、电话等不实信息。
+          </View>
+          <View>如遇问题请向400-003-9350举报投诉，平台将及时为您解决！</View>
+        </Flex>
+      </ScrollView>
+    </Layout>
+  );
+};
 
 export default Home;
-
-
-
-