update

src/pages/taskDetails/components/ReviewCommunication.vue

@@ -1,11 +1,142 @@
 <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>