hookehuyr

✨ feat(快捷访问控件): 新增自定义sytle,z-index提高

1 <!-- 1 <!--
2 * @Date: 2022-05-11 11:19:14 2 * @Date: 2022-05-11 11:19:14
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-06-24 09:19:27 4 + * @LastEditTime: 2022-06-24 13:19:43
5 * @FilePath: /tswj/src/components/ShortcutFixed/index.vue 5 * @FilePath: /tswj/src/components/ShortcutFixed/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="shortcut-page"> 9 + <div class="shortcut-page" :style="customStyle">
10 <van-image v-if="isHome" class="icon-box" :src="icon_home" @click="toHome" /> 10 <van-image v-if="isHome" class="icon-box" :src="icon_home" @click="toHome" />
11 <van-image v-if="isMe" class="icon-box" :src="icon_me" @click="toMe" /> 11 <van-image v-if="isMe" class="icon-box" :src="icon_me" @click="toMe" />
12 <van-image v-if="isRank" class="icon-box" :src="icon_rank" @click="toRank" /> 12 <van-image v-if="isRank" class="icon-box" :src="icon_rank" @click="toRank" />
...@@ -21,7 +21,7 @@ import { icon_me, icon_home, icon_rank } from '@/utils/generateIcons.js' ...@@ -21,7 +21,7 @@ import { icon_me, icon_home, icon_rank } from '@/utils/generateIcons.js'
21 <script> 21 <script>
22 // FIXME: VUE2写法 22 // FIXME: VUE2写法
23 export default { 23 export default {
24 - props: ['type', 'item'], 24 + props: ['type', 'item', 'customStyle'],
25 data() { 25 data() {
26 return { 26 return {
27 userType: Cookies.get('userType') ? Cookies.get('userType') : '' 27 userType: Cookies.get('userType') ? Cookies.get('userType') : ''
...@@ -97,7 +97,7 @@ export default { ...@@ -97,7 +97,7 @@ export default {
97 bottom: 18rem; 97 bottom: 18rem;
98 right: 1rem; 98 right: 1rem;
99 overflow: auto; 99 overflow: auto;
100 - z-index: 169; 100 + z-index: 999;
101 width: 3rem; 101 width: 3rem;
102 } 102 }
103 .icon-box { 103 .icon-box {
......
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
49 </div> 49 </div>
50 <div style="height: 5rem" /> 50 <div style="height: 5rem" />
51 <donate-bar :donate-type="donateType">爱心助力</donate-bar> 51 <donate-bar :donate-type="donateType">爱心助力</donate-bar>
52 - <shortcut-fixed :type="USER_ROLE.CLIENT" :item="shortcutItem" /> 52 + <shortcut-fixed :type="USER_ROLE.CLIENT" :item="shortcutItem" :custom-style="customStyle" />
53 </div> 53 </div>
54 </template> 54 </template>
55 55
...@@ -82,6 +82,9 @@ if (isClient) { ...@@ -82,6 +82,9 @@ if (isClient) {
82 } else { 82 } else {
83 shortcutItem.value = ['me'] 83 shortcutItem.value = ['me']
84 } 84 }
85 +const customStyle = {
86 + bottom: '8rem'
87 +}
85 88
86 const userType = Cookies.get('userType') 89 const userType = Cookies.get('userType')
87 // 判断是访客进入还是幼儿园进入 90 // 判断是访客进入还是幼儿园进入
......