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.
121 lines
2.5 KiB
121 lines
2.5 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-11-09 08:09:10
|
|
@ 备注: 热门新闻
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { hotNews } from '@/api/displayboardapi/indexapi'
|
|
import PageInfo from "@/views/dashboard/components/pageinfo.vue";
|
|
const props = defineProps({
|
|
drawerWidht:{
|
|
type:Number,
|
|
default:100
|
|
}
|
|
})
|
|
const drawerWidhtCart = ref<any>(100)
|
|
const hotNewsLoading = ref(false)
|
|
const list = ref<any[]>([])
|
|
const lookPageIsShow = ref(false)
|
|
const lookPageInfo = 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
|
|
})
|
|
}
|
|
const lookPageCont = (val:any) =>{
|
|
drawerWidhtCart.value = props.drawerWidht
|
|
lookPageInfo.value = val
|
|
lookPageIsShow.value = true
|
|
}
|
|
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" @click="lookPageCont(item)">
|
|
<el-text truncated>{{ item.title }}</el-text>
|
|
<span>{{ item.time }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</el-card>
|
|
<PageInfo v-model:look-page-is-show="lookPageIsShow" :look-page-info="lookPageInfo" :drawerWidht="drawerWidhtCart" />
|
|
</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>
|
|
|