flat: 暂存

2025-04-10 10:59:25 +08:00
parent b98e1d5405
commit 0d2b8ae65f
103 changed files with 461 additions and 189 deletions
--- a/components/tabbar/midell-box.vue
+++ b/components/tabbar/midell-box.vue
@@ -0,0 +1,133 @@
+<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' : '']">
+                <image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
+            </view>
+            <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
+                <text>{{ item.text }}</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            currentItem: 0,
+            tabbarList: [
+                {
+                    id: 0,
+                    text: '首页',
+                    path: '/pages/index/index',
+                    iconPath: '../../static/tabbar/calendar.png',
+                    selectedIconPath: '../../static/tabbar/calendared.png',
+                    centerItem: false,
+                },
+                {
+                    id: 1,
+                    text: '招聘会',
+                    path: '/pages/careerfair/careerfair',
+                    iconPath: '../../static/tabbar/post.png',
+                    selectedIconPath: '../../static/tabbar/posted.png',
+                    centerItem: false,
+                },
+                {
+                    id: 2,
+                    text: '',
+                    path: '/pages/chat/chat',
+                    iconPath: '../../static/tabbar/logo2copy.png',
+                    selectedIconPath: '../../static/tabbar/logo2copy.png',
+                    centerItem: true,
+                },
+                {
+                    id: 3,
+                    text: '消息',
+                    path: '/pages/msglog/msglog',
+                    iconPath: '../../static/tabbar/chat4.png',
+                    selectedIconPath: '../../static/tabbar/chat4ed.png',
+                    centerItem: false,
+                },
+                {
+                    id: 4,
+                    text: '我的',
+                    path: '/pages/mine/mine',
+                    iconPath: '../../static/tabbar/mine.png',
+                    selectedIconPath: '../../static/tabbar/mined.png',
+                    centerItem: false,
+                },
+            ],
+        };
+    },
+    props: {
+        currentpage: {
+            type: Number,
+            required: true,
+            default: 0,
+        },
+    },
+    mounted() {
+        this.currentItem = this.currentpage;
+        uni.hideTabBar();
+    },
+    methods: {
+        changeItem(item) {
+            uni.switchTab({
+                url: item.path,
+            });
+        },
+    },
+};
+</script>
+
+<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;
+    display: flex;
+    align-items: center;
+    padding: 5rpx 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    z-index: 998;
+    .tabbar_item {
+        width: 33.33%;
+        height: 100rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        position: relative;
+        color: #5e5f60;
+        .item-top {
+            width: 44.44rpx;
+            height: 44.44rpx;
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .item-bottom {
+            font-weight: 500;
+            font-size: 22rpx;
+        }
+    }
+}
+.center-item-img {
+    position: absolute;
+    top: 0rpx;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 96rpx !important;
+    height: 96rpx !important;
+}
+.item-active {
+    color: #256bfa;
+}
+</style>