Merge pull request #219 from hepengwei/feat_he

新增丝带视觉案例
hepengwei · Nov 2, 2023 · 9c71078 · 9c71078
2 parents ecfae1c + b9ecc59
commit 9c71078
Show file tree

Hide file tree

Showing 21 changed files with 79 additions and 17 deletions.
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/styles/main.css b/docs/styles/main.css
diff --git a/src/pages/html/VisualDesign/components/AnnulusProgressBar/index.module.scss b/src/pages/html/VisualDesign/components/AnnulusProgressBar/index.module.scss
@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   $bg: #edf1f5;
 

diff --git a/src/pages/html/VisualDesign/components/AudioLoading/index.module.scss b/src/pages/html/VisualDesign/components/AudioLoading/index.module.scss
@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   $height: 80px;
   $gap: 15px;

diff --git a/src/pages/html/VisualDesign/components/AutoEllipsisText/index.module.scss b/src/pages/html/VisualDesign/components/AutoEllipsisText/index.module.scss
@@ -5,5 +5,4 @@
   flex-direction: column;
   justify-content: center;
   padding: 10px;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 }
diff --git a/src/pages/html/VisualDesign/components/FilterCSS/index.module.scss b/src/pages/html/VisualDesign/components/FilterCSS/index.module.scss
@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   @mixin base {
     display: flex;

diff --git a/src/pages/html/VisualDesign/components/HexagonalRadar/index.module.scss b/src/pages/html/VisualDesign/components/HexagonalRadar/index.module.scss
@@ -5,7 +5,6 @@
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
   overflow: hidden;
   position: relative;
 

diff --git a/src/pages/html/VisualDesign/components/Honeycomb/index.module.scss b/src/pages/html/VisualDesign/components/Honeycomb/index.module.scss
@@ -5,7 +5,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   .content {
     --s: 130px; /* control the size */

diff --git a/src/pages/html/VisualDesign/components/HoverEnlargement/index.module.scss b/src/pages/html/VisualDesign/components/HoverEnlargement/index.module.scss
@@ -4,6 +4,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   img {
     $s: 280px; /* image size */

diff --git a/src/pages/html/VisualDesign/components/ImageFadeOut/index.module.scss b/src/pages/html/VisualDesign/components/ImageFadeOut/index.module.scss
@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   $width: 300px;
 

diff --git a/src/pages/html/VisualDesign/components/MixBlendMode/index.module.scss b/src/pages/html/VisualDesign/components/MixBlendMode/index.module.scss
@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182C, #000c17, #04182C);
 
   .content {
     width: 600px;

diff --git a/src/pages/html/VisualDesign/components/PizzaPie/index.module.scss b/src/pages/html/VisualDesign/components/PizzaPie/index.module.scss
@@ -5,7 +5,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   .content {
     display: grid;

diff --git a/src/pages/html/VisualDesign/components/Ribbon/index.module.scss b/src/pages/html/VisualDesign/components/Ribbon/index.module.scss
@@ -0,0 +1,40 @@
+.container {
+  width: 100%;
+  height: 420px;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .ribbon {
+    --fontSize: 24px;
+    --background: #d81a14;
+
+    font-size: var(--fontSize);
+    text-align: center;
+    line-height: 2;
+    color: #fff;
+    background-image: linear-gradient(var(--background) 70%, #0000 0),
+      linear-gradient(
+        to bottom left,
+        #0000 50%,
+        color-mix(in srgb, var(--background), #000 40%) 51% 84%,
+        #0000 85%
+      );
+    background-position: 0 0.15lh;
+    background-size: 100% 1lh;
+    clip-path: polygon(
+      0 0.15lh,
+      100% 0.15lh,
+      calc(100% - var(--fontSize) / 2) 0.5lh,
+      100% 0.85lh,
+      100% calc(100% - 0.15lh),
+      0 calc(100% - 0.15lh),
+      calc(var(--fontSize) / 2) calc(100% - 0.5lh),
+      0 calc(100% - 0.85lh)
+    );
+    padding: 0 var(--fontSize);
+    margin: 10px 0;
+  }
+}
diff --git a/src/pages/html/VisualDesign/components/Ribbon/index.tsx b/src/pages/html/VisualDesign/components/Ribbon/index.tsx
@@ -0,0 +1,33 @@
+// @ts-nocheck
+import React from "react";
+import styles from "./index.module.scss";
+
+const Ribbon = () => {
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.ribbon}
+        style={{ "--fontSize": "34px", fontWeight: 600 }}
+      >
+        Visualization Collection
+      </div>
+      <div
+        className={styles.ribbon}
+        style={{
+          "--fontSize": "28px",
+          "--background": "#8A9B0F",
+          fontWeight: 500,
+        }}
+      >
+        Visualization Collection <br /> Visualization Collection
+      </div>
+      <div className={styles.ribbon} style={{ "--background": "#45ADA8" }}>
+        Visualization Collection
+        <br /> Visualization Collection
+        <br /> Visualization Collection
+      </div>
+    </div>
+  );
+};
+
+export default Ribbon;
diff --git a/src/pages/html/VisualDesign/components/SudokuImageAnimation/index.module.scss b/src/pages/html/VisualDesign/components/SudokuImageAnimation/index.module.scss
@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
 
   $itemWidth: 80px;
   $gap: 10px;

diff --git a/src/pages/html/VisualDesign/components/SwitchingText/index.module.scss b/src/pages/html/VisualDesign/components/SwitchingText/index.module.scss
@@ -5,7 +5,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182C, #000c17, #04182C);
 
   .content {
     span {

diff --git a/src/pages/html/VisualDesign/components/TextWrap/index.module.scss b/src/pages/html/VisualDesign/components/TextWrap/index.module.scss
@@ -1,7 +1,6 @@
 .container {
   width: 100%;
   height: 360px;
-  background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
   padding: 6px 10px;
   font-size: 16px;
 

diff --git a/src/pages/html/VisualDesign/components/Typed1/index.module.scss b/src/pages/html/VisualDesign/components/Typed1/index.module.scss
@@ -5,7 +5,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182C, #000c17, #04182C);
 
   p {
     font-size: 44px;

diff --git a/src/pages/html/VisualDesign/components/Typed2/index.module.scss b/src/pages/html/VisualDesign/components/Typed2/index.module.scss
@@ -5,7 +5,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #04182C, #000c17, #04182C);
 
   p {
     font-size: 44px;

diff --git a/src/pages/html/VisualDesign/index.module.scss b/src/pages/html/VisualDesign/index.module.scss
@@ -10,7 +10,7 @@
   padding: 4px;
 
   .box {
-    background-color: #000c17dd;
+    background-image: linear-gradient(to right, #04182c, #000c17, #04182c);
     border: 3px solid #35a2fd44;
     border-radius: 10px;
     overflow: hidden;

diff --git a/src/pages/html/VisualDesign/index.tsx b/src/pages/html/VisualDesign/index.tsx
@@ -33,6 +33,7 @@ import HexagonalMesh from "./components/HexagonalMesh";
 import HexagonalRadar from "./components/HexagonalRadar";
 import HoverEnlargement from "./components/HoverEnlargement";
 import ActivityCountDown from "./components/ActivityCountDown";
+import Ribbon from "./components/Ribbon";
 import styles from "./index.module.scss";
 
 const { GridBox } = GridContent;
@@ -66,6 +67,7 @@ const gridboxList = [
   { element: <HexagonalRadar /> },
   { element: <HoverEnlargement /> },
   { element: <ActivityCountDown /> },
+  { element: <Ribbon /> },
 ];
 
 const VisualDesign = () => {