100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<script setup>
|
|
import {computed} from 'vue';
|
|
import messageIcon from "../static/icons/messageIcon.png";
|
|
import XActionsheet from "./XActionsheet.vue";
|
|
import OpenTypeFun from "./OpenTypeFun.js";
|
|
|
|
const itemList = computed(() => {
|
|
const item = [];
|
|
true ?
|
|
item.push({text: '标记未读', type: 0}) :
|
|
item.push({text: '标记已读', type: 1});
|
|
return item;
|
|
})
|
|
const {contextRow, type, data} = defineProps({
|
|
contextRow: {
|
|
type: String,
|
|
default: 'ellipsis-1'
|
|
},
|
|
type: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
const selectActionsheet = (e) => {
|
|
console.log(e);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<x-actionsheet
|
|
@success="selectActionsheet"
|
|
:itemList="itemList">
|
|
<view
|
|
@click.stop="OpenTypeFun(data)"
|
|
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">{{ type === 0 ? '任务编号: DF12122' : data.title }}</view>
|
|
<view class="time">2024-01-26 14:00</view>
|
|
</view>
|
|
<view :class="['context', contextRow]">
|
|
{{ data.content }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="status" v-if="data.is_top === 1">置顶</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>
|