hookehuyr

✨ feat(组件): 侧边悬浮快捷方式新增回首页功能

1 <template> 1 <template>
2 - <div @click="handle"> 2 + <div>
3 - <img class="icon-me" referrerpolicy="no-referrer" :src="icon_me" /> 3 + <img @click="toHome" class="icon-home" referrerpolicy="no-referrer" :src="icon_home" />
4 + <img @click="toMe" class="icon-me" referrerpolicy="no-referrer" :src="icon_me" />
4 </div> 5 </div>
5 </template> 6 </template>
6 7
7 <script setup> 8 <script setup>
8 import icon_me from '@images/icon-my@2x.png' 9 import icon_me from '@images/icon-my@2x.png'
10 +import icon_home from '@images/icon-home@2x.png'
11 +
9 import { ref, reactive, onMounted } from 'vue' 12 import { ref, reactive, onMounted } from 'vue'
10 const props = defineProps({ 13 const props = defineProps({
11 type: String 14 type: String
...@@ -30,18 +33,34 @@ export default { ...@@ -30,18 +33,34 @@ export default {
30 33
31 }, 34 },
32 methods: { 35 methods: {
33 - 36 + toHome () {
37 + // 返回首页
38 + this.$router.push({
39 + path: '/client/index'
40 + });
41 + },
42 + toMe () {
43 + alert('me')
44 + }
34 } 45 }
35 } 46 }
36 </script> 47 </script>
37 48
38 <style lang="less" scoped> 49 <style lang="less" scoped>
50 + .icon-home {
51 + z-index: 169;
52 + position: fixed;
53 + right: 2rem;
54 + bottom: 14rem;
55 + width: 3rem;
56 + height: 3rem;
57 + }
39 .icon-me { 58 .icon-me {
40 z-index: 169; 59 z-index: 169;
41 position: fixed; 60 position: fixed;
42 right: 2rem; 61 right: 2rem;
43 - bottom: 15%; 62 + bottom: 10rem;
44 - width: 44px; 63 + width: 3rem;
45 - height: 44px; 64 + height: 3rem;
46 } 65 }
47 </style> 66 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
85 <my-button @on-click="uploadVideo" type="primary">上传作品</my-button> 85 <my-button @on-click="uploadVideo" type="primary">上传作品</my-button>
86 </div> 86 </div>
87 </div> 87 </div>
88 - <to-me @on-click="gotoMe()"></to-me> 88 + <shortcut-fixed @on-click="gotoMe()"></shortcut-fixed>
89 </div> 89 </div>
90 90
91 <!-- 上传作品时,如果没有实名认证提示弹框 --> 91 <!-- 上传作品时,如果没有实名认证提示弹框 -->
...@@ -123,7 +123,7 @@ import icon_unsubscribe from '@images/icon-dingyue02@2x.png' ...@@ -123,7 +123,7 @@ import icon_unsubscribe from '@images/icon-dingyue02@2x.png'
123 import icon_me from '@images/icon-my@2x.png' 123 import icon_me from '@images/icon-my@2x.png'
124 import icon_notice from '@images/que-tishi@2x.png' 124 import icon_notice from '@images/que-tishi@2x.png'
125 125
126 -import ToMe from '@/components/ToMe/index.vue' 126 +import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
127 import tools from '@/common/tool' 127 import tools from '@/common/tool'
128 import { ref, reactive, onMounted } from 'vue' 128 import { ref, reactive, onMounted } from 'vue'
129 import { useRoute, useRouter } from 'vue-router' 129 import { useRoute, useRouter } from 'vue-router'
......
...@@ -26,14 +26,14 @@ ...@@ -26,14 +26,14 @@
26 </template> 26 </template>
27 </div> 27 </div>
28 <div style="height: 1rem;"></div> 28 <div style="height: 1rem;"></div>
29 - <to-me @on-click="gotoMe()"></to-me> 29 + <shortcut-fixed @on-click="gotoMe()"></shortcut-fixed>
30 </div> 30 </div>
31 </template> 31 </template>
32 32
33 <script setup> 33 <script setup>
34 import MyButton from '@/components/MyButton/index.vue' 34 import MyButton from '@/components/MyButton/index.vue'
35 import BookCard from '@/components/BookCard/index.vue' 35 import BookCard from '@/components/BookCard/index.vue'
36 -import ToMe from '@/components/ToMe/index.vue' 36 +import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
37 37
38 import { ref, reactive, onMounted } from 'vue' 38 import { ref, reactive, onMounted } from 'vue'
39 import { useRoute, useRouter } from 'vue-router' 39 import { useRoute, useRouter } from 'vue-router'
......