'修改工作动态列表及详情页样式问题'

This commit is contained in:
HISENSE\liuyuxin6 2022-06-21 10:48:39 +08:00
parent 94fae9752f
commit 01dc4a8c43
2 changed files with 84 additions and 84 deletions

View File

@ -3,9 +3,7 @@
<home-header></home-header> <home-header></home-header>
<a-breadcrumb> <a-breadcrumb>
<a-breadcrumb-item> <a-breadcrumb-item>
<router-link to="/home"> <router-link to="/home">门户首页</router-link>
门户首页
</router-link>
</a-breadcrumb-item> </a-breadcrumb-item>
<a-breadcrumb-item>工作动态</a-breadcrumb-item> <a-breadcrumb-item>工作动态</a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
@ -13,12 +11,10 @@
<div class="name">{{ item.title }}</div> <div class="name">{{ item.title }}</div>
<div class="time">发布日期{{ item.createDate }}</div> <div class="time">发布日期{{ item.createDate }}</div>
<div class="detail-main-content"> <div class="detail-main-content">
<div v-if="item.note1" class="summary-content">摘要{{item.note1}}</div> <div v-if="item.note1" class="summary-content">
<a-image 摘要{{ item.note1 }}
alt="暂无图片" </div>
:src="item.imageUrl" <a-image alt="暂无图片" :src="item.imageUrl" :fallback="imgSrc" />
:fallback="imgSrc"
/>
<div class="text">{{ item.content }}</div> <div class="text">{{ item.content }}</div>
</div> </div>
</div> </div>

View File

@ -3,9 +3,7 @@
<home-header></home-header> <home-header></home-header>
<a-breadcrumb> <a-breadcrumb>
<a-breadcrumb-item> <a-breadcrumb-item>
<router-link to="/home"> <router-link to="/home">门户首页</router-link>
门户首页
</router-link>
</a-breadcrumb-item> </a-breadcrumb-item>
<a-breadcrumb-item>工作动态</a-breadcrumb-item> <a-breadcrumb-item>工作动态</a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
@ -13,15 +11,25 @@
<a-list item-layout="vertical" size="large" :data-source="listData"> <a-list item-layout="vertical" size="large" :data-source="listData">
<template #header> <template #header>
<div class="total-num-content"> <div class="total-num-content">
<div class="total-main-text"> <span class="num-text">{{total}}</span> 条信息</div> <div class="total-main-text">
<span class="num-text">{{ total }}</span>
条信息
</div>
<div class="index-page-text">当前第{{ page }}</div> <div class="index-page-text">当前第{{ page }}</div>
</div> </div>
</template> </template>
<template #renderItem="{ item }"> <template #renderItem="{ item }">
<a-list-item key="item.title"> <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> <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>
<template #avatar> <template #avatar>
<a-image <a-image
@ -129,16 +137,13 @@
color: #0058e1; color: #0058e1;
} }
} }
} }
} }
:deep(.ant-list-item) { :deep(.ant-list-item) {
width: 1300px; width: 1300px;
padding: 16px 0; padding: 16px 0;
position: relative; position: relative;
border-bottom: #dddee1 solid 1px; border-bottom: #dddee1 solid 1px;
.ant-list-item-main { .ant-list-item-main {
height: 140px; height: 140px;
overflow: hidden; overflow: hidden;
@ -175,7 +180,6 @@
width: 180px; width: 180px;
} }
&:hover { &:hover {
padding-left: 20px; padding-left: 20px;
border: #0058e1 1px solid; border: #0058e1 1px solid;