'工作动态列表及详情页'
This commit is contained in:
parent
6edf4d50f9
commit
5977d85597
|
|
@ -1,12 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="work-dyn-detail-content">
|
||||
<home-header></home-header>
|
||||
<div id="work-dyn-list">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>
|
||||
<router-link to="/home">
|
||||
门户首页
|
||||
</router-link>
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>工作动态</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div id="work-dyn-list" v-loading="loading">
|
||||
<div class="name">{{ item.title }}</div>
|
||||
<div class="time">发布日期：{{ item.createDate }}</div>
|
||||
<div class="detail-main-content">
|
||||
<div v-if="item.note1" class="summary-content">摘要：{{item.note1}}</div>
|
||||
<a-image
|
||||
width="100"
|
||||
height="100"
|
||||
alt="暂无图片"
|
||||
:src="item.imageUrl"
|
||||
:fallback="imgSrc"
|
||||
|
|
@ -14,52 +22,87 @@
|
|||
<div class="text">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<home-footer></home-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { workdynamicsDetails } from '@/api/home'
|
||||
const router = useRouter()
|
||||
const item = ref({})
|
||||
const loading = ref(true)
|
||||
const imgSrc = ref(require('@/assets/newHome/zw.png'))
|
||||
const id = router.currentRoute.value.query.id
|
||||
workdynamicsDetails(id).then((res) => {
|
||||
console.log('详情=================>', res.data.data)
|
||||
item.value = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#work-dyn-list {
|
||||
.work-dyn-detail-content {
|
||||
.ant-breadcrumb{
|
||||
margin: 90px auto 0;
|
||||
padding: 5px 400px;
|
||||
background-color: #f5f8fc;
|
||||
}
|
||||
#work-dyn-list {
|
||||
background-color: #ffffff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 90px auto 0;
|
||||
// margin: 90px auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
padding: 0 400px;
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
.name {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
color: #0558e1;
|
||||
margin-top: 54px;
|
||||
}
|
||||
:deep(.ant-image-img) {
|
||||
width: 200px;
|
||||
margin-top: 10px;
|
||||
.time {
|
||||
text-align: center;
|
||||
margin: 10px 0 24px;
|
||||
}
|
||||
.text {
|
||||
width: 1000px;
|
||||
margin-top: 20px;
|
||||
.detail-main-content{
|
||||
border-top: 1px solid #c6c6c6;
|
||||
padding-top: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: #212121;
|
||||
.summary-content{
|
||||
word-wrap: break-word;
|
||||
text-indent: 32px;
|
||||
}
|
||||
.time {
|
||||
margin-left: 70%;
|
||||
:deep(.ant-image){
|
||||
text-align: center;
|
||||
margin: 16px 0;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.ant-image-img{
|
||||
max-width: 900px;
|
||||
max-height: 590px;
|
||||
}
|
||||
}
|
||||
// :deep(.ant-image-img) {
|
||||
// width: 200px;
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
.text {
|
||||
word-wrap: break-word;
|
||||
text-indent: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,40 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="work-dyn-main-content">
|
||||
<home-header></home-header>
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>
|
||||
<router-link to="/home">
|
||||
门户首页
|
||||
</router-link>
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>工作动态</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div id="work-dyn-list">
|
||||
<a-list item-layout="vertical" size="large" :data-source="listData">
|
||||
<template #header>
|
||||
<div class="total-num-content">
|
||||
<div class="total-main-text">共 <span class="num-text">{{total}}</span> 条信息</div>
|
||||
<div class="index-page-text">当前第{{page}}页</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item key="item.title">
|
||||
<template #extra>
|
||||
<a-list-item-meta :description="item.note1? `摘要：${item.note1 || ''}`: item.content">
|
||||
<template #title>
|
||||
<a class="title-content" @click="goToDetails(item.id)">{{ item.title }}</a>
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-image
|
||||
width="100"
|
||||
height="100"
|
||||
alt="暂无图片"
|
||||
:src="item.imageUrl"
|
||||
:fallback="imgSrc"
|
||||
/>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<div class="pulish-time">发布时间：{{item.createDate}}</div>
|
||||
<!-- <template #extra>
|
||||
<a-image
|
||||
width="100"
|
||||
height="100"
|
||||
|
|
@ -19,22 +48,25 @@
|
|||
<a @click="goToDetails(item.id)">{{ item.title }}</a>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
{{ item.content }}
|
||||
{{ item.content }} -->
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<a-pagination
|
||||
v-model:current="page"
|
||||
:total="total"
|
||||
show-quick-jumper
|
||||
show-less-items
|
||||
@change="getList"
|
||||
/>
|
||||
</div>
|
||||
<home-footer></home-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import { ref } from 'vue'
|
||||
import { gongZuoZhuangTai } from '@/api/home'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
|
@ -65,17 +97,48 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#work-dyn-list {
|
||||
.work-dyn-main-content{
|
||||
.ant-breadcrumb{
|
||||
margin: 90px auto 0;
|
||||
padding: 5px 400px;
|
||||
background-color: #f5f8fc;
|
||||
}
|
||||
#work-dyn-list {
|
||||
background-color: #ffffff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 90px auto 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// align-items: center;
|
||||
padding: 0 400px;
|
||||
flex-direction: column;
|
||||
:deep(.ant-list-header){
|
||||
border-bottom:none;
|
||||
.total-num-content{
|
||||
font-size: 14px;
|
||||
color: #212121;
|
||||
margin: 18px 0 10px;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.total-main-text{
|
||||
flex: 1;
|
||||
.num-text{
|
||||
font-size: 18px;
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-list-item) {
|
||||
width: 1000px;
|
||||
width: 1300px;
|
||||
padding: 16px 0;
|
||||
position: relative;
|
||||
border-bottom: #dddee1 solid 1px;
|
||||
|
||||
.ant-list-item-main {
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
|
|
@ -88,13 +151,45 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 16px;
|
||||
.title-content {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.ant-list-item-meta-description{
|
||||
font-size: 14px;
|
||||
color: rgba(33,33,33, 0.8);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.pulish-time{
|
||||
position: absolute;
|
||||
left: 196px;
|
||||
bottom: 50px;
|
||||
color: #212121;
|
||||
}
|
||||
.ant-image-img {
|
||||
width: 150px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
padding-left: 20px;
|
||||
border: #0058e1 1px solid;
|
||||
box-shadow: 0px 0px 20px rgba(0, 88, 225, 0.3);
|
||||
width: 100%;
|
||||
.pulish-time{
|
||||
left: 216px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-pagination {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue