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>
|