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

<template>
    <view class="app-container">
        <view class="msg-AI">AI+就业服务程序</view>
        <view class="msg-tab">
            <view class="msg-tab-item" :class="{ actived: state.current === 0 }" @click="seemsg(0)">全部</view>
            <view class="msg-tab-item" :class="{ actived: state.current === 1 }" @click="seemsg(1)">未读</view>
        </view>
        <view class="msg-list">
            <swiper class="swiper" :current="state.current" @change="changeSwiperMsgType">
                <swiper-item class="list">
                    <view class="list-card">
                        <view class="card-img">
                            <image class="card-img-flame" src="/static/icon/recommendday.png"></image>
                        </view>
                        <view class="card-info">
                            <view class="info-title">今日推荐</view>
                            <view class="info-text">这里有9个职位很适合你，快来看看吧</view>
                        </view>
                        <view class="card-time">刚才</view>
                    </view>
                </swiper-item>
                <swiper-item class="list">
                    <view class="list-card">
                        <view class="card-img">
                            <image class="card-img-flame" src="/static/icon/recommendday.png"></image>
                        </view>
                        <view class="card-info">
                            <view class="info-title">今日推荐</view>
                            <view class="info-text">这里有9个职位很适合你，快来看看吧</view>
                        </view>
                        <view class="card-time">刚才</view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <!-- 自定义tabbar -->
        <!-- <tabbar-custom :currentpage="3"></tabbar-custom> -->
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const state = reactive({
    current: 0,
    all: [{}],
});

onLoad(() => {});

// 查看消息类型
function changeSwiperMsgType(e) {
    const currented = e.detail.current;
    state.current = currented;
}
function seemsg(index) {
    state.current = index;
}
</script>

<style lang="stylus" scoped>
.app-container
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
    display: flex;
    flex-direction: column;
    .msg-AI
        height: 42rpx;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 35rpx;
        color: #FFFFFF;
        line-height: 41rpx;
        padding: 85rpx 0 0 30rpx;
    .msg-tab
        padding: 85rpx 0 0 30rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #D9D9D9;
        .msg-tab-item
            margin-right: 40rpx;
        .actived
            font-size: 28rpx;
            color: #FFFFFF;
            text-shadow: 0rpx 14rpx 14rpx rgba(0,0,0,0.25);
    .msg-list
        flex: 1;
        overflow: hidden;
        .swiper
            height: 100%;
            .list
                display: flex;
                flex-direction: column;
                .list-card
                    height: calc(119rpx - 26rpx - 26rpx);
                    width: calc(100% - 36rpx - 36rpx - 23rpx - 23rpx);
                    background: #FFFFFF;
                    border-radius: 17rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 26rpx 36rpx;
                    margin: 36rpx 23rpx;
                    .card-img
                        width: 63rpx;
                        height: 63rpx;
                        background: #D9D9D9;
                        border-radius: 50%
                        display: grid;
                        place-items: center;
                        margin-right: 30rpx;
                        .card-img-flame
                            width: 100%;
                            height: 100%
                    .card-info
                        flex: 1;
                        display: flex;
                        align-items: flex-start;
                        flex-direction: column;
                        .info-title
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                        .info-text
                            font-size: 17rpx;
                            color: #606060;
                    .card-time
                        font-size: 17rpx;
                        color: #606060;
</style>