wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
front/src/views/newHome/components/WorkDynDetails.vue
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>
@ -45,8 +41,8 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.work-dyn-detail-content { .work-dyn-detail-content {
.ant-breadcrumb{ .ant-breadcrumb {
margin: 90px auto 0; margin: 90px auto 0;
padding: 5px 400px; padding: 5px 400px;
background-color: #f5f8fc; background-color: #f5f8fc;
@ -73,23 +69,23 @@
text-align: center; text-align: center;
margin: 10px 0 24px; margin: 10px 0 24px;
} }
.detail-main-content{ .detail-main-content {
border-top: 1px solid #c6c6c6; border-top: 1px solid #c6c6c6;
padding-top: 24px; padding-top: 24px;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
color: #212121; color: #212121;
.summary-content{ .summary-content {
word-wrap: break-word; word-wrap: break-word;
text-indent: 32px; text-indent: 32px;
} }
:deep(.ant-image){ :deep(.ant-image) {
text-align: center; text-align: center;
margin: 16px 0; margin: 16px 0;
position: relative; position: relative;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
.ant-image-img{ .ant-image-img {
max-width: 900px; max-width: 900px;
max-height: 590px; max-height: 590px;
} }
@ -104,7 +100,7 @@
} }
} }
} }
} }
</style> </style>
<style> <style>
body, body,

52
front/src/views/newHome/components/WorkDynList.vue
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">
<div class="index-page-text">当前第{{page}}页</div> 共
<span class="num-text">{{ total }}</span>
条信息
</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
@ -33,7 +41,7 @@
/> />
</template> </template>
</a-list-item-meta> </a-list-item-meta>
<div class="pulish-time">发布时间：{{item.createDate}}</div> <div class="pulish-time">发布时间：{{ item.createDate }}</div>
<!-- <template #extra> <!-- <template #extra>
<a-image <a-image
width="100" width="100"
@ -97,8 +105,8 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.work-dyn-main-content{ .work-dyn-main-content {
.ant-breadcrumb{ .ant-breadcrumb {
margin: 90px auto 0; margin: 90px auto 0;
padding: 5px 400px; padding: 5px 400px;
background-color: #f5f8fc; background-color: #f5f8fc;
@ -112,9 +120,9 @@
// align-items: center; // align-items: center;
padding: 0 400px; padding: 0 400px;
flex-direction: column; flex-direction: column;
:deep(.ant-list-header){ :deep(.ant-list-header) {
border-bottom:none; border-bottom: none;
.total-num-content{ .total-num-content {
font-size: 14px; font-size: 14px;
color: #212121; color: #212121;
margin: 18px 0 10px; margin: 18px 0 10px;
@ -122,23 +130,20 @@
height: 35px; height: 35px;
display: flex; display: flex;
align-items: center; align-items: center;
.total-main-text{ .total-main-text {
flex: 1; flex: 1;
.num-text{ .num-text {
font-size: 18px; font-size: 18px;
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;
@ -156,16 +161,16 @@
font-size: 20px; font-size: 20px;
} }
} }
.ant-list-item-meta-description{ .ant-list-item-meta-description {
font-size: 14px; font-size: 14px;
color: rgba(33,33,33, 0.8); color: rgba(33, 33, 33, 0.8);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.pulish-time{ .pulish-time {
position: absolute; position: absolute;
left: 196px; left: 196px;
bottom: 50px; bottom: 50px;
@ -175,13 +180,12 @@
width: 180px; width: 180px;
} }
&:hover {
&:hover{
padding-left: 20px; padding-left: 20px;
border: #0058e1 1px solid; border: #0058e1 1px solid;
box-shadow: 0px 0px 20px rgba(0, 88, 225, 0.3); box-shadow: 0px 0px 20px rgba(0, 88, 225, 0.3);
width: 100%; width: 100%;
.pulish-time{ .pulish-time {
left: 216px; left: 216px;
} }
} }