Merge pull request #258 from hepengwei/feat_he

新增生成滚动条页
hepengwei · Dec 10, 2024 · 8a203b3 · 8a203b3
2 parents e3f2685 + 4721953
commit 8a203b3
Show file tree

Hide file tree

Showing 9 changed files with 707 additions and 224 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/layout/Menus/index.tsx b/src/layout/Menus/index.tsx
diff --git a/src/locale/en-US.js b/src/locale/en-US.js
@@ -100,6 +100,7 @@ const en_US = {
   "menu.cssDynamicEffect.richDynamicEffect": "Rich Dynamic Effect",
   "menu.cssDynamicEffect.generateRegularPolygon": "Generate Regular Polygon",
   "menu.cssDynamicEffect.generateShadow": "Generate Shadow",
+  "menu.cssDynamicEffect.generateScrollBar": "Generate Scroll Bar",
   "menu.cssDynamicEffect.musicVisualization": "Music Visualization",
   "menu.canvasDynamicEffect": "Canvas Dynamic Effect",
   "menu.canvasDynamicEffect.sphereCollisionExample": "sphere-collision Example",
@@ -278,6 +279,21 @@ const en_US = {
   "page.cssDynamicEffect.generateShadow.borderRadius": "Border Radius",
   "page.cssDynamicEffect.generateShadow.shadowColor": "Shadow Color",
 
+  // Css动效-生成滚动条页
+  "page.cssDynamicEffect.generateScrollBar.scrollBarWidth": "Vertical Width",
+  "page.cssDynamicEffect.generateScrollBar.scrollBarHeight":
+    "Horizontal Height",
+  "page.cssDynamicEffect.generateScrollBar.scrollBarBgColor":
+    "Background Color",
+  "page.cssDynamicEffect.generateScrollBar.slidingBlockBgColor":
+    "Sliding Block Background Color",
+  "page.cssDynamicEffect.generateScrollBar.slidingBlockRadius":
+    "Sliding Block Radius",
+  "page.cssDynamicEffect.generateScrollBar.slidingBlockHoverBgColor":
+    "Sliding Block Hover Background Color",
+  "page.cssDynamicEffect.generateScrollBar.rightBottomBgColor":
+    "Right Bottom Background Color",
+
   // Canvas动效
   "page.canvasDynamicEffect.sphereCollisionExample": "sphere-collision example",
   "page.canvasDynamicEffect.dynamicClock": "Dynamic clock effect",

diff --git a/src/locale/zh-CN.js b/src/locale/zh-CN.js
@@ -93,6 +93,7 @@ const zh_CN = {
   "menu.cssDynamicEffect.richDynamicEffect": "丰富动效",
   "menu.cssDynamicEffect.generateRegularPolygon": "生成正多边形",
   "menu.cssDynamicEffect.generateShadow": "生成阴影",
+  "menu.cssDynamicEffect.generateScrollBar": "生成滚动条",
   "menu.cssDynamicEffect.musicVisualization": "音乐可视化",
   "menu.canvasDynamicEffect": "Canvas动效",
   "menu.canvasDynamicEffect.sphereCollisionExample": "sphere-collision库示例",
@@ -240,6 +241,16 @@ const zh_CN = {
   "page.cssDynamicEffect.generateShadow.borderRadius": "边框半径",
   "page.cssDynamicEffect.generateShadow.shadowColor": "阴影颜色",
 
+  // Css动效-生成滚动条页
+  "page.cssDynamicEffect.generateScrollBar.scrollBarWidth": "纵向滚动条宽度",
+  "page.cssDynamicEffect.generateScrollBar.scrollBarHeight": "横向滚动条高度",
+  "page.cssDynamicEffect.generateScrollBar.scrollBarBgColor": "滚动条背景色",
+  "page.cssDynamicEffect.generateScrollBar.slidingBlockBgColor": "滑块背景色",
+  "page.cssDynamicEffect.generateScrollBar.slidingBlockRadius": "滑块圆角",
+  "page.cssDynamicEffect.generateScrollBar.slidingBlockHoverBgColor":
+    "滑块Hover背景色",
+  "page.cssDynamicEffect.generateScrollBar.rightBottomBgColor": "右下角背景色",
+
   // Canvas动效
   "page.canvasDynamicEffect.sphereCollisionExample": "sphere-collision库示例",
   "page.canvasDynamicEffect.dynamicClock": "动态时钟效果",

diff --git a/src/pages/css/GenerateScrollBar/index.module.scss b/src/pages/css/GenerateScrollBar/index.module.scss
@@ -0,0 +1,96 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 30px;
+  padding-bottom: 20px;
+  overflow-y: auto;
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    $boxWidth: 800px;
+    $boxHeight: 380px;
+    $boxPadding: 20px;
+    .box {
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: $boxWidth;
+      height: $boxHeight;
+      border: 2px dashed #73828c;
+      .graph {
+        box-sizing: border-box;
+        width: $boxWidth - 2 * $boxPadding;
+        height: $boxHeight - 2 * $boxPadding;
+
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+          width: var(--scrollBarWidth);
+          height: var(--scrollBarHeight);
+          background-color: var(--scrollBarBgColor);
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--slidingBlockBgColor);
+          border-radius: var(--slidingBlockRadius);
+        }
+        &::-webkit-scrollbar-thumb:hover {
+          background-color: var(--slidingBlockHoverBgColor);
+        }
+        &::-webkit-scrollbar-corner {
+          background-color: var(--rightBottomBgColor);
+        }
+
+        .graphBg {
+          box-sizing: border-box;
+          width: 200%;
+          height: 200%;
+          background: linear-gradient(
+            135deg,
+            #1d3450,
+            #29588a,
+            #116d6e,
+            #5c8984,
+            #47a992
+          );
+        }
+      }
+    }
+    .bottom {
+      width: $boxWidth;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      .row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        margin-bottom: 20px;
+        .rowItem {
+          display: flex;
+          align-items: center;
+          width: 47%;
+          .label {
+            color: #333 !important;
+            margin-right: 6px;
+            font-size: 15px;
+            color: #666;
+          }
+        }
+      }
+      .codeBox {
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        background-color: #8bacaa;
+        padding: 10px;
+        color: #222;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}