xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整平均值的显示方式。

Browse Source
This commit is contained in:
徐涛
2025-01-14 10:08:06 +08:00
parent bd3f6d02ba
commit 60d1f82e09
3 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/page-components/color-compare/CompareLayout.module.css
View File

@@ -15,6 +15,10 @@
.element_name { .element_name {
font-size: var(--font-size-xxl); font-size: var(--font-size-xxl);
font-weight: bold; font-weight: bold;
&.mean {
border-top: 2px solid var(--color-fg);
padding-top: var(--spacing-xxs);
}
} }
.element_values { .element_values {
display: flex; display: flex;

3
src/page-components/color-compare/ShadeScale.tsx
View File

@@ -1,3 +1,4 @@
import cx from 'clsx';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { MixReversing } from '../../color_functions/color_module'; import { MixReversing } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext'; import { useColorFunction } from '../../ColorFunctionContext';
@@ -45,7 +46,7 @@ export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMeth
</div> </div>
<div className={styles.elements}> <div className={styles.elements}>
<div className={styles.element}> <div className={styles.element}>
<div className={styles.element_name}>Average</div> <div className={cx(styles.element_name, styles.mean)}>F</div>
<div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div> <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
</div> </div>
</div> </div>

3
src/page-components/color-compare/TintScale.tsx
View File

@@ -1,3 +1,4 @@
import cx from 'clsx';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { MixReversing } from '../../color_functions/color_module'; import { MixReversing } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext'; import { useColorFunction } from '../../ColorFunctionContext';
@@ -45,7 +46,7 @@ export function TintScale({ basic = '000000', compare = '000000' }: CompareMetho
</div> </div>
<div className={styles.elements}> <div className={styles.elements}>
<div className={styles.element}> <div className={styles.element}>
<div className={styles.element_name}>Average</div> <div className={cx(styles.element_name, styles.mean)}>F</div>
<div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div> <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
</div> </div>
</div> </div>