<!--
@ 作者: 秦东
@ 时间: 2023-11-09 08:09:10
@ 备注: 热门新闻
-->
<script lang='ts' setup>
import { hotNews } from '@/api/displayboardapi/indexapi'

const hotNewsLoading = ref(false)
const list = ref<any[]>([])
const gainHotNews = () =>{
	hotNewsLoading.value=true
	hotNews({page:1,pagesize:7,type:1})
		.then((data:any) =>{
			console.log("热门新闻",data);
			list.value = data.data.list
		})
		.finally(() =>{
			hotNewsLoading.value=false
		})
}
onMounted(() => {
	gainHotNews()
})
</script>
<template>
	<el-card shadow="always" :body-style="{ padding: '10px' }"  style = "border-radius: 12px;margin-top: 10px;; height: 335px">
		<div class="orgAllMothsTitle">
			<el-text class="titleInfo">热门新闻</el-text>	
		</div>
		<div v-loading="hotNewsLoading" element-loading-text="Loading..." class="allOrgAxisCares">
			<ul>
				<li v-for="item in list" :key="item.id" class="orgAllMothsTitle">
					<el-text truncated>{{ item.title }}</el-text>
					<span>{{ item.time }}</span>
				</li>
			</ul>
		</div>
	</el-card>
</template>
<style  lang='scss' scoped>

	// background-color:#FF0000;
	.allOrgAxisCares{
		display: block;
		width:100%;
		height:100%;
		overflow:auto;
		ul,	li {
			font-size:14px;
			padding:9px 0;
			// border-bottom:1px solid #EEEEEE;
		}
	}
	

.orgAllMothsTitle{
	width:100%;
	display: flex;
	align-items: center;
	justify-content:space-between;
	
}
.greenColor{
	// background-color:#FFAC52;
	
	// padding:0 10px 0 10px;
}
.span_icon_left{
	margin-right:10px;
}
.cart_top_juLi{
	// margin-top:10px;
}
.titleInfo{
	font-size: 20px;
	font-weight: bold;
}

.alarm-infoList {
	padding: 15px;
	box-sizing: border-box;
	:deep(.el-table) {
		background-color: transparent;
    color: #fff;
 
		th {
			background-color: transparent;
		}
		tr {
			color: #fff;
			background-color: transparent;
			&.el-table__row--striped {
				td.el-table__cell {
					background-color: transparent;
				}
			}
			&:hover {
				td.el-table__cell {
					background-color: transparent;
				}
			}
		}
	}
}
</style>
