look-ui 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -1
- package/src/components/tab-scroll.vue +221 -0
- package/src/css/table/index.scss +15 -12
- package/src/index.js +5 -1
package/package.json
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "look-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "a ui library which is based on element-ui",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
8
|
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/cyan0714/look-ui"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://github.com/cyan0714/look-ui",
|
|
9
14
|
"keywords": [],
|
|
10
15
|
"author": "Shiyan Chen",
|
|
11
16
|
"license": "ISC"
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="cycle-list">
|
|
3
|
+
<i class="left-arrow el-icon-arrow-left" @click="handleScrollLeft"></i>
|
|
4
|
+
<div class="scroll-container">
|
|
5
|
+
<div class="scroll-wrapper" ref="scrollWrapperRef">
|
|
6
|
+
<div class="scroll-item" v-for="(item, index) in cycleList" :key="index" @click="handleCycleItemClick(item, index)"
|
|
7
|
+
:class="{ active: currentIndex === index }">
|
|
8
|
+
<span>{{ item.name }}</span>
|
|
9
|
+
<span>{{ item.endTime }}</span>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<i class="right-arrow el-icon-arrow-right" @click="handleScrollRight"></i>
|
|
14
|
+
<div class="show-all-container">
|
|
15
|
+
<span class="show-all" @click="handleShowAllItems" ref="showAllRef">
|
|
16
|
+
查看全部
|
|
17
|
+
</span>
|
|
18
|
+
<div class="sa-items" v-show="isShowAllItems" ref="saItemsRef">
|
|
19
|
+
<h4 style="font-weight: 400; margin: 20px 30px; font-size: 16px">汇报阶段</h4>
|
|
20
|
+
<div class="sa-item-container">
|
|
21
|
+
<div v-for="(item, index) in cycleList" :key="index" class="sa-item" @click="handleAllCycleItemClick(item, index)">
|
|
22
|
+
<span>{{ item.name }}</span>
|
|
23
|
+
<span>{{ item.endTime }}</span>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<script>
|
|
32
|
+
export default {
|
|
33
|
+
data() {
|
|
34
|
+
return {
|
|
35
|
+
currentIndex: 0,
|
|
36
|
+
isShowAllItems: false,
|
|
37
|
+
cycleList: [
|
|
38
|
+
{
|
|
39
|
+
name: '第一阶段',
|
|
40
|
+
endTime: '2023-01-06 23:59'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
name: '第二阶段',
|
|
44
|
+
endTime: '2023-01-06 23:59'
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: '第三阶段',
|
|
48
|
+
endTime: '2023-01-06 23:59'
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
name: '第四阶段',
|
|
52
|
+
endTime: '2023-01-06 23:59'
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: '第五阶段',
|
|
56
|
+
endTime: '2023-01-06 23:59'
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: '第六阶段',
|
|
60
|
+
endTime: '2023-01-06 23:59'
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: '第七阶段',
|
|
64
|
+
endTime: '2023-01-06 23:59'
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: '第八阶段',
|
|
68
|
+
endTime: '2023-01-06 23:59'
|
|
69
|
+
},
|
|
70
|
+
],
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
computed: {
|
|
74
|
+
maxPage() {
|
|
75
|
+
return Math.ceil(this.cycleList.length / 5)
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
mounted() {
|
|
79
|
+
document.body.addEventListener('click', this.handleBodyClick);
|
|
80
|
+
},
|
|
81
|
+
methods: {
|
|
82
|
+
handleBodyClick(ev) {
|
|
83
|
+
if (!ev.composedPath().includes(this.$refs.saItemsRef) && !ev.composedPath().includes(this.$refs.showAllRef)) {
|
|
84
|
+
this.isShowAllItems = false;
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
handleAllCycleItemClick(item, index) {
|
|
88
|
+
this.isShowAllItems = false;
|
|
89
|
+
},
|
|
90
|
+
handleCycleItemClick(item, index) {
|
|
91
|
+
this.currentIndex = index
|
|
92
|
+
},
|
|
93
|
+
handleShowAllItems() {
|
|
94
|
+
this.isShowAllItems = !this.isShowAllItems
|
|
95
|
+
},
|
|
96
|
+
handleScrollLeft() {
|
|
97
|
+
if (this.currentPage === 1) return;
|
|
98
|
+
console.log('hhh');
|
|
99
|
+
// console.log(JSON.parse(JSON.stringify('hhhh')))
|
|
100
|
+
this.$refs.scrollWrapperRef.style.left = Number.parseInt(this.$refs.scrollWrapperRef.style.left) + this.ONEGROUPWIDTH + 'px'
|
|
101
|
+
this.currentPage--
|
|
102
|
+
},
|
|
103
|
+
handleScrollRight() {
|
|
104
|
+
if (this.currentPage === this.maxPage) return
|
|
105
|
+
this.$refs.scrollWrapperRef.style.left = "-" + this.currentPage * this.ONEGROUPWIDTH + 'px'
|
|
106
|
+
this.currentPage++;
|
|
107
|
+
},
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
</script>
|
|
111
|
+
|
|
112
|
+
<style scoped lang="scss">
|
|
113
|
+
.cycle-list {
|
|
114
|
+
display: flex;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
align-items: center;
|
|
117
|
+
height: 70px;
|
|
118
|
+
border: 1px solid #dcdfe6;
|
|
119
|
+
|
|
120
|
+
.left-arrow,
|
|
121
|
+
.right-arrow,
|
|
122
|
+
.show-all {
|
|
123
|
+
position: relative;
|
|
124
|
+
display: flex;
|
|
125
|
+
justify-content: center;
|
|
126
|
+
align-items: center;
|
|
127
|
+
width: 40px;
|
|
128
|
+
height: 100%;
|
|
129
|
+
cursor: pointer;
|
|
130
|
+
z-index: 2;
|
|
131
|
+
text-align: center;
|
|
132
|
+
color: $--color-primary;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.left-arrow {
|
|
136
|
+
border-right: 1px solid #dcdfe6;
|
|
137
|
+
font-size: 24px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.right-arrow {
|
|
141
|
+
font-size: 24px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.right-arrow,
|
|
145
|
+
.show-all {
|
|
146
|
+
border-left: 1px solid #dcdfe6;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.show-all-container {
|
|
150
|
+
position: relative;
|
|
151
|
+
width: 40px;
|
|
152
|
+
height: 100%;
|
|
153
|
+
|
|
154
|
+
.sa-items {
|
|
155
|
+
position: absolute;
|
|
156
|
+
top: 69px;
|
|
157
|
+
right: 0;
|
|
158
|
+
width: 1120px;
|
|
159
|
+
background-color: #fff;
|
|
160
|
+
border-radius: 10px;
|
|
161
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
|
162
|
+
border: 1px solid #dcdfe6;
|
|
163
|
+
z-index: 2;
|
|
164
|
+
padding-bottom: 20px;
|
|
165
|
+
|
|
166
|
+
.sa-item-container {
|
|
167
|
+
display: flex;
|
|
168
|
+
width: 100%;
|
|
169
|
+
flex-wrap: wrap;
|
|
170
|
+
|
|
171
|
+
.sa-item {
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-direction: column;
|
|
174
|
+
align-items: center;
|
|
175
|
+
width: 160px;
|
|
176
|
+
margin: 0 30px;
|
|
177
|
+
border: 1px solid #dcdfe6;
|
|
178
|
+
border-radius: 30px;
|
|
179
|
+
margin-bottom: 20px;
|
|
180
|
+
cursor: pointer;
|
|
181
|
+
|
|
182
|
+
&:hover {
|
|
183
|
+
color: $--color-primary;
|
|
184
|
+
border-color: $--color-primary;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.scroll-container {
|
|
192
|
+
overflow: auto;
|
|
193
|
+
flex: 1;
|
|
194
|
+
margin-top: 20px;
|
|
195
|
+
|
|
196
|
+
.scroll-item {
|
|
197
|
+
&.active {
|
|
198
|
+
color: $--color-primary;
|
|
199
|
+
border-bottom: 2px solid $--color-primary;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
display: flex;
|
|
203
|
+
flex-direction: column;
|
|
204
|
+
flex-shrink: 0;
|
|
205
|
+
align-items: center;
|
|
206
|
+
width: 130px;
|
|
207
|
+
margin: 0 30px;
|
|
208
|
+
padding-bottom: 8px;
|
|
209
|
+
cursor: pointer;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.scroll-wrapper {
|
|
214
|
+
display: flex;
|
|
215
|
+
position: relative;
|
|
216
|
+
top: 0;
|
|
217
|
+
left: 0;
|
|
218
|
+
transition: all 1s;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
</style>
|
package/src/css/table/index.scss
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
font-size: 14px;
|
|
15
15
|
padding: 14px 0;
|
|
16
16
|
background-color: #f1f4fa;
|
|
17
|
-
border-radius: 4px 4px 0px 0px;
|
|
17
|
+
// border-radius: 4px 4px 0px 0px;
|
|
18
18
|
.cell {
|
|
19
19
|
line-height: 24px;
|
|
20
20
|
.caret-wrapper {
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
font-size: 14px;
|
|
139
139
|
padding: 14px 0;
|
|
140
140
|
background-color: #f1f4fa;
|
|
141
|
-
border-radius: 4px 4px 0px 0px;
|
|
141
|
+
// border-radius: 4px 4px 0px 0px;
|
|
142
142
|
border-bottom: 2px solid #506eda;
|
|
143
143
|
.cell {
|
|
144
144
|
line-height: 24px;
|
|
@@ -262,10 +262,10 @@
|
|
|
262
262
|
}
|
|
263
263
|
}
|
|
264
264
|
// 修复element-ui表格表头与表体不对齐
|
|
265
|
-
|
|
265
|
+
&.el-table th.gutter {
|
|
266
266
|
display: table-cell !important;
|
|
267
267
|
}
|
|
268
|
-
|
|
268
|
+
&.el-table::before {
|
|
269
269
|
height: 0;
|
|
270
270
|
}
|
|
271
271
|
// 调整滚动条样式
|
|
@@ -275,24 +275,27 @@
|
|
|
275
275
|
background-color: #ebeef5;
|
|
276
276
|
}
|
|
277
277
|
::-webkit-scrollbar-thumb {
|
|
278
|
-
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
279
|
-
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
278
|
+
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
279
|
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
280
280
|
background-color: #ccc;
|
|
281
281
|
}
|
|
282
|
-
::-webkit-scrollbar-track{
|
|
282
|
+
::-webkit-scrollbar-track {
|
|
283
283
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
284
284
|
border-radius: 3px;
|
|
285
285
|
background: rgba(255, 255, 255, 1);
|
|
286
286
|
}
|
|
287
287
|
// 修复固定列最后一行宽度问题
|
|
288
|
-
.el-table__fixed
|
|
289
|
-
height:100% !important;
|
|
290
|
-
}
|
|
288
|
+
.el-table__fixed,
|
|
291
289
|
.el-table__fixed-right {
|
|
292
|
-
height:
|
|
290
|
+
height: auto !important;
|
|
291
|
+
bottom: 16px;
|
|
292
|
+
&::before {
|
|
293
|
+
height: 0;
|
|
294
|
+
}
|
|
293
295
|
}
|
|
294
296
|
// 取消文档默认样式
|
|
295
|
-
th,
|
|
297
|
+
th,
|
|
298
|
+
td {
|
|
296
299
|
border: 0;
|
|
297
300
|
}
|
|
298
301
|
// 取消文档默认样式
|
package/src/index.js
CHANGED