forked from gxwebsoft/yufengxing-pc
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
2.0 KiB
54 lines
2.0 KiB
<template>
|
|
<div class="xl:w-screen-xl sm:flex xl:p-0 p-4 m-auto relative" v-infinite-scroll="load">
|
|
<el-row :gutter="24" class="flex">
|
|
<template v-for="(item,index) in list" :key="index">
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-5 min-w-xs">
|
|
<el-card shadow="hover" :body-style="{ padding: '0px' }" class="hover:bg-gray-50 cursor-pointer"
|
|
@click="openSpmUrl(`/detail`,item,item.articleId,true)">
|
|
<el-image :src="item.image" fit="fill" :lazy="true" class="w-full md:h-[150px] h-[199px] cursor-pointer"/>
|
|
<div class="flex-1 px-4 py-5 sm:p-6 !p-4">
|
|
<!-- <div class="text-gray-700 dark:text-white text-base font-semibold flex items-center gap-1.5">-->
|
|
<!-- <div class="flex items-center text-xl cursor-pointer max-w-md line-clamp-2"><el-icon-->
|
|
<!-- v-if="item.permission > 0"><Lock class="text-gray-400 pr-1"/></el-icon>{{ item.title }}</div>-->
|
|
<!-- </div>-->
|
|
<div class="line-clamp-2 font-semibold text-gray-700 dark:text-white text-base gap-1.5 text-xl">
|
|
{{ item.title }}
|
|
</div>
|
|
<div class="flex items-center gap-1.5 py-2 text-gray-500">
|
|
<span> {{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
|
|
<el-icon v-if="item.permission > 0" :size="24"><Lock class="text-gray-400 px-1"/></el-icon>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</template>
|
|
</el-row>
|
|
</div>
|
|
<div v-if="disabled" class="px-1 text-center text-gray-500 min-h-xs">
|
|
没有更多了
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {openSpmUrl} from "~/utils/common";
|
|
import dayjs from "dayjs";
|
|
import {Lock} from '@element-plus/icons-vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
list?: any[];
|
|
disabled?: boolean;
|
|
}>(),
|
|
{}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'done'): void;
|
|
}>();
|
|
|
|
const load = () => {
|
|
if (!props.disabled) {
|
|
emit('done')
|
|
}
|
|
}
|
|
</script>
|