{modelData.map((item, index) => {
return (
- {
@@ -64,10 +89,10 @@ function ModelBlock() {
*/}
- 材料研发
gotoPage('service')}>
+ 服务
+
+ gotoPage('model')}>
+ 模型
+
+ gotoPage('dataset')}>
+ 数据集
+
+ gotoPage('mirror')}>
+ 镜像
+
+ gotoPage('codeConfig')}>
+ 代码配置
+
- gotoPage('service')}>
- 服务
-
- gotoPage('model')}>
- 模型
-
- gotoPage('dataset')}>
- 数据集
-
- gotoPage('mirror')}>
- 镜像
-
- gotoPage('codeConfig')}>
- 代码配置
-
+
{token ? (
gotoPage('login')}>
+ (null);
+ const isInView = useInView(ref, { amount: 'all' });
+
+ return (
+
+ {children}
+
+ );
+}
+
+export default ScrollReveal;
diff --git a/react-ui/src/pages/Home/components/Service/index.less b/react-ui/src/pages/Home/components/Service/index.less
index a80b8e09..dd83e60b 100644
--- a/react-ui/src/pages/Home/components/Service/index.less
+++ b/react-ui/src/pages/Home/components/Service/index.less
@@ -4,7 +4,7 @@
flex-direction: column;
align-items: center;
width: 100%;
- padding: 5.625rem 16.25rem 6.25rem;
+ padding: 5.625rem @home-padding-x 6.25rem;
.backgroundFullImage(url(@/assets/img/home/service-bg.png));
&__item {
diff --git a/react-ui/src/pages/Home/components/Service/index.tsx b/react-ui/src/pages/Home/components/Service/index.tsx
index 5c760665..6d7b469f 100644
--- a/react-ui/src/pages/Home/components/Service/index.tsx
+++ b/react-ui/src/pages/Home/components/Service/index.tsx
@@ -8,10 +8,31 @@ import { formatDate } from '@/utils/date';
import { to } from '@/utils/promise';
import { useNavigate } from '@umijs/max';
import { Flex } from 'antd';
+import { motion, type Variants } from 'motion/react';
import { useEffect, useState } from 'react';
import BlockTitle from '../BlockTitle';
import styles from './index.less';
+const serviceVariants: Variants = {
+ offscreen: {
+ y: -100,
+ opacity: 0,
+ transition: {
+ ease: 'linear',
+ duration: 0,
+ },
+ },
+ onscreen: (index: number) => ({
+ y: 0,
+ opacity: 1,
+ transition: {
+ type: 'spring',
+ duration: 1,
+ delay: index * 0.3,
+ },
+ }),
+};
+
function ServiceBlock() {
const navigate = useNavigate();
const [serviceData, setServiceData] = useState([]);
@@ -38,10 +59,14 @@ function ServiceBlock() {
{serviceData.map((item, index) => {
return (
-
diff --git a/react-ui/src/pages/Home/components/Statistics/index.tsx b/react-ui/src/pages/Home/components/Statistics/index.tsx
index 953dde78..1357532a 100644
--- a/react-ui/src/pages/Home/components/Statistics/index.tsx
+++ b/react-ui/src/pages/Home/components/Statistics/index.tsx
@@ -6,6 +6,7 @@ import ServiceIcon from '@/assets/img/home/service.png';
import { getAssetPublicCountReq } from '@/services/home';
import { to } from '@/utils/promise';
import { useEffect, useState } from 'react';
+import CountUp from 'react-countup';
import styles from './index.less';
function StatisticsBlock() {
@@ -84,7 +85,14 @@ function StatisticsBlock() {
diff --git a/react-ui/src/pages/Home/index.less b/react-ui/src/pages/Home/index.less
index 8c291f0d..aed372c8 100644
--- a/react-ui/src/pages/Home/index.less
+++ b/react-ui/src/pages/Home/index.less
@@ -1,6 +1,5 @@
.home {
- height: 100%;
- overflow-y: auto;
+ padding-top: @home-info-height;
font-family: Alibaba;
&__separator {
diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less
index 7976a91c..470fa57d 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -31,6 +31,8 @@
@home-text-color-secondary: @text-color-secondary;
@home-text-color-tertiary: #8284a4;
@home-divider-color: #d8d8d8;
+@home-padding-x: 16.25rem;
+@home-info-height: 35rem;
@workspace-background: linear-gradient(
179.03deg,
diff --git a/react-ui/src/utils/index.ts b/react-ui/src/utils/index.ts
index fc9eff59..686b6ee9 100644
--- a/react-ui/src/utils/index.ts
+++ b/react-ui/src/utils/index.ts
@@ -365,3 +365,16 @@ export const trimCharacter = (str: string, ch: string): string => {
export const convertEmptyStringToUndefined = (value?: string): string | undefined => {
return value === '' ? undefined : value;
};
+
+/**
+ * Converts rem to px.
+ *
+ * @param {number} rem - The value of rem.
+ * @return {number} The value of px
+ */
+
+export const convertRemToPx = (rem: number): number => {
+ const fontSize = document.documentElement.style.fontSize;
+ const font = parseFloat(fontSize);
+ return font * rem;
+};
gotoPage('login')}
+ >
登录
)}
diff --git a/react-ui/src/pages/Home/components/ScrollReveal/index.tsx b/react-ui/src/pages/Home/components/ScrollReveal/index.tsx
new file mode 100644
index 00000000..a043234e
--- /dev/null
+++ b/react-ui/src/pages/Home/components/ScrollReveal/index.tsx
@@ -0,0 +1,25 @@
+import { motion, useInView, Variants } from 'motion/react';
+import { ReactNode, useRef } from 'react';
+
+type ScrollRevealProps = {
+ children: ReactNode;
+ variants: Variants;
+};
+
+function ScrollReveal({ children, variants }: ScrollRevealProps) {
+ const ref = useRef navigate(`/dataset/modelDeployment/serviceInfo/${item.id}`)}
+ initial="offscreen"
+ whileInView="onscreen"
+ custom={index}
>
![]()
{item.create_by}
+
);
})}
{formatDate(item.create_time)}
-
-
{item.value ?? '--'}
+
+ {item.value ? (
+
+
{item.title}