页面修改

src/components/CharteredBus/list/ListHeader.vue

@@ -224,13 +224,15 @@
       :label="$q.platform.is.mobile ? '' : $t('query')"
       @click="setSearchHandler"
     />
-    <q-btn
-      class="q-ml-sm"
-      color="primary"
-      unelevated
-      :label="$t('v102.CharteredBus.td')"
-      @click="goUrl"
-    />
+    <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
+      <q-btn
+        class="q-ml-sm"
+        color="primary"
+        unelevated
+        :label="$t('v102.CharteredBus.td')"
+        @click="goUrl"
+      />
+    </template>
   </div>
 </template>
 
@@ -245,6 +247,7 @@ import { CascaderOption, NCascader } from "naive-ui";
 import { ApiResult } from "src/@types/enumHelper";
 import message from "src/utils/message";
 import { useHotel } from "../../../utils/hotelRate";
+import { getStoreGetter } from "../../../store/utils";
 import { useRouter } from "vue-router";
 export default {
   components: { svgIcon, NCascader },
@@ -252,6 +255,7 @@ export default {
     const $q = useQuasar();
     const $router = useRouter();
     const qDateProxy = ref(null) as any;
+    const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
     const data = reactive({
       CharteredBusType: useHotel.getCharteredBusType(),
       provinces: [] as any,
@@ -416,6 +420,7 @@ export default {
     return {
       qDateProxy,
       searchCnt,
+      b2bUserInfo,
       ...toRefs(data),
       ...methods,
     };

src/components/hotel/order/list/OrderListHeader.vue

 <template>
   <div class="rounded-borders bg-white row items-center q-pa-md">
-    <q-select v-if="$q.platform.is.desktop" class="q-mr-md"  style="min-width: 150px" v-model="search.OrderStatus"
-      @update:model-value="setOrderStatus" dense :options="status" emit-value option-label="StatusName"
-      option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
-    <q-input v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderNo" dense standout
-      :label="$t('hotelorder.search.orderNum')" />
-    <q-field v-if="$q.platform.is.desktop" clearable v-model="dateRangeFormat"
-      :label="$t('hotelorder.search.daterange')" standout class="col-2" style="min-width: 190px" dense>
-      <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
+    <q-select
+      v-if="$q.platform.is.desktop"
+      class="q-mr-md"
+      style="min-width: 150px"
+      v-model="search.OrderStatus"
+      @update:model-value="setOrderStatus"
+      dense
+      :options="status"
+      emit-value
+      option-label="StatusName"
+      option-value="StatusId"
+      map-options
+      :label="$t('hotelorder.search.status')"
+      standout
+    />
+    <q-input
+      v-if="$q.platform.is.desktop"
+      class="q-mr-md"
+      v-model="search.OrderNo"
+      dense
+      standout
+      :label="$t('hotelorder.search.orderNum')"
+    />
+    <q-field
+      v-if="$q.platform.is.desktop"
+      clearable
+      v-model="dateRangeFormat"
+      :label="$t('hotelorder.search.daterange')"
+      standout
+      class="col-2"
+      style="min-width: 190px"
+      dense
+    >
+      <div class="self-center full-width no-outline" tabindex="0">
+        {{ dateRangeFormat }}
+      </div>
       <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
-        <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
-          @range-end="dateRangeHandler"></q-date>
+        <q-date
+          v-model="dateRange"
+          :options="optionsFn"
+          range
+          mask="YYYY/MM/DD"
+          landscape
+          @range-end="dateRangeHandler"
+        ></q-date>
       </q-popup-proxy>
     </q-field>
     <div class="col"></div>
     <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
-      <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt"
-        v-if="searchCnt > 0" />
-      <svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
-      <q-tooltip>{{ $t('morequery') }}</q-tooltip>
-      <q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]"
-        :model-value="canHide">
+      <q-badge
+        rounded
+        class="din bg-red-2 text-red-14 text-weight-bold"
+        floating
+        :label="searchCnt"
+        v-if="searchCnt > 0"
+      />
+      <svg-icon
+        color="dark"
+        icon="Text/Filter.svg"
+        :tips="$t('morequery')"
+        :size="20"
+      ></svg-icon>
+      <q-tooltip>{{ $t("morequery") }}</q-tooltip>
+      <q-popup-proxy
+        class="no-shadow"
+        style="box-shadow: 0 0 50px #ddd !important"
+        :offset="[0, 20]"
+        :model-value="canHide"
+      >
         <q-card class="q-pa-md rounded-borders" style="width: 300px">
-          <div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
+          <div class="q-mb-md text-subtitle2">{{ $t("morequery") }}</div>
           <div class="q-mt-md row">
-            <q-input v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')"
-              class="mobile-only col q-mr-md" />
-            <q-input v-model="search.OrderId" dense standout :label="$t('hotelorder.search.orderId')" class="col" />
+            <q-input
+              v-model="search.OrderNo"
+              dense
+              standout
+              :label="$t('hotelorder.search.orderNum')"
+              class="mobile-only col q-mr-md"
+            />
+            <q-input
+              v-model="search.OrderId"
+              dense
+              standout
+              :label="$t('hotelorder.search.orderId')"
+              class="col"
+            />
           </div>
           <div class="mobile-only q-mt-md">
-            <q-field clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout
-              style="min-width: 190px" dense>
-              <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
+            <q-field
+              clearable
+              v-model="dateRangeFormat"
+              :label="$t('hotelorder.search.daterange')"
+              standout
+              style="min-width: 190px"
+              dense
+            >
+              <div class="self-center full-width no-outline" tabindex="0">
+                {{ dateRangeFormat }}
+              </div>
               <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
-                <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD"
-                  @range-end="dateRangeHandler"></q-date>
+                <q-date
+                  v-model="dateRange"
+                  :options="optionsFn"
+                  range
+                  mask="YYYY/MM/DD"
+                  @range-end="dateRangeHandler"
+                ></q-date>
               </q-popup-proxy>
             </q-field>
           </div>
-          <q-select class="q-mt-md" v-model="search.RoomType" dense :options="rooms" emit-value option-label="TypeName"
-            option-value="TypeId" map-options :label="$t('hotelorder.search.roomType')" standout />
-          <q-select class="q-mt-md" v-model="search.OrderType" dense :options="orderTypes" emit-value
-            option-label="TypeName" option-value="TypeId" map-options :label="$t('hotelorder.search.orderType')"
-            standout />
-          <q-input v-model="search.TCNum" dense standout :label="$t('hotelorder.search.tcNum')" class="q-mt-md"
-            v-if="search.OrderType == 2" />
-          <q-input v-model="search.ContactName" :placeholder="$t('hotelorder.search.contactInfoHolder')" dense standout
-            :label="$t('hotelorder.search.contactInfo')" class="q-mt-md" v-if="search.OrderType == 1" />
+          <q-select
+            class="q-mt-md"
+            v-model="search.RoomType"
+            dense
+            :options="rooms"
+            emit-value
+            option-label="TypeName"
+            option-value="TypeId"
+            map-options
+            :label="$t('hotelorder.search.roomType')"
+            standout
+          />
+          <q-select
+            class="q-mt-md"
+            v-model="search.OrderType"
+            dense
+            :options="orderTypes"
+            emit-value
+            option-label="TypeName"
+            option-value="TypeId"
+            map-options
+            :label="$t('hotelorder.search.orderType')"
+            standout
+          />
+          <q-input
+            v-model="search.TCNum"
+            dense
+            standout
+            :label="$t('hotelorder.search.tcNum')"
+            class="q-mt-md"
+            v-if="search.OrderType == 2"
+          />
+          <q-input
+            v-model="search.ContactName"
+            :placeholder="$t('hotelorder.search.contactInfoHolder')"
+            dense
+            standout
+            :label="$t('hotelorder.search.contactInfo')"
+            class="q-mt-md"
+            v-if="search.OrderType == 1"
+          />
         </q-card>
       </q-popup-proxy>
     </q-btn>
-    <q-btn unelevated class="bg-blue-1 text-primary hover q-mr-md" :label="$t('hotelorder.recovery')" />
+    <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
+      <q-btn
+        unelevated
+        class="bg-blue-1 text-primary hover q-mr-md"
+        :label="$t('hotelorder.recovery')"
+      />
+    </template>
+
     <q-btn color="primary" unelevated :label="$t('query')" @click="setQueryHandler" />
   </div>
   <div class="rounded-borders bg-white q-pa-sm q-mt-md mobile-only">
     <q-tabs v-model="search.OrderStatus" class="text-cyan" dense>
-      <q-tab :name="x.StatusId" :label="x.StatusName" v-for="x in status" @click="setOrderStatus(x.StatusId)" />
+      <q-tab
+        :name="x.StatusId"
+        :label="x.StatusName"
+        v-for="x in status"
+        @click="setOrderStatus(x.StatusId)"
+      />
     </q-tabs>
   </div>
 </template>
 
 <script lang="ts">
-import { DirtionmaryHelper } from '../../../../config/dictionary'
-import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue'
-import { OrderType, RoomType, StandardStatus } from '../../../../@types'
-import { getHotelOrderStatus, getHotelOrderType, getHotelRoomType } from '../../../../utils/tools'
-import { date, useQuasar } from 'quasar'
-import svgIcon from '../../../global/svg-icon.vue'
+import { DirtionmaryHelper } from "../../../../config/dictionary";
+import { computed, defineComponent, inject, reactive, ref, toRefs } from "vue";
+import { OrderType, RoomType, StandardStatus } from "../../../../@types";
+import { getStoreGetter } from "../../../../store/utils";
+import {
+  getHotelOrderStatus,
+  getHotelOrderType,
+  getHotelRoomType,
+} from "../../../../utils/tools";
+import { date, useQuasar } from "quasar";
+import svgIcon from "../../../global/svg-icon.vue";
 
 export default defineComponent({
   components: { svgIcon },
   setup(props) {
-    const qDateProxy = ref(null) as any
-    const $q = useQuasar()
-
+    const qDateProxy = ref(null) as any;
+    const $q = useQuasar();
+    const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
     const data = reactive({
       status: [] as Array<StandardStatus>,
       cancelStatus: {} as StandardStatus | undefined,
-      dateRangeFormat: '',
+      dateRangeFormat: "",
       dateRange: {} as any,
       rooms: [] as Array<RoomType>,
       orderTypes: [] as Array<OrderType>,
-      canHide: false
-    })
-    const realSearch = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any
-    const search = reactive(JSON.parse(JSON.stringify(realSearch)))
+      canHide: false,
+    });
+    const realSearch = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any;
+    const search = reactive(JSON.parse(JSON.stringify(realSearch)));
     const methods = {
       initStatus() {
-        let allStatus = getHotelOrderStatus()
+        let allStatus = getHotelOrderStatus();
         data.status = allStatus.filter((x: StandardStatus) => {
-          return x.StatusId != 3
-        })
+          return x.StatusId != 3;
+        });
         data.cancelStatus = allStatus.find((x: StandardStatus) => {
-          return x.StatusId == 3
-        })
-        data.rooms = getHotelRoomType(true)
-        data.orderTypes = getHotelOrderType(true)
+          return x.StatusId == 3;
+        });
+        data.rooms = getHotelRoomType(true);
+        data.orderTypes = getHotelOrderType(true);
       },
       optionsFn(cd: any) {
-        return cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
+        return (
+          cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD")
+        );
       },
       dateRangeHandler(e: any) {
-        search.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`
-        search.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `
-        data.dateRangeFormat = `${search.StartTime} - ${search.EndTime} `
-        if (qDateProxy.value) qDateProxy.value.hide()
+        search.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`;
+        search.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `;
+        data.dateRangeFormat = `${search.StartTime} - ${search.EndTime} `;
+        if (qDateProxy.value) qDateProxy.value.hide();
       },
       setQueryHandler() {
-        realSearch.OrderId = search.OrderId
-        realSearch.RoomType = search.RoomType
-        realSearch.StartTime = search.StartTime
-        realSearch.EndTime = search.EndTime
-        realSearch.OrderStatus = search.OrderStatus
-        realSearch.OrderNo = search.OrderNo
-        realSearch.OrderType = search.OrderType
-        realSearch.TCNum = search.TCNum
-        realSearch.ContactName = search.ContactName
-        realSearch.ContactNumber = search.ContactName
-        console.log(realSearch)
+        realSearch.OrderId = search.OrderId;
+        realSearch.RoomType = search.RoomType;
+        realSearch.StartTime = search.StartTime;
+        realSearch.EndTime = search.EndTime;
+        realSearch.OrderStatus = search.OrderStatus;
+        realSearch.OrderNo = search.OrderNo;
+        realSearch.OrderType = search.OrderType;
+        realSearch.TCNum = search.TCNum;
+        realSearch.ContactName = search.ContactName;
+        realSearch.ContactNumber = search.ContactName;
+        console.log(realSearch);
       },
       setOrderStatus(statusId: number) {
-        realSearch.OrderStatus = statusId
-      }
-    }
+        realSearch.OrderStatus = statusId;
+      },
+    };
 
     const searchCnt = computed(() => {
-      let setCnt = 0
+      let setCnt = 0;
       if ($q.platform.is.mobile) {
-        if (search.OrderStatus > 0) setCnt++
-        if (search.StartTime.length > 0) setCnt++
-        if (search.OrderNo > 0) setCnt++
+        if (search.OrderStatus > 0) setCnt++;
+        if (search.StartTime.length > 0) setCnt++;
+        if (search.OrderNo > 0) setCnt++;
       }
-      if (search.OrderId>0) setCnt++
-      if (search.RoomType > 0) setCnt++
-      if (search.OrderType > 0) setCnt++
-      if (search.OrderType == 1 && search.ContactName.length > 0) setCnt++
-      if (search.OrderType == 2 && search.TCNum.length > 0) setCnt++
-      return setCnt
-    })
+      if (search.OrderId > 0) setCnt++;
+      if (search.RoomType > 0) setCnt++;
+      if (search.OrderType > 0) setCnt++;
+      if (search.OrderType == 1 && search.ContactName.length > 0) setCnt++;
+      if (search.OrderType == 2 && search.TCNum.length > 0) setCnt++;
+      return setCnt;
+    });
 
