feat: 样式调整

src/views/login/index.vue

@@ -30,6 +30,7 @@ import useUserStore from '@/store/user'
 import { Notification, ValidatedError } from '@arco-design/web-vue'
 import { alova } from '@/api/alova-instance'
 import { useRequest } from 'alova'
+import { debounce } from 'lodash'
 
 const loginForm = reactive({
     username: '',
@@ -107,11 +108,11 @@ const getCaptcha = async () => {
 }
 watch(
     () => loginForm.username,
-    (value) => {
+    debounce((value) => {
         if (value) {
             getCaptcha()
         }
-    }
+    }, 500)
 )
 </script>
 <style lang="less" scoped></style>

src/views/remote/contacts/contactsList.vue

 <template>
     <template v-for="(item, index) in data" :key="item.id">
-        <div class="item flex items-center px-4 py-3 rounded cursor-pointer" :class="{ active: chooseContactsItem?.id == item.id }" @click="handleClick(item)">
+        <div class="hover:bg-[var(--color-fill-1)] flex items-center px-4 py-3 rounded cursor-pointer" :class="{ 'bg-fill-bg1': chooseContactsItem?.id == item.id }" @click="handleClick(item)">
             <global-avatar></global-avatar>
             <div class="ml-[9px] inline-block">{{ item.nickname }}</div>
             <div class="flex items-center ml-6">
@@ -57,9 +57,4 @@ onBeforeUnmount(() => {
     setChooseUser(undefined)
 })
 </script>
-<style lang="less" scoped>
-.item.active,
-.item:hover {
-    background-color: var(--color-fill-1);
-}
-</style>
+<style lang="less" scoped></style>

src/views/remote/contacts/contactsListChoose.vue

 <template>
     <a-checkbox-group v-model="checkbox" class="w-full">
         <template v-for="(item, index) in data" :key="item.id">
-            <div class="item flex items-center px-4 py-3 rounded cursor-pointer">
+            <div class="hover:bg-[var(--color-fill-1)] flex items-center px-4 py-3 rounded cursor-pointer">
                 <global-avatar></global-avatar>
                 <div class="ml-[9px] inline-block">{{ item.nickname }}</div>
                 <div class="flex-auto text-right">
@@ -23,9 +23,4 @@ const ps = withDefaults(defineProps<Props>(), {
 })
 const checkbox = defineModel<string[]>()
 </script>
-<style lang="less" scoped>
-.item.active,
-.item:hover {
-    background-color: var(--color-fill-1);
-}
-</style>
+<style lang="less" scoped></style>

src/views/remote/videoCall/videoInfo.vue

@@ -5,11 +5,11 @@
                 {{ videoTitle }}
             </a-typography-paragraph>
             <a-space size="medium">
-                <div class="tool py-[9px] cursor-pointer">
+                <div class="tool py-[9px] bg-fill-bg1">
                     <global-icon icon="view-gallery" :size="12"></global-icon>
                     <span class="ml-1 color-text-2">视图</span>
                 </div>
-                <div class="tool py-[9px] cursor-pointer">
+                <div class="tool py-[9px] bg-fill-bg1">
                     <global-icon icon="fullscreen" :size="16"></global-icon>
                     <span class="ml-1 color-text-2">全屏</span>
                 </div>
@@ -35,7 +35,7 @@ onMounted(function () {
 })
 
 function idChangedHere(id: any) {
-  inCenterUserVideoId.value = id;
+    inCenterUserVideoId.value = id
 }
 
 const userVideoContainerSet = computed(function () {
@@ -56,13 +56,6 @@ const videoTitle = ref('2024-02-17 10:22:23远程协助事件')
     }
 }
 .tool {
-    @apply flex-center px-2 rounded;
-    background-color: var(--color-fill-1);
-}
-.item {
-    @apply flex-center flex-col rounded cursor-pointer;
-    &:hover {
-        background-color: var(--color-fill-2);
-    }
+    @apply flex-center px-2 rounded cursor-pointer;
 }
 </style>