diff --git a/src/factory/components/BlurBox/index.jsx b/src/factory/components/BlurBox/index.jsx
new file mode 100644
index 00000000..a4c71915
--- /dev/null
+++ b/src/factory/components/BlurBox/index.jsx
@@ -0,0 +1,77 @@
+import { useState, useEffect, useRef } from 'react';
+import './index.scss';
+
+const AutoSwitchText = ({
+ texts = [],
+ interval = 2000,
+ autoPlay = true,
+ transitionDuration = 2000, // 单个过渡动画时长
+}) => {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [isTransitioning, setIsTransitioning] = useState(false);
+ const timerRef = useRef(null);
+ const containerRef = useRef(null);
+
+ // 切换到下一个文案
+ const switchToNext = () => {
+ if (texts.length <= 1 || isTransitioning) return;
+
+ setIsTransitioning(true);
+
+ // 动画阶段1:缩小模糊
+ if (containerRef.current) {
+ containerRef.current.style.transform = 'scaleX(0.66)';
+ containerRef.current.style.filter = 'blur(3px)';
+ containerRef.current.style.opacity = '0.4';
+ }
+
+ // 等待缩小完成
+ setTimeout(() => {
+ // 切换索引
+ setActiveIndex((prev) => (prev + 1) % texts.length);
+
+ // 动画阶段2:展开清晰
+ setTimeout(() => {
+ if (containerRef.current) {
+ containerRef.current.style.transform = 'scaleX(1)';
+ containerRef.current.style.filter = 'blur(0)';
+ containerRef.current.style.opacity = '0.64';
+ }
+
+ // 动画完成
+ setTimeout(() => {
+ setIsTransitioning(false);
+ }, transitionDuration * 0.3);
+ }, transitionDuration * 0.2);
+ }, transitionDuration * 0.5);
+ };
+
+ // 自动播放
+ useEffect(() => {
+ if (!autoPlay || texts.length <= 1) return;
+ const startInterval = () => {
+ timerRef.current = setInterval(switchToNext, interval);
+ };
+
+ startInterval();
+
+ return () => {
+ if (timerRef.current) {
+ clearInterval(timerRef.current);
+ }
+ };
+ }, [texts, interval, autoPlay]);
+
+ if (texts.length === 0) return null;
+
+ return (
+
+ {texts[activeIndex]}
+
+ );
+};
+
+export default AutoSwitchText;
\ No newline at end of file
diff --git a/src/factory/components/BlurBox/index.scss b/src/factory/components/BlurBox/index.scss
new file mode 100644
index 00000000..de73617f
--- /dev/null
+++ b/src/factory/components/BlurBox/index.scss
@@ -0,0 +1,21 @@
+.move-item {
+ position: absolute;
+ top: 50px;
+ left: 400px;
+ opacity: 64%;
+ height: 24px;
+ background: #ffffff;
+ border-radius: 22px;
+ max-width: 114px;
+ min-width: 80px;
+ line-height: 24px;
+ font-family: alibabareg;
+ color: #37393d;
+ font-size: 11px;
+ text-align: center;
+ padding: 0px 10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ transition: all 1s ease-in-out;
+}
\ No newline at end of file
diff --git a/src/factory/resource/index.jsx b/src/factory/resource/index.jsx
index 7082c26b..c22ee1cb 100644
--- a/src/factory/resource/index.jsx
+++ b/src/factory/resource/index.jsx
@@ -8,8 +8,9 @@ import Loadable from "react-loadable";
import Loading from "../../Loading";
import Search from './components/Search/index'
import { Input } from 'antd';
-
-
+import BlurBox from '../components/BlurBox'
+import { getProjectsLists } from '../api'
+import { factoryZoneId } from '../../constants/factory'
const FactoryVersion = Loadable({
loader: () => import("./factoryVersion/index"),
@@ -39,6 +40,7 @@ function Index(props) {
const [selectedType, setSelectedType] = useState()
const [searchValue, setSearchValue] = useState('')
+ const [projectList, setProjectList] = useState([])
const searchRef = useRef(null)
@@ -57,7 +59,7 @@ function Index(props) {
for( let i of typeMap) {
if (props.location.pathname.includes(i.key)) matchPath = i.key
}
-
+ getProjectList()
setSelectedType(matchPath || typeMap[0].key)
}, [])
@@ -84,6 +86,15 @@ function Index(props) {
}
}
+ const getProjectList = (isMore = false) => {
+ getProjectsLists(factoryZoneId, { isHomepage: 0, pageSize: 6, pageNum: 1 }).then(res => {
+ const rows = res.data.rows
+ if (rows) {
+ setProjectList(rows.map(e => { return e.projectProperties.fullName.split('/')[1]}))
+ }
+ });
+ };
+
return (
@@ -94,6 +105,15 @@ function Index(props) {
+
+ {
+ [0,1,2,3,4,5].map(() => {
+ const list = [...projectList.sort((a, b) => { return Math.random() - 0.5 } )]
+ return
+ })
+ }
+
+
资源中枢,共享复用释放生态力量
diff --git a/src/factory/resource/index.scss b/src/factory/resource/index.scss
index c074890f..46335655 100644
--- a/src/factory/resource/index.scss
+++ b/src/factory/resource/index.scss
@@ -1,6 +1,7 @@
.resource {
background-color: #f1f6fd;
min-height: calc(100vh - 58px);
+
&-search {
background-color: #ffffff;
}
@@ -15,6 +16,47 @@
background-size: 100% 100%;
position: relative;
+ .box-wrapper {
+ position: absolute;
+ width: 1600px;
+ height: 410px;
+
+ div:nth-child(1) {
+ top: 70px;
+ left: 205px;
+ }
+
+ div:nth-child(2) {
+ top: 140px;
+ left: 270px;
+ }
+
+ div:nth-child(3) {
+ top: 210px;
+ left: 200px;
+ }
+
+ div:nth-child(4) {
+ top: 70px;
+ right: 205px;
+ left: unset;
+ }
+
+ div:nth-child(5) {
+ top: 140px;
+ right: 270px;
+ left: unset;
+
+ }
+
+ div:nth-child(6) {
+ top: 210px;
+ right: 200px;
+ left: unset;
+
+ }
+ }
+
.circle-wrapper {
width: 1600px;
position: absolute;
@@ -41,7 +83,7 @@
// 使用循环创建多个圆圈
@for $i from 1 through $circle-count {
&:nth-child(#{$i}) {
- $size: 800px + ($i * 2px);
+ $size: 400px + ($i * 2px);
$delay: (
$i - 1) * ($animation-duration / $circle-count
);
@@ -124,6 +166,7 @@
line-height: 40px;
font-family: alibabareg;
font-size: 15px;
+
input {
border: none;
width: 100%;