wl-design-mobile 0.1.6 → 0.1.7
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/list/components/table/lambo-table-head.vue +17 -14
- package/nav/lambo-top-nav.vue +10 -13
- package/package.json +1 -1
- package/search/lambo-multi-select.vue +15 -11
- package/search/lambo-search-box.vue +6 -0
- package/search/lambo-single-select.vue +15 -11
- package/search/styles/css/index.css +26 -16
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
3
|
+
<div class="table-header" ref="listRowDiv">
|
|
4
|
+
<div v-for="(item, index) in columns" :key="index" class="header-cell" :style="{
|
|
5
|
+
gridColumn: index + 1,
|
|
6
|
+
minWidth: item.minWidth,
|
|
7
|
+
textAlign: item.align || 'left' }">
|
|
6
8
|
{{ item.title }}
|
|
7
|
-
</
|
|
8
|
-
</
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
9
11
|
</div>
|
|
10
12
|
</template>
|
|
11
13
|
<script>
|
|
@@ -25,20 +27,21 @@ export default {
|
|
|
25
27
|
<style scoped lang="css">
|
|
26
28
|
.table-header {
|
|
27
29
|
width: 100%;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
padding-bottom: 12px;
|
|
33
|
-
border-bottom: 1px solid #eee;
|
|
34
|
-
overflow-x: auto;
|
|
30
|
+
display: grid;
|
|
31
|
+
grid-auto-rows: 30px;
|
|
32
|
+
gap: 1px;
|
|
33
|
+
align-items: center;
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
.header-cell {
|
|
38
37
|
box-sizing: border-box;
|
|
39
|
-
|
|
40
|
-
border:
|
|
38
|
+
border: 1px solid #ddd;
|
|
39
|
+
border-radius: 3px;
|
|
41
40
|
font-size: 14px;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
place-items: center;
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
42
45
|
}
|
|
43
46
|
</style>
|
|
44
47
|
|
package/nav/lambo-top-nav.vue
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<van-nav-bar :title="title">
|
|
2
|
+
<div>
|
|
3
|
+
<van-nav-bar :title="title" fixed>
|
|
4
4
|
<template #left>
|
|
5
|
-
<
|
|
5
|
+
<van-icon name="arrow-left" color="#FFFFFF" size="20px" @click="back"/>
|
|
6
6
|
</template>
|
|
7
7
|
<template v-if="hasExtend" #right>
|
|
8
8
|
<div class="arrow-right-search" @click="more"></div>
|
|
9
9
|
</template>
|
|
10
10
|
</van-nav-bar>
|
|
11
|
-
|
|
11
|
+
<div style="height: 46px;"></div>
|
|
12
|
+
</div>
|
|
12
13
|
</template>
|
|
13
14
|
<script>
|
|
14
15
|
|
|
@@ -35,7 +36,7 @@ export default {
|
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
38
|
</script>
|
|
38
|
-
<style scoped>
|
|
39
|
+
<style lang="less" scoped>
|
|
39
40
|
@import "../styles/index.less";
|
|
40
41
|
|
|
41
42
|
.arrow-right-search {
|
|
@@ -47,14 +48,6 @@ export default {
|
|
|
47
48
|
background-image: url("../assets/icon/search-right.png");
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
.arrow-left {
|
|
51
|
-
width: 14px;
|
|
52
|
-
height: 14px;
|
|
53
|
-
line-height: 48px;
|
|
54
|
-
background-image: url("../assets/icon/arrow-left.png");
|
|
55
|
-
background-repeat: no-repeat;
|
|
56
|
-
background-size: 100% auto;
|
|
57
|
-
}
|
|
58
51
|
|
|
59
52
|
.van-nav-bar {
|
|
60
53
|
background-color: #0070D2;
|
|
@@ -63,6 +56,10 @@ export default {
|
|
|
63
56
|
|
|
64
57
|
.van-sticky {
|
|
65
58
|
position: fixed;
|
|
59
|
+
top: 0;
|
|
60
|
+
right: 0;
|
|
61
|
+
left: 0;
|
|
62
|
+
z-index: 100;
|
|
66
63
|
}
|
|
67
64
|
|
|
68
65
|
::v-deep .van-nav-bar__left {
|
package/package.json
CHANGED
|
@@ -9,18 +9,22 @@
|
|
|
9
9
|
<div>
|
|
10
10
|
<van-popup v-model:show="showBottom" :style="{ height: '31%' }" position="bottom">
|
|
11
11
|
<van-checkbox-group v-model="selectItem.K">
|
|
12
|
-
<div class="
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
<div class="bottom-div">
|
|
13
|
+
<div class="search-top-div">
|
|
14
|
+
<van-button class="search-cancel-btn" size="normal" @click="cancel">取消</van-button>
|
|
15
|
+
<span class="search-select-title">请选择</span>
|
|
16
|
+
<van-button class="search-confirm-btn" size="normal" @click="onConfirm">确认</van-button>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="cell-group-div">
|
|
19
|
+
<van-cell-group>
|
|
20
|
+
<van-cell v-for="(c, index) in data" :key="index" :title="`${c.V}`" clickable @click="checkboxClick(c)">
|
|
21
|
+
<template #right-icon>
|
|
22
|
+
<van-checkbox :name="c.K" shape="square" ref="checkboxes" checked-color="#0070D2"/>
|
|
23
|
+
</template>
|
|
24
|
+
</van-cell>
|
|
25
|
+
</van-cell-group>
|
|
26
|
+
</div>
|
|
16
27
|
</div>
|
|
17
|
-
<van-cell-group>
|
|
18
|
-
<van-cell v-for="(c, index) in data" :key="index" :title="`${c.V}`" clickable @click="checkboxClick(c)">
|
|
19
|
-
<template #right-icon>
|
|
20
|
-
<van-checkbox :name="c.K" shape="square" ref="checkboxes" checked-color="#0070D2"/>
|
|
21
|
-
</template>
|
|
22
|
-
</van-cell>
|
|
23
|
-
</van-cell-group>
|
|
24
28
|
</van-checkbox-group>
|
|
25
29
|
</van-popup>
|
|
26
30
|
</div>
|
|
@@ -9,18 +9,22 @@
|
|
|
9
9
|
<div>
|
|
10
10
|
<van-popup v-model:show="showBottom" :style="{ height: '31%' }" position="bottom">
|
|
11
11
|
<van-radio-group v-model="selectItem.K">
|
|
12
|
-
<div class="
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
<div class="bottom-div">
|
|
13
|
+
<div class="search-top-div">
|
|
14
|
+
<van-button class="search-cancel-btn" size="normal" @click="cancel">取消</van-button>
|
|
15
|
+
<span class="search-select-title">请选择</span>
|
|
16
|
+
<van-button class="search-confirm-btn" size="normal" @click="onConfirm">确认</van-button>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="cell-group-div">
|
|
19
|
+
<van-cell-group>
|
|
20
|
+
<van-cell v-for="(c, index) in data" :key="index" :title="`${c.V}`" clickable @click="radioClick(c)">
|
|
21
|
+
<template #right-icon>
|
|
22
|
+
<van-radio :name="c.K" checked-color="#0070D2"/>
|
|
23
|
+
</template>
|
|
24
|
+
</van-cell>
|
|
25
|
+
</van-cell-group>
|
|
26
|
+
</div>
|
|
16
27
|
</div>
|
|
17
|
-
<van-cell-group>
|
|
18
|
-
<van-cell v-for="(c, index) in data" :key="index" :title="`${c.V}`" clickable @click="radioClick(c)">
|
|
19
|
-
<template #right-icon>
|
|
20
|
-
<van-radio :name="c.K" checked-color="#0070D2"/>
|
|
21
|
-
</template>
|
|
22
|
-
</van-cell>
|
|
23
|
-
</van-cell-group>
|
|
24
28
|
</van-radio-group>
|
|
25
29
|
</van-popup>
|
|
26
30
|
</div>
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
.search-top-pop {
|
|
2
|
-
min-height:
|
|
3
|
-
max-height:
|
|
2
|
+
min-height: 112px;
|
|
3
|
+
max-height: 33%;
|
|
4
4
|
background-color: var(--scl-white-1)
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.search-body {
|
|
8
8
|
border-top: none;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
overflow: auto;
|
|
9
|
+
overflow-y: auto;
|
|
10
|
+
flex: 1
|
|
12
11
|
}
|
|
13
12
|
|
|
14
13
|
.search-bottom-btn {
|
|
15
|
-
padding:
|
|
14
|
+
padding: 12px 14px 12px 14px;
|
|
15
|
+
box-shadow: 0 -2px 10px rgba(125, 126, 128, .16);
|
|
16
|
+
background-color: rgb(255, 255, 255, 1);
|
|
16
17
|
}
|
|
17
18
|
|
|
18
|
-
|
|
19
19
|
/*日期选择*/
|
|
20
20
|
.search-row {
|
|
21
21
|
display: flex;
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
flex-wrap: nowrap;
|
|
25
25
|
align-items: center;
|
|
26
26
|
align-content: center;
|
|
27
|
-
height:
|
|
28
|
-
padding:
|
|
27
|
+
height: 50px;
|
|
28
|
+
padding: 10px 0;
|
|
29
29
|
margin: 0 14px;
|
|
30
30
|
border-bottom: 1px solid var(--scl-white-2);
|
|
31
31
|
border-top: none;
|
|
@@ -56,16 +56,12 @@
|
|
|
56
56
|
flex: 1;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
|
|
60
59
|
/*输入框*/
|
|
61
|
-
|
|
62
60
|
.search-lambo-input .van-cell {
|
|
63
61
|
padding: 10px 0;
|
|
64
62
|
}
|
|
65
63
|
|
|
66
|
-
|
|
67
64
|
/*多选*/
|
|
68
|
-
|
|
69
65
|
.search-top-div {
|
|
70
66
|
display: flex;
|
|
71
67
|
justify-content: space-between;
|
|
@@ -73,7 +69,9 @@
|
|
|
73
69
|
line-height: 44px;
|
|
74
70
|
width: 100%;
|
|
75
71
|
position: fixed;
|
|
76
|
-
z-index:
|
|
72
|
+
z-index: 2;
|
|
73
|
+
box-shadow: 0 2px 10px rgba(125, 126, 128, .16);
|
|
74
|
+
background-color: rgb(255, 255, 255, 1);
|
|
77
75
|
}
|
|
78
76
|
|
|
79
77
|
.search-cancel-btn {
|
|
@@ -106,7 +104,6 @@
|
|
|
106
104
|
padding-top: 10px;
|
|
107
105
|
}
|
|
108
106
|
|
|
109
|
-
|
|
110
107
|
/*滚动条样式*/
|
|
111
108
|
/deep/ ::-webkit-scrollbar {
|
|
112
109
|
width: 6px;
|
|
@@ -123,4 +120,17 @@
|
|
|
123
120
|
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
|
|
124
121
|
border-radius: var(--ind-border-radius-xl);
|
|
125
122
|
background: rgba(231, 242, 250, 0.4);
|
|
126
|
-
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.bottom-div {
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.cell-group-div {
|
|
131
|
+
flex: 1;
|
|
132
|
+
overflow-y: auto;
|
|
133
|
+
margin-top: 44px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
|