<template>
    <view class="problem-page">
        <view class="history-item" v-for="i in 10" :key="i">
            <view class="item-left">
                <view class="title">贵州人力资源服务业高质量发若</view>
                <view class="time">2024-06-21 12:30</view>
            </view>
            <view class="btn" style="background: #f3f4f8">待回复</view>
        </view>
        <wd-tabbar
            @click="navigateTo()"
            custom-style="display: flex;justify-content: center !important;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">投诉建议</view>
        </wd-tabbar>
    </view>
</template>

<script setup>
/**
 * 跳转详情
 */
const navigateTo = () => {
    xma.navigateTo({
        url: `/pages/user/feedbackDetails/index`
    });
};
onPullDownRefresh(() => {});
// 触底加载
onReachBottom(() => {});
</script>

<style lang="scss" scoped>
page {
    background: #f3f4f8;
}
.problem-page {
    width: 750rpx;
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    .history-item {
        background: #fff;
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx;
        display: flex;
        justify-content: space-between;
        .item-left {
            display: flex;
            flex-direction: column;
            .title {
                font-size: 32rpx;
                color: #1b2026;
                max-width: 400rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .time {
                font-size: 24rpx;
                color: #77818f;
                margin-top: 16rpx;
            }
        }
        .btn {
            box-sizing: border-box;
            padding: 0rpx 32rpx;
            display: flex;
            height: 60rpx;
            align-items: center;
            font-size: 24rpx;
            flex-shrink: 0;
        }
    }
    .foot-btn {
        position: fixed;
        width: 622rpx;
        height: 80rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1f86ff;
        color: #fff;
    }
}
</style>
