From 1e19299d1f10920295d1fa55f221d64abd41e1b7 Mon Sep 17 00:00:00 2001
From: shefengchun <1077478963@qq.com>
Date: Fri, 3 Feb 2023 09:28:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E7=BD=91=E6=A0=BC=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E8=AE=BE=E7=BD=AEui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FusionSettings/GridSettings.vue           | 64 +++++++++++++------
 1 file changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/components/FusionSettings/GridSettings.vue b/src/components/FusionSettings/GridSettings.vue
index a6fed78..f594b57 100644
--- a/src/components/FusionSettings/GridSettings.vue
+++ b/src/components/FusionSettings/GridSettings.vue
@@ -24,11 +24,29 @@
           <div class="row" style="min-height: 40px;">
             <div class="col-4"></div>
             <div class="col-4 q-pt-sm">
-              <div class="row">
-                <div class="col-4"><span>{{ $t('line color') }}</span></div>
-                <div class="col-8 border" @click="isshowhex = true; index = 0"
-                  :style="{ 'background-color': color[0] }"></div>
-              </div>
+              <q-item>
+              <q-item-section avatar class="head_1">
+                {{ $t("line color") }}
+              </q-item-section>
+              <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>
@@ -36,19 +54,34 @@
           <div class="row" style="min-height: 40px;">
             <div class="col-4"></div>
             <div class="col-4 q-pt-sm">
-              <div class="row">
-                <div class="col-4"><span>{{ $t('background color') }}</span></div>
-                <div class="col-8 border" @click="isshowhex = true; index = 1"
-                  :style="{ 'background-color': color[1] }"></div>
-              </div>
+              <q-item>
+              <q-item-section avatar class="head_1">
+                {{ $t("background color") }}
+              </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 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>
 
@@ -76,14 +109,11 @@ export default defineComponent({
     let $store = useStore();
     let $t = useI18n();
     const RowsColumns = reactive([false, false, false, false]);
-    const hex = ref("")
-    const isshowhex = ref(false);
     const index = ref(0);
     const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
     let model = reactive([20, 40]);
     let options = ref([10, 20, 30, 40, 50]);
     const submit = () => {
-      isshowhex.value = false
       switch (index.value) {
         case 0:
           set?.SetBlendingOption("blending_grids_line_color", color[index.value]);
@@ -169,10 +199,8 @@ export default defineComponent({
     return {
       model,
       options,
-      hex,
       submit,
       RowsColumns,
-      isshowhex,
       index,
       color,
       update_row_col,