Skip to content

Commit 9eecfb6

Browse files
vincentzycvincentzyc
committed
新增字段选择
1 parent 2b38070 commit 9eecfb6

7 files changed

Lines changed: 369 additions & 287 deletions

File tree

‎src/assets/css/widget.scss‎

Lines changed: 158 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ $primary-background-color: #ecf5ff;
1414
padding-bottom: 150px;
1515
margin: 20px;
1616

17-
1817
.ghost {
1918
background: #fff;
2019
border: 1px dashed $primary-color;
@@ -43,165 +42,186 @@ $primary-background-color: #ecf5ff;
4342
z-index: 10;
4443
}
4544
}
45+
}
4646

47-
.widget-action-delete {
48-
position: absolute;
49-
right: 10px;
50-
bottom: -20px;
51-
z-index: 1009;
52-
}
47+
.widget-action-delete {
48+
position: absolute;
49+
right: 10px;
50+
bottom: -20px;
51+
z-index: 1009;
52+
}
53+
54+
.widget-action-clone {
55+
position: absolute;
56+
right: 70px;
57+
bottom: -20px;
58+
z-index: 1009;
59+
}
5360

54-
.widget-action-clone {
61+
.widget-view.widget-view-imgshow {
62+
padding: 0;
63+
background: #f1f1f1;
64+
border-bottom: none;
65+
}
66+
67+
.widget-view.widget-view-button {
68+
border-bottom: none;
69+
}
70+
71+
.widget-view {
72+
margin: 0;
73+
padding: 10px;
74+
background: #fff;
75+
position: relative;
76+
border-bottom: 1px solid #eee;
77+
78+
&:after {
79+
content: "";
5580
position: absolute;
56-
right: 70px;
57-
bottom: -20px;
58-
z-index: 1009;
81+
left: 0;
82+
right: 0;
83+
bottom: 0;
84+
top: 0;
85+
display: block;
86+
z-index: 1001;
5987
}
6088

61-
.widget-view.widget-view-imgshow {
62-
padding: 0;
63-
background: #f1f1f1;
64-
border-bottom:none;
65-
}
66-
67-
.widget-view.widget-view-button {
68-
border-bottom:none;
89+
&::-webkit-input-placeholder {
90+
color: #999;
91+
opacity: 1;
6992
}
7093

71-
.widget-view {
72-
margin: 0;
73-
padding: 10px;
74-
background: #fff;
75-
position: relative;
76-
border-bottom: 1px solid #eee;
7794

78-
&:after {
79-
content: "";
80-
position: absolute;
81-
left: 0;
82-
right: 0;
83-
bottom: 0;
84-
top: 0;
85-
display: block;
86-
z-index: 1001;
87-
}
95+
&:hover {
96+
background: $primary-background-color;
97+
}
8898

89-
&::-webkit-input-placeholder {
90-
color: #999;
91-
opacity: 1;
92-
}
99+
&.active {
100+
background: $primary-background-color;
101+
// box-shadow: 0px 1px 10px 1px #90c7ff;
102+
z-index: 1111;
103+
}
93104

105+
.wg-item {
106+
display: flex;
107+
line-height: 50px;
108+
}
94109

95-
&:hover {
96-
background: $primary-background-color;
110+
.wg-phone {
111+
.getVerCode-btn {
112+
border: 0;
113+
outline: 0;
114+
background: $primary-color;
115+
font-size: 14px;
116+
color: #fff;
117+
border-radius: 5px;
118+
height: 40px;
119+
min-width: 100px;
120+
margin-top: 5px;
121+
margin-left: 10px;
122+
cursor: pointer;
97123
}
98-
99-
&.active {
100-
background: $primary-background-color;
101-
// box-shadow: 0px 1px 10px 1px #90c7ff;
102-
z-index: 1111;
124+
}
125+
.wg-staticText {
126+
.text {
127+
font-size: 14px;
128+
color: #333;
129+
line-height: 24px;
103130
}
131+
}
104132

105-
.wg-item {
106-
display: flex;
107-
line-height: 50px;
108-
}
133+
.wg-input, .wg-select {
134+
width: 100%;
135+
height: 40px;
136+
margin: 5px 0;
137+
color: #666;
138+
font-size: 14px;
139+
border-radius: 4px;
140+
border: 1px solid #ddd;
141+
outline: none;
142+
text-indent: 10px;
143+
background: #fff;
144+
transition: .3s;
145+
}
146+
.wg-title {
147+
font-size: 14px;
148+
margin-right: 10px;
149+
color: #333;
150+
}
151+
.wg-checkbox {
109152

110-
.wg-input, .wg-select {
111-
width: 100%;
112-
height: 40px;
113-
margin: 5px 0;
114-
color: #666;
115-
font-size: 14px;
116-
border-radius: 4px;
117-
border: 1px solid #ddd;
118-
outline: none;
119-
text-indent: 10px;
120-
background: #fff;
121-
transition: .3s;
122-
}
123-
.wg-title {
124-
font-size: 14px;
153+
.label {
154+
float: left;
155+
cursor: pointer;
156+
position: relative;
125157
margin-right: 10px;
126-
color: #333;
127158
}
128-
.wg-checkbox {
129-
130-
.label {
131-
float: left;
132-
cursor: pointer;
133-
position: relative;
134-
margin-right: 10px;
135-
}
136-
.label span {
137-
background: #fff;
138-
padding: 10px;
139-
border-radius: 10px;
140-
border: 1px solid #ddd;
141-
}
142-
.wg-checkbox-input:checked + span {
143-
background-color: $primary-color;
144-
border-color: $primary-color;
145-
color: #fff;
146-
}
159+
.label>span {
160+
background: #fff;
161+
padding: 8px 15px;
162+
border-radius: 10px;
163+
border: 1px solid #ddd;
147164
}
165+
.wg-checkbox-input:checked + span {
166+
background-color: $primary-color;
167+
border-color: $primary-color;
168+
color: #fff;
169+
}
170+
}
148171

149-
.wg-switch {
150-
151-
.label {
152-
display: flex;
153-
cursor: pointer;
154-
}
155-
156-
.wg-switch-core {
157-
display: inline-block;
158-
position: relative;
159-
margin: 0;
160-
width: 40px;
161-
height: 20px;
162-
border: 1px solid #dcdfe6;
163-
outline: 0;
164-
border-radius: 10px;
165-
box-sizing: border-box;
166-
background: #dcdfe6;
167-
transition: border-color .3s, background-color .3s;
168-
}
169-
.wg-switch-core:after {
170-
content: "";
171-
position: absolute;
172-
top: 1px;
173-
left: 1px;
174-
border-radius: 100%;
175-
transition: all .3s;
176-
width: 16px;
177-
height: 16px;
178-
background-color: #fff;
179-
}
180-
.wg-switch-input:checked + span {
181-
background-color: $primary-color;
182-
border-color: $primary-color;
183-
color: #fff;
184-
}
185-
.wg-switch-input:checked + span::after {
186-
left: 100%;
187-
margin-left: -17px;
188-
}
172+
.wg-switch {
173+
.label {
174+
display: flex;
175+
cursor: pointer;
189176
}
190-
.wg-button {
191-
width: 90%;
192-
margin: 15px 5%;
193-
background: $primary-color;
177+
.wg-switch-core {
178+
display: inline-block;
179+
position: relative;
180+
margin: 0;
181+
width: 40px;
182+
height: 20px;
183+
border: 1px solid #dcdfe6;
184+
outline: 0;
185+
border-radius: 10px;
186+
box-sizing: border-box;
187+
background: #dcdfe6;
188+
transition: border-color .3s, background-color .3s;
189+
}
190+
.wg-switch-core:after {
191+
content: "";
192+
position: absolute;
193+
top: 1px;
194+
left: 1px;
195+
border-radius: 100%;
196+
transition: all .3s;
197+
width: 16px;
198+
height: 16px;
199+
background-color: #fff;
200+
}
201+
.wg-switch-input:checked + span {
202+
background-color: $primary-color;
203+
border-color: $primary-color;
194204
color: #fff;
195-
height: 46px;
196-
line-height: 46px;
197-
font-size: 18px;
198-
outline: none;
199-
border: none;
200-
letter-spacing: 2px;
201-
border-radius: 20px;
202-
text-align: center;
203-
box-shadow: 0 5px 10px 3px #90c7ff;
204205
}
206+
.wg-switch-input:checked + span::after {
207+
left: 100%;
208+
margin-left: -17px;
209+
}
210+
}
211+
.wg-button {
212+
width: 90%;
213+
margin: 15px 5%;
214+
background: $primary-color;
215+
color: #fff;
216+
height: 46px;
217+
line-height: 46px;
218+
font-size: 18px;
219+
outline: none;
220+
border: none;
221+
letter-spacing: 2px;
222+
border-radius: 20px;
223+
text-align: center;
224+
box-shadow: 0 3px 10px 1px #90c7ff;
205225
}
206226
}
207227
}

0 commit comments

Comments
 (0)