xl-mobile/src/pages/taskDetails/components/ReviewCommunication.vue

<script setup>
import ysq from "../../../static/icons/ysq.png";
import avatar from "../../../static/images/Avatar.png";
import XNoticeBar from "../../../components/XNoticeBar.vue";
import XButton from "../../../components/XButton.vue";
import rback from "../../../static/icons/rout-back.png";
</script>

<template>
    <!--审核沟通-->
    <view class="context">
        <x-notice-bar status="success"></x-notice-bar>

        <view class="chat-box">
            <view class="!flex gap-[12rpx]">
                <image class="!size-[80rpx]" mode="aspectFill" :src="avatar"></image>
                <view class="flex-grow">
                    <view class="time">07月21日 13:42</view>
                    <view class="px-[24rpx] py-[16rpx] bg-[#fff] rounded-[8rpx]">
                        123
                    </view>
                    <view :class="['status', 'read']">
                        未读
                    </view>
                </view>
            </view>

            <view
                class="bg-[#fff] !w-[460rpx] p-[24rpx] rounded-[8rpx] !mx-auto !mt-[24rpx] !flex flex-col gap-[16rpx]">
                <view class="prompt">
                    <image class="!w-[26rpx]" :src="ysq" mode="widthFix"></image>
                    提示：点击下方按钮，快速回复
                </view>
                <view class="prompt-button">
                    我已重新回填
                </view>
                <view class="prompt-button">
                    拒绝修改并放弃任务
                    <view class="!mt-[16rpx] text-[#86909C] test-22r">
                        商家将根据约定扣钱或不结算
                    </view>
                </view>
                <view class="prompt-button">
                    发起申诉
                </view>
            </view>
        </view>

        <view class="p-[24rpx] !pt-0 !flex gap-[22rpx]">
            <x-button class="!w-[220rpx]">
                发起申述
            </x-button>
            <x-button class="flex-grow !flex gap-[16rpx]">
                <image :src="rback" class="!w-[22rpx]" mode="widthFix"></image>
                发起申述
            </x-button>
        </view>
    </view>
</template>

<style scoped lang="scss">
.prompt-button {
    color: var(--primary-color);
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    background-color: #E8F3FF;
    padding: 15rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4rpx;
}

.prompt {
    padding: 18rpx 30rpx;
    background-color: #F2F3F5;
    color: rgb(134, 144, 156);
    font-size: 22rpx;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 18rpx;
}

.status {
    margin-top: 8rpx;
    color: rgb(29, 33, 41);
    font-size: 20rpx;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 8rpx;

    &::before {
        content: '';
        border-radius: 50%;
        display: block;
        width: 24rpx;
        height: 24rpx;

    }
}

.read {
    &::before {
        background-color: var(--primary-color);
    }
}

.unread {
    &::before {
        background-color: var(--warning-color);
    }
}

.context {
    background-color: #F2F3F5;
    width: 100%;
}

.time {
    color: rgb(134, 144, 156);
    font-size: 20rpx;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    margin-bottom: 8rpx;
}

.chat-box {
    box-sizing: border-box;
    padding: 24rpx;
}
</style>