|
|
@@ -10,6 +10,34 @@
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
+ <div class="entry-list-container">
|
|
|
+ <div class="tab-header">
|
|
|
+ <span class="tab-title">公司活动</span>
|
|
|
+ </div>
|
|
|
+ <div class="entry-list">
|
|
|
+ <div v-for="index in 50" class="list-item">
|
|
|
+ <div class="meta-container">
|
|
|
+ <div class="user-message">
|
|
|
+ 活动通知
|
|
|
+ </div>
|
|
|
+ <div class="dividing"></div>
|
|
|
+ <div class="date">23天前</div>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="info-box">
|
|
|
+ <div class="title">
|
|
|
+ 端午活动
|
|
|
+ </div>
|
|
|
+ <div class="description">
|
|
|
+ 一年一端午，一岁一安康。今日端午，愿你生活多胜意，事事皆如愿。别忘了吃个粽子，“粽”享人生美味。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src="https://xiaoyou.dgtis.com/images/image/2023/04/23/k7pxk9a436jpnk4qxiia.jpg" alt="端午活动封面" class="lazy thumb">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
<div class="index-aside aside" :class="{'sticky top':isActive}">
|
|
|
@@ -112,7 +140,6 @@ export default {
|
|
|
<style>
|
|
|
.timeline-container{
|
|
|
margin: 0 auto;
|
|
|
- height: 1500px;
|
|
|
}
|
|
|
.timeline-entry-list{
|
|
|
margin-right: 17.5rem;
|
|
|
@@ -133,7 +160,7 @@ export default {
|
|
|
/* padding: 1.33rem 0 0.66rem; */
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
- margin-bottom: 1.66rem;
|
|
|
+ margin-bottom: 1.25rem;
|
|
|
}
|
|
|
.timeline-index-view.sidebar-block {
|
|
|
box-shadow: none;
|
|
|
@@ -247,4 +274,104 @@ export default {
|
|
|
z-index: 5;
|
|
|
pointer-events: all;
|
|
|
}
|
|
|
+.entry-list-container{
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.entry-list-container .tab-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 20px 16px;
|
|
|
+ border-bottom: 1px solid #e5e6eb;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-header .tab-title {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1e80ff;
|
|
|
+}
|
|
|
+.entry-list{
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.list-item:hover {
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+.list-item{
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 12px 20px 0;
|
|
|
+}
|
|
|
+.list-item .meta-container{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.list-item .meta-container .user-message{
|
|
|
+ max-width: 162px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+.list-item .meta-container .dividing{
|
|
|
+ line-height: 22px;
|
|
|
+ width: 1px;
|
|
|
+ height: 14px;
|
|
|
+ background: #e5e6eb;
|
|
|
+ margin: 0 8px;
|
|
|
+}
|
|
|
+.list-item .meta-container .date{
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #86909c;
|
|
|
+}
|
|
|
+.list-item .main{
|
|
|
+ margin-top: 6px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #e5e6eb;
|
|
|
+}
|
|
|
+.list-item .main .info-box{
|
|
|
+ flex-grow: 1;
|
|
|
+}
|
|
|
+.list-item .main .info-box .title:visited {
|
|
|
+ color: #86909c;
|
|
|
+}
|
|
|
+.list-item .main .info-box .title{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #1d2129;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ display: -webkit-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+}
|
|
|
+.list-item .main .info-box .description{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #86909c;
|
|
|
+ display: -webkit-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+}
|
|
|
+.list-item .thumb{
|
|
|
+ flex: 0 0 auto;
|
|
|
+ width: 120px;
|
|
|
+ height: 80px;
|
|
|
+ margin-left: 24px;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
</style>
|
