Browse Source

tab默认第二个页面

dev_230517
zhangzhiyi 2 years ago
parent
commit
55e1f2ddfa
  1. 22
      src/view/tabs/home-screen.vue
  2. 3
      src/view/tabs/tabs.vue

22
src/view/tabs/home-screen.vue

@ -17,7 +17,7 @@
<div class="message"> <div class="message">
<img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()"> <img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()">
<!-- 消息数量提醒 --> <!-- 消息数量提醒 -->
<div></div> <div class="message-confim" v-show="messageNum > 0">{{ messageNum }}</div>
</div> </div>
<div class="backups"> <div class="backups">
<img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img"> <img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img">
@ -45,7 +45,7 @@ const minutes = ref('--');
/** 获取时间的定时器 */ /** 获取时间的定时器 */
const getTimeTimer = ref(); const getTimeTimer = ref();
/** 信息的数量 */ /** 信息的数量 */
const messageNum = ref(0); const messageNum = ref(1);
onMounted(() => { onMounted(() => {
imgs.value = document.getElementById('imgs'); imgs.value = document.getElementById('imgs');
@ -156,8 +156,24 @@ const goMessagePage = () => {
height: 72px; height: 72px;
} }
.message-img { .message {
margin-right: 34px; margin-right: 34px;
position: relative;
.message-confim {
position: absolute;
top: -5px;
right: -5px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #D65659;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
font-size: 20px;
}
} }
} }
} }

3
src/view/tabs/tabs.vue

@ -82,7 +82,8 @@ const initSwiper = () => {
}, // }, //
touchStartPreventDefault: false, touchStartPreventDefault: false,
effect: "fade", // effect: "fade", //
resistanceRatio: 0 resistanceRatio: 0,
initialSlide: 1, //
}); });
}; };

Loading…
Cancel
Save