|
|
@@ -20,14 +20,14 @@ const defaultColor = [
|
|
|
// "rgba(103, 58, 183, 1)",
|
|
|
// "rgba(63, 81, 181, 1)",
|
|
|
"rgba(33, 150, 243, 1)",
|
|
|
- "rgba(3, 169, 244, 1)",
|
|
|
+ // "rgba(3, 169, 244, 1)",
|
|
|
"rgba(0, 188, 212, 1)",
|
|
|
"rgba(0, 150, 136, 1)",
|
|
|
"rgba(76, 175, 80, 1)",
|
|
|
"rgba(139, 195, 74, 1)",
|
|
|
"rgba(205, 220, 57, 1)",
|
|
|
"rgba(255, 235, 59, 1)",
|
|
|
- "rgba(255, 193, 7, 1)",
|
|
|
+ // "rgba(255, 193, 7, 1)",
|
|
|
];
|
|
|
|
|
|
export default defineComponent({
|
|
|
@@ -120,7 +120,7 @@ export default defineComponent({
|
|
|
>
|
|
|
<div class="color_view flex items-center">
|
|
|
<div
|
|
|
- class="color_icon color_item w-30px h-30px mx-3px mb-5px rounded-2px cursor-pointer"
|
|
|
+ class="color_icon color_item"
|
|
|
onClick={() => (disabled ? null : show())}
|
|
|
></div>
|
|
|
|
|
|
@@ -131,7 +131,7 @@ export default defineComponent({
|
|
|
class={cx(
|
|
|
index == state.index && "item_active",
|
|
|
thisColor.alpha == 0 && "item_empty",
|
|
|
- "color_item w-30px h-30px mx-3px mb-5px rounded-2px cursor-pointer"
|
|
|
+ "color_item"
|
|
|
)}
|
|
|
style={{ backgroundColor: color }}
|
|
|
key={index}
|
|
|
@@ -151,6 +151,7 @@ export default defineComponent({
|
|
|
});
|
|
|
|
|
|
const ColorPiackerView = css`
|
|
|
+ margin: 0 -5px;
|
|
|
position: relative;
|
|
|
&.picker-disabled {
|
|
|
cursor: not-allowed;
|
|
|
@@ -166,10 +167,14 @@ const ColorPiackerView = css`
|
|
|
.color_view {
|
|
|
flex-wrap: wrap;
|
|
|
.color_item {
|
|
|
- border-radius: 3px;
|
|
|
position: relative;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ margin: 2px 5px 6px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
&::after {
|
|
|
- border-radius: 2px;
|
|
|
+ border-radius: 4px;
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
@@ -178,17 +183,17 @@ const ColorPiackerView = css`
|
|
|
bottom: 0;
|
|
|
transition: box-shadow 0.2s ease-in-out;
|
|
|
}
|
|
|
- &.item_active {
|
|
|
- box-shadow: 0 0 0 1px @inf-border-color,
|
|
|
- inset 0 0 0 1px @inf-border-color, inset 0 0 0 3px #fff;
|
|
|
+ &.item_active::after {
|
|
|
+ box-shadow: 0 0 0 1px @inf-primary-color,
|
|
|
+ inset 0 0 0 1px @inf-primary-color, inset 0 0 0 3px #fff;
|
|
|
}
|
|
|
&.item_empty {
|
|
|
background: url("@/assets/imgs/bgBlank.svg") repeat;
|
|
|
background-color: #fff !important;
|
|
|
}
|
|
|
- &:hover {
|
|
|
- box-shadow: 0 0 0 1px @inf-border-color,
|
|
|
- inset 0 0 0 1px @inf-border-color, inset 0 0 0 3px #fff;
|
|
|
+ &:hover::after {
|
|
|
+ box-shadow: 0 0 0 1px @inf-primary-color,
|
|
|
+ inset 0 0 0 1px @inf-primary-color, inset 0 0 0 3px #fff;
|
|
|
}
|
|
|
}
|
|
|
.color_icon {
|
