|
@@ -5,12 +5,20 @@
|
|
|
<el-col :span="24" class="leftTop">
|
|
|
<span>|</span> <span>{{ menuName }}</span>
|
|
|
</el-col>
|
|
|
- <el-col class="infoLeftList" :span="24" v-for="(item, index) in list" :key="index" @click.native="clickDetail(item.id)">
|
|
|
- <p>{{ item.publish_time || '暂无' }}</p>
|
|
|
- <p>
|
|
|
- <span class="textOver">{{ item.title }}</span>
|
|
|
- <span>{{ item.titlejj || '暂无' }}</span>
|
|
|
- </p>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <el-col class="infoLeftList" :span="24" v-for="(item, index) in list" :key="index" @click.native="clickDetail(item.id)">
|
|
|
+ <el-col :span="4" class="date">
|
|
|
+ <span>{{ item.publish_time || '暂无' }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="info">
|
|
|
+ <el-col :span="24" class="title textOver">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="brief">
|
|
|
+ {{ item.titlejj || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="page">
|
|
|
<el-pagination
|
|
@@ -91,58 +99,54 @@ export default {
|
|
|
font-weight: 600;
|
|
|
color: #22529a;
|
|
|
}
|
|
|
- .infoLeftList {
|
|
|
- float: left;
|
|
|
- width: 95%;
|
|
|
- border-bottom: 1px dashed #ccc;
|
|
|
- padding: 10px 0 10px 10px;
|
|
|
- height: 87px;
|
|
|
- margin: 0 0 0 5px;
|
|
|
- }
|
|
|
- .infoLeftList:hover p:last-child span:first-child {
|
|
|
- -webkit-transform: translateY(-3px);
|
|
|
- -ms-transform: translateY(-3px);
|
|
|
- transform: translateY(-3px);
|
|
|
- -webkit-box-shadow: 0 0 6px #999;
|
|
|
- box-shadow: 0 0 6px #999;
|
|
|
- -webkit-transition: all 0.5s ease-out;
|
|
|
- transition: all 0.5s ease-out;
|
|
|
- color: #005293;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .infoLeftList p:first-child {
|
|
|
- float: left;
|
|
|
- width: 20%;
|
|
|
- font-size: 15px;
|
|
|
- background: #044b79;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- padding: 4px 0px;
|
|
|
- margin: 0 0 0 5px;
|
|
|
- }
|
|
|
- .infoLeftList p:last-child {
|
|
|
- float: right;
|
|
|
- width: 78%;
|
|
|
- padding: 0 0 0 10px;
|
|
|
- }
|
|
|
- .infoLeftList p:last-child span:first-child {
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .infoLeftList p:last-child span:last-child {
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
- font-size: 16px;
|
|
|
+ .list {
|
|
|
+ height: 455px;
|
|
|
overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- margin: 5px 0 0 0;
|
|
|
- color: #666;
|
|
|
+ .infoLeftList {
|
|
|
+ width: 97%;
|
|
|
+ padding: 9px 0;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ .date {
|
|
|
+ text-align: center;
|
|
|
+ margin: 6px 0 0 0;
|
|
|
+ span {
|
|
|
+ background-color: #22529a;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 3px 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 5px 0 0 0;
|
|
|
+ }
|
|
|
+ .brief {
|
|
|
+ font-size: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ padding: 5px 0 0 0;
|
|
|
+ height: 43px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infoLeftList:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .infoLeftList:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ .info {
|
|
|
+ .title {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.page {
|