101 lines
2.2 KiB
Vue
101 lines
2.2 KiB
Vue
<template>
|
||
<view class="notice-item" @tap="handleClick">
|
||
<view class="item-main">
|
||
<text class="item-title line-2">{{ item.title }}</text>
|
||
<view class="item-time">
|
||
<text class="time-text">发布时间：{{ formattedTime }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "NoticeCard",
|
||
props: {
|
||
// 接收外部传入的公告对象数据
|
||
item: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
computed: {
|
||
// 利用计算属性自动处理时间格式化
|
||
formattedTime() {
|
||
const timeStr = this.item.create_time;
|
||
if (!timeStr) return '--:--:--';
|
||
|
||
let formatted = timeStr;
|
||
if (timeStr.includes('.') && !timeStr.includes('-')) {
|
||
formatted = timeStr.replace(/\./g, '-');
|
||
if (formatted.match(/\d{4}-\d{2}-\d{2}\d{2}:\d{2}:\d{2}/)) {
|
||
formatted = formatted.replace(/(\d{4}-\d{2}-\d{2})(\d{2}:\d{2}:\d{2})/, '$1 $2');
|
||
}
|
||
}
|
||
if (formatted.includes('-') && formatted.includes(':')) {
|
||
return formatted;
|
||
}
|
||
return timeStr;
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
// 触发组件的 click 事件，把当前项的数据抛出去
|
||
this.$emit('click', this.item);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.notice-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
transition: all 0.2s ease;
|
||
|
||
.item-main {
|
||
flex: 1;
|
||
min-width: 0; // 防止文字溢出
|
||
|
||
.item-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #101010;
|
||
line-height: 42rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.item-time {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.time-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.time-text {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 多行省略
|
||
.line-2 {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
}
|
||
</style> |