odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
clay
2022-01-16 21:14:30 +08:00
parent 8e9cf7b833
commit b7897ba20e
18 changed files with 799 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/views/content/components/list.vue
View File

@@ -1,50 +1,68 @@
<template>
<div class="list">
<!--{{value}}-->
<el-row>
<!--正文内容-->
<el-col class="context">
<div v-for="(item,index) in value.data" class="tw">
<el-row>
<el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
<div class="tw_time">
<div class="tw_top">
{{getDay(item.publishTime)}}
<!--{{value}}-->
<div>
<el-row>
<!--正文内容-->
<el-col class="context">
<div v-for="(item,index) in value.data" class="tw">
<el-row>
<el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
<div class="tw_time">
<div class="tw_top">
{{ getDay(item.publishTime) }}
</div>
<div class="tw_bottoms">
{{ getTime(item.publishTime) }}
</div>
</div>
<div class="tw_bottoms">
{{getTime(item.publishTime)}}
</el-col>
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
<div class="tw_context">
<div class="tw_context_title" @click="getContext(item)">
{{ item.title }}
</div>
<div class="tw_context_text" v-html="item.content"></div>
</div>
</div>
</el-col>
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
{{item.title}}
</el-col>
<el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
<div class="tw_img">
<img :src="item.imgurl" alt="">
</div>
<div class="tw_context_text" v-html="item.content"></div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
<div class="tw_img">
<img :src="item.imgurl" alt="">
</div>
</el-col>
</el-row>
<hr v-if="index != value.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<hr v-if="index != value.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
</div>
</el-col>
</el-row>
<el-row>
<el-col class="pagination_p">
<el-pagination class="pagination"
:small="small"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="value.pageNum"
:page-size="value.data.length"
layout="prev, pager, next, jumper"
:total="value.total">
</el-pagination>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import {getNode} from "@/api";
export default {
name: "list",
props:{
props: {
value: {
type: Array,
type: Object,
default: {
data:[{
data: [{
content: "",
title: "",
publishTime: "2022-01-15 17:02:13",
@@ -55,17 +73,40 @@ export default {
},
data() {
return {
width: document.documentElement.clientWidth
width: document.documentElement.clientWidth,
small:document.documentElement.clientWidth<=992
}
},
methods:{
getDay(time){
methods: {
getContext(context){
if (this.width <=992){
this.$router.push("/mobile/" + this.value.secondId +"/" +this.value.navId+"?id="+context.id);
}else {
this.$router.push("/pc/" + this.value.secondId +"/" +this.value.navId+"?id="+context.id);
}
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.value.pageNum = val
let data = {
id: this.value.navId,
pageNum: val,
pageSize: 4
}
getNode(data).then(res => {
this.value.data = res.rows
this.value.total = res.total
})
},
getDay(time) {
let day = new Date(time).getDate();
return day
},
getTime(time){
getTime(time) {
let date = new Date(time);
return date.getFullYear() +"-" + date.getMonth()+1
return date.getFullYear() + "-" + date.getMonth() + 1
}
}
}
@@ -83,13 +124,15 @@ export default {
margin-top: 4rem;
}
.tw_img{
.tw_img {
width: 100%;
text-align: left;
img{
img {
width: 90%;
}
}
.tw_time {
border-right: .1rem solid #D5D5D5;
height: 10rem;
@@ -112,15 +155,15 @@ export default {
}
.tw_context {
cursor: pointer;
font-family: PingFangSC-Medium, PingFang SC;
color: #161616;
.tw_context_title {
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
font-size: 2rem;
font-weight: 600;
padding-right: 2rem;
@@ -133,9 +176,9 @@ export default {
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:3; //显示的行
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 3; //显示的行
}
}
@@ -153,4 +196,13 @@ export default {
color: #3C3C3C;
}
}
.pagination_p{
text-align: center;
margin-bottom: 2rem;
.pagination{
display: inline-block;
float: none;
}
}
</style>