-    methods.initStatus()
+    methods.initStatus();
     return {
       ...toRefs(data),
       ...methods,
       search,
-      searchCnt
-    }
-  }
-})
+      searchCnt,
+      b2bUserInfo,
+    };
+  },
+});
 </script>
 
-<style>
-
-</style>
+<style></style>

src/components/layout/userInfo.vue

 <template>
-  <q-card flat class="bg-white q-pa-none q-py-sm" style="width: 275px; shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)">
+  <q-card
+    flat
+    class="bg-white q-pa-none q-py-sm"
+    style="width: 275px; shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)"
+  >
     <div class="q-px-sm">
       <div class="q-pa-sm row">
         <q-avatar size="50px" rounded class="bg-blue-2 cursor-pointer q-mr-md">
           <q-img :src="user.photo" v-if="user?.photo" mode="cover" />
-          <span class="text-primary text-h6" v-else>{{ user?.name.substring(0, 1) }}</span>
+          <span class="text-primary text-h6" v-else>{{
+            user?.name.substring(0, 1)
+          }}</span>
         </q-avatar>
         <div class="col column">
           <div class="col row items-center">
             <span class="text-weight-bold text-subtitle1 q-mr-md">{{ user?.name }}</span>
-            <span class="bg-green-11 text-green-14 rounded-borders q-px-sm">{{$t('verified')}}</span>
+            <span class="bg-green-11 text-green-14 rounded-borders q-px-sm">{{
+              $t("verified")
+            }}</span>
           </div>
           <div class="f12 text-grey-6 f12">{{ user?.account }}</div>
         </div>
