简柏林 / 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 68 <!-- </ACol> -->
69 69 <!-- </ARow> -->
70 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 77 </Divider>
75 78 </Form>
76 79 </template>
77 80 <script lang="ts" setup>
78 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 83 import LoginFormTitle from './LoginFormTitle.vue';
81 84 import { useI18n } from '/@/hooks/web/useI18n';
82 85 import { useMessage } from '/@/hooks/web/useMessage';
... ...
... ... @@ -29,18 +29,21 @@
29 29 </Button> -->
30 30 </FormItem>
31 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 38 </div>
36   - </div>
  39 + </Tooltip>
37 40 </Divider>
38 41 </Form>
39 42 </template>
40 43 </template>
41 44 <script lang="ts" setup>
42 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 47 import { CountdownInput } from '/@/components/CountDown';
45 48 import LoginFormTitle from './LoginFormTitle.vue';
46 49 import { useI18n } from '/@/hooks/web/useI18n';
... ...