@@ -134,147 +134,148 @@ export default {
134134 name: ' app' ,
135135 methods: {
136136 onPageChange () {
137- window .scrollTo (0 ,0 );
138- }
139- }
140- };
141- </script >
137+ window .scrollTo (0 , 0 );
138+ },
139+ },
140+ }; </script >
142141
143142
144143<style lang="scss" rel="stylesheet/scss">
145- #app {
146- -webkit-font-smoothing : antialiased ;
147- padding-top : 20px ;
148- }
149-
150- .head-title {
151- margin-top : 0 ;
152- }
153-
154- .ais-powered-by {
155- float : right ;
156-
157- line-height : 26px ;
158- svg {
159- vertical-align : bottom ;
160- }
161- }
162-
163- .search-controls {
164- padding-bottom : 20px ;
165- }
166-
167- .ais-stats {
168- line-height : 36px ;
169- }
170-
171- .ais-results :after {
172- content : " " ;
173- display : block ;
174- clear : both ;
175- }
144+ #app {
145+ -webkit-font-smoothing : antialiased ;
146+ padding-top : 20px ;
147+ }
176148
177- .search-result {
178- padding : 10px 20px 20px ;
179- width : 24% ;
180- margin-bottom : 10px ;
181- border : solid 1px #EEE ;
182- box-shadow : 0 0 3px #f6f6f6 ;
183- margin-right : 1% ;
184- position : relative ;
185- border-radius : 3px ;
186- min-width : 220px ;
187- background : #FFF ;
188- display : inline ;
189- float : left ;
190- transition : all .5s ;
191- }
192-
193- .result__info {
194- position : absolute ;
195- width : 100% ;
196- padding : 0px 20px 20px ;
197- bottom : 0 ;
198- left : 0 ;
199- }
149+ .head-title {
150+ margin-top : 0 ;
151+ }
200152
201- .result__image {
202- margin-bottom : 100px ;
203- }
204-
205- .result__name {
206- font-size : 14px ;
207- font-weight : bold ;
208- }
209-
210- .result__name mark , .result__type mark {
211- font-style : normal ;
212- background : rgba (143 , 187 , 237 , .1 );
213- box-shadow : inset 0 -1px 0 0 rgba (69 , 142 , 225 , .8 );
214- }
153+ .ais-powered-by {
154+ float : right ;
215155
216- .result__type mark {
217- background : rgba (143 , 187 , 237 , .1 );
218- border-radius : 0 ;
219- box-shadow : inset 0 -1px 0 0 rgba (69 , 142 , 225 , .8 );
156+ line-height : 26px ;
157+ svg {
158+ vertical-align : bottom ;
220159 }
221-
222- .result__price {
223- font-size : 25px ;
224- font-weight : bold ;
225- position : absolute ;
226- right : 20px ;
227- bottom : 16px ;
228- }
229-
230- .result__type {
231- color : #a2a2a2 ;
232- font-size : 12px ;
233- }
234-
235- .result__rating {
236- margin-top : 10px ;
237- }
238-
239- .result__star {
240- width : 1em ;
241- height : 1em ;
242- }
243-
244- .result__star :before {
245- content : ' \2605 ' ;
246- color : #FBAE00 ;
247- }
248-
249- .result__star--empty :before {
250- content : ' \2606 ' ;
251- color : #FBAE00 ;
252- }
253-
254- /* Sort by selector */
255- .search-controls {
256- .form-control {
257- float : right ;
258- margin-left : 10px ;
259- }
260- }
261- .ais-sort-by-selector {
262- float : right ;
263- }
264-
265- .ais-results-per-page-selector {
160+ }
161+
162+ .search-controls {
163+ padding-bottom : 20px ;
164+ }
165+
166+ .ais-stats {
167+ line-height : 36px ;
168+ }
169+
170+ .ais-results :after {
171+ content : ' ' ;
172+ display : block ;
173+ clear : both ;
174+ }
175+
176+ .search-result {
177+ padding : 10px 20px 20px ;
178+ width : 24% ;
179+ margin-bottom : 10px ;
180+ border : solid 1px #eee ;
181+ box-shadow : 0 0 3px #f6f6f6 ;
182+ margin-right : 1% ;
183+ position : relative ;
184+ border-radius : 3px ;
185+ min-width : 220px ;
186+ background : #fff ;
187+ display : inline ;
188+ float : left ;
189+ transition : all 0.5s ;
190+ }
191+
192+ .result__info {
193+ position : absolute ;
194+ width : 100% ;
195+ padding : 0px 20px 20px ;
196+ bottom : 0 ;
197+ left : 0 ;
198+ }
199+
200+ .result__image {
201+ margin-bottom : 100px ;
202+ }
203+
204+ .result__name {
205+ font-size : 14px ;
206+ font-weight : bold ;
207+ }
208+
209+ .result__name mark ,
210+ .result__type mark {
211+ font-style : normal ;
212+ background : rgba (143 , 187 , 237 , 0.1 );
213+ box-shadow : inset 0 -1px 0 0 rgba (69 , 142 , 225 , 0.8 );
214+ }
215+
216+ .result__type mark {
217+ background : rgba (143 , 187 , 237 , 0.1 );
218+ border-radius : 0 ;
219+ box-shadow : inset 0 -1px 0 0 rgba (69 , 142 , 225 , 0.8 );
220+ }
221+
222+ .result__price {
223+ font-size : 25px ;
224+ font-weight : bold ;
225+ position : absolute ;
226+ right : 20px ;
227+ bottom : 16px ;
228+ }
229+
230+ .result__type {
231+ color : #a2a2a2 ;
232+ font-size : 12px ;
233+ }
234+
235+ .result__rating {
236+ margin-top : 10px ;
237+ }
238+
239+ .result__star {
240+ width : 1em ;
241+ height : 1em ;
242+ }
243+
244+ .result__star :before {
245+ content : ' \2605 ' ;
246+ color : #fbae00 ;
247+ }
248+
249+ .result__star--empty :before {
250+ content : ' \2606 ' ;
251+ color : #fbae00 ;
252+ }
253+
254+ /* Sort by selector */
255+ .search-controls {
256+ .form-control {
266257 float : right ;
267- margin-right : 10px ;
268- }
269-
270- /* Clear Search */
271- .ais-clear--disabled {
272- display : none ;
273- }
274-
275- /* Price Range */
276- .ais-price-range__input--from , .ais-price-range__input--to {
277- width : 65px ;
278- display : inline-block ;
258+ margin-left : 10px ;
279259 }
260+ }
261+ .ais-sort-by-selector {
262+ float : right ;
263+ }
264+
265+ .ais-results-per-page-selector {
266+ float : right ;
267+ margin-right : 10px ;
268+ }
269+
270+ /* Clear Search */
271+ .ais-clear--disabled {
272+ display : none ;
273+ }
274+
275+ /* Price Range */
276+ .ais-price-range__input--from ,
277+ .ais-price-range__input--to {
278+ width : 65px ;
279+ display : inline-block ;
280+ }
280281 </style >
0 commit comments