sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flat: 视频版本0.1

Browse Source
This commit is contained in:
史典卓
2025-06-26 08:56:42 +08:00
parent 857dedad01
commit 36798d3054
28 changed files with 1437 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/tabbar/midell-box.vue
View File

@@ -1,7 +1,13 @@
<template>
<view class="tabbar_container">
<view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
<view class="item-top" :class="[item.centerItem ? 'center-item-img' : '']">
<view
class="item-top"
:class="[
item.centerItem ? 'center-item-img ' : '',
item.centerItem && currentItem === item.id ? 'rubberBand animated' : '',
]"
>
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
</view>
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
@@ -37,8 +43,8 @@ export default {
id: 2,
text: '',
path: '/pages/chat/chat',
iconPath: '../../static/tabbar/logo2copy.png',
selectedIconPath: '../../static/tabbar/logo2copy.png',
iconPath: '../../static/tabbar/logo3.png',
selectedIconPath: '../../static/tabbar/logo3.png',
centerItem: true,
},
{
@@ -84,17 +90,18 @@ export default {
<style lang="scss" scoped>
.tabbar_container {
background-color: #ffffff;
position: fixed;
bottom: 0rpx;
left: 0rpx;
width: 100%;
height: 126rpx;
// box-shadow: 0 0 5px #999;
height: 88rpx;
display: flex;
align-items: center;
padding: 5rpx 0;
padding-bottom: env(safe-area-inset-bottom);
z-index: 998;
overflow: hidden;
// position: fixed;
// bottom: 0rpx;
// left: 0rpx;
// box-shadow: 0 0 5px #999;
// padding-bottom: env(safe-area-inset-bottom);
// z-index: 998;
.tabbar_item {
width: 33.33%;
height: 100rpx;
@@ -120,12 +127,12 @@ export default {
}
}
.center-item-img {
position: absolute;
top: 0rpx;
left: 50%;
transform: translate(-50%, 0);
width: 96rpx !important;
height: 96rpx !important;
// position: absolute;
// top: 0rpx;
// left: 50%;
// transform: translate(-50%, 0);
width: 108rpx !important;
height: 98rpx !important;
}
.item-active {
color: #256bfa;