Skip to content

Commit 1d783dd

Browse files
bai3bai3
committed
🚧 完成评论列表页面
1 parent 96aa77b commit 1d783dd

File tree

5 files changed

+80
-31
lines changed

5 files changed

+80
-31
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6-
<title>message</title>
6+
<title>留言板</title>
77
</head>
88
<body>
99
<div id="app"></div>

‎src/App.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
<template>
22
<div id="app">
3-
<el-menu mode="horizontal" :default-active="activeIndex">
4-
<el-menu-item index="1">
5-
<router-link to="/Message">
3+
<el-menu mode="horizontal" :default-active="$route.path" :router="true" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
4+
<el-menu-item index="/Message" :route="{path: '/Message'}">
65
留言窗口
7-
</router-link>
86
</el-menu-item>
9-
<el-menu-item index="2">
10-
<router-link to="/MessageList">
7+
<el-menu-item index="/MessageList" :route="{path: '/MessageList'}">
118
留言列表
12-
</router-link>
139
</el-menu-item>
1410
</el-menu>
15-
<transition>
11+
<transition :name="transitionName">
1612
<router-view>
1713
</router-view>
1814
</transition>
@@ -26,7 +22,7 @@ export default {
2622
/* eslint-disable */
2723
data() {
2824
return {
29-
activeIndex: '1'
25+
transitionName: 'slide-right'
3026
}
3127
},
3228
@@ -39,6 +35,9 @@ export default {
3935
</script>
4036

4137
<style lang="less">
38+
body{
39+
margin: 0
40+
}
4241
#app {
4342
font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
4443
-webkit-font-smoothing: antialiased;
@@ -50,6 +49,7 @@ export default {
5049
text-decoration: none
5150
}
5251
}
52+
5353
}
5454
5555
</style>

‎src/assets/head.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Message.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</el-form-item>
1616
<el-form-item label="留言内容" prop="content" :rules="[{ required: true, message: '请输入内容', trigger: 'blur' }, { required: true, message: '请输入内容', trigger: 'blur' },
1717
{ min: 10, max: 100, message: '长度在 10 到 100 个字符', trigger: 'blur,change' }]">
18-
<el-input type="textarea" placeholder="请填写内容" v-model="form.content">
18+
<el-input type="textarea":rows="4" placeholder="请填写内容" v-model="form.content" resize="none">
1919
</el-input>
2020
</el-form-item>
2121
<!-- <el-form-item label="打分">

‎src/components/MessageList.vue

Lines changed: 68 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,75 @@
11
<template>
2-
<el-card class="box-card">
3-
<div slot="header" class="clearfix">
4-
<span>留言列表</span>
2+
<div>
3+
<div class="main" v-for="(todo,index) in comments" v-if="index < 5">
4+
<div style="margin-bottom: 15px">
5+
<div style="display: inline-block">
6+
<img src="../assets/head.svg" style="width:35px">
7+
</div>
8+
<div class="info" style="display: inline-block">
9+
<span style="font-size: 15px;color: #333;">{{todo.name}}</span><br/>
10+
<span style="font-size: 12px;color: #969696;">{{comments.length-index+"楼."}}{{todo.create_time|data}}</span>
11+
</div>
12+
</div>
13+
{{todo.content}}
514
</div>
6-
<div v-for="o in 4" :key="o" class="text item" style="text-align: left">
7-
{{'列表内容 ' + o }}
15+
<div class="block" style="margin-top:30px">
16+
<el-pagination
17+
layout="prev, pager, next"
18+
:total="comments.length/.5"
19+
@current-change="changePage"
20+
:current-page="current">
21+
</el-pagination>
822
</div>
9-
</el-card>
23+
</div>
1024
</template>
1125
<script>
12-
export default {}
26+
export default {
27+
/* eslint-disable */
28+
data() {
29+
let comment = {
30+
name: "白植熙",
31+
content: "测试测试测试测试试测试测试测试测试测试测试测试测试测试测测试测试测试",
32+
create_time: 1512997751,
33+
id: 1
34+
}
35+
let comments = new Array;
36+
for(let i = 0; i < 12; i++){
37+
comments.push(comment)
38+
}
39+
return {
40+
comments,
41+
current: 1,
42+
}
43+
},
44+
methods: {
45+
changePage(val){
46+
console.log(`当前页: ${val}`);
47+
this.current = val;
48+
}
49+
},
50+
filters: {
51+
// 时间戳过滤器
52+
data: function (input){
53+
var d = new Date(input*1000);
54+
var year = d.getFullYear();
55+
var month = d.getMonth() + 1;
56+
var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
57+
var hour = d.getHours() <10 ? '0' + d.getHours() : '' + d.getHours();
58+
var minutes = d.getMinutes()<10 ? '0' + d.getMinutes() : '' + d.getMinutes();
59+
var seconds = d.getSeconds()<10 ? '0' + d.getSeconds() : '' + d.getSeconds();
60+
return year+ '.' + month + '.' + day + ' ' + hour + ':' + minutes + ':' + seconds;
61+
}
62+
}
63+
}
1364
</script>
14-
<style>
15-
.clearfix:before,
16-
.clearfix:after {
17-
display: table;
18-
content: "";
19-
}
20-
.clearfix:after {
21-
clear: both
22-
}
23-
24-
.box-card {
25-
width: 480px;
26-
}
65+
<style lang="less" scoped>
66+
.main{
67+
text-align: left;
68+
margin: 10px 15px 0 10px;
69+
font-size: .8em;
70+
padding-bottom: 20px;
71+
border-bottom: 1px solid #f0f0f0;
72+
73+
}
2774
</style>
75+

0 commit comments

Comments
 (0)