Skip to content

Commit 12ee3e9

Browse files
vincentzycvincentzyc
committed
init
1 parent 08158b0 commit 12ee3e9

16 files changed

Lines changed: 1597 additions & 368 deletions

‎src/assets/css/cover.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.el-container{
2+
height: 100% !important;
3+
justify-content: center;
4+
}
5+
6+
.el-radio+.el-radio{
7+
margin-left: 0 !important;
8+
}
9+
.el-radio{
10+
margin-right: 30px;
11+
line-height: 32px;
12+
}
13+
.el-checkbox+.el-checkbox{
14+
margin-left: 0 !important;
15+
}
16+
.el-checkbox{
17+
margin-right: 30px;
18+
}

‎src/assets/css/index.scss‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
$primary-color: #409EFF;
2+
$primary-background-color: #ecf5ff;
3+
4+
*, :after, :before {
5+
-webkit-box-sizing: border-box;
6+
-moz-box-sizing: border-box;
7+
box-sizing: border-box;
8+
}
9+
:not(.form-edit-wrapper)::-webkit-scrollbar {
10+
display: none;
11+
}
12+
.home {
13+
height: calc(100% - 70px);
14+
15+
.form-edit-wrapper {
16+
display: flex !important;
17+
max-width: 1320px;
18+
overflow: auto;
19+
flex: auto;
20+
}
21+
}
22+
.fa-icon {
23+
width: auto;
24+
height: 1em;
25+
/* 或任意其它字体大小相对值 */
26+
27+
/* 要在 Safari 中正常工作，需要再引入如下两行代码 */
28+
max-width: 100%;
29+
max-height: 100%;
30+
vertical-align: middle;
31+
}
32+
33+
.center-container {
34+
min-width: 400px;
35+
max-width: 720px;
36+
border-left: 1px solid #e0e0e0;
37+
border-right: 1px solid #e0e0e0;
38+
39+
.btn-bar {
40+
height: 45px;
41+
line-height: 45px;
42+
font-size: 18px;
43+
border-bottom: solid 2px #e4e7ed;
44+
text-align: right;
45+
}
46+
47+
.el-main {
48+
padding: 0;
49+
position: relative;
50+
}
51+
}
52+
53+
.components-list {
54+
padding: 8px 0;
55+
width: 100%;
56+
height: 100%;
57+
58+
.widget-cate {
59+
padding: 8px 12px;
60+
font-size: 13px;
61+
}
62+
63+
ul {
64+
position: relative;
65+
overflow: hidden;
66+
padding: 0 10px 10px;
67+
margin: 0;
68+
}
69+
70+
.form-edit-widget-label {
71+
font-size: 12px;
72+
display: block;
73+
width: 48%;
74+
line-height: 26px;
75+
position: relative;
76+
float: left;
77+
left: 0;
78+
overflow: hidden;
79+
text-overflow: ellipsis;
80+
white-space: nowrap;
81+
margin: 1%;
82+
color: #333;
83+
border: 1px solid #F4F6FC;
84+
text-align: center;
85+
86+
&:hover {
87+
color: $primary-color;
88+
border: 1px dashed $primary-color;
89+
}
90+
91+
& > a {
92+
display: block;
93+
cursor: move;
94+
background: #F4F6FC;
95+
border: 1px solid #F4F6FC;
96+
97+
.icon {
98+
margin-right: 6px;
99+
margin-left: 8px;
100+
font-size: 14px;
101+
display: inline-block;
102+
vertical-align: middle;
103+
}
104+
105+
span {
106+
display: inline-block;
107+
vertical-align: middle;
108+
}
109+
}
110+
}
111+
}
112+
113+
.widget-form-container {
114+
position: absolute;
115+
top: 0;
116+
left: 0;
117+
right: 0;
118+
bottom: 0;
119+
120+
.widget-form-list {
121+
min-height: 100%;
122+
box-shadow: 0 2px 5px 1px rgba(124, 124, 124, .2);
123+
padding-bottom: 150px;
124+
margin: 20px;
125+
126+
.widget-view {
127+
padding: 5px 10px 18px;
128+
margin: 0;
129+
position: relative;
130+
border-left: 5px solid transparent;
131+
132+
&.is_req {
133+
.el-form-item__label::before {
134+
content: '*';
135+
color: #f56c6c;
136+
margin-right: 4px;
137+
}
138+
}
139+
140+
&:after {
141+
position: absolute;
142+
left: 0;
143+
right: 0;
144+
bottom: 0;
145+
top: 0;
146+
display: block;
147+
z-index: 1001;
148+
}
149+
150+
&:hover {
151+
background: $primary-background-color;
152+
border-left: 5px solid $primary-background-color;
153+
}
154+
155+
&.active {
156+
border-left: 5px solid $primary-color;
157+
background: #b3d8ff;
158+
}
159+
}
160+
161+
.widget-action-delete {
162+
position: absolute;
163+
right: 10px;
164+
bottom: -35px;
165+
z-index: 1009;
166+
}
167+
168+
.widget-action-clone {
169+
position: absolute;
170+
right: 70px;
171+
bottom: -35px;
172+
z-index: 1009;
173+
}
174+
}
175+
176+
.widget-grid {
177+
background: #F4F6FC;
178+
position: relative;
179+
border-left: 5px solid transparent;
180+
padding: 5px;
181+
margin: 0 !important;
182+
183+
&.active {
184+
border-left: 5px solid $primary-color;
185+
background: #b3d8ff;
186+
}
187+
}
188+
189+
.widget-grid-container {
190+
&.ghost {
191+
&::after {
192+
background: #fff;
193+
position: absolute;
194+
left: 0;
195+
right: 0;
196+
bottom: 0;
197+
top: 0;
198+
display: block;
199+
z-index: 10;
200+
content: '';
201+
}
202+
}
203+
}
204+
205+
.ghost {
206+
background: #fff;
207+
border: 1px dashed $primary-color;
208+
209+
&::after {
210+
background: #fff;
211+
}
212+
}
213+
214+
li.ghost {
215+
height: 30px;
216+
list-style: none;
217+
font-size: 0;
218+
}
219+
}
220+
221+
222+
223+
.widget-config-container {
224+
position: relative;
225+
226+
.el-header {
227+
border-bottom: solid 2px #e4e7ed;
228+
padding: 0 5px;
229+
}
230+
231+
.config-tab {
232+
height: 45px;
233+
line-height: 45px;
234+
display: inline-block;
235+
width: 145px;
236+
text-align: center;
237+
font-size: 14px;
238+
font-weight: 500;
239+
position: relative;
240+
cursor: pointer;
241+
242+
&.active {
243+
border-bottom: solid 2px $primary-color;
244+
}
245+
}
246+
247+
.config-content {
248+
padding: 10px;
249+
250+
.el-form-item__label {
251+
padding: 0;
252+
font-weight: 500;
253+
}
254+
255+
.el-form-item {
256+
border-bottom: solid 1px #e1e1e1;
257+
padding-bottom: 10px;
258+
}
259+
}
260+
261+
.ghost {
262+
background: #fff;
263+
border: 1px dashed $primary-color;
264+
265+
&::after {
266+
background: #fff;
267+
display: block;
268+
content: '';
269+
position: absolute;
270+
top: 0;
271+
left: 0;
272+
right: 0;
273+
bottom: 0;
274+
}
275+
}
276+
277+
ul {
278+
margin: 0;
279+
padding: 0;
280+
}
281+
282+
li.ghost {
283+
list-style: none;
284+
font-size: 0;
285+
display: block;
286+
position: relative;
287+
}
288+
}

‎src/assets/img/form_empty.png‎

3.43 KB
Loading

0 commit comments

Comments
 (0)