lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更改网格颜色设置ui

This commit is contained in:
shefengchun 2023-02-03 09:28:29 +08:00
parent 09f20b4123
commit 1e19299d1f
1 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/FusionSettings/GridSettings.vue
View File

@ -24,11 +24,29 @@
<div class="row" style="min-height: 40px;"> <div class="row" style="min-height: 40px;">
<div class="col-4"></div> <div class="col-4"></div>
<div class="col-4 q-pt-sm"> <div class="col-4 q-pt-sm">
<div class="row"> <q-item>
<div class="col-4"><span>{{ $t('line color') }}</span></div> <q-item-section avatar class="head_1">
<div class="col-8 border" @click="isshowhex = true; index = 0" {{ $t("line color") }}
:style="{ 'background-color': color[0] }"></div> </q-item-section>
</div> <q-item-section>
<q-input
v-model="color[0]"
:rules="['anyColor']"
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer" @click="index = 0">
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-color v-model="color[0]" @change="submit" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
</div> </div>
</div> </div>
</div> </div>
@ -36,20 +54,35 @@
<div class="row" style="min-height: 40px;"> <div class="row" style="min-height: 40px;">
<div class="col-4"></div> <div class="col-4"></div>
<div class="col-4 q-pt-sm"> <div class="col-4 q-pt-sm">
<div class="row"> <q-item>
<div class="col-4"><span>{{ $t('background color') }}</span></div> <q-item-section avatar class="head_1">
<div class="col-8 border" @click="isshowhex = true; index = 1" {{ $t("background color") }}
:style="{ 'background-color': color[1] }"></div> </q-item-section>
<q-item-section>
<q-input
v-model="color[1]"
:rules="['anyColor']"
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer" @click="index = 1">
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-color v-model="color[1]" @change="submit" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="isshowhex" style="margin: 0 auto;text-align: center;"><q-color no-header-tabs no-footer
v-model="color[index]" class="my-picker" /> <q-btn style="margin-top: 0.5rem;" color="white" @click="submit"
class=" q-pt-sm" text-color="black" :label="$t('submit')" /></div>
</div>
</template> </template>
<style scoped> <style scoped>
@ -76,14 +109,11 @@ export default defineComponent({
let $store = useStore(); let $store = useStore();
let $t = useI18n(); let $t = useI18n();
const RowsColumns = reactive([false, false, false, false]); const RowsColumns = reactive([false, false, false, false]);
const hex = ref("")
const isshowhex = ref(false);
const index = ref(0); const index = ref(0);
const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]); const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
let model = reactive([20, 40]); let model = reactive([20, 40]);
let options = ref([10, 20, 30, 40, 50]); let options = ref([10, 20, 30, 40, 50]);
const submit = () => { const submit = () => {
isshowhex.value = false
switch (index.value) { switch (index.value) {
case 0: case 0:
set?.SetBlendingOption("blending_grids_line_color", color[index.value]); set?.SetBlendingOption("blending_grids_line_color", color[index.value]);
@ -169,10 +199,8 @@ export default defineComponent({
return { return {
model, model,
options, options,
hex,
submit, submit,
RowsColumns, RowsColumns,
isshowhex,
index, index,
color, color,
update_row_col, update_row_col,