'修改工作动态列表及详情页样式问题'
This commit is contained in:
parent
94fae9752f
commit
01dc4a8c43
|
|
@ -3,9 +3,7 @@
|
|||
<home-header></home-header>
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>
|
||||
<router-link to="/home">
|
||||
门户首页
|
||||
</router-link>
|
||||
<router-link to="/home">门户首页</router-link>
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>工作动态</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
|
|
@ -13,12 +11,10 @@
|
|||
<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
|
||||
alt="暂无图片"
|
||||
:src="item.imageUrl"
|
||||
:fallback="imgSrc"
|
||||
/>
|
||||
<div v-if="item.note1" class="summary-content">
|
||||
摘要：{{ item.note1 }}
|
||||
</div>
|
||||
<a-image alt="暂无图片" :src="item.imageUrl" :fallback="imgSrc" />
|
||||
<div class="text">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,8 +41,8 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.work-dyn-detail-content {
|
||||
.ant-breadcrumb{
|
||||
.work-dyn-detail-content {
|
||||
.ant-breadcrumb {
|
||||
margin: 90px auto 0;
|
||||
padding: 5px 400px;
|
||||
background-color: #f5f8fc;
|
||||
|
|
@ -73,23 +69,23 @@
|
|||
text-align: center;
|
||||
margin: 10px 0 24px;
|
||||
}
|
||||
.detail-main-content{
|
||||
.detail-main-content {
|
||||
border-top: 1px solid #c6c6c6;
|
||||
padding-top: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: #212121;
|
||||
.summary-content{
|
||||
.summary-content {
|
||||
word-wrap: break-word;
|
||||
text-indent: 32px;
|
||||
}
|
||||
:deep(.ant-image){
|
||||
:deep(.ant-image) {
|
||||
text-align: center;
|
||||
margin: 16px 0;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.ant-image-img{
|
||||
.ant-image-img {
|
||||
max-width: 900px;
|
||||
max-height: 590px;
|
||||
}
|
||||
|
|
@ -104,7 +100,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body,
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@
|
|||
<home-header></home-header>
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>
|
||||
<router-link to="/home">
|
||||
门户首页
|
||||
</router-link>
|
||||
<router-link to="/home">门户首页</router-link>
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>工作动态</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
|
|
@ -13,15 +11,25 @@
|
|||
<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 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">
|
||||
<a-list-item-meta :description="item.note1? `摘要：${item.note1 || ''}`: item.content">
|
||||
<a-list-item-meta
|
||||
:description="
|
||||
item.note1 ? `摘要：${item.note1 || ''}` : item.content
|
||||
"
|
||||
>
|
||||
<template #title>
|
||||
<a class="title-content" @click="goToDetails(item.id)">{{ item.title }}</a>
|
||||
<a class="title-content" @click="goToDetails(item.id)">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-image
|
||||
|
|
@ -33,7 +41,7 @@
|
|||
/>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<div class="pulish-time">发布时间：{{item.createDate}}</div>
|
||||
<div class="pulish-time">发布时间：{{ item.createDate }}</div>
|
||||
<!-- <template #extra>
|
||||
<a-image
|
||||
width="100"
|
||||
|
|
@ -97,8 +105,8 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.work-dyn-main-content{
|
||||
.ant-breadcrumb{
|
||||
.work-dyn-main-content {
|
||||
.ant-breadcrumb {
|
||||
margin: 90px auto 0;
|
||||
padding: 5px 400px;
|
||||
background-color: #f5f8fc;
|
||||
|
|
@ -112,9 +120,9 @@
|
|||
// align-items: center;
|
||||
padding: 0 400px;
|
||||
flex-direction: column;
|
||||
:deep(.ant-list-header){
|
||||
border-bottom:none;
|
||||
.total-num-content{
|
||||
:deep(.ant-list-header) {
|
||||
border-bottom: none;
|
||||
.total-num-content {
|
||||
font-size: 14px;
|
||||
color: #212121;
|
||||
margin: 18px 0 10px;
|
||||
|
|
@ -122,23 +130,20 @@
|
|||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.total-main-text{
|
||||
.total-main-text {
|
||||
flex: 1;
|
||||
.num-text{
|
||||
.num-text {
|
||||
font-size: 18px;
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-list-item) {
|
||||
width: 1300px;
|
||||
padding: 16px 0;
|
||||
position: relative;
|
||||
border-bottom: #dddee1 solid 1px;
|
||||
|
||||
.ant-list-item-main {
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
|
|
@ -156,16 +161,16 @@
|
|||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.ant-list-item-meta-description{
|
||||
.ant-list-item-meta-description {
|
||||
font-size: 14px;
|
||||
color: rgba(33,33,33, 0.8);
|
||||
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{
|
||||
.pulish-time {
|
||||
position: absolute;
|
||||
left: 196px;
|
||||
bottom: 50px;
|
||||
|
|
@ -175,13 +180,12 @@
|
|||
width: 180px;
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
padding-left: 20px;
|
||||
border: #0058e1 1px solid;
|
||||
box-shadow: 0px 0px 20px rgba(0, 88, 225, 0.3);
|
||||
width: 100%;
|
||||
.pulish-time{
|
||||
.pulish-time {
|
||||
left: 216px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue