Merge pull request #247 from hepengwei/feat_he

新增角向渐变圆环

src/pages/css/DynamicButtons/components/BirdButton/index.module.scss

@@ -118,7 +118,7 @@
           left: 16px;
           width: 12px;
           height: 12px;
-          background: $border-color;
+          background: #ff8108;
           clip-path: path(
             "M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z"
           );

src/pages/html/VisualDesign/components/ActivityCountDown/index.module.scss

@@ -1,6 +1,6 @@
 .container {
   width: 100%;
-  height: 450px;
+  height: 420px;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/pages/html/VisualDesign/components/ConicGradientRing/index.module.scss

@@ -0,0 +1,56 @@
+.container {
+  width: 100%;
+  height: 450px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  $boxSize: 300px;
+  $ringHeight: 46px;
+  .box {
+    width: $boxSize;
+    height: $boxSize;
+    position: relative;
+    animation: rotate 4s linear infinite;
+
+    .item {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      mask: radial-gradient(
+        transparent,
+        transparent calc($boxSize / 2 - $ringHeight),
+        #000c17 calc($boxSize / 2 - $ringHeight + 1px),
+        #000c17 100%
+      );
+
+      .semicircle {
+        box-sizing: border-box;
+        position: absolute;
+        width: calc($ringHeight / 2);
+        height: $ringHeight;
+        top: 0;
+        left: calc(50% - $ringHeight / 2 + 1px);
+        border-top-left-radius: calc($ringHeight / 2);
+        border-bottom-left-radius: calc($ringHeight / 2);
+      }
+    }
+
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+}

src/pages/html/VisualDesign/components/ConicGradientRing/index.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo } from "react";
+import { ECHART_COMMON_COLOR } from "constants/common";
+import styles from "./index.module.scss";
+
+const data = [
+  { name: "label1", num: 23 },
+  { name: "label2", num: 12 },
+  { name: "label3", num: 48 },
+  { name: "label4", num: 37 },
+  { name: "label5", num: 18 },
+];
+
+const ConicGradientRing = () => {
+  const dataInfo = useMemo(() => {
+    const sum = data.reduce((num, next) => num + next.num, 0);
+    if (data?.length > 0) {
+      let currentRotate = 0;
+      const result = data.map((item, index) => {
+        const rotate = `${currentRotate}deg`;
+        const degNum = (item.num / sum) * 360;
+        currentRotate += degNum;
+        return {
+          ...item,
+          deg: `${degNum}deg`,
+          rotate,
+          color: ECHART_COMMON_COLOR[index],
+        };
+      });
+      return result;
+    }
+    return [];
+  }, [data]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.box}>
+        {dataInfo.map((itemData) => {
+          return (
+            <div
+              className={styles.item}
+              style={{
+                background: `conic-gradient(${itemData.color} 0,transparent ${itemData.deg})`,
+                transform: `rotate(${itemData.rotate})`,
+              }}
+              key={itemData.name}
+            >
+              <div
+                className={styles.semicircle}
+                style={{ backgroundColor: itemData.color }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ConicGradientRing;

src/pages/html/VisualDesign/components/HoverEnlargement/index.module.scss

@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   img {
     $s: 280px; /* image size */

src/pages/html/VisualDesign/index.tsx

@@ -32,10 +32,11 @@ import RotateAndBgFixed from "./components/RotateAndBgFixed";
 import HexagonalMesh from "./components/HexagonalMesh";
 import HexagonalRadar from "./components/HexagonalRadar";
 import HoverEnlargement from "./components/HoverEnlargement";
-import ActivityCountDown from "./components/ActivityCountDown";
+import ConicGradientRing from "./components/ConicGradientRing";
 import GlassDesign1 from "./components/GlassDesign1";
 import GlassDesign2 from "./components/GlassDesign2";
 import Ribbon from "./components/Ribbon";
+import ActivityCountDown from "./components/ActivityCountDown";
 import styles from "./index.module.scss";
 
 const { GridBox } = GridContent;
@@ -68,10 +69,11 @@ const gridboxList = [
   { element: <HexagonalMesh /> },
   { element: <HexagonalRadar /> },
   { element: <HoverEnlargement /> },
-  { element: <ActivityCountDown /> },
+  { element: <ConicGradientRing /> },
   { element: <GlassDesign1 /> },
   { element: <GlassDesign2 /> },
   { element: <Ribbon /> },
+  { element: <ActivityCountDown /> },
 ];
 
 const VisualDesign = () => {