@@ -18,110 +26,126 @@
     <q-separator color="grey-3" class="q-my-sm" />
     <q-list class="q-px-md text-subtitle2">
       <q-item clickable v-ripple class="rounded-borders lang-demo">
-        <q-item-section @click="goUrl('/personal')">{{ $t('userMenu.mypro') }}</q-item-section>
-      </q-item>
-      <q-item clickable v-ripple class="rounded-borders lang-demo">
-        <q-item-section>
-          <div class="row items-center">
-            <div class="q-mr-md">{{ $t('userMenu.myfinace') }}</div>
-            <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" label="3" />
-          </div>
-        </q-item-section>
-      </q-item>
-      <q-item clickable v-ripple class="rounded-borders lang-demo">
-        <q-item-section>{{ $t('userMenu.fapiao') }}</q-item-section>
-      </q-item>
-      <q-item clickable v-ripple class="rounded-borders lang-demo">
-        <q-item-section @click="goUrl('/passbook')">{{ $t('v104.passbook.pageTitle') }}</q-item-section>
+        <q-item-section @click="goUrl('/personal')">{{
+          $t("userMenu.mypro")
+        }}</q-item-section>
       </q-item>
+      <template v-if="user && user.groupId == 2">
+        <q-item clickable v-ripple class="rounded-borders lang-demo">
+          <q-item-section>
+            <div class="row items-center">
+              <div class="q-mr-md">{{ $t("userMenu.myfinace") }}</div>
+              <q-badge
+                rounded
+                class="din bg-red-2 text-red-14 text-weight-bold"
+                label="3"
+              />
+            </div>
+          </q-item-section>
+        </q-item>
+        <q-item clickable v-ripple class="rounded-borders lang-demo">
+          <q-item-section>{{ $t("userMenu.fapiao") }} {{ user }}</q-item-section>
+        </q-item>
+        <q-item clickable v-ripple class="rounded-borders lang-demo">
+          <q-item-section @click="goUrl('/passbook')">{{
+            $t("v104.passbook.pageTitle")
+          }}</q-item-section>
+        </q-item>
+      </template>
     </q-list>
 
     <q-separator color="grey-3" class="q-my-sm" />
     <q-list class="q-px-md text-subtitle2">
       <q-item clickable v-ripple class="rounded-borders lang-demo">
         <q-item-section>
