添加颜色归类
This commit is contained in:
rucky
parent
c02820c3c8
commit
3ae20438f4
@ -58,6 +58,7 @@
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"coi-serviceworker": "^0.1.6",
|
||||
"color-util": "^2.2.3",
|
||||
"copy-webpack-plugin": "^4.4.1",
|
||||
"deploy-cli-service": "^1.2.0",
|
||||
"eslint": "^6.7.2",
|
||||
|
||||
@ -112,6 +112,14 @@
|
||||
z-index: @index;
|
||||
position: fixed;
|
||||
}
|
||||
.pfBottomLayout(@left,@bottom,@width,@height,@index){
|
||||
width:@width;
|
||||
height:@height;
|
||||
left:@left;
|
||||
bottom:@bottom;
|
||||
z-index: @index;
|
||||
position: fixed;
|
||||
}
|
||||
.pfRightLayout(@right,@top,@width,@height,@index){
|
||||
width:@width;
|
||||
height:@height;
|
||||
@ -132,12 +140,12 @@
|
||||
// }
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* Project id 3110299 */
|
||||
src: url('//at.alicdn.com/t/font_3110299_p182w4um9w.eot?t=1644309691314'); /* IE9 */
|
||||
src: url('//at.alicdn.com/t/font_3110299_p182w4um9w.eot?t=1644309691314#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_3110299_p182w4um9w.woff?t=1644309691314') format('woff'),
|
||||
url('//at.alicdn.com/t/font_3110299_p182w4um9w.ttf?t=1644309691314') format('truetype'),
|
||||
url('//at.alicdn.com/t/font_3110299_p182w4um9w.svg?t=1644309691314#iconfont') format('svg');
|
||||
src: url('//at.alicdn.com/t/font_3110299_cqiu2pftora.eot?t=1644904387545'); /* IE9 */
|
||||
src: url('//at.alicdn.com/t/font_3110299_cqiu2pftora.eot?t=1644904387545#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_3110299_cqiu2pftora.woff?t=1644904387545') format('woff'),
|
||||
url('//at.alicdn.com/t/font_3110299_cqiu2pftora.ttf?t=1644904387545') format('truetype'),
|
||||
url('//at.alicdn.com/t/font_3110299_cqiu2pftora.svg?t=1644904387545#iconfont') format('svg');
|
||||
}
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
|
||||
21990
src/data/color.json
Normal file
21990
src/data/color.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -104,6 +104,12 @@ export default {
|
||||
name: "画板",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
fontIconCode: "",
|
||||
target: "ColorSort",
|
||||
name: "颜色归类",
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
568
src/page/index/colorSort/index.vue
Normal file
568
src/page/index/colorSort/index.vue
Normal file
@ -0,0 +1,568 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-08-28 15:20:15
|
||||
* @LastEditTime: 2020-10-10 17:19:06
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="sort">
|
||||
<div class="show-con orgin">
|
||||
<div
|
||||
class="color-span"
|
||||
v-for="(item, index) in hlsColorArr"
|
||||
:key="index"
|
||||
:style="rennderCssHSL(item)"
|
||||
></div>
|
||||
</div>
|
||||
<div class="show-con sort" ref="sortCon">
|
||||
<div
|
||||
class="color-group"
|
||||
v-for="(item, index) in newColorArr"
|
||||
:key="index"
|
||||
>
|
||||
<div class="header">Group {{ index + 1 }}</div>
|
||||
<div
|
||||
class="color-span"
|
||||
v-for="(t, i) in item"
|
||||
:key="i"
|
||||
:style="rennderCssHSL(t)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="show-con cluster" ref="clusterCon">
|
||||
<div
|
||||
class="color-group"
|
||||
v-for="(item, index) in clusters"
|
||||
:key="index"
|
||||
>
|
||||
<div class="header">
|
||||
<div class="span" :style="rennderHeaderCss(item)"></div>
|
||||
{{ item.name }} Group
|
||||
</div>
|
||||
<div
|
||||
class="color-span"
|
||||
v-for="(item, index) in item.colors"
|
||||
:key="index"
|
||||
:style="rennderCssHex(item)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-groups">
|
||||
<!-- <div class="btn" @click="sortColor">颜色归类</div> -->
|
||||
|
||||
<div class="p">根据Hue色调分组</div>
|
||||
<div class="ios-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="ios-checkbox"
|
||||
name="emulate-ios-button"
|
||||
class="raw-checkbox"
|
||||
v-model="hideOrigin"
|
||||
@change="showGroup"
|
||||
hidden
|
||||
/>
|
||||
<label for="ios-checkbox" class="emulate-ios-button"></label>
|
||||
</div>
|
||||
<div class="p">根据固定颜色分组</div>
|
||||
<div class="ios-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="ios-checkbox2"
|
||||
name="emulate-ios-button2"
|
||||
class="raw-checkbox"
|
||||
v-model="hideOrigin2"
|
||||
@change="showGroup2"
|
||||
hidden
|
||||
/>
|
||||
<label for="ios-checkbox2" class="emulate-ios-button"></label>
|
||||
</div>
|
||||
<div
|
||||
class="btn"
|
||||
@click="sortColorSaturation"
|
||||
:class="{ active: active1 }"
|
||||
ref="btn1"
|
||||
>
|
||||
根据饱和度排序
|
||||
</div>
|
||||
<div
|
||||
class="btn"
|
||||
@click="sortColorLight"
|
||||
:class="{ active: active2 }"
|
||||
ref="btn2"
|
||||
>
|
||||
根据明度排序
|
||||
</div>
|
||||
<div class="show-color" ref="showColor">
|
||||
<div
|
||||
class="color-span"
|
||||
v-for="(item, index) in clusters"
|
||||
:key="index"
|
||||
:style="rennderHeaderCss(item)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import colorUtil from "color-util";
|
||||
import colors from "@/data/color.json";
|
||||
import gsap from "gsap";
|
||||
export default {
|
||||
name: "ColorSort",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
hideOrigin: false,
|
||||
hideOrigin2: false,
|
||||
colorArr: colors,
|
||||
active1: false,
|
||||
active2: false,
|
||||
hlsColorArr: [],
|
||||
clustersColorArr: [],
|
||||
newColorArr: [[], [], [], [], [], [], [], [], [], [], [], []],
|
||||
clusters: [
|
||||
//指定颜色分类
|
||||
{ name: "red", leadColor: [255, 0, 0], colors: [] },
|
||||
{ name: "orange", leadColor: [255, 128, 0], colors: [] },
|
||||
{ name: "yellow", leadColor: [255, 255, 0], colors: [] },
|
||||
{ name: "chartreuse", leadColor: [128, 255, 0], colors: [] },
|
||||
{ name: "green", leadColor: [0, 255, 0], colors: [] },
|
||||
{ name: "spring green", leadColor: [0, 255, 128], colors: [] },
|
||||
{ name: "cyan", leadColor: [0, 255, 255], colors: [] },
|
||||
{ name: "azure", leadColor: [0, 127, 255], colors: [] },
|
||||
{ name: "blue", leadColor: [0, 0, 255], colors: [] },
|
||||
{ name: "violet", leadColor: [127, 0, 255], colors: [] },
|
||||
{ name: "magenta", leadColor: [255, 0, 255], colors: [] },
|
||||
{ name: "rose", leadColor: [255, 0, 128], colors: [] },
|
||||
{ name: "black", leadColor: [0, 0, 0], colors: [] },
|
||||
{ name: "grey", leadColor: [235, 235, 235], colors: [] },
|
||||
// { name: "white", leadColor: [255, 255, 255], colors: [] },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rennderCssHSL() {
|
||||
return function (item) {
|
||||
return `background-color: ${colorUtil.hsl.to.csshsl(item)};`;
|
||||
};
|
||||
},
|
||||
rennderCssHex() {
|
||||
return function (item) {
|
||||
return `background-color: ${item.csshsl};`;
|
||||
};
|
||||
},
|
||||
rennderHeaderCss() {
|
||||
return function (item) {
|
||||
return `background-color: ${colorUtil.rgb.to.cssrgb({
|
||||
r: item.leadColor[0],
|
||||
g: item.leadColor[1],
|
||||
b: item.leadColor[2],
|
||||
a: 255,
|
||||
})};`;
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.newColorArr);
|
||||
this.reHandleColor();
|
||||
},
|
||||
methods: {
|
||||
// 显示隐藏分组
|
||||
showGroup(index) {
|
||||
let target = this.$refs.sortCon;
|
||||
gsap.to(target, {
|
||||
autoAlpha: 1,
|
||||
x: this.hideOrigin ? 0 : "100%",
|
||||
zIndex: this.hideOrigin ? 2 : 10,
|
||||
onStart: () => {
|
||||
if (this.active1) {
|
||||
this.sortColorSaturation();
|
||||
}
|
||||
if (this.active2) {
|
||||
this.sortColorLight();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (this.hideOrigin) {
|
||||
this.hideOrigin2 = false;
|
||||
gsap.to(this.$refs.clusterCon, {
|
||||
autoAlpha: 0,
|
||||
zIndex: 2,
|
||||
x: 0,
|
||||
});
|
||||
gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 1 });
|
||||
gsap.to(this.$refs.showColor, { autoAlpha: 0 });
|
||||
}
|
||||
},
|
||||
showGroup2(index) {
|
||||
let target = this.$refs.clusterCon;
|
||||
gsap.to(target, {
|
||||
autoAlpha: 1,
|
||||
zIndex: this.hideOrigin2 ? 2 : 10,
|
||||
x: this.hideOrigin2 ? 0 : "100%",
|
||||
});
|
||||
|
||||
if (this.hideOrigin2) {
|
||||
this.hideOrigin = false;
|
||||
gsap.to(this.$refs.sortCon, {
|
||||
autoAlpha: 0,
|
||||
zIndex: 2,
|
||||
x: 0,
|
||||
});
|
||||
|
||||
gsap.to(this.$refs.showColor, { autoAlpha: 1 });
|
||||
gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 0 });
|
||||
} else {
|
||||
gsap.to(this.$refs.showColor, { autoAlpha: 0 });
|
||||
gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 1 });
|
||||
}
|
||||
},
|
||||
// 颜色数据转换为hsl
|
||||
reHandleColor() {
|
||||
this.colorArr.forEach((item, index) => {
|
||||
if (item.R && item.G && item.B) {
|
||||
this.hlsColorArr.push(
|
||||
// this.rgbToHsl(item.R, item.G, item.B)
|
||||
colorUtil.rgb.to.hsl({
|
||||
r: item.R,
|
||||
g: item.G,
|
||||
b: item.B,
|
||||
a: 255,
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(this.hlsColorArr);
|
||||
//根据hue分组
|
||||
this.sortColorByHue();
|
||||
// 按照预定颜色分组
|
||||
this.sortColorByClusters();
|
||||
},
|
||||
// 按照色环分组
|
||||
sortColorByHue() {
|
||||
this.hlsColorArr.forEach((item, index) => {
|
||||
if (item.h) {
|
||||
let _index = 11 - Math.floor((item.h * 360) / 30); //将360度色盘区分为12个维度
|
||||
// let _index = Math.floor(
|
||||
// (item.h * item.hsl[1] * item.hsl[2]) / 20
|
||||
// );
|
||||
// if (_index > 11) {
|
||||
// _index = 11;
|
||||
// }
|
||||
this.newColorArr[_index].push(item);
|
||||
}
|
||||
});
|
||||
// console.log(this.newColorArr);
|
||||
},
|
||||
// 按照预定颜色分组
|
||||
sortColorByClusters() {
|
||||
const sortedClusters = this.sortWithClusters(this.hlsColorArr);
|
||||
const sortedColors = sortedClusters.reduce((acc, curr) => {
|
||||
const colors = curr.colors.map((color) => color.hex);
|
||||
return [...acc, ...colors];
|
||||
}, []);
|
||||
|
||||
this.clustersColorArr = sortedColors;
|
||||
console.log(this.clustersColorArr);
|
||||
},
|
||||
// 根据饱和度排序
|
||||
sortColorSaturation() {
|
||||
this.active1 = true;
|
||||
this.active2 = false;
|
||||
if (this.hideOrigin) {
|
||||
// 分组
|
||||
this.newColorArr.forEach((item, index) => {
|
||||
item.sort((a, b) => {
|
||||
return b.s - a.s;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.hlsColorArr.sort((a, b) => {
|
||||
return b.s - a.s;
|
||||
});
|
||||
}
|
||||
|
||||
console.log(this.newColorArr);
|
||||
},
|
||||
// 根据亮度
|
||||
sortColorLight() {
|
||||
this.active1 = false;
|
||||
this.active2 = true;
|
||||
if (this.hideOrigin) {
|
||||
// 分组
|
||||
this.newColorArr.forEach((item, index) => {
|
||||
item.sort((a, b) => {
|
||||
return (
|
||||
b.l - a.l
|
||||
// b.hsl[0] * b.hsl[1] * b.hsl[2] -
|
||||
// a.hsl[0] * a.hsl[1] * a.hsl[2]
|
||||
);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.hlsColorArr.sort((a, b) => {
|
||||
return b.l - a.l;
|
||||
});
|
||||
}
|
||||
|
||||
// console.log(this.newColorArr);
|
||||
},
|
||||
// 计算颜色距离
|
||||
colorDistance(color1, color2) {
|
||||
const x =
|
||||
Math.pow(color1[0] - color2[0], 2) +
|
||||
Math.pow(color1[1] - color2[1], 2) +
|
||||
Math.pow(color1[2] - color2[2], 2);
|
||||
return Math.sqrt(x);
|
||||
},
|
||||
// 一维排序
|
||||
oneDimensionSorting(colors, dim) {
|
||||
return colors.sort((colorA, colorB) => {
|
||||
if (colorA.hsl[dim] < colorB.hsl[dim]) {
|
||||
return -1;
|
||||
} else if (colorA.hsl[dim] > colorB.hsl[dim]) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 根据明度
|
||||
blendRgbaWithWhite(rgba) {
|
||||
const color = colorUtil.color(rgba);
|
||||
const a = color.rgb.a / 255;
|
||||
const r = Math.floor(color.rgb.r * a + 0xff * (1 - a));
|
||||
const g = Math.floor(color.rgb.g * a + 0xff * (1 - a));
|
||||
const b = Math.floor(color.rgb.b * a + 0xff * (1 - a));
|
||||
return "#" + ((r << 16) | (g << 8) | b).toString(16);
|
||||
},
|
||||
sortWithClusters(colorsToSort) {
|
||||
const mappedColors = colorsToSort
|
||||
// .map((color) => {
|
||||
// console.log(color);
|
||||
// const isRgba = color.includes("rgba");
|
||||
// if (isRgba) {
|
||||
// return blendRgbaWithWhite(color);
|
||||
// } else {
|
||||
// return color;
|
||||
// }
|
||||
// })
|
||||
.map(colorUtil.color);
|
||||
|
||||
mappedColors.forEach((color) => {
|
||||
let minDistance;
|
||||
let minDistanceClusterIndex;
|
||||
|
||||
this.clusters.forEach((cluster, clusterIndex) => {
|
||||
const colorRgbArr = [color.rgb.r, color.rgb.g, color.rgb.b];
|
||||
const distance = this.colorDistance(
|
||||
colorRgbArr,
|
||||
cluster.leadColor
|
||||
);
|
||||
if (
|
||||
typeof minDistance === "undefined" ||
|
||||
minDistance > distance
|
||||
) {
|
||||
minDistance = distance;
|
||||
minDistanceClusterIndex = clusterIndex;
|
||||
}
|
||||
});
|
||||
|
||||
this.clusters[minDistanceClusterIndex].colors.push(color);
|
||||
});
|
||||
|
||||
this.clusters.forEach((cluster) => {
|
||||
const dim = ["white", "grey", "black"].includes(cluster.name)
|
||||
? "l"
|
||||
: "s";
|
||||
cluster.colors = this.oneDimensionSorting(cluster.colors, dim);
|
||||
});
|
||||
|
||||
return this.clusters;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
.sort {
|
||||
.prLayout(100%,100%);
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
.show-con {
|
||||
.paLayout(0,0,100%,100%,1);
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
// .prLayout(100%,auto);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 260px;
|
||||
background: #e3e7e8;
|
||||
.color-span {
|
||||
.prLayout(25px,25px);
|
||||
}
|
||||
&.origin {
|
||||
z-index: 1;
|
||||
}
|
||||
&.sort,
|
||||
&.cluster {
|
||||
visibility: hidden;
|
||||
transform: translate(100%, 0);
|
||||
z-index: 2;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
.color-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
.header {
|
||||
.prLayout(100%,60px);
|
||||
margin: 140px 0 40px 0;
|
||||
line-height: 50px;
|
||||
text-indent: 10px;
|
||||
font-size: 30px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
border-top: 2px solid #333;
|
||||
border-bottom: 2px solid #333;
|
||||
.span {
|
||||
.prLayout(30px,30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-groups {
|
||||
.pfBottomLayout(0,0,100%,180px,10);
|
||||
background: #dd6969;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
.p {
|
||||
line-height: 26px;
|
||||
}
|
||||
.btn {
|
||||
.prLayout(auto,60px);
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
padding: 0 20px;
|
||||
margin: 10px;
|
||||
background: linear-gradient(315deg, #ec7070, #c75f5f);
|
||||
box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
|
||||
&.active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: linear-gradient(315deg, #c75f5f, #ec7070);
|
||||
box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
|
||||
}
|
||||
}
|
||||
.ios-checkbox {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
.paLayout(0,-38px,100%,50px,2);
|
||||
background-image: linear-gradient(
|
||||
0deg,
|
||||
rgba(221, 105, 105, 1) 0%,
|
||||
rgba(221, 105, 105, 1) 50%,
|
||||
rgba(221, 105, 105, 0) 100%
|
||||
);
|
||||
}
|
||||
.show-color {
|
||||
visibility: hidden;
|
||||
.paLayout(10%, 100px ,80% ,40px,2);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
.color-span {
|
||||
.prLayout(40px,40px);
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* ==========================================================================
|
||||
label标签模拟按钮
|
||||
========================================================================== */
|
||||
.emulate-ios-button {
|
||||
display: block;
|
||||
width: 2rem;
|
||||
height: 1rem;
|
||||
background: #e68e8e;
|
||||
border-radius: 5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,
|
||||
translateZ来强制启用硬件渲染
|
||||
========================================================================== */
|
||||
|
||||
.emulate-ios-button:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border-radius: 100%;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
left: 0.05rem;
|
||||
top: 0.05rem;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.emulate-ios-button:active:after {
|
||||
width: 1.1rem;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
设置raw-checkbox,视觉直观比较
|
||||
========================================================================== */
|
||||
.raw-checkbox {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.raw-checkbox:checked + label {
|
||||
background: #34bf49;
|
||||
}
|
||||
|
||||
/* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */
|
||||
.raw-checkbox:checked + label:after {
|
||||
left: 1.05rem;
|
||||
}
|
||||
|
||||
.raw-checkbox:checked + label:active:after {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.raw-checkbox:disabled + label {
|
||||
background: #d5d5d5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.raw-checkbox:disabled + label:after {
|
||||
background: #bcbdbc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -17,6 +17,7 @@ import HandTrack from '../HandTrack/index.vue'
|
||||
import Video from '../Video/index.vue'
|
||||
import Curve from '../modifier_curve/index.vue'
|
||||
import Drawing from '../Drawing/index.vue'
|
||||
import ColorSort from '../colorSort/index.vue'
|
||||
|
||||
|
||||
|
||||
@ -113,6 +114,15 @@ const routes = [
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/colorsort",
|
||||
name: "ColorSort",
|
||||
component: ColorSort,
|
||||
meta: {
|
||||
title: "Color Sort", // 标题
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
|
||||
// {
|
||||
// path: "/example",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user