xiaoxi.vue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
<div>
<div class="xiaoxi-box">
<div class="xiaoxi-boxs">
<div class="xitong">
<img src="../assets/zuojian.png" class="zuojiantou" alt="" />
<div class="xitong-texct">系统消息</div>
</div>
<div class="xitongs">
<div class="xitons-left">
<div
v-for="(item, index) in ad"
:key="index"
:class="tl == index ? 'quanbus' : 'quanbu'"
@click="bg(index)"
>
{{ item }}
<div class="gexiansf" v-if="tl == index"></div>
</div>
</div>
<div class="xioons-right">
<div class="xioons-rights">
<img src="../assets/search.png" class="search-imgs" alt="" />
<input type="text" placeholder="搜索关键词查找" class="inputsafa" />
</div>
<div class="chaxuns">查询</div>
</div>
</div>
<div class="lists">
<div class="list-s" v-for="(item, index) in addlist" :key="index">
<div class="lists-tou">
<div class="xiaoxi">消息类型</div>
<div class="weidus">未读</div>
</div>
<div class="xiso-cont">
消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息消息内容消息内容消息内容消息容...
</div>
<div class="shijians">
<img src="../assets/shijian.png" class="shi-imgs" alt="" />
<div class="timer">2020.01.10 10:30:30</div>
</div>
</div>
</div>
<div class="tiaoshu">
<div class="left-io"></div>
<div class="gon">共400条</div>
<div class="kls">
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
</div>
</div>
</div>
</div>
<Tabbar :actives="1"></Tabbar>
</div>
</template>
<script>
import Tabbar from "./tabbar.vue";
export default {
components: {
Tabbar,
},
data() {
return {
aco: "",
activeName: "second",
ad: ["全部", "已读", "未读"],
dialogVisible: false,
tl: "0",
addlist: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
tablelists: [
{
date: "请输入产品型号",
name: "请输入产品编号",
province: "请输入产品数量",
city: "请输入到货时间",
zhuan: "已完成",
},
],
};
},
created() {
let that = this;
setTimeout(function () {
that.aco = that.$route.query.ac;
console.log(that.aco);
}, 100);
},
mounted() {
let that = this;
setTimeout(function () {
that.aco = that.$route.query.ac;
console.log(that.aco);
}, 100);
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
bg(index) {
this.tl = index;
},
},
};
</script>
<style>
.el-tabs .el-tabs--top {
width: 80%;
}
.is-top {
width: 80%;
text-align: center;
}
.el-dialog {
border-radius: 16px;
}
.el-dialog__body {
padding: 0 20px 20px 20px;
}
</style>
<style scoped>
@import "../css/home.css";
@import "../css/fa.css";
@import "../css/xiaoxi.css";
</style>