update

src/components/MessageCard.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {computed} from 'vue';
+import messageIcon from "../static/icons/messageIcon.png";
+import XActionsheet from "./XActionsheet.vue";
+
+const itemList = computed(() => {
+    const item = [];
+    true ?
+        item.push({text: '标记未读', type: 0}) :
+        item.push({text: '标记已读', type: 1});
+    return item;
+})
+const {contextRow} = defineProps({
+    contextRow: {
+        type: String,
+        default: 'ellipsis-1'
+    }
+});
+
+const selectActionsheet = (e) => {
+    console.log(e);
+}
+</script>
+
+<template>
+    <x-actionsheet
+        @success="selectActionsheet"
+        :itemList="itemList">
+        <view
+            class="!py-[30rpx] !px-[24rpx] bg-[#fff] rounded-[8rpx] !flex items-center gap-[20rpx] overflow-hidden relative !mb-[20rpx]">
+            <image class="!size-[72rpx] flex-shrink-0" mode="aspectFill" :src="messageIcon"></image>
+            <view class="flex-grow !flex flex-col gap-[12rpx]">
+                <view class="!flex justify-between items-center">
+                    <view class="bh">任务编号: DF12122</view>
+                    <view class="time">2024-01-26 14:00</view>
+                </view>
+                <view :class="['context', contextRow]">
+                    商家:您的回填数据1由于***未通过，请按照文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档中操作
+                </view>
+            </view>
+
+            <view class="status">置顶</view>
+        </view>
+    </x-actionsheet>
+</template>
+
+<style lang="scss" scoped>
+.status {
+    padding: 5rpx 16rpx;
+    background: rgb(253, 244, 191);
+    border-bottom-left-radius: 8rpx;
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: rgb(162, 109, 10);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: center;
+}
+
+.context {
+    color: rgb(78, 89, 105);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.bh {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.time {
+    color: rgb(134, 144, 156);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+</style>

src/components/XActionsheet.vue

@@ -0,0 +1,28 @@
+<script setup>
+import {ref} from "vue";
+
+const emits = defineEmits(['success']);
+const show = ref(false);
+
+const success = (e) => {
+    emits('success', e);
+}
+</script>
+
+<template>
+    <view @longpress="show=true">
+        <slot></slot>
+    </view>
+
+    <tui-actionsheet
+        v-bind="$attrs"
+        :show="show"
+        @click="success"
+        @cancel="show=false">
+
+    </tui-actionsheet>
+</template>
+
+<style scoped>
+
+</style>

src/components/XInput.vue

@@ -1,8 +1,12 @@
 <script setup>
-const {placeholder} = defineProps({
+const {placeholder, height} = defineProps({
     placeholder: {
         type: String,
         default: "",
+    },
+    height: {
+        type: String,
+        default: "96rpx",
     }
 });
 
@@ -10,7 +14,8 @@ const modelValue = defineModel();
 </script>
 
 <template>
-    <view class="x-input h-[96rpx] rounded-[12rpx] !flex items-center px-[32rpx]">
+    <view class="x-input rounded-[12rpx] !flex items-center px-[32rpx]">
+        <slot name="prefix"></slot>
         <input v-model="modelValue" :placeholder="placeholder"></input>
         <slot name="suffix"></slot>
     </view>
@@ -19,6 +24,7 @@ const modelValue = defineModel();
 <style lang="scss" scoped>
 .x-input {
     background-color: #F2F3F5;
+    height: v-bind(height);
 
     :deep(input) {
         background-color: rgba(0,0,0,0);