-            <div class="row">
-                <div class="col">{{ $t('userMenu.lang') }}</div>
-                <div class="lang-box bg-grey-2 q-px-sm rounded-borders">
-                    <span>{{currentLang.langName}}</span>
-                    <q-popup-proxy class="no-shadow">
-                        <q-card class="q-pa-sm" flat dark>
-                            <q-list>
-                                <q-item class="rounded-borders" clickable v-ripple v-for="(x,i) in langs"  @click="getLanguage(x)">
-                                    <q-item-section>
-                                        <div class="row">
-                                            <div class="f12 dark col">{{x.langName}}</div>
-                                        </div>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-card>
-                    </q-popup-proxy>
-                </div>
+          <div class="row">
+            <div class="col">{{ $t("userMenu.lang") }}</div>
+            <div class="lang-box bg-grey-2 q-px-sm rounded-borders">
+              <span>{{ currentLang.langName }}</span>
+              <q-popup-proxy class="no-shadow">
+                <q-card class="q-pa-sm" flat dark>
+                  <q-list>
+                    <q-item
+                      class="rounded-borders"
+                      clickable
+                      v-ripple
+                      v-for="(x, i) in langs"
+                      @click="getLanguage(x)"
+                    >
+                      <q-item-section>
+                        <div class="row">
+                          <div class="f12 dark col">{{ x.langName }}</div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </q-popup-proxy>
             </div>
