简柏林 / thingskit-front · Commits

Commit ec8416c3e0f695c82b5bf3007058229fe3cb7935

Authored by fengwotao
1 parent 46c4a487

perf: 优化首页登录图标添加tooltip

Inline Side-by-side
Showing 2 changed files with 15 additions and 9 deletions
@@ -68,15 +68,18 @@ @@ -68,15 +68,18 @@
68 <!-- </ACol> --> 68 <!-- </ACol> -->
69 <!-- </ARow> --> 69 <!-- </ARow> -->
70 <Divider class="enter-x"> 70 <Divider class="enter-x">
71 - <div @click="setLoginState(LoginStateEnum.MOBILE)" class="flex justify-center icon-button">  
72 - <mobile-filled :style="{ fontSize: '18px' }" />  
73 - </div> 71 + <Tooltip placement="bottom">
  72 + <template #title>前往手机登录</template>
  73 + <div @click="setLoginState(LoginStateEnum.MOBILE)" class="flex justify-center icon-button">
  74 + <mobile-filled :style="{ fontSize: '18px' }" />
  75 + </div>
  76 + </Tooltip>
74 </Divider> 77 </Divider>
75 </Form> 78 </Form>
76 </template> 79 </template>
77 <script lang="ts" setup> 80 <script lang="ts" setup>
78 import { reactive, ref, unref, computed } from 'vue'; 81 import { reactive, ref, unref, computed } from 'vue';
79 - import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue'; 82 + import { Checkbox, Form, Input, Row, Col, Button, Divider, Tooltip } from 'ant-design-vue';
80 import LoginFormTitle from './LoginFormTitle.vue'; 83 import LoginFormTitle from './LoginFormTitle.vue';
81 import { useI18n } from '/@/hooks/web/useI18n'; 84 import { useI18n } from '/@/hooks/web/useI18n';
82 import { useMessage } from '/@/hooks/web/useMessage'; 85 import { useMessage } from '/@/hooks/web/useMessage';
@@ -29,18 +29,21 @@ @@ -29,18 +29,21 @@
29 </Button> --> 29 </Button> -->
30 </FormItem> 30 </FormItem>
31 <Divider class="enter-x"> 31 <Divider class="enter-x">
32 - <div class="flex justify-center cursor-pointer">  
33 - <div @click="handleBackLogin" class="flex justify-center icon-button">  
34 - <contacts-filled :style="{ fontSize: '18px' }" /> 32 + <Tooltip placement="bottom">
  33 + <template #title>前往账号登录</template>
  34 + <div class="flex justify-center cursor-pointer">
  35 + <div @click="handleBackLogin" class="flex justify-center icon-button">
  36 + <contacts-filled :style="{ fontSize: '18px' }" />
  37 + </div>
35 </div> 38 </div>
36 - </div> 39 + </Tooltip>
37 </Divider> 40 </Divider>
38 </Form> 41 </Form>
39 </template> 42 </template>
40 </template> 43 </template>
41 <script lang="ts" setup> 44 <script lang="ts" setup>
42 import { reactive, ref, computed, unref, toRaw } from 'vue'; 45 import { reactive, ref, computed, unref, toRaw } from 'vue';
43 - import { Form, Input, Button, message, Divider } from 'ant-design-vue'; 46 + import { Form, Input, Button, message, Divider, Tooltip } from 'ant-design-vue';
44 import { CountdownInput } from '/@/components/CountDown'; 47 import { CountdownInput } from '/@/components/CountDown';
45 import LoginFormTitle from './LoginFormTitle.vue'; 48 import LoginFormTitle from './LoginFormTitle.vue';
46 import { useI18n } from '/@/hooks/web/useI18n'; 49 import { useI18n } from '/@/hooks/web/useI18n';