-
Notifications
You must be signed in to change notification settings - Fork 663
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #248 from hepengwei/feat_he
新增生成阴影菜单模块
- Loading branch information
Showing
13 changed files
with
344 additions
and
13 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| .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: 60px; | ||
| .box { | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: $boxWidth; | ||
| height: $boxHeight; | ||
| border: 2px dashed #73828c; | ||
| padding: $boxPadding; | ||
| .graph { | ||
| box-sizing: border-box; | ||
| width: $boxHeight - 2 * $boxPadding; | ||
| height: $boxHeight - 2 * $boxPadding; | ||
| background: linear-gradient( | ||
| 135deg, | ||
| #112437, | ||
| #1d3450, | ||
| #29588a, | ||
| #116d6e, | ||
| #5c8984, | ||
| #47a992 | ||
| ) | ||
| fixed; | ||
| box-shadow: var(--boxShadow); | ||
| } | ||
| } | ||
| .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; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,239 @@ | ||
| /** | ||
| * 生成阴影 | ||
| */ | ||
| import React, { useEffect, useRef, useState } from "react"; | ||
| import { Slider, InputNumber, message } from "antd"; | ||
| import { useIntl } from "react-intl"; | ||
| import styles from "./index.module.scss"; | ||
|
|
||
| const minSideNum = -50; | ||
| const maxSideNum = 50; | ||
| const defaultHorizontalValue = 20; | ||
| const defaultVerticalValue = 20; | ||
| const defaultBlurLength = 10; | ||
| const defaultSpreadSize = 0; | ||
| const defaultBorderRadius = 20; | ||
|
|
||
| const GenerateShadow = () => { | ||
| const intl = useIntl(); | ||
| const graphRef = useRef<HTMLDivElement>(null); | ||
| const [horizontalValue, setHorizontalValue] = useState<number>( | ||
| defaultHorizontalValue | ||
| ); // 水平阴影位置 | ||
| const [verticalValue, setVerticalValue] = | ||
| useState<number>(defaultVerticalValue); // 垂直阴影位置 | ||
| const [blurLength, setBlurLength] = useState<number>(defaultBlurLength); // 模糊程度 | ||
| const [shadowSize, setShadowSize] = useState<number>(defaultSpreadSize); // 阴影大小 | ||
| const [borderRadius, setBorderRadius] = useState<number>(defaultBorderRadius); // 边框半价 | ||
|
|
||
| const [boxShadowStr, setBoxShadowStr] = useState<string>(""); | ||
|
|
||
| const onHorizontalValueChange = (value: number | null) => { | ||
| setHorizontalValue(value || value === 0 ? value : defaultHorizontalValue); | ||
| }; | ||
|
|
||
| const onVerticalValueChange = (value: number | null) => { | ||
| setVerticalValue(value || value === 0 ? value : defaultVerticalValue); | ||
| }; | ||
|
|
||
| const onBlurLengthChange = (value: number | null) => { | ||
| setBlurLength(value || value === 0 ? value : defaultBlurLength); | ||
| }; | ||
|
|
||
| const onShadowSizeChange = (value: number | null) => { | ||
| setShadowSize(value || value === 0 ? value : defaultSpreadSize); | ||
| }; | ||
|
|
||
| const onBorderRadiusChange = (value: number | null) => { | ||
| setBorderRadius(value || value === 0 ? value : defaultBorderRadius); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (graphRef.current) { | ||
| const boxShadowStr = `${horizontalValue}px ${verticalValue}px ${blurLength}px ${shadowSize}px #224141`; | ||
| graphRef.current.style.setProperty("--boxShadow", boxShadowStr); | ||
| setBoxShadowStr(boxShadowStr); | ||
| } | ||
| }, [horizontalValue, verticalValue, blurLength, shadowSize]); | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <div className={styles.content}> | ||
| <div className={styles.box}> | ||
| <div | ||
| className={styles.graph} | ||
| style={{ borderRadius: `${borderRadius}px` }} | ||
| ref={graphRef} | ||
| /> | ||
| </div> | ||
| <div className={styles.bottom}> | ||
| <div className={styles.row}> | ||
| <div className={styles.rowItem}> | ||
| <span className={styles.label}> | ||
| {intl.formatMessage({ | ||
| id: "page.cssDynamicEffect.generateShadow.horizontalOffset", | ||
| })} | ||
| : | ||
| </span> | ||
| <Slider | ||
| style={{ | ||
| display: "flex", | ||
| flex: 1, | ||
| marginLeft: "10px", | ||
| marginRight: "16px", | ||
| }} | ||
| min={minSideNum} | ||
| max={maxSideNum} | ||
| step={1} | ||
| value={horizontalValue} | ||
| onChange={onHorizontalValueChange} | ||
| /> | ||
| <InputNumber | ||
| style={{ width: "80px" }} | ||
| min={minSideNum} | ||
| max={maxSideNum} | ||
| precision={0} | ||
| value={horizontalValue} | ||
| onChange={onHorizontalValueChange} | ||
| /> | ||
| </div> | ||
| <div className={styles.rowItem}> | ||
| <span className={styles.label}> | ||
| {intl.formatMessage({ | ||
| id: "page.cssDynamicEffect.generateShadow.verticalOffset", | ||
| })} | ||
| : | ||
| </span> | ||
| <Slider | ||
| style={{ | ||
| display: "flex", | ||
| flex: 1, | ||
| marginLeft: "10px", | ||
| marginRight: "16px", | ||
| }} | ||
| min={minSideNum} | ||
| max={maxSideNum} | ||
| step={1} | ||
| value={verticalValue} | ||
| onChange={onVerticalValueChange} | ||
| /> | ||
| <InputNumber | ||
| style={{ width: "80px" }} | ||
| min={minSideNum} | ||
| max={maxSideNum} | ||
| precision={0} | ||
| value={verticalValue} | ||
| onChange={onVerticalValueChange} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={styles.row}> | ||
| <div className={styles.rowItem}> | ||
| <span className={styles.label}> | ||
| {intl.formatMessage({ | ||
| id: "page.cssDynamicEffect.generateShadow.blurLength", | ||
| })} | ||
| : | ||
| </span> | ||
| <Slider | ||
| style={{ | ||
| display: "flex", | ||
| flex: 1, | ||
| marginLeft: "10px", | ||
| marginRight: "16px", | ||
| }} | ||
| min={0} | ||
| max={maxSideNum} | ||
| step={1} | ||
| value={blurLength} | ||
| onChange={onBlurLengthChange} | ||
| /> | ||
| <InputNumber | ||
| style={{ width: "80px" }} | ||
| min={0} | ||
| max={maxSideNum} | ||
| precision={0} | ||
| value={blurLength} | ||
| onChange={onBlurLengthChange} | ||
| /> | ||
| </div> | ||
| <div className={styles.rowItem}> | ||
| <span className={styles.label}> | ||
| {intl.formatMessage({ | ||
| id: "page.cssDynamicEffect.generateShadow.shadowSize", | ||
| })} | ||
| : | ||
| </span> | ||
| <Slider | ||
| style={{ | ||
| display: "flex", | ||
| flex: 1, | ||
| marginLeft: "10px", | ||
| marginRight: "16px", | ||
| }} | ||
| min={minSideNum} | ||
| max={maxSideNum} | ||
| step={1} | ||
| value={shadowSize} | ||
| onChange={onShadowSizeChange} | ||
| /> | ||
| <InputNumber | ||
| style={{ width: "80px" }} | ||
| min={minSideNum} | ||
| max={maxSideNum} | ||
| precision={0} | ||
| value={shadowSize} | ||
| onChange={onShadowSizeChange} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={styles.row}> | ||
| <div className={styles.rowItem}> | ||
| <span className={styles.label}> | ||
| {intl.formatMessage({ | ||
| id: "page.cssDynamicEffect.generateShadow.borderRadius", | ||
| })} | ||
| : | ||
| </span> | ||
| <Slider | ||
| style={{ | ||
| display: "flex", | ||
| flex: 1, | ||
| marginLeft: "10px", | ||
| marginRight: "16px", | ||
| }} | ||
| min={0} | ||
| max={maxSideNum} | ||
| step={1} | ||
| value={borderRadius} | ||
| onChange={onBorderRadiusChange} | ||
| /> | ||
| <InputNumber | ||
| style={{ width: "80px" }} | ||
| min={0} | ||
| max={maxSideNum} | ||
| precision={0} | ||
| value={borderRadius} | ||
| onChange={onBorderRadiusChange} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={styles.codeBox}> | ||
| <span>{".box {"}</span> | ||
| <span> | ||
| background: linear-gradient(135deg, | ||
| #112437, #1d3450, #29588a, #116d6e, #5c8984, #47a992) fixed; | ||
| </span> | ||
| <span> box-shadow: {boxShadowStr};</span> | ||
| <span> | ||
| border-radius: {borderRadius}px; | ||
| </span> | ||
| <span>{"}"}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GenerateShadow; |
Oops, something went wrong.