+          </div>
         </q-item-section>
       </q-item>
       <q-item clickable v-ripple class="rounded-borders lang-demo" @click="signOut">
-        <q-item-section>{{ $t('userMenu.signOut') }}</q-item-section>
+        <q-item-section>{{ $t("userMenu.signOut") }}</q-item-section>
       </q-item>
     </q-list>
   </q-card>
 </template>
 
 <script lang="ts">
-  import { useRouter } from 'vue-router';
-import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
+import { useRouter } from "vue-router";
+import { defineComponent, ref, reactive, toRefs, provide } from "vue";
 import { getLangs } from "../../utils/tools";
-import { SitLang } from '../../@types';
-import { useI18n } from 'vue-i18n'
-import { dispatchAction } from '../../store/utils';
-import { UserActionsType } from '../../store/modules/user/actions';
+import { SitLang } from "../../@types";
+import { useI18n } from "vue-i18n";
+import { dispatchAction } from "../../store/utils";
+import { UserActionsType } from "../../store/modules/user/actions";
 export default defineComponent({
-  name: 'user-info',
+  name: "user-info",
   props: {
     user: {
       type: Object,
-      require: true
-    }
+      require: true,
+    },
   },
   setup(props) {
     const $router = useRouter();
-    const {locale,t } = useI18n();
-    const data=reactive({
-        currentLang: {} as SitLang,
-        langs:[] as SitLang[],
-    })
-    data.langs=getLangs()
-    if(data.langs && data.langs.length>0){
-      data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {};
+    const { locale, t } = useI18n();
+    const data = reactive({
+      currentLang: {} as SitLang,
+      langs: [] as SitLang[],
+    });
+    data.langs = getLangs();
+    if (data.langs && data.langs.length > 0) {
+      data.currentLang = data.langs.find((x) => x.langLocale == locale.value) ?? {};
     }
 
     // 切换语言
     const methods = {
-        goUrl(url:string){
-          $router.push({ path:url})
-        },
-        getLanguage (val:SitLang) {
-            locale.value = val.langLocale??''
-            data.currentLang=val
-            localStorage.setItem('lanuage', val.langLocale??'')
-            window.location.reload()
-        },
-        signOut(){
-            dispatchAction<UserActionsType>('user', 'setUserSignout', null)
-            window.location.reload()
-        }
-    }
-    return {...toRefs(data),...methods}
-  }
-})
+      goUrl(url: string) {
+        $router.push({ path: url });
+      },
+      getLanguage(val: SitLang) {
+        locale.value = val.langLocale ?? "";
+        data.currentLang = val;
+        localStorage.setItem("lanuage", val.langLocale ?? "");
+        window.location.reload();
+      },
+      signOut() {
+        dispatchAction<UserActionsType>("user", "setUserSignout", null);
+        window.location.reload();
+      },
+    };
+    return { ...toRefs(data), ...methods };
+  },
+});
 </script>
 
 <style>
-    .lang-demo:hover .lang-box{
-        background: unset !important;
-    }
-    .lang-demo:hover .q-item__section{
-        color:var(--q-primary) !important;
-    }
+.lang-demo:hover .lang-box {
+  background: unset !important;
+}
+.lang-demo:hover .q-item__section {
+  color: var(--q-primary) !important;
+}
 </style>