You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.5 KiB
71 lines
1.5 KiB
2 years ago
|
<template>
|
||
|
|
<h2>颜色对比器</h2>
|
||
|
|
<div class="color-item" v-for="(item, i) in colors" :key="i">
|
||
|
|
<div>{{ state.lang.color + (i + 1) }}</div>
|
||
|
|
<SearchInput :width="120" v-model="colors[i]" />
|
||
|
|
<div :class="['color-view', 'c' + i]"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { reactive, onMounted, ref } from "vue";
|
||
|
|
import { SearchInput } from 'noob';
|
||
|
|
|
||
|
|
const { state, commit, dispatch } = useStore();
|
||
|
|
const colors = reactive(new Array(10));
|
||
|
|
|
||
|
|
onMounted(() => { });
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
//@import url(); 引入公共css类
|
||
|
|
|
||
|
|
.color-item {
|
||
|
|
width: 150px;
|
||
|
|
height: 150px;
|
||
|
|
float: left;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 1px solid v-bind('state.style.tableBorderColor');
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-view {
|
||
|
|
width: 100%;
|
||
|
|
height: 100px;
|
||
|
|
|
||
|
|
&.c0 {
|
||
|
|
background-color: v-bind('"#" + colors[0]');
|
||
|
|
}
|
||
|
|
|
||
|
|
&.c1 {
|
||
|
|
background-color: v-bind('"#" + colors[1]');
|
||
|
|
}
|
||
|
|
|
||
|
|
&.c2 {
|
||
|
|
background-color: v-bind('"#" + colors[2]');
|
||
|
|
}
|
||
|
|
|
||
|
|
&.c3 {
|
||
|
|
background-color: v-bind('"#" + colors[3]');
|
||
|
|
}
|
||
|
|
|
||
|
|
&.c4 {
|
||
|
|
background-color: v-bind('"#" + colors[4]');
|
||
|
|
}
|
||
|
|
|
||
|
|
&.c5 {
|
||
|
|
background-color: v-bind('"#" + colors[5]');
|
||
|
|
}
|
||
|
|
&.c6 {
|
||
|
|
background-color: v-bind('"#" + colors[6]');
|
||
|
|
}
|
||
|
|
&.c7 {
|
||
|
|
background-color: v-bind('"#" + colors[7]');
|
||
|
|
}
|
||
|
|
&.c8 {
|
||
|
|
background-color: v-bind('"#" + colors[8]');
|
||
|
|
}
|
||
|
|
&.c9 {
|
||
|
|
background-color: v-bind('"#" + colors[9]');
|
||
|
|
}
|
||
|
|
}</style>
|