完成平台首页编写

src/views/dashboard/components/hostnews.vue

@@ -5,20 +5,34 @@
 -->
 <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);
+			// 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()
 })
@@ -30,13 +44,14 @@ onMounted(() => {
 		</div>
 		<div v-loading="hotNewsLoading" element-loading-text="Loading..." class="allOrgAxisCares">
 			<ul>
-				<li v-for="item in list" :key="item.id" class="orgAllMothsTitle">
+				<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>
 

src/views/dashboard/components/pageinfo.vue

@@ -0,0 +1,87 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-11-09 13:49:24
+@ 备注: 查看新闻内容详情
+-->
+<script lang='ts' setup>
+const props = defineProps({
+	lookPageIsShow:{
+		type:Boolean,
+		default:false,
+	},
+	lookPageInfo:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	drawerWidht:{
+		type:Number,
+		default:100
+	}
+})
+const emits = defineEmits(["update:lookPageIsShow"]);
+const isShow =   computed({
+	get: () => props.lookPageIsShow,
+	set: (val) => {
+		emits("update:lookPageIsShow", val);
+	},
+});
+const dawerChare = ref<any>(null)
+const dawerChareHeight = ref<any>(null)
+onMounted(() => {
+	dawerChareHeight.value = dawerChare.value?.clientWidth
+	console.log("热门新闻-sun->",props.drawerWidht,dawerChareHeight.value)
+})
+
+</script>
+<template>
+	<el-drawer ref="dawerChare" v-model="isShow" :size="props.drawerWidht" >
+		<template #header="{  titleId, titleClass }">
+			<div class="orgAllMothsTitle">
+				<el-text :id="titleId" :class="titleClass" style="font-size:20px;font-weight: bold;">{{ props.lookPageInfo.title }}</el-text>
+				<div>
+					<el-text class="head_arb"><i class="fa fa-eye"></i>阅读量：{{ props.lookPageInfo.readNumber }}</el-text>
+					<el-text class="head_arb"><i class="fa fa-bookmark-o"></i>收藏：{{ props.lookPageInfo.collectNumber }}</el-text>
+					<el-text class="head_arb"><i class="fa fa-thumbs-o-up"></i>赞：{{ props.lookPageInfo.likeNumber }}</el-text>
+					<el-text class="head_arb"><i class="fa fa-thumbs-o-down"></i>踩：{{ props.lookPageInfo.criticizeNumber }}</el-text>
+					<el-text class="head_arb"><i class="fa fa-comments-o"></i>评论：{{ props.lookPageInfo.commentNumber }}</el-text>
+					<el-text class="head_arb"><i class="fa fa-clock-o"></i>发布时间：{{ props.lookPageInfo.time }}</el-text>
+				</div>
+			</div>
+		</template>
+		<div class="app-container">
+			
+			
+			<!-- <iframe v-if="props.lookPageInfo.pagetype!=1" id="lookpdfcont" scrolling='no' frameborder="0" :src="'https://docu.hxgk.group/lookfilepdf?id='+props.lookPageInfo.id" width="100%" style="border: 0; padding: 0px;">
+ 
+			This browser does not support PDFs. Please download the PDF to view it: <a :href="'https://docu.hxgk.group/lookfilepdf?id=' + props.lookPageInfo.id">Download PDF</a>
+			
+			</iframe>  -->
+			<iframe v-if="props.lookPageInfo.pagetype!=1" id="lookpdfcont" scrolling='no' frameborder="0" :src="props.lookPageInfo.fileUrl" width="100%" :height="dawerChareHeight" style="border: 0; padding: 0px; height:100%">
+			This browser does not support PDFs. Please download the PDF to view it: <a :href="props.lookPageInfo.fileUrl">Download PDF</a>
+			</iframe> 
+			<div v-else  v-html="props.lookPageInfo.pageInfo"></div>
+		</div>
+	</el-drawer>
+</template>
+<style  lang='scss' scoped>
+.orgAllMothsTitle{
+	width:100%;
+	display: flex;
+	align-items: center;
+	justify-content:space-between;
+	.head_arb{
+		padding-right:10px;
+		i {
+			padding-right:5px;
+		}
+	}
+}
+.el-drawer__header{
+	padding:0px;
+}
+.app-container{
+	height: calc(100vh - 100px);
+}
+</style>

src/views/dashboard/index.vue

@@ -24,7 +24,8 @@ import HostNews from "@/views/dashboard/components/hostnews.vue";
 const userStore = useUserStore();
 const orgListCont = ref<sendOrgCont>()
 const educationOrgId = ref<number>(309)
-
+const masterBody = ref<any>(null)
+const drawerWidht = ref<any>()
 /**
  * 获取行政组织
  */
@@ -48,8 +49,9 @@ const oenOrg = ref<any>() //单一行政组织
 //渲染完页面再执行
 onMounted(() => {
 	
+	drawerWidht.value = masterBody.value?.clientWidth
 	getOrgList();
-	
+	console.log("热门新闻----100---->",drawerWidht.value)
 })
 </script>
 <template>
@@ -85,7 +87,7 @@ onMounted(() => {
 				</el-col>
 				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
 				
-					<HostNews />
+					<HostNews v-model:drawer-widht="drawerWidht" />
 				
 				</el-col>
 			</el-row>