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
<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> |