|
@@ -2,10 +2,19 @@
|
2
|
2
|
<div class="main_root">
|
3
|
3
|
<div class="personal_list">
|
4
|
4
|
<div class="personal_item" v-for="item in personal_list" :key="item.id">
|
5
|
|
- <div>{{ item.title }}</div>
|
|
5
|
+ <div
|
|
6
|
+ @click="curmodel = item.id"
|
|
7
|
+ :class="[curmodel === item.id ? 'active' : '']"
|
|
8
|
+ >
|
|
9
|
+ {{ item.title }}
|
|
10
|
+ </div>
|
6
|
11
|
</div>
|
7
|
12
|
</div>
|
8
|
|
- <div class="content"></div>
|
|
13
|
+ <div class="contents" v-if="curmodel === 1">
|
|
14
|
+ <div class="user"></div>
|
|
15
|
+ <div class="comm"></div>
|
|
16
|
+ </div>
|
|
17
|
+ <div class="content" v-else></div>
|
9
|
18
|
</div>
|
10
|
19
|
</template>
|
11
|
20
|
|
|
@@ -26,7 +35,8 @@ export default {
|
26
|
35
|
id: 3,
|
27
|
36
|
title: "历史登录"
|
28
|
37
|
}
|
29
|
|
- ]
|
|
38
|
+ ],
|
|
39
|
+ curmodel: 1
|
30
|
40
|
};
|
31
|
41
|
},
|
32
|
42
|
methods: {}
|
|
@@ -37,18 +47,42 @@ export default {
|
37
|
47
|
.main_root {
|
38
|
48
|
background-color: transparent;
|
39
|
49
|
border: navajowhite;
|
40
|
|
- height: calc(100% - 10px);
|
|
50
|
+ height: calc(100% - 20px);
|
41
|
51
|
display: flex;
|
42
|
52
|
.personal_list {
|
43
|
53
|
width: 200px;
|
44
|
54
|
height: 100%;
|
45
|
55
|
border-radius: 15px;
|
|
56
|
+ padding: 20px 10px;
|
46
|
57
|
border: 1px solid #e9f0f9;
|
47
|
58
|
background: #ffffff;
|
48
|
|
- margin-right: 10px;
|
|
59
|
+ margin-right: 20px;
|
|
60
|
+ .personal_item {
|
|
61
|
+ line-height: 30px;
|
|
62
|
+ text-align: center;
|
|
63
|
+ cursor: pointer;
|
|
64
|
+ }
|
|
65
|
+ .active {
|
|
66
|
+ border-radius: 6px;
|
|
67
|
+ background: #339dff;
|
|
68
|
+ color: white;
|
|
69
|
+ }
|
|
70
|
+ }
|
|
71
|
+ .contents {
|
|
72
|
+ width: calc(100% - 220px);
|
|
73
|
+ height: 100%;
|
|
74
|
+ .uaer{
|
|
75
|
+ height: 200px;
|
|
76
|
+ border-radius: 6px;
|
|
77
|
+ background: white;
|
|
78
|
+ margin-bottom: 20px;
|
|
79
|
+ }
|
|
80
|
+ .comm{
|
|
81
|
+ height: calc(100% - 220px);
|
|
82
|
+ }
|
49
|
83
|
}
|
50
|
84
|
.content {
|
51
|
|
- width: calc(100% - 210px);
|
|
85
|
+ width: calc(100% - 220px);
|
52
|
86
|
height: 100%;
|
53
|
87
|
border-radius: 15px;
|
54
|
88
|
border: 1px solid #e9f0f9;
|