ks-app-employment-service/pages/index/index.vue

<template>
    <view class="app-custom-root">
        <view class="app-container">
            <!-- #ifdef H5 -->
            <!-- 自定义导航栏 -->
            <view class="custom-nav" :style="{paddingTop: statusBarHeight + 'px'}">
                <view class="nav-content">
                    <view class="nav-back" @click="back"><text class="nav-back-text">‹</text></view>
                    <view class="nav-title">喀什智慧就业平台</view>
                    <view class="nav-placeholder"></view>
                </view>
            </view>
            <!-- #endif -->
            <!-- 主体内容区域 -->
            <view class="container-main">
                <IndexOne @onShowTabbar="changeShowTabbar" />
            </view>

            <!-- 自定义tabbar -->
            <CustomTabBar :currentPage="0" />
        </view>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import IndexOne from './components/index-one.vue';
// import IndexTwo from './components/index-two.vue';
import { storeToRefs } from 'pinia';
import { useReadMsg } from '@/stores/useReadMsg';
import useUserStore from '@/stores/useUserStore';
import { tabbarManager } from '@/utils/tabbarManager';
const { unreadCount } = storeToRefs(useReadMsg());
const userStore = useUserStore();

// 状态栏高度（用于自定义导航栏）
const statusBarHeight = ref(0);
try {
    const sysInfo = uni.getSystemInfoSync();
    statusBarHeight.value = sysInfo.statusBarHeight || 0;
} catch(e) {}

// 返回按钮功能
function back() {
    // uni.navigateBack({
    //     delta: 1
    // });
    window.location.href = 'https://www.xjksly.cn/mechine-single-vue/';
}

onLoad((options) => {
    // useReadMsg().fetchMessages();
});

onShow(() => {
    // 更新自定义tabbar选中状态
    tabbarManager.updateSelected(0);
});
</script>

<style lang="stylus" scoped>
.app-custom-root {
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: calc(100% - var(--window-bottom));
    overflow: hidden;
}
.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    .container-header {
        height: calc(88rpx - 14rpx);
        text-align: center;
        line-height: calc(88rpx - 14rpx);
        font-size: 32rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16rpx 44rpx 36rpx 44rpx;
        background: url('@/static/icon/msgTopbg.png') 0 0 no-repeat;
        background-size: 100% 100%;
        .header-title {
            color: #000000;
            font-weight: bold;
        }
        .header-btnLf {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: calc(60rpx * 3);
            font-weight: 500;
            font-size: 40rpx;
            color: #696969;
            margin-right: 44rpx;
            position: relative;
            .btns-wd{
                position: absolute
                top: 2rpx;
                right: 2rpx
                width: 16rpx;
                height: 16rpx;
                background: #F73636;
                border-radius: 50%;
                border: 4rpx solid #EEEEFF;
            }
        }
        .active {
            font-weight: 600;
            font-size: 40rpx;
            color: #000000;
        }
    }
}

.container-main {
    flex: 1;
    overflow: hidden;
    background-color: #f4f4f4;
}
.main-scroll {
    width: 100%
    height: 100%;
}
.scrollmain{
    padding: 28rpx
}
.swiper
    height: 100%;
    width: 100%
    .list
        width: 100%
        display: flex;
        flex-direction: column;

// mask:
.maskFristEntry
    position: fixed;
    // right: 20rpx;
    // bottom: calc(50% - 200rpx);
    height: 100vh
    width: 100vw
    background: rgba(0,0,0,0.3)
    .entry-content
        display: flex;
        align-items: center
        position: absolute
        left: 50%
        top: 35%
        transform: translate(-50%, -50%)
        flex-direction: column
        background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
        background-size: 100% 100%;
        width: 480rpx
        height: 584rpx
        // padding-left: 80rpx
        .text1
            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            margin-top: 370rpx
            font-size: 36rpx
            background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text; /* 有些浏览器兼容用 */
            text-fill-color: transparent;
            padding-left: 28rpx
        .text2
            padding-left: 28rpx
            margin-top: 8rpx
            font-size: 20rpx;
            color: #666666;
            text-align: center;
        .indicateArrow
            height: 76rpx
            width: 68rpx
        .indicatefristEntry
            width: 244rpx
            height: 244rpx
        .goExperience
            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            margin-left: 28rpx
            margin-top: 28rpx
            width: 160rpx;
            height: 60rpx;
            background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            font-size: 28rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 60rpx
        .maskFristEntry-Close
            position: absolute;
            left: calc(50% - 10rpx);
            bottom: -130rpx
            width: 42rpx
            height: 42rpx
            background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
            border-radius: 50%;
        .maskFristEntry-Close::before
            position: absolute;
            left: calc( 50% - 2rpx)
            top: calc( 50% - 10rpx)
            transform: rotate(45deg);
            content: ''
            background: #FFFFFF
            width: 4rpx
            height: 20rpx
        .maskFristEntry-Close::after
            position: absolute;
            left: calc( 50% - 2rpx)
            top: calc( 50% - 10rpx)
            transform: rotate(-45deg);
            content: ''
            background: #FFFFFF
            width: 4rpx
            height: 20rpx

/* 自定义导航栏样式 */
.custom-nav
    background: #107AFD
    width: 100%
    .nav-content
        height: 140rpx
        display: flex
        align-items: center
        justify-content: space-between
        padding: 0 40rpx
        .nav-back
            width: 120rpx
            height: 200rpx
            display: flex
            align-items: center
            justify-content: center
            color: #fff
            font-weight: 300
            .nav-back-text
                font-size: 80rpx
                line-height: 1
        .nav-title
            color: #fff
            font-size: 52rpx
            font-weight: bold
        .nav-placeholder
            width: 120rpx
</style>