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.
107 lines
2.0 KiB
107 lines
2.0 KiB
2 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 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>
|