zartui 0.1.60 → 0.1.63
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/es/hierarchy-select/breadcrumb.js +75 -0
- package/es/hierarchy-select/hierarchySelect.js +147 -0
- package/es/hierarchy-select/index.css +1 -0
- package/es/hierarchy-select/index.js +111 -0
- package/es/hierarchy-select/index.less +232 -0
- package/es/hierarchy-select/markList.js +224 -0
- package/es/hierarchy-select/style/index.js +8 -0
- package/es/hierarchy-select/style/less.js +8 -0
- package/es/hierarchy-select/svg/SubIcon.js +50 -0
- package/es/index.js +4 -3
- package/es/style/var.less +21 -1
- package/lib/7893e51cf0a4877dac80.worker.js +10 -0
- package/lib/be09b519a460e229fd8d.worker.js +2527 -0
- package/lib/hierarchy-select/breadcrumb.js +85 -0
- package/lib/hierarchy-select/hierarchySelect.js +162 -0
- package/lib/hierarchy-select/index.css +1 -0
- package/lib/hierarchy-select/index.js +124 -0
- package/lib/hierarchy-select/index.less +232 -0
- package/lib/hierarchy-select/markList.js +236 -0
- package/lib/hierarchy-select/style/index.js +8 -0
- package/lib/hierarchy-select/style/less.js +8 -0
- package/lib/hierarchy-select/svg/SubIcon.js +55 -0
- package/lib/index.css +1 -1
- package/lib/index.js +6 -2
- package/lib/index.less +1 -0
- package/lib/style/var.less +21 -1
- package/lib/zart.js +11012 -42733
- package/lib/zart.min.js +4 -4
- package/package.json +1 -1
- package/lib/a037f57fc4d92a8a1f1e.worker.js +0 -60600
- package/lib/b7cf90b4775181215df7.worker.js +0 -10
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
// Utils
|
|
2
|
+
import { createNamespace } from '../utils';
|
|
3
|
+
import Icon from "../icon";
|
|
4
|
+
|
|
5
|
+
var _createNamespace = createNamespace('hierarchy-select-breadcrumb'),
|
|
6
|
+
createComponent = _createNamespace[0],
|
|
7
|
+
bem = _createNamespace[1],
|
|
8
|
+
t = _createNamespace[2];
|
|
9
|
+
|
|
10
|
+
export default createComponent({
|
|
11
|
+
props: {
|
|
12
|
+
data: {
|
|
13
|
+
type: Array,
|
|
14
|
+
default: function _default() {
|
|
15
|
+
return [];
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
valueKey: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: "id"
|
|
21
|
+
},
|
|
22
|
+
textKey: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: "name"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
data: function data() {
|
|
28
|
+
return {};
|
|
29
|
+
},
|
|
30
|
+
methods: {
|
|
31
|
+
chooseSenior: function chooseSenior(index) {
|
|
32
|
+
this.$emit("chooseSenior", index);
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
render: function render(h) {
|
|
36
|
+
var _this = this;
|
|
37
|
+
|
|
38
|
+
return h("div", [this.data.length > 0 ? h("div", {
|
|
39
|
+
"class": bem()
|
|
40
|
+
}, [h("span", {
|
|
41
|
+
"class": bem("fill-blur")
|
|
42
|
+
}), h("div", {
|
|
43
|
+
"class": bem("indicator-crumb-list")
|
|
44
|
+
}, [h("span", {
|
|
45
|
+
"style": {
|
|
46
|
+
color: '#0091fa'
|
|
47
|
+
},
|
|
48
|
+
"on": {
|
|
49
|
+
"click": function click() {
|
|
50
|
+
_this.chooseSenior(-1);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, ["\u5168\u90E8"]), this.data.map(function (item, index) {
|
|
54
|
+
return h("div", {
|
|
55
|
+
"class": bem("crumb-item")
|
|
56
|
+
}, [h(Icon, {
|
|
57
|
+
"attrs": {
|
|
58
|
+
"name": "arrow"
|
|
59
|
+
},
|
|
60
|
+
"class": bem("icon-arrow")
|
|
61
|
+
}), h("span", {
|
|
62
|
+
"style": {
|
|
63
|
+
color: index === _this.data.length - 1 ? '' : '#0091fa'
|
|
64
|
+
},
|
|
65
|
+
"on": {
|
|
66
|
+
"click": function click() {
|
|
67
|
+
_this.chooseSenior(index);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}, [item[_this.textKey]])]);
|
|
71
|
+
})]), h("span", {
|
|
72
|
+
"class": "fill-blur"
|
|
73
|
+
})]) : h()]);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
// Utils
|
|
2
|
+
import { createNamespace } from '../utils';
|
|
3
|
+
import { resetObject } from "../utils/index";
|
|
4
|
+
import { deepClone } from '../utils/deep-clone';
|
|
5
|
+
import Breadcrumb from "./breadcrumb";
|
|
6
|
+
import MarkList from "./markList";
|
|
7
|
+
import Loading from '../loading';
|
|
8
|
+
import Toast from '../toast';
|
|
9
|
+
|
|
10
|
+
var _createNamespace = createNamespace('hierarchy-select-core'),
|
|
11
|
+
createComponent = _createNamespace[0],
|
|
12
|
+
bem = _createNamespace[1],
|
|
13
|
+
t = _createNamespace[2];
|
|
14
|
+
|
|
15
|
+
var defaultData = function defaultData() {
|
|
16
|
+
return {
|
|
17
|
+
dataList: [],
|
|
18
|
+
indexTree: [],
|
|
19
|
+
breadcrumbData: [],
|
|
20
|
+
callback: null,
|
|
21
|
+
historyLayers: [],
|
|
22
|
+
loading: false
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export default createComponent({
|
|
27
|
+
props: {
|
|
28
|
+
treeData: {
|
|
29
|
+
type: Array,
|
|
30
|
+
default: function _default() {
|
|
31
|
+
return [];
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
disableParent: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
default: false
|
|
37
|
+
},
|
|
38
|
+
asyncGetter: {
|
|
39
|
+
type: Function,
|
|
40
|
+
default: null
|
|
41
|
+
},
|
|
42
|
+
multiple: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: false
|
|
45
|
+
},
|
|
46
|
+
valueKey: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: "id"
|
|
49
|
+
},
|
|
50
|
+
textKey: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: "name"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
data: function data() {
|
|
56
|
+
return defaultData();
|
|
57
|
+
},
|
|
58
|
+
mounted: function mounted() {
|
|
59
|
+
// resetObject(this, defaultData())
|
|
60
|
+
// if (this.$refs.markList) {
|
|
61
|
+
// this.$refs.markList.reset()
|
|
62
|
+
// }
|
|
63
|
+
this.dataList = deepClone(this.treeData);
|
|
64
|
+
},
|
|
65
|
+
methods: {
|
|
66
|
+
clickNext: function clickNext(obj) {
|
|
67
|
+
var _this = this;
|
|
68
|
+
|
|
69
|
+
var item = obj.item,
|
|
70
|
+
index = obj.index;
|
|
71
|
+
|
|
72
|
+
if (item["children"] && item["children"].length) {
|
|
73
|
+
this.historyLayers.push(this.dataList);
|
|
74
|
+
this.breadcrumbData.push(item);
|
|
75
|
+
this.dataList = item["children"];
|
|
76
|
+
} else {
|
|
77
|
+
if (this.asyncGetter) {
|
|
78
|
+
this.loading = true;
|
|
79
|
+
this.asyncGetter(item[this.valueKey]).then(function (list) {
|
|
80
|
+
_this.loading = false;
|
|
81
|
+
|
|
82
|
+
if (!list || list.length === 0) {
|
|
83
|
+
Toast("无下级数据");
|
|
84
|
+
_this.dataList[index].children = null;
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
_this.historyLayers.push(_this.dataList);
|
|
89
|
+
|
|
90
|
+
_this.breadcrumbData.push(item);
|
|
91
|
+
|
|
92
|
+
_this.dataList = list;
|
|
93
|
+
}).catch(function () {
|
|
94
|
+
_this.loading = false;
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
selected: function selected(item) {
|
|
100
|
+
this.$emit("selected", item);
|
|
101
|
+
},
|
|
102
|
+
chooseSenior: function chooseSenior(index) {
|
|
103
|
+
this.breadcrumbData.splice(index + 1);
|
|
104
|
+
this.dataList = this.historyLayers[index + 1];
|
|
105
|
+
this.historyLayers.splice(index + 1);
|
|
106
|
+
},
|
|
107
|
+
cancel: function cancel() {
|
|
108
|
+
this.$emit("cancel");
|
|
109
|
+
},
|
|
110
|
+
confirm: function confirm(list) {
|
|
111
|
+
this.$emit("confirm", list);
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
render: function render(h) {
|
|
115
|
+
return h("div", {
|
|
116
|
+
"class": bem()
|
|
117
|
+
}, [h(Breadcrumb, {
|
|
118
|
+
"attrs": {
|
|
119
|
+
"data": this.breadcrumbData,
|
|
120
|
+
"valueKey": this.valueKey,
|
|
121
|
+
"textKey": this.textKey
|
|
122
|
+
},
|
|
123
|
+
"on": {
|
|
124
|
+
"chooseSenior": this.chooseSenior
|
|
125
|
+
}
|
|
126
|
+
}), h("div", {
|
|
127
|
+
"class": bem("list")
|
|
128
|
+
}, [this.loading ? h(Loading, {
|
|
129
|
+
"class": bem('loading')
|
|
130
|
+
}) : h(), h(MarkList, {
|
|
131
|
+
"ref": "markList",
|
|
132
|
+
"attrs": {
|
|
133
|
+
"dataList": this.dataList,
|
|
134
|
+
"multiple": this.multiple,
|
|
135
|
+
"disableParent": this.disableParent,
|
|
136
|
+
"valueKey": this.valueKey,
|
|
137
|
+
"textKey": this.textKey
|
|
138
|
+
},
|
|
139
|
+
"on": {
|
|
140
|
+
"clickNext": this.clickNext,
|
|
141
|
+
"selected": this.selected,
|
|
142
|
+
"cancel": this.cancel,
|
|
143
|
+
"confirm": this.confirm
|
|
144
|
+
}
|
|
145
|
+
})])]);
|
|
146
|
+
}
|
|
147
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.zt-hierarchy-select__popup{height:100%}.zt-hierarchy-select__popup .zt-hierarchy-select{background-color:#f5f5ff;height:100%}.zt-hierarchy-select__popup .zt-hierarchy-select__title{height:44px;position:relative;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.1)}.zt-hierarchy-select__popup .zt-hierarchy-select__title i{font-size:14px;position:absolute;left:15px;top:16px}.zt-hierarchy-select__popup .zt-hierarchy-select__title div{line-height:44px;text-align:center;font-weight:700;font-size:18px;color:#142841}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-core .zt-loading{position:absolute;top:50%;left:50%;margin-left:-18px;margin-right:-18px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-core__list span{height:24px;font-size:16px;font-family:PingFangSC,PingFangSC-Semibold;font-weight:600;color:#0091fa;line-height:24px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-core__list .flex{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-breadcrumb{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;padding:10px 0;background-color:#fff;margin-bottom:16px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-breadcrumb__indicator-crumb-list{-webkit-box-flex:1;-webkit-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:0 16px;overflow-x:auto}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-breadcrumb__indicator-crumb-list span{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;white-space:nowrap;height:24px;font-size:16px;font-family:PingFangSC,PingFangSC-Regular;text-align:left;color:#000;line-height:24px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-breadcrumb__indicator-crumb-list__icon-arrow{margin:0 4px;width:20px;height:20px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-breadcrumb__crumb-item{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-breadcrumb__fill-blur{position:absolute;top:0;width:16px;height:44px;background:-webkit-gradient(linear,right top,left top,from(rgba(255,255,255,0)),to(#fff))}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-select-breadcrumb__fill-blur:last-child{right:0;top:0;background:-webkit-gradient(linear,right top,left top,from(#fff),to(rgba(255,255,255,0)))}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list{background-color:#fff}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__multiple-button{margin-right:8px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__check-icon{color:#0091fa;font-size:24px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__uncheck-icon{width:24px;height:24px;border:1px solid rgba(0,0,0,.1);border-radius:50%}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__score-item{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:10px 0;background-color:#fff;margin-left:16px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__score-item:after{content:" ";position:absolute;bottom:0;height:1px;width:100%;background-color:rgba(0,0,0,.1);box-shadow:0 0 0 0 #000 inset}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__item-content{-webkit-box-flex:1;-webkit-flex:1;flex:1;margin-right:16px;width:278px;font-size:16px;font-family:PingFangSC,PingFangSC-Regular;font-weight:400;text-align:left;color:#000;line-height:24px;word-break:break-all}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__item-content span{color:#0091fa}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__item-nav{padding:0 16px;border-left:rgba(0,0,0,.1) 1px solid}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__sub-level{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__sub-level span{color:#0091fa}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__sub-level--disable{opacity:.2}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__sub-icon{margin-right:4px;font-size:0;width:20px;height:20px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__result-box{position:fixed;left:0;bottom:0;background:#fff;width:100%}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__result-list{height:160px;box-shadow:0 -4px 8px 0 rgba(0,0,0,.1);border-radius:8px 8px 0 0;padding:12px 16px;font-size:14px;color:#000;line-height:24px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__operate-box{display:-webkit-box;display:-webkit-flex;display:flex;height:44px;line-height:44px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__selected{border-top:1px solid rgba(0,0,0,.1);display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:0 16px;-webkit-box-flex:1;-webkit-flex:1;flex:1;height:44px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__selected i{color:#0091fa;font-size:20px;margin-right:4px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__selected span{font-size:14px;color:rgba(0,0,0,.6)}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__selected span.zt-hierarchy-mark-list__blue{color:#0091fa;margin-left:8px}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__line{width:1px;height:24px;background:rgba(0,0,0,.1);-webkit-transform:scaleX(.5);transform:scaleX(.5);border-top:1px solid rgba(0,0,0,.1)}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__cancel-button{width:110px;border-top:1px solid rgba(0,0,0,.1);font-size:16px;color:#000;text-align:center}.zt-hierarchy-select__popup .zt-hierarchy-select .zt-hierarchy-mark-list__confirm-button{width:110px;border-top:1px solid #0091fa;font-weight:700;font-size:16px;color:#fff;text-align:center;background:#0091fa}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
// Utils
|
|
2
|
+
import { createNamespace } from '../utils';
|
|
3
|
+
|
|
4
|
+
var _createNamespace = createNamespace('hierarchy-select'),
|
|
5
|
+
createComponent = _createNamespace[0],
|
|
6
|
+
bem = _createNamespace[1],
|
|
7
|
+
t = _createNamespace[2];
|
|
8
|
+
|
|
9
|
+
import HierarchySelect from './hierarchySelect';
|
|
10
|
+
import Popup from '../popup';
|
|
11
|
+
import { PopupMixin } from '../mixins/popup';
|
|
12
|
+
import Icon from "../icon";
|
|
13
|
+
export default createComponent({
|
|
14
|
+
mixins: [PopupMixin()],
|
|
15
|
+
props: {
|
|
16
|
+
treeData: {
|
|
17
|
+
type: Array,
|
|
18
|
+
default: []
|
|
19
|
+
},
|
|
20
|
+
disableParent: {
|
|
21
|
+
type: Boolean,
|
|
22
|
+
default: false
|
|
23
|
+
},
|
|
24
|
+
asyncGetter: {
|
|
25
|
+
type: Function,
|
|
26
|
+
default: null
|
|
27
|
+
},
|
|
28
|
+
multiple: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: false
|
|
31
|
+
},
|
|
32
|
+
valueKey: {
|
|
33
|
+
type: String,
|
|
34
|
+
default: "id"
|
|
35
|
+
},
|
|
36
|
+
textKey: {
|
|
37
|
+
type: String,
|
|
38
|
+
default: "name"
|
|
39
|
+
},
|
|
40
|
+
title: {
|
|
41
|
+
type: String,
|
|
42
|
+
default: "选择"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
data: function data() {
|
|
46
|
+
return {
|
|
47
|
+
showPicker: false
|
|
48
|
+
};
|
|
49
|
+
},
|
|
50
|
+
methods: {
|
|
51
|
+
onSelected: function onSelected(item) {
|
|
52
|
+
this.$emit("selected", item);
|
|
53
|
+
},
|
|
54
|
+
show: function show() {
|
|
55
|
+
this.showPicker = true;
|
|
56
|
+
},
|
|
57
|
+
hide: function hide() {
|
|
58
|
+
this.showPicker = false;
|
|
59
|
+
},
|
|
60
|
+
cancel: function cancel() {
|
|
61
|
+
this.hide();
|
|
62
|
+
},
|
|
63
|
+
confirm: function confirm(list) {
|
|
64
|
+
this.$emit("confirm", list);
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
render: function render(h) {
|
|
68
|
+
var _this = this;
|
|
69
|
+
|
|
70
|
+
return h(Popup, {
|
|
71
|
+
"attrs": {
|
|
72
|
+
"position": "bottom",
|
|
73
|
+
"closeOnPopstate": true
|
|
74
|
+
},
|
|
75
|
+
"class": bem('popup'),
|
|
76
|
+
"model": {
|
|
77
|
+
value: _this.showPicker,
|
|
78
|
+
callback: function callback($$v) {
|
|
79
|
+
_this.showPicker = $$v;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}, [h("div", {
|
|
83
|
+
"class": bem()
|
|
84
|
+
}, [h("div", {
|
|
85
|
+
"class": bem("title")
|
|
86
|
+
}, [h(Icon, {
|
|
87
|
+
"attrs": {
|
|
88
|
+
"name": "arrow-left"
|
|
89
|
+
},
|
|
90
|
+
"on": {
|
|
91
|
+
"click": function click() {
|
|
92
|
+
_this.showPicker = false;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}), h("div", [this.title])]), h(HierarchySelect, {
|
|
96
|
+
"attrs": {
|
|
97
|
+
"treeData": this.treeData,
|
|
98
|
+
"disableParent": this.disableParent,
|
|
99
|
+
"asyncGetter": this.asyncGetter,
|
|
100
|
+
"multiple": this.multiple,
|
|
101
|
+
"valueKey": this.valueKey,
|
|
102
|
+
"textKey": this.textKey
|
|
103
|
+
},
|
|
104
|
+
"on": {
|
|
105
|
+
"selected": this.onSelected,
|
|
106
|
+
"cancel": this.cancel,
|
|
107
|
+
"confirm": this.confirm
|
|
108
|
+
}
|
|
109
|
+
})])]);
|
|
110
|
+
}
|
|
111
|
+
});
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
.zt-hierarchy-select__popup {
|
|
2
|
+
height: 100%;
|
|
3
|
+
.zt-hierarchy-select {
|
|
4
|
+
background-color: #F5F5FF;
|
|
5
|
+
height: 100%;
|
|
6
|
+
&__title {
|
|
7
|
+
height: 44px;
|
|
8
|
+
position: relative;
|
|
9
|
+
background-color: #fff;
|
|
10
|
+
border-bottom: 1px solid rgba(0,0,0,.1);
|
|
11
|
+
i {
|
|
12
|
+
font-size: 14px;
|
|
13
|
+
position: absolute;
|
|
14
|
+
left: 15px;
|
|
15
|
+
top: 16px;
|
|
16
|
+
}
|
|
17
|
+
div {
|
|
18
|
+
line-height: 44px;
|
|
19
|
+
text-align: center;
|
|
20
|
+
font-weight: bold;
|
|
21
|
+
font-size: 18px;
|
|
22
|
+
color: #142841;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
.zt-hierarchy-select-core {
|
|
26
|
+
.zt-loading {
|
|
27
|
+
position: absolute;
|
|
28
|
+
top: 50%;
|
|
29
|
+
left: 50%;
|
|
30
|
+
margin-left: -18px;
|
|
31
|
+
margin-right: -18px;
|
|
32
|
+
}
|
|
33
|
+
&__list {
|
|
34
|
+
span {
|
|
35
|
+
height: 24px;
|
|
36
|
+
font-size: 16px;
|
|
37
|
+
font-family: PingFangSC, PingFangSC-Semibold;
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
color: #0091fa;
|
|
40
|
+
line-height: 24px;
|
|
41
|
+
}
|
|
42
|
+
.flex {
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.zt-hierarchy-select-breadcrumb {
|
|
50
|
+
position: relative;
|
|
51
|
+
display: flex;
|
|
52
|
+
padding: 10px 0;
|
|
53
|
+
background-color: #fff;
|
|
54
|
+
margin-bottom: 16px;
|
|
55
|
+
&__indicator-crumb-list {
|
|
56
|
+
flex: 1;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
padding: 0 16px;
|
|
60
|
+
overflow-x: auto;
|
|
61
|
+
span {
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
white-space: nowrap;
|
|
65
|
+
height: 24px;
|
|
66
|
+
font-size: 16px;
|
|
67
|
+
font-family: PingFangSC, PingFangSC-Regular;
|
|
68
|
+
text-align: left;
|
|
69
|
+
color: #000;
|
|
70
|
+
line-height: 24px;
|
|
71
|
+
}
|
|
72
|
+
&__icon-arrow {
|
|
73
|
+
margin: 0 4px;
|
|
74
|
+
width: 20px;
|
|
75
|
+
height: 20px;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
&__crumb-item {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
}
|
|
82
|
+
&__fill-blur {
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 0;
|
|
85
|
+
width: 16px;
|
|
86
|
+
height: 44px;
|
|
87
|
+
background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)),to(rgba(255, 255, 255, 1)));
|
|
88
|
+
&:last-child {
|
|
89
|
+
right: 0;
|
|
90
|
+
top: 0;
|
|
91
|
+
background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0)));
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.zt-hierarchy-mark-list {
|
|
97
|
+
background-color: #fff;
|
|
98
|
+
&__multiple-button {
|
|
99
|
+
margin-right: 8px;
|
|
100
|
+
}
|
|
101
|
+
&__check-icon {
|
|
102
|
+
color: #0091fa;
|
|
103
|
+
font-size: 24px;
|
|
104
|
+
}
|
|
105
|
+
&__uncheck-icon {
|
|
106
|
+
width: 24px;
|
|
107
|
+
height: 24px;
|
|
108
|
+
border: 1px solid rgba(0,0,0,.1);
|
|
109
|
+
border-radius: 50%;
|
|
110
|
+
}
|
|
111
|
+
&__score-item {
|
|
112
|
+
position: relative;
|
|
113
|
+
display: flex;
|
|
114
|
+
justify-content: space-between;
|
|
115
|
+
align-items: center;
|
|
116
|
+
padding: 10px 0;
|
|
117
|
+
background-color: #fff;
|
|
118
|
+
margin-left: 16px;
|
|
119
|
+
&:after {
|
|
120
|
+
content: " ";
|
|
121
|
+
position: absolute;
|
|
122
|
+
bottom: 0;
|
|
123
|
+
height: 1px;
|
|
124
|
+
width: 100%;
|
|
125
|
+
background-color: rgba(0,0,0,.1);
|
|
126
|
+
box-shadow: 0px 0px 0px 0px #000 inset;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
&__item-content {
|
|
130
|
+
flex: 1;
|
|
131
|
+
margin-right: 16px;
|
|
132
|
+
width: 278px;
|
|
133
|
+
font-size: 16px;
|
|
134
|
+
font-family: PingFangSC, PingFangSC-Regular;
|
|
135
|
+
font-weight: 400;
|
|
136
|
+
text-align: left;
|
|
137
|
+
color: #000;
|
|
138
|
+
line-height: 24px;
|
|
139
|
+
word-break: break-all;
|
|
140
|
+
span {
|
|
141
|
+
color: #0091fa;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
&__item-nav {
|
|
145
|
+
padding: 0 16px;
|
|
146
|
+
border-left: rgba(0,0,0,0.10) 1px solid;
|
|
147
|
+
}
|
|
148
|
+
&__sub-level {
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
span {
|
|
152
|
+
color: #0091fa;
|
|
153
|
+
}
|
|
154
|
+
&--disable {
|
|
155
|
+
opacity: .2;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
&__sub-icon {
|
|
159
|
+
margin-right: 4px;
|
|
160
|
+
font-size: 0;
|
|
161
|
+
width: 20px;
|
|
162
|
+
height: 20px;
|
|
163
|
+
}
|
|
164
|
+
&__result-box {
|
|
165
|
+
position: fixed;
|
|
166
|
+
left: 0;
|
|
167
|
+
bottom: 0;
|
|
168
|
+
background: #fff;
|
|
169
|
+
width: 100%;
|
|
170
|
+
}
|
|
171
|
+
&__result-list {
|
|
172
|
+
height: 160px;
|
|
173
|
+
box-shadow: 0 -4px 8px 0 rgba(0,0,0,0.10);
|
|
174
|
+
border-radius: 8px 8px 0 0;
|
|
175
|
+
padding: 12px 16px;
|
|
176
|
+
font-size: 14px;
|
|
177
|
+
color: #000000;
|
|
178
|
+
line-height: 24px;
|
|
179
|
+
}
|
|
180
|
+
&__operate-box {
|
|
181
|
+
display: flex;
|
|
182
|
+
height: 44px;
|
|
183
|
+
line-height: 44px;
|
|
184
|
+
align-items: center;
|
|
185
|
+
}
|
|
186
|
+
&__selected {
|
|
187
|
+
border-top: 1px solid rgba(0,0,0,.1);
|
|
188
|
+
display: flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
padding: 0 16px;
|
|
191
|
+
flex: 1;
|
|
192
|
+
height: 44px;
|
|
193
|
+
i {
|
|
194
|
+
color: #0091fa;
|
|
195
|
+
font-size: 20px;
|
|
196
|
+
margin-right: 4px;
|
|
197
|
+
}
|
|
198
|
+
span {
|
|
199
|
+
font-size: 14px;
|
|
200
|
+
color: rgba(0,0,0,.6);
|
|
201
|
+
&.zt-hierarchy-mark-list__blue {
|
|
202
|
+
color: #0091fa;
|
|
203
|
+
margin-left: 8px
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
&__line {
|
|
208
|
+
width: 1px;
|
|
209
|
+
height: 24px;
|
|
210
|
+
background: rgba(0,0,0,0.10);
|
|
211
|
+
transform: scaleX(0.5);
|
|
212
|
+
border-top: 1px solid rgba(0,0,0,.1);
|
|
213
|
+
}
|
|
214
|
+
&__cancel-button {
|
|
215
|
+
width: 110px;
|
|
216
|
+
border-top: 1px solid rgba(0,0,0,.1);
|
|
217
|
+
font-size: 16px;
|
|
218
|
+
color: #000000;
|
|
219
|
+
text-align: center;
|
|
220
|
+
}
|
|
221
|
+
&__confirm-button {
|
|
222
|
+
width: 110px;
|
|
223
|
+
border-top: 1px solid #0091FA;
|
|
224
|
+
font-weight: bold;
|
|
225
|
+
font-size: 16px;
|
|
226
|
+
color: #FFFFFF;
|
|
227
|
+
text-align: center;
|
|
228
|
+
background: #0091FA;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}
|