提交 edc8537f authored 作者: 朱政's avatar 朱政

fix:修复智库部分样式问题

上级 3261b013
流水线 #319 已通过 于阶段
in 1 分 37 秒
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
<div class="box4-item" v-for="(item, index) in filteredOpinions" <div class="box4-item" v-for="(item, index) in filteredOpinions"
:key="item.id != null ? item.id : index"> :key="item.id != null ? item.id : index">
<div class="top-row"> <div class="top-row">
<div class="left"> <div class="left-item">
{{ index + 1 }} {{ index + 1 }}
</div> </div>
<div class="center"> <div class="center">
...@@ -845,6 +845,7 @@ onMounted(() => { ...@@ -845,6 +845,7 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
...@@ -866,6 +867,7 @@ onMounted(() => { ...@@ -866,6 +867,7 @@ onMounted(() => {
line-height: 22px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
cursor: pointer;
} }
} }
...@@ -1048,6 +1050,7 @@ onMounted(() => { ...@@ -1048,6 +1050,7 @@ onMounted(() => {
height: 49px; height: 49px;
display: flex; display: flex;
gap: 11px; gap: 11px;
cursor: pointer;
.image { .image {
width: 42px; width: 42px;
...@@ -1446,6 +1449,7 @@ onMounted(() => { ...@@ -1446,6 +1449,7 @@ onMounted(() => {
.box4-item { .box4-item {
width: 1057px; width: 1057px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
...@@ -1460,10 +1464,11 @@ onMounted(() => { ...@@ -1460,10 +1464,11 @@ onMounted(() => {
.top-row { .top-row {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
/* 统一上下间距,保证序号与第一行对齐 */
padding: 16px 0;
} }
.left { .left-item {
margin-top: 19px;
margin-left: 15px; margin-left: 15px;
width: 24px; width: 24px;
height: 24px; height: 24px;
...@@ -1476,21 +1481,25 @@ onMounted(() => { ...@@ -1476,21 +1481,25 @@ onMounted(() => {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
flex-shrink: 0;
margin-top: 3px;
} }
.center { .center {
min-height: 62px;
margin-left: 18px; margin-left: 18px;
display: flex; display: flex;
align-items: center; align-items: flex-start;
flex: 1 1 auto;
min-width: 0;
// overflow: hidden; // overflow: hidden;
// text-overflow: ellipsis; // text-overflow: ellipsis;
// white-space: nowrap; // white-space: nowrap;
.title { .title {
width: 918px; flex: 1 1 auto;
min-width: 0;
// height: 55px; // height: 55px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1499,19 +1508,14 @@ onMounted(() => { ...@@ -1499,19 +1508,14 @@ onMounted(() => {
line-height: 30px; line-height: 30px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
overflow: hidden; /* 不限制字数/行数,按内容自然换行撑高 */
// text-overflow: ellipsis; overflow: visible;
// white-space: nowrap; white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} }
.center-image { .center-image {
width: 16px; width: 16px;
height: 24px; height: 24px;
margin-top: 12px;
margin-left: 18px; margin-left: 18px;
cursor: pointer; cursor: pointer;
} }
......
...@@ -401,6 +401,8 @@ const handleDownloadDocument = async () => { ...@@ -401,6 +401,8 @@ const handleDownloadDocument = async () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
cursor: pointer;
;
.icon { .icon {
width: 16px; width: 16px;
......
...@@ -851,8 +851,7 @@ onMounted(() => { ...@@ -851,8 +851,7 @@ onMounted(() => {
display: flex; display: flex;
.report-time { .report-time {
height: 22px;
width: 97px;
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
......
...@@ -80,13 +80,12 @@ ...@@ -80,13 +80,12 @@
<img class="card-item-img" :src="item.coverImgUrl" alt="report image" /> <img class="card-item-img" :src="item.coverImgUrl" alt="report image" />
<div class="card-item-text"> <div class="card-item-text">
<div class="card-item-title"> <div class="card-item-title" @click="emit('report-click', item)">
<span v-html="highlightText(item.title)"></span> <span v-html="highlightText(item.title)"></span>
</div> </div>
<div class="card-item-time"> <div class="card-item-time">
<span v-html="highlightText(item.time + ' · ' + item.content)"></span> <span v-html="highlightText(item.time + ' · ' + item.content)"></span>
<img src="../images/image open.png" alt="open icon" class="card-open-image" <img src="../images/image open.png" alt="open icon" class="card-open-image" />
@click.stop="handleToReportDetail(item)" />
</div> </div>
<div class="card-item-category"> <div class="card-item-category">
<AreaTag v-for="(val, idx) in item.category" :key="idx" :tagName="val" /> <AreaTag v-for="(val, idx) in item.category" :key="idx" :tagName="val" />
...@@ -554,6 +553,7 @@ const handleToReportDetail = item => { ...@@ -554,6 +553,7 @@ const handleToReportDetail = item => {
text-align: left; text-align: left;
margin-bottom: 2px; margin-bottom: 2px;
display: inline-flex; display: inline-flex;
cursor: pointer;
} }
.card-item-time { .card-item-time {
......
...@@ -227,7 +227,7 @@ const formatDate = (str) => { ...@@ -227,7 +227,7 @@ const formatDate = (str) => {
.footer-card-title { .footer-card-title {
margin: 0 auto; margin: 0 auto;
margin-top: 13px; margin-top: 13px;
width: 376px; width: 360px;
height: 48px; height: 48px;
/* 修改高度为两行的高度 */ /* 修改高度为两行的高度 */
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -250,7 +250,7 @@ const formatDate = (str) => { ...@@ -250,7 +250,7 @@ const formatDate = (str) => {
.footer-card-footer { .footer-card-footer {
margin: 0 auto; margin: 0 auto;
margin-top: 5px; margin-top: 5px;
width: 376px; width: 360px;
height: 22px; height: 22px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -267,6 +267,7 @@ const formatDate = (str) => { ...@@ -267,6 +267,7 @@ const formatDate = (str) => {
height: 50px; height: 50px;
margin-top: 43px; margin-top: 43px;
display: flex; display: flex;
width: 1226px;
justify-content: space-between; justify-content: space-between;
.info { .info {
......
...@@ -204,7 +204,7 @@ const handleTimeGroupChange = (val) => { ...@@ -204,7 +204,7 @@ const handleTimeGroupChange = (val) => {
.footer-card-title { .footer-card-title {
margin: 0 auto; margin: 0 auto;
margin-top: 13px; margin-top: 13px;
width: 376px; width: 360px;
height: 48px; height: 48px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -221,7 +221,7 @@ const handleTimeGroupChange = (val) => { ...@@ -221,7 +221,7 @@ const handleTimeGroupChange = (val) => {
.footer-card-footer { .footer-card-footer {
margin: 0 auto; margin: 0 auto;
margin-top: 5px; margin-top: 5px;
width: 376px; width: 360px;
height: 22px; height: 22px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -239,6 +239,7 @@ const handleTimeGroupChange = (val) => { ...@@ -239,6 +239,7 @@ const handleTimeGroupChange = (val) => {
margin-top: 43px; margin-top: 43px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 1226px;
.info { .info {
height: 19px; height: 19px;
......
...@@ -63,13 +63,13 @@ ...@@ -63,13 +63,13 @@
<div class="card-item"> <div class="card-item">
<img class="card-item-img" :src="item.coverImgUrl" alt="report image" /> <img class="card-item-img" :src="item.coverImgUrl" alt="report image" />
<div class="card-item-text"> <div class="card-item-text">
<div class="card-item-title"> <div class="card-item-title" @click="emit('report-click', item)">
{{ item.titleZh }} {{ item.titleZh }}
</div> </div>
<div class="card-item-time"> <div class="card-item-time">
{{ item.testimonyDate + ' · ' + item.thinkTankName + ' · ' + item.committeeZh }} {{ item.testimonyDate + ' · ' + item.thinkTankName + ' · ' + item.committeeZh }}
<img src="../ThinkTankDetail/thinkDynamics/images/image open.png" alt="open icon" <img src="../ThinkTankDetail/thinkDynamics/images/image open.png" alt="open icon"
class="card-open-image" @click="emit('report-click', item)" /> class="card-open-image" />
</div> </div>
<div class="card-item-category" v-if="item.domains"> <div class="card-item-category" v-if="item.domains">
...@@ -345,6 +345,7 @@ const handlePageChange = page => { ...@@ -345,6 +345,7 @@ const handlePageChange = page => {
line-height: 22px; line-height: 22px;
margin-bottom: 2px; margin-bottom: 2px;
display: inline-flex; display: inline-flex;
cursor: pointer;
} }
.card-item-time { .card-item-time {
......
...@@ -597,6 +597,8 @@ onMounted(async () => { ...@@ -597,6 +597,8 @@ onMounted(async () => {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
display: flex; display: flex;
gap: 8px; gap: 8px;
cursor: pointer;
;
.icon { .icon {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论