refactor: update site style

OpenSPG · Dec 6, 2023 · ab5a4c4 · ab5a4c4
1 parent 70f9513
commit ab5a4c4
Show file tree

Hide file tree

Showing 17 changed files with 801 additions and 505 deletions.
diff --git a/.dumi/components/AboutUs.tsx b/.dumi/components/AboutUs.tsx
diff --git a/.dumi/components/Announcement/HoverCard.tsx b/.dumi/components/Announcement/HoverCard.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from 'react';
+import { Card } from 'antd';
+import type { CardProps } from 'antd';
+import styled from 'styled-components';
+
+const CardContainer = styled(Card)`
+  position: relative;
+  z-index: 1;
+  min-width: 300px;
+  min-height: 50px;
+  color: #fff;
+  background-color: transparent;
+  overflow: hidden; // 超出特效的区域隐藏掉
+  cursor: pointer;
+
+  &:hover:after {
+    width: 250px;
+    height: 250px;
+    left: var(--x);
+    top: var(--y);
+  }
+
+  /* 鼠标hover光晕渐变 */
+  &:after {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 6;
+    transform: rotateX(-0.03deg) rotateY(-0.03deg) translate(-50%, -50%);
+    transition:
+      width 0.2s ease,
+      height 0.2 ease;
+    width: 0;
+    height: 0;
+    opacity: 0.7;
+    content: '';
+    background: radial-gradient(circle closest-side, #133b71, transparent);
+  }
+`;
+
+const Content = styled.div`
+  position: relative;
+  z-index: 5;
+  width: 100%;
+  height: 100%;
+`;
+
+const HoverCard = React.memo<CardProps>((props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { children, ...restProps } = props;
+
+  useEffect(() => {
+    const containerRef = ref.current;
+    const handleMouseMove = (event: MouseEvent) => {
+      const targetRect = (event?.target as Element)?.getBoundingClientRect();
+      if (!targetRect || !containerRef) return;
+      const xPosition = event.clientX - targetRect.left;
+      const yPosition = event.clientY - targetRect.top;
+      containerRef.style.setProperty('--x', xPosition + 'px');
+      containerRef.style.setProperty('--y', yPosition + 'px');
+    };
+    containerRef?.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      containerRef?.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+
+  return (
+    <div ref={ref} style={{ display: 'inline-block', flex: 1 }}>
+      <CardContainer {...restProps}>
+        <Content>{children}</Content>
+      </CardContainer>
+    </div>
+  );
+});
+
+export default HoverCard;
diff --git a/.dumi/components/Announcement/index.tsx b/.dumi/components/Announcement/index.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useIntl } from '../../hooks/useIntl';
+import HoverCard from './HoverCard';
+import { Flex, Typography } from 'antd';
+
+const { Text } = Typography;
+
+const FlexContainer = styled(Flex)`
+  display: flex;
+  flex-wrap: wrap;
+  max-width: min(1200px, 90%);
+  gap: 24px;
+  margin: 0 auto;
+
+  @media (max-width: 900px), (max-width: 480px) {
+    gap: 16px;
+    flex-direction: column;
+  }
+`;
+
+const HoverCardContainer = styled(HoverCard)`
+  height: 100%;
+  border: none;
+  background-image: linear-gradient(
+    106deg,
+    rgba(255, 255, 255, 0.12) 0%,
+    rgba(255, 255, 255, 0.1) 100%
+  );
+  border-radius: 16px;
+
+  .openagl-card-body {
+    height: 100%;
+
+    @media (max-width: 900px) {
+      padding: 16px;
+    }
+
+    @media (max-width: 480px) {
+      padding: 12px;
+    }
+  }
+`;
+
+const Title = styled(Flex)`
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  opacity: 0.95;
+  font-weight: 500;
+`;
+
+const Description = styled(Text)`
+  display: inline-block;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 400;
+  opacity: 0.45;
+  margin-top: 9px;
+  text-align: center;
+`;
+
+const Announcement = React.memo(() => {
+  const {
+    Messages: { ANNOUNCEMENT },
+  } = useIntl();
+
+  const handleOpenLink = (linkUrl?: string) => {
+    if (!linkUrl) return;
+    window.open(linkUrl, '_blank', 'noopener=yes,noreferrer=yes');
+  };
+
+  if (ANNOUNCEMENT.length === 0) {
+    return <div style={{ padding: 20 }} />;
+  }
+
+  return (
+    <FlexContainer justify="space-between">
+      {ANNOUNCEMENT.map(({ cover, title, description, link }) => (
+        <HoverCardContainer key={title} onClick={() => handleOpenLink(link)}>
+          <Title>
+            <img src={cover} />
+            <span>{title}</span>
+          </Title>
+          <Description>{description}</Description>
+        </HoverCardContainer>
+      ))}
+    </FlexContainer>
+  );
+});
+
+export default Announcement;
diff --git a/.dumi/components/SpgCaseItem.tsx → .dumi/components/BusinessApplicationItem.tsx b/.dumi/components/SpgCaseItem.tsx → .dumi/components/BusinessApplicationItem.tsx
@@ -3,16 +3,14 @@ import { Space, Typography } from 'antd';
 
 const { Title, Text } = Typography;
 
-const Container = styled.div`
-  margin-bottom: 45px;
-`;
+const Container = styled.div``;
 
 const ContentContainer = styled.div`
   display: grid;
   grid-template: repeat(1, 1fr) / repeat(2, 1fr);
   gap: 15px;
 
-  @media (max-width: 814px) {
+  @media (max-width: 900px) {
     grid-template: repeat(1, 1fr) / repeat(1, 1fr);
   }
 `;
@@ -22,15 +20,9 @@ const Content = styled.div`
   flex-direction: column;
   justify-content: space-around;
   gap: 15px;
-
-  @media (max-width: 1280px) {
-  }
-  @media (max-width: 768px) {
-  }
 `;
 
 const ItemBackground = styled.div`
-  background-color: var(--background-color-pure);
   border-radius: 15px;
 `;
 
@@ -83,7 +75,7 @@ const ImgContainer = styled.div`
   }
 `;
 
-export type CaseItemProps = {
+export type BusinessApplicationItemProps = {
   title: string;
   desc: string;
   details: {
@@ -94,12 +86,11 @@ export type CaseItemProps = {
   reverse?: boolean;
 };
 
-const SpgCaseItem = (props: CaseItemProps) => {
-  const { title, desc, details, imgUrl, reverse } = props;
+const BusinessApplicationItem = (props: BusinessApplicationItemProps) => {
+  const { desc, details, imgUrl, reverse } = props;
   return (
     <Container>
-      <Title>{title}</Title>
-      <Space direction="vertical">
+      <Space direction="vertical" align="center">
         <Text type="secondary">{desc}</Text>
         <ContentContainer>
           <Content>
@@ -121,7 +112,7 @@ const SpgCaseItem = (props: CaseItemProps) => {
               );
             })}
           </Content>
-          <ImgContainer style={{ order: reverse ? -1 : 0 }}>
+          <ImgContainer style={{ order: -1 }}>
             <img src={imgUrl} alt="" />
           </ImgContainer>
         </ContentContainer>
@@ -130,4 +121,4 @@ const SpgCaseItem = (props: CaseItemProps) => {
   );
 };
 
-export default SpgCaseItem;
+export default BusinessApplicationItem;