

240318 김하영
@d4907efa1a9d1ad0f0fc0bbd4b55ef02cda13ddf
--- resources/css/common.css
+++ resources/css/common.css
... | ... | @@ -439,6 +439,9 @@ |
439 | 439 |
.pd10 { |
440 | 440 |
padding: 10px; |
441 | 441 |
} |
442 |
+.pd15{ |
|
443 |
+ padding: 15px; |
|
444 |
+} |
|
442 | 445 |
|
443 | 446 |
.pd20 { |
444 | 447 |
padding: 20px; |
--- resources/css/layout.css
... | ... | @@ -1,199 +0,0 @@ |
1 | -@charset "utf-8"; | |
2 | - | |
3 | -.dashboard-wrap { | |
4 | - width: 100%; | |
5 | - height: 100vh; | |
6 | - display: grid; | |
7 | - grid-template-columns: 270px minmax(auto, 1fr); | |
8 | - grid-template-rows: auto 1fr; | |
9 | - grid-template-areas: | |
10 | - "header header " | |
11 | - "nav main " | |
12 | - "nav main " | |
13 | -} | |
14 | - | |
15 | -.layout-wrap { | |
16 | - width: 100%; | |
17 | - min-height: 100vh; | |
18 | - position: relative; | |
19 | - | |
20 | -} | |
21 | - | |
22 | - | |
23 | -header { | |
24 | - background-color: #fff; | |
25 | - padding: 15px 30px; | |
26 | - grid-area: header; | |
27 | - position: relative; | |
28 | -} | |
29 | - | |
30 | -.logo { | |
31 | - width: 200px; | |
32 | -} | |
33 | - | |
34 | -.logo>a { | |
35 | - display: block; | |
36 | - width: 100%; | |
37 | -} | |
38 | - | |
39 | -.logo>a>img { | |
40 | - display: block; | |
41 | - width: 100%; | |
42 | -} | |
43 | - | |
44 | -.user-name { | |
45 | - font-size: 1.3rem; | |
46 | - margin-left: 5px; | |
47 | -} | |
48 | - | |
49 | -.sms, | |
50 | -.user { | |
51 | - margin-left: 10px; | |
52 | -} | |
53 | - | |
54 | -.layout-wrap header{ | |
55 | - position: absolute; | |
56 | - width: 100%; | |
57 | - top: 0; | |
58 | - left: 0; | |
59 | - z-index: 1; | |
60 | -} | |
61 | - | |
62 | - | |
63 | - | |
64 | -/* 메뉴 공통 */ | |
65 | -nav { | |
66 | - background-color: #213f99; | |
67 | - position: relative; | |
68 | -} | |
69 | - | |
70 | -nav ul li a, | |
71 | -nav ul li p { | |
72 | - padding: 5px; | |
73 | - display: block; | |
74 | - color: #fff; | |
75 | -} | |
76 | - | |
77 | -nav.side-menu ul.sub-menu, | |
78 | -nav.top-menu ul.sub-menu { | |
79 | - font-size: 1.3rem; | |
80 | - overflow: hidden; | |
81 | - transition: all 0.5s ease-in-out; | |
82 | -} | |
83 | - | |
84 | -ul.sub-menu>li { | |
85 | - padding: 10px 20px; | |
86 | - | |
87 | -} | |
88 | - | |
89 | -p.active { | |
90 | - background-color: #fff; | |
91 | - color: #213f99; | |
92 | - border-radius: 50px | |
93 | -} | |
94 | - | |
95 | -/* 사이드 메뉴 */ | |
96 | -nav.side-menu { | |
97 | - width: 100%; | |
98 | - height: 100vh; | |
99 | - border-radius: 0 70px 70px 0; | |
100 | - grid-area: nav; | |
101 | - overflow-y: auto; | |
102 | -} | |
103 | - | |
104 | -nav.side-menu::-webkit-scrollbar { | |
105 | - display: none; | |
106 | -} | |
107 | - | |
108 | -nav.side-menu::-ms-scrollbar { | |
109 | - display: none; | |
110 | -} | |
111 | - | |
112 | - | |
113 | -nav.side-menu>ul.main-menu { | |
114 | - padding: 50px 30px; | |
115 | -} | |
116 | - | |
117 | -nav.side-menu>ul.main-menu>li>div>a, | |
118 | -nav>ul>li { | |
119 | - padding: 10px 0; | |
120 | - font-size: 1.3rem; | |
121 | - font-weight: bold; | |
122 | -} | |
123 | - | |
124 | - | |
125 | - | |
126 | -/* 상단 메뉴 */ | |
127 | -.top-menu{ | |
128 | - position: absolute; | |
129 | - width: 100%; | |
130 | - top: 57px; | |
131 | - left: 0; | |
132 | - z-index: 2; | |
133 | -} | |
134 | -.top-menu>ul.main-menu { | |
135 | - display: flex; | |
136 | - justify-content: center; | |
137 | -} | |
138 | - | |
139 | -.depth1 { | |
140 | - cursor: default; | |
141 | -} | |
142 | - | |
143 | -.top-menu>ul>li { | |
144 | - /* min-width: 152px; */ | |
145 | - /* padding: 10px 30px; */ | |
146 | - text-align: center; | |
147 | - position: relative; | |
148 | -} | |
149 | - | |
150 | -.top-menu>ul>li>p { | |
151 | - padding: 5px 47px; | |
152 | -} | |
153 | - | |
154 | -.top-menu ul.sub-menu { | |
155 | - position: absolute; | |
156 | - width: 100%; | |
157 | - background-color: #fff; | |
158 | - z-index: 4; | |
159 | - bottom: 0; | |
160 | - left: 0; | |
161 | - transform: translateY(100%); | |
162 | - transition: max-height 1.8s ease-in-out, opacity 1.3s ease-in-out; | |
163 | -} | |
164 | - | |
165 | -.top-menu ul.sub-menu li a { | |
166 | - text-align: center; | |
167 | - color: #213f99; | |
168 | -} | |
169 | - | |
170 | -.navbg { | |
171 | - overflow: hidden; | |
172 | - background-color: #fff; | |
173 | - border-bottom: 2px solid #213f99; | |
174 | - position: absolute; | |
175 | - bottom: 0; | |
176 | - left: 0; | |
177 | - transform: translateY(100%); | |
178 | - width: 100%; | |
179 | - z-index: 3; | |
180 | - transition: height 0.6s ease-in-out; | |
181 | -} | |
182 | - | |
183 | - | |
184 | - | |
185 | -/* 메인 */ | |
186 | -.main { | |
187 | - padding: 20px; | |
188 | - height: 100vh; | |
189 | - grid-area: main; | |
190 | -} | |
191 | - | |
192 | -.layout-wrap .main { | |
193 | - padding: 123px 20px 20px; | |
194 | -} | |
195 | - | |
196 | -.login{ | |
197 | - width: 100%; | |
198 | - height: 100vh; | |
199 | -}(No newline at end of file) |
--- resources/css/reset.css
+++ resources/css/reset.css
... | ... | @@ -17,7 +17,7 @@ |
17 | 17 |
} |
18 | 18 |
|
19 | 19 |
body { |
20 |
- min-width: 1356px; |
|
20 |
+ min-width: 1200px; |
|
21 | 21 |
background-color: #f7f6fb; |
22 | 22 |
} |
23 | 23 |
|
--- resources/css/style.css
+++ resources/css/style.css
... | ... | @@ -1,480 +1,1 @@ |
1 | 1 |
@charset "utf-8"; |
2 |
- |
|
3 |
-/* page 추가 */ |
|
4 |
-/* 작업관리 페이지*/ |
|
5 |
-.node-zone { |
|
6 |
- /* height: calc(100% - 61px); */ |
|
7 |
- margin-bottom: 10px; |
|
8 |
- background-color: #fff; |
|
9 |
- padding: 10px; |
|
10 |
- border-radius: 5px; |
|
11 |
-} |
|
12 |
- |
|
13 |
-.text-over { |
|
14 |
- white-space: nowrap; |
|
15 |
- overflow: hidden; |
|
16 |
- text-overflow: ellipsis; |
|
17 |
-} |
|
18 |
- |
|
19 |
-.state span { |
|
20 |
- font-size: 1.3rem; |
|
21 |
-} |
|
22 |
- |
|
23 |
-.vue-flow__panel button { |
|
24 |
- margin-left: 0; |
|
25 |
-} |
|
26 |
- |
|
27 |
-/* 파일관리 페이지*/ |
|
28 |
-.file-zone { |
|
29 |
- height: calc(100% - 55px); |
|
30 |
-} |
|
31 |
- |
|
32 |
-.tree-wrap { |
|
33 |
- height: 100%; |
|
34 |
- overflow: auto; |
|
35 |
-} |
|
36 |
- |
|
37 |
-.file-table th { |
|
38 |
- position: sticky; |
|
39 |
- top: 0; |
|
40 |
-} |
|
41 |
- |
|
42 |
-.file-table tr .icon-btn { |
|
43 |
- opacity: 0; |
|
44 |
-} |
|
45 |
- |
|
46 |
-.file-table tr:hover, |
|
47 |
-.file-table tr:nth-child(even):hover { |
|
48 |
- background-color: var(--color-light-orange); |
|
49 |
-} |
|
50 |
- |
|
51 |
-.file-table tr:hover .icon-btn { |
|
52 |
- opacity: 1; |
|
53 |
- transition: all 0.5s ease-in-out; |
|
54 |
-} |
|
55 |
- |
|
56 |
- |
|
57 |
-/* 데이터활용관리 */ |
|
58 |
-.gall-list li { |
|
59 |
- padding: 0 10px; |
|
60 |
- max-width: 24%; |
|
61 |
-} |
|
62 |
- |
|
63 |
-.gall-list li>div { |
|
64 |
- min-height: 274px; |
|
65 |
- padding: 10px; |
|
66 |
- box-shadow: 0 0 5px #aaa; |
|
67 |
-} |
|
68 |
- |
|
69 |
-.gall-list li>div a { |
|
70 |
- display: block; |
|
71 |
- width: 100%; |
|
72 |
-} |
|
73 |
- |
|
74 |
-.gall-list li>div a .gall-img { |
|
75 |
- width: 100%; |
|
76 |
- height: 200px; |
|
77 |
- text-align: center; |
|
78 |
- overflow: hidden; |
|
79 |
- margin-bottom: 10px; |
|
80 |
-} |
|
81 |
- |
|
82 |
-.gall-list li>div a .gall-img img { |
|
83 |
- width: 100%; |
|
84 |
- height: 100%; |
|
85 |
-} |
|
86 |
- |
|
87 |
-.gall-list li>div a .gall-title { |
|
88 |
- font-size: 1.6rem; |
|
89 |
- font-weight: 800; |
|
90 |
- margin-bottom: 10px; |
|
91 |
-} |
|
92 |
- |
|
93 |
-.gall-info { |
|
94 |
- width: 100%; |
|
95 |
-} |
|
96 |
- |
|
97 |
-.gall-list li>div a .gall-detail { |
|
98 |
- font-size: 1.3rem; |
|
99 |
- width: 100%; |
|
100 |
- overflow: hidden; |
|
101 |
- white-space: nowrap; |
|
102 |
- text-overflow: ellipsis; |
|
103 |
- word-break: break-all; |
|
104 |
-} |
|
105 |
- |
|
106 |
-.custom-info { |
|
107 |
- position: absolute; |
|
108 |
- width: calc(100% - 0px); |
|
109 |
- z-index: 1; |
|
110 |
-} |
|
111 |
- |
|
112 |
-.layout-option, |
|
113 |
-.layout{ |
|
114 |
- padding: 15px 0; |
|
115 |
- height: 100%; |
|
116 |
-} |
|
117 |
- |
|
118 |
-.custom-info details summary, |
|
119 |
-.component-zone details summary, |
|
120 |
-.chart-zone details summary { |
|
121 |
- font-size: 1.6rem; |
|
122 |
- padding: 15px; |
|
123 |
- border: 1px solid #213f99; |
|
124 |
- background-color: rgb(243, 246, 255); |
|
125 |
- border-radius: 5px; |
|
126 |
- position: relative; |
|
127 |
-} |
|
128 |
- |
|
129 |
-.component-zone details summary, |
|
130 |
-.chart-zone details summary { |
|
131 |
- border: 1px solid var(--color-orange); |
|
132 |
- background-color: rgb(255, 249, 239); |
|
133 |
- color: var(--color-orange); |
|
134 |
-} |
|
135 |
- |
|
136 |
-.custom-info details[open] summary, |
|
137 |
-.component-zone details[open] summary, |
|
138 |
-.chart-zone details[open] summary { |
|
139 |
- border-radius: 5px 5px 0 0; |
|
140 |
-} |
|
141 |
- |
|
142 |
- |
|
143 |
-.custom-info .info-zone { |
|
144 |
- border: 1px solid #eee; |
|
145 |
- border-radius: 0 0 5px 5px; |
|
146 |
- padding: 15px; |
|
147 |
- background-color: #fff; |
|
148 |
-} |
|
149 |
- |
|
150 |
-.data-list { |
|
151 |
- height: 100px; |
|
152 |
- overflow-y: auto; |
|
153 |
- background-color: #f8f8f8; |
|
154 |
- border-radius: 5px; |
|
155 |
- padding: 10px; |
|
156 |
-} |
|
157 |
- |
|
158 |
-.tab-zone{ |
|
159 |
- position: relative; |
|
160 |
-} |
|
161 |
- |
|
162 |
-.tab-zone, |
|
163 |
-.preview-zone { |
|
164 |
- height: 100%; |
|
165 |
-} |
|
166 |
- |
|
167 |
-.column-item { |
|
168 |
- width: 100%; |
|
169 |
- font-size: 1.3rem; |
|
170 |
- text-align: center; |
|
171 |
- padding: 10px; |
|
172 |
- border-radius: 5px; |
|
173 |
- border: 1px solid var(--color-orange); |
|
174 |
- background-color: rgb(255, 249, 239); |
|
175 |
- color: var(--color-orange); |
|
176 |
- margin-bottom: 10px; |
|
177 |
-} |
|
178 |
- |
|
179 |
-.column-item:last-child { |
|
180 |
- margin-bottom: 0; |
|
181 |
-} |
|
182 |
- |
|
183 |
-.component-content { |
|
184 |
- padding: 10px; |
|
185 |
- |
|
186 |
-} |
|
187 |
- |
|
188 |
-.layout-content>li, |
|
189 |
-.component-content>li { |
|
190 |
- margin-top: 10px; |
|
191 |
- margin-right: 10px; |
|
192 |
-} |
|
193 |
- |
|
194 |
-.layout-content>li:nth-child(3n), |
|
195 |
-.component-content>li:nth-child(3n) { |
|
196 |
- margin-right: 0px; |
|
197 |
-} |
|
198 |
- |
|
199 |
-.icon-content { |
|
200 |
- margin-left: 10px; |
|
201 |
- font-size: 1.3rem; |
|
202 |
-} |
|
203 |
- |
|
204 |
-.component-wrap { |
|
205 |
- width: 100%; |
|
206 |
- height: 100%; |
|
207 |
- padding: 10px; |
|
208 |
- border-radius: 5px; |
|
209 |
- background-color: #f8f8f8; |
|
210 |
-} |
|
211 |
- |
|
212 |
-input[type="text"].com-dbZone { |
|
213 |
- margin-left: 0; |
|
214 |
-} |
|
215 |
- |
|
216 |
-.db-input { |
|
217 |
- height: 100%; |
|
218 |
-} |
|
219 |
- |
|
220 |
-.active-layout .vertical-icon, |
|
221 |
-.active-layout .horizental-icon { |
|
222 |
- background-color: var(--color-blueE); |
|
223 |
- border: 3px solid var(--color-blue); |
|
224 |
-} |
|
225 |
- |
|
226 |
-.active-layout .horizental-icon>span, |
|
227 |
-.active-layout .vertical-icon>span { |
|
228 |
- border: 3px solid var(--color-blue); |
|
229 |
-} |
|
230 |
- |
|
231 |
-.component-content li img { |
|
232 |
- width: 100%; |
|
233 |
-} |
|
234 |
- |
|
235 |
-.page-info > .info-area, |
|
236 |
-.layout-tree ul{ |
|
237 |
- height: calc(100% - 40px); |
|
238 |
- overflow-y: auto; |
|
239 |
-} |
|
240 |
- |
|
241 |
-.layout-option{ |
|
242 |
- background-color:var(--color-skyBlue); |
|
243 |
- |
|
244 |
-} |
|
245 |
-.layout-option > div:nth-child(2){ |
|
246 |
- overflow-y: auto; |
|
247 |
-} |
|
248 |
- |
|
249 |
-.section-title{ |
|
250 |
- font-size: 1.4rem; |
|
251 |
- position: relative; |
|
252 |
-} |
|
253 |
- |
|
254 |
-.section-title::before{ |
|
255 |
- content: ""; |
|
256 |
- position: absolute; |
|
257 |
- width: 100%; |
|
258 |
- height: 50%; |
|
259 |
- background-color: var(--color-orange); |
|
260 |
- left: 0; |
|
261 |
- bottom: 0; |
|
262 |
- opacity: 0.2; |
|
263 |
-} |
|
264 |
- |
|
265 |
-.detail-content{ |
|
266 |
- background-color: var(--color-white); |
|
267 |
- border: 1px solid var(--color-blue); |
|
268 |
- border-radius: 0 0 5px 5px; |
|
269 |
- border-top: 0; |
|
270 |
-} |
|
271 |
- |
|
272 |
-.tab-box{ |
|
273 |
- border: 1px solid #eee; |
|
274 |
- border-radius: 0 5px 0 0; |
|
275 |
-} |
|
276 |
- |
|
277 |
-.attribute-modal{ |
|
278 |
- position: absolute; |
|
279 |
- min-width: 120px; |
|
280 |
- max-width: 200px; |
|
281 |
- bottom: 0; |
|
282 |
- left: 0; |
|
283 |
- background-color: var(--color-white); |
|
284 |
- transform: translateY(100%); |
|
285 |
- border: 1px solid #ddd; |
|
286 |
-} |
|
287 |
- |
|
288 |
-.attribute-modal > ul>li{ |
|
289 |
- padding: 8px 5px; |
|
290 |
- border-top: 1px solid #eee; |
|
291 |
-} |
|
292 |
- |
|
293 |
-.attribute-modal > ul>li:first-child{ |
|
294 |
- border-top: 0; |
|
295 |
-} |
|
296 |
- |
|
297 |
-.attribute-modal > ul>li svg, |
|
298 |
-.attribute-modal > ul>li p{ |
|
299 |
- color: var(--color-darkG); |
|
300 |
-} |
|
301 |
- |
|
302 |
-.attribute-modal > ul>li:hover svg, |
|
303 |
-.attribute-modal > ul>li:hover p{ |
|
304 |
- color: var(--color-blue); |
|
305 |
-} |
|
306 |
- |
|
307 |
-.editor-box{ |
|
308 |
- background-color: var(--color-skyBlue); |
|
309 |
- border: 1px dashed var(--color-blue); |
|
310 |
-} |
|
311 |
- |
|
312 |
- |
|
313 |
- |
|
314 |
-/* 알람 */ |
|
315 |
- |
|
316 |
-.speaker { |
|
317 |
- text-align: center; |
|
318 |
- margin-bottom: 10px; |
|
319 |
-} |
|
320 |
- |
|
321 |
-.speaker>span { |
|
322 |
- display: inline-block; |
|
323 |
- background-color: #eee; |
|
324 |
-} |
|
325 |
- |
|
326 |
-.speaker>span:nth-of-type(1) { |
|
327 |
- width: 10px; |
|
328 |
- height: 10px; |
|
329 |
- border-radius: 10px; |
|
330 |
-} |
|
331 |
- |
|
332 |
-.speaker>span:nth-of-type(2) { |
|
333 |
- width: 60px; |
|
334 |
- height: 10px; |
|
335 |
- border-radius: 10px; |
|
336 |
- margin-left: 10px; |
|
337 |
-} |
|
338 |
- |
|
339 |
-.text-areaZone { |
|
340 |
- height: calc(50% - 22px); |
|
341 |
- margin-bottom: 10px; |
|
342 |
-} |
|
343 |
- |
|
344 |
-.user-list { |
|
345 |
- width: 100%; |
|
346 |
- height: calc(100% - 50% - 22px); |
|
347 |
-} |
|
348 |
- |
|
349 |
-.user-list .user-title { |
|
350 |
- font-size: 1.6rem; |
|
351 |
- font-weight: 800; |
|
352 |
- color: var(--color-blue); |
|
353 |
- margin-bottom: 10px; |
|
354 |
-} |
|
355 |
- |
|
356 |
-.user-list>ul { |
|
357 |
- padding: 10px; |
|
358 |
- height: calc(100% - 29px); |
|
359 |
- overflow-y: auto; |
|
360 |
- border-top: 1px solid #eee; |
|
361 |
-} |
|
362 |
- |
|
363 |
-.user-list>ul>li { |
|
364 |
- padding: 5px 10px; |
|
365 |
- margin-bottom: 10px; |
|
366 |
- border: 1px solid var(--color-orange); |
|
367 |
- background-color: rgb(255, 249, 239); |
|
368 |
- color: var(--color-orange); |
|
369 |
- border-radius: 5px; |
|
370 |
- font-size: 1.3rem; |
|
371 |
-} |
|
372 |
- |
|
373 |
-.user-list>ul>li:last-child { |
|
374 |
- margin-bottom: 0; |
|
375 |
-} |
|
376 |
- |
|
377 |
-.user-zone, |
|
378 |
-.log-zone { |
|
379 |
- height: 100vh; |
|
380 |
-} |
|
381 |
- |
|
382 |
-.all-user, |
|
383 |
-.check-user { |
|
384 |
- height: 100vh; |
|
385 |
- border: 1px solid #eee; |
|
386 |
-} |
|
387 |
- |
|
388 |
-.log-content { |
|
389 |
- height: 99%; |
|
390 |
- background-color: var(--color-blueE); |
|
391 |
- padding: 10px 10px 10px 25px; |
|
392 |
- overflow-y: auto; |
|
393 |
-} |
|
394 |
- |
|
395 |
-.log-content li { |
|
396 |
- font-size: 1.3rem; |
|
397 |
- color: var(--color-blue); |
|
398 |
- list-style: disc; |
|
399 |
- padding: 5px; |
|
400 |
-} |
|
401 |
- |
|
402 |
-.push-text { |
|
403 |
- padding: 10px; |
|
404 |
- font-family: 'Pretendard'; |
|
405 |
- font-size: 15px; |
|
406 |
-} |
|
407 |
- |
|
408 |
- |
|
409 |
-/* 요소옵션 추가 240216 김하영 */ |
|
410 |
-.optionBox { |
|
411 |
- width: 100%; |
|
412 |
- height: 100%; |
|
413 |
- border-radius: 5px; |
|
414 |
- padding: 2rem; |
|
415 |
- background-color: #f9f9f9; |
|
416 |
- |
|
417 |
-} |
|
418 |
- |
|
419 |
-.optionBoxText { |
|
420 |
- font-size: 1.5rem; |
|
421 |
- color: #213f99; |
|
422 |
- font-family: 'Pretendard'; |
|
423 |
- font-weight: 600; |
|
424 |
-} |
|
425 |
- |
|
426 |
-.selectBoxArea select { |
|
427 |
- border: 0px; |
|
428 |
- background-color: white; |
|
429 |
-} |
|
430 |
- |
|
431 |
-.optionBox { |
|
432 |
- font-size: 1.5rem; |
|
433 |
-} |
|
434 |
- |
|
435 |
-.optionSubText { |
|
436 |
- text-align: center; |
|
437 |
-} |
|
438 |
- |
|
439 |
-.optionSubBox { |
|
440 |
- background-color: white; |
|
441 |
- padding: 10px; |
|
442 |
- border-radius: 5px; |
|
443 |
- overflow-y: scroll; |
|
444 |
- height: 225px; |
|
445 |
-} |
|
446 |
- |
|
447 |
-.optionSubBox li { |
|
448 |
- margin-bottom: 10px; |
|
449 |
-} |
|
450 |
- |
|
451 |
-.cyberpunk-checkbox { |
|
452 |
- appearance: none; |
|
453 |
- width: 20px; |
|
454 |
- height: 20px; |
|
455 |
- border: 2px solid var(--color-blue); |
|
456 |
- border-radius: 5px; |
|
457 |
- background-color: transparent; |
|
458 |
- display: inline-block; |
|
459 |
- position: relative; |
|
460 |
- margin-right: 10px; |
|
461 |
- cursor: pointer; |
|
462 |
-} |
|
463 |
- |
|
464 |
-.cyberpunk-checkbox:before { |
|
465 |
- content: ""; |
|
466 |
- background-color: var(--color-blue); |
|
467 |
- display: block; |
|
468 |
- position: absolute; |
|
469 |
- top: 50%; |
|
470 |
- left: 50%; |
|
471 |
- transform: translate(-50%, -50%) scale(0); |
|
472 |
- width: 10px; |
|
473 |
- height: 10px; |
|
474 |
- border-radius: 3px; |
|
475 |
- transition: all 0.3s ease-in-out; |
|
476 |
-} |
|
477 |
- |
|
478 |
-.cyberpunk-checkbox:checked:before { |
|
479 |
- transform: translate(-50%, -50%) scale(1); |
|
480 |
-} |
+++ resources/img/common/DATA.png
Binary file is not shown |
+++ resources/img/common/healthCare.png
Binary file is not shown |
+++ resources/img/common/main.png
Binary file is not shown |
+++ resources/img/common/mobility.png
Binary file is not shown |
+++ resources/img/common/smartCity.png
Binary file is not shown |
+++ resources/img/common/smartFactory.png
Binary file is not shown |
+++ resources/img/component/logo-w.png
Binary file is not shown |
+++ views/layout/Header.html
... | ... | @@ -0,0 +1,46 @@ |
1 | +<!DOCTYPE html> | |
2 | +<html lang="en"> | |
3 | + | |
4 | +<!-- 헤더 --> | |
5 | +<body> | |
6 | + <div class="header"> | |
7 | + <div class="header-area flex justify-between align-center"> | |
8 | + <img src="../../resources/img/component/logo-w.png" alt=""> | |
9 | + <nav> | |
10 | + <ul> | |
11 | + <li><a href="">About Us</a></li> | |
12 | + <li><a href="">Business</a></li> | |
13 | + <li><a href="">Solution</a></li> | |
14 | + <li><a href="">Portfolio</a></li> | |
15 | + </ul> | |
16 | + </nav> | |
17 | + </div> | |
18 | + </div> | |
19 | +</body> | |
20 | +<style> | |
21 | + #header { | |
22 | + background-color: #213F99; | |
23 | + position: absolute; | |
24 | + top: 0; | |
25 | + left: 0; | |
26 | + width: 100%; | |
27 | + } | |
28 | + .header-area{ | |
29 | + width: 1200px; | |
30 | + margin: 0 auto; | |
31 | + padding: 20px 0 15px 0; | |
32 | + } | |
33 | + | |
34 | + | |
35 | + nav ul li{ | |
36 | + margin-left: 140px; | |
37 | + display: inline-block; | |
38 | + } | |
39 | + | |
40 | + nav ul li a{ | |
41 | + color: white; | |
42 | + font-size: 1.5rem; | |
43 | + } | |
44 | +</style> | |
45 | + | |
46 | +</html>(No newline at end of file) |
--- views/main.html
+++ views/main.html
... | ... | @@ -5,14 +5,323 @@ |
5 | 5 |
<meta charset="UTF-8"> |
6 | 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
7 | 7 |
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> |
8 |
- |
|
8 |
+ <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> |
|
9 |
+ <link rel="stylesheet" href="../../resources/css/font.css"> |
|
10 |
+ <link rel="stylesheet" href="../../resources/css/reset.css"> |
|
11 |
+ <link rel="stylesheet" href="../../resources/css/style.css"> |
|
12 |
+ <link rel="stylesheet" href="../../resources/css/component.css"> |
|
13 |
+ <link rel="stylesheet" href="../../resources/css/common.css"> |
|
14 |
+ <link rel="stylesheet" href="../../resources/css/responsive.css"> |
|
9 | 15 |
<title>TAKENSOFT</title> |
10 |
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> |
|
11 |
- |
|
12 | 16 |
</head> |
13 | 17 |
|
14 | 18 |
<body> |
19 |
+ <div id="header"></div> |
|
20 |
+ <!-- Swiper --> |
|
21 |
+ <div class="swiper mySwiper"> |
|
22 |
+ <div class="swiper-wrapper"> |
|
23 |
+ <div class="swiper-slide"> |
|
24 |
+ <div class="slide-wrap"> |
|
25 |
+ <div class="main-wrap"> |
|
26 |
+ <div class="text-area flex align-end"> |
|
27 |
+ <h2>우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2> |
|
28 |
+ </div> |
|
29 |
+ </div> |
|
30 |
+ </div> |
|
31 |
+ </div> |
|
32 |
+ <div class="swiper-slide"> |
|
33 |
+ <div class="slide-wrap "> |
|
34 |
+ <div class="text-area slide-section"> |
|
35 |
+ <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span |
|
36 |
+ class="text-event">혁신으로 선도</span>합니다.</p> |
|
37 |
+ <p>테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p> |
|
38 |
+ </div> |
|
39 |
+ </div> |
|
40 |
+ </div> |
|
41 |
+ <div class="swiper-slide"> |
|
42 |
+ <div class="slide-wrap slide-solution"> |
|
43 |
+ <div class="text-area "> |
|
44 |
+ <div style="width: 100%;" class="mb70"> |
|
45 |
+ <p class=" solution-text pb30">테이큰 소프트는 ...</p> |
|
46 |
+ <p>AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br> |
|
47 |
+ 스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다. |
|
48 |
+ </p> |
|
49 |
+ </div> |
|
50 |
+ <div class="flex solution-box pd15"> |
|
51 |
+ <div class="pink-box flex-column"> |
|
52 |
+ <img src="../resources/img/common/DATA.png" alt=""> |
|
53 |
+ <div> |
|
54 |
+ <p>데이터관리분야</p> |
|
55 |
+ <p>데이터 관리 솔루현 Taken BI Manager</p> |
|
56 |
+ </div> |
|
57 |
+ </div> |
|
58 |
+ <div class="yellow-box flex-column"> |
|
59 |
+ <img src="../resources/img/common/smartCity.png" alt=""> |
|
60 |
+ <div> |
|
61 |
+ <p>스마트시티 분야</p> |
|
62 |
+ <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p> |
|
63 |
+ </div> |
|
64 |
+ </div> |
|
65 |
+ <div class="blue-box flex-column"> |
|
66 |
+ <img src="../resources/img/common/mobility.png" alt=""> |
|
67 |
+ <div> |
|
68 |
+ <p>모빌리티 분야</p> |
|
69 |
+ <p>AI 기반의 스마트 객체인식을 위한 CCTY</p> |
|
70 |
+ </div> |
|
71 |
+ </div> |
|
72 |
+ <div class="purple-box flex-column"> |
|
73 |
+ <img src="../resources/img/common/smartFactory.png" alt=""> |
|
74 |
+ <div> |
|
75 |
+ <p>스마트팩토리 분야</p> |
|
76 |
+ <p>제조기업 공정 관리 모니터링 서비스</p> |
|
77 |
+ </div> |
|
78 |
+ </div> |
|
79 |
+ <div class="ivory-box flex-column"> |
|
80 |
+ <img src="../resources/img/common/healthCare.png" alt=""> |
|
81 |
+ <div> |
|
82 |
+ <p>헬스케어 분야</p> |
|
83 |
+ <p>시니어 스마트 케어 모니터링 플랫폼</p> |
|
84 |
+ </div> |
|
85 |
+ </div> |
|
86 |
+ </div> |
|
87 |
+ </div> |
|
88 |
+ |
|
89 |
+ </div> |
|
90 |
+ </div> |
|
91 |
+ <div class="swiper-slide"> |
|
92 |
+ <div class="slide-wrap"> |
|
93 |
+ <p>POTRFOLIO</p> |
|
94 |
+ |
|
95 |
+ </div> |
|
96 |
+ </div> |
|
97 |
+ |
|
98 |
+ </div> |
|
99 |
+ <div class="swiper-pagination"></div> |
|
100 |
+ </div> |
|
101 |
+ <div id="footer" style="border: 0px;"></div> |
|
102 |
+ |
|
103 |
+ |
|
104 |
+ |
|
15 | 105 |
|
16 | 106 |
</body> |
107 |
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> |
|
108 |
+ |
|
109 |
+<script> |
|
110 |
+ |
|
111 |
+ var swiper = new Swiper(".mySwiper", { |
|
112 |
+ direction: "vertical", |
|
113 |
+ slidesPerView: 1, |
|
114 |
+ spaceBetween: 30, |
|
115 |
+ mousewheel: true, |
|
116 |
+ pagination: { |
|
117 |
+ el: ".swiper-pagination", |
|
118 |
+ clickable: true, |
|
119 |
+ }, on: { |
|
120 |
+ reachEnd: function () { |
|
121 |
+ swiper.mousewheel.disable(); |
|
122 |
+ $("#footer").show(); |
|
123 |
+ } |
|
124 |
+ } |
|
125 |
+ }); |
|
126 |
+ |
|
127 |
+ window.addEventListener('wheel', function (event) { |
|
128 |
+ if (event.deltaY < 1) { |
|
129 |
+ swiper.mousewheel.enable(); |
|
130 |
+ } else if (event.deltaY > 1) { |
|
131 |
+ } |
|
132 |
+ }); |
|
133 |
+ |
|
134 |
+ // 헤더,푸터 불러오기 |
|
135 |
+ $(function () { |
|
136 |
+ $("#header").load("layout/header.html"); |
|
137 |
+ $("#footer").load("layout/footer.html"); |
|
138 |
+ $("#footer").hide(); |
|
139 |
+ }); |
|
140 |
+ |
|
141 |
+</script> |
|
142 |
+ |
|
143 |
+ |
|
144 |
+ |
|
145 |
+<style scoped> |
|
146 |
+ html, |
|
147 |
+ body { |
|
148 |
+ position: relative; |
|
149 |
+ height: 100%; |
|
150 |
+ -ms-overflow-style: none; |
|
151 |
+ |
|
152 |
+ } |
|
153 |
+ |
|
154 |
+ ::-webkit-scrollbar { |
|
155 |
+ display: none; |
|
156 |
+ } |
|
157 |
+ |
|
158 |
+ body { |
|
159 |
+ background: #eee; |
|
160 |
+ font-family: Helvetica Neue, Helvetica, Arial, sans-serif; |
|
161 |
+ font-size: 14px; |
|
162 |
+ color: #000; |
|
163 |
+ margin: 0; |
|
164 |
+ padding: 0; |
|
165 |
+ } |
|
166 |
+ |
|
167 |
+ .swiper { |
|
168 |
+ width: 100%; |
|
169 |
+ height: 100%; |
|
170 |
+ } |
|
171 |
+ |
|
172 |
+ .swiper-slide { |
|
173 |
+ text-align: center; |
|
174 |
+ font-size: 18px; |
|
175 |
+ background: #fff; |
|
176 |
+ display: flex; |
|
177 |
+ justify-content: center; |
|
178 |
+ align-items: center; |
|
179 |
+ } |
|
180 |
+ |
|
181 |
+ .swiper-slide img { |
|
182 |
+ display: block; |
|
183 |
+ width: 100%; |
|
184 |
+ height: 100%; |
|
185 |
+ object-fit: cover; |
|
186 |
+ } |
|
187 |
+ |
|
188 |
+ #header { |
|
189 |
+ position: fixed; |
|
190 |
+ top: 0; |
|
191 |
+ z-index: 1; |
|
192 |
+ } |
|
193 |
+ |
|
194 |
+ .slide-wrap { |
|
195 |
+ width: 100%; |
|
196 |
+ height: 100%; |
|
197 |
+ padding: 59px 0 0 0; |
|
198 |
+ } |
|
199 |
+ |
|
200 |
+ .main-wrap { |
|
201 |
+ background: url(../resources/img/common/main.png) no-repeat; |
|
202 |
+ width: 100%; |
|
203 |
+ height: 100%; |
|
204 |
+ background-size: cover; |
|
205 |
+ background-position: bottom; |
|
206 |
+ } |
|
207 |
+ |
|
208 |
+ .text-area { |
|
209 |
+ width: 1200px; |
|
210 |
+ height: 100%; |
|
211 |
+ margin: auto; |
|
212 |
+ text-align: center; |
|
213 |
+ |
|
214 |
+ } |
|
215 |
+ |
|
216 |
+ .main-wrap .text-area h2 { |
|
217 |
+ padding-bottom: 150px; |
|
218 |
+ text-align: left; |
|
219 |
+ font-size: 6rem; |
|
220 |
+ font-weight: 600; |
|
221 |
+ color: white; |
|
222 |
+ font-family: 'Pretendard'; |
|
223 |
+ |
|
224 |
+ } |
|
225 |
+ |
|
226 |
+ .main-wrap .text-area h2 span { |
|
227 |
+ font-weight: 900; |
|
228 |
+ } |
|
229 |
+ |
|
230 |
+ .slide-section { |
|
231 |
+ padding-top: 330px; |
|
232 |
+ } |
|
233 |
+ |
|
234 |
+ .text-main { |
|
235 |
+ font-weight: 600; |
|
236 |
+ color: #213f99; |
|
237 |
+ font-family: 'Pretendard'; |
|
238 |
+ font-size: 5rem; |
|
239 |
+ |
|
240 |
+ } |
|
241 |
+ |
|
242 |
+ .text-main span { |
|
243 |
+ color: #f29600; |
|
244 |
+ font-weight: 900; |
|
245 |
+ |
|
246 |
+ } |
|
247 |
+ |
|
248 |
+ .text-event { |
|
249 |
+ position: relative; |
|
250 |
+ z-index: 3; |
|
251 |
+ } |
|
252 |
+ |
|
253 |
+ .text-event::before { |
|
254 |
+ content: ''; |
|
255 |
+ position: absolute; |
|
256 |
+ bottom: 0; |
|
257 |
+ left: 0; |
|
258 |
+ width: 100%; |
|
259 |
+ height: 20px; |
|
260 |
+ background-color: #fce5bf; |
|
261 |
+ z-index: -1; |
|
262 |
+ } |
|
263 |
+ |
|
264 |
+ .slide-solution { |
|
265 |
+ padding-top: 235px; |
|
266 |
+ font-family: 'Pretendard'; |
|
267 |
+ |
|
268 |
+ } |
|
269 |
+ |
|
270 |
+ |
|
271 |
+ |
|
272 |
+ .solution-text { |
|
273 |
+ font-size: 4.5rem; |
|
274 |
+ font-weight: 900; |
|
275 |
+ |
|
276 |
+ } |
|
277 |
+ |
|
278 |
+ .solution-box { |
|
279 |
+ flex-wrap: nowrap; |
|
280 |
+ gap: 40px; |
|
281 |
+ width: 100%; |
|
282 |
+ |
|
283 |
+ } |
|
284 |
+ .pink-box{ |
|
285 |
+ width: 200px; |
|
286 |
+ padding: 15px; |
|
287 |
+ height: 320px; |
|
288 |
+ background-color: #ffe2e4; |
|
289 |
+ border-radius: 20px; |
|
290 |
+ |
|
291 |
+ } |
|
292 |
+ .pink-box img , .blue-box img , .yellow-box img ,.purple-box img,.ivory-box img{ |
|
293 |
+ object-fit: contain; |
|
294 |
+ } |
|
295 |
+ .yellow-box{ |
|
296 |
+ width: 200px; |
|
297 |
+ height: 320px; |
|
298 |
+ padding: 15px; |
|
299 |
+ background-color: #f9f9e9; |
|
300 |
+ border-radius: 20px; |
|
301 |
+ } |
|
302 |
+ |
|
303 |
+ .blue-box{ |
|
304 |
+ width: 200px; |
|
305 |
+ height: 320px; |
|
306 |
+ padding: 15px; |
|
307 |
+ background-color: #d2e9ff; |
|
308 |
+ border-radius: 20px; |
|
309 |
+ } |
|
310 |
+ |
|
311 |
+ .purple-box{ |
|
312 |
+ width: 200px; |
|
313 |
+ height: 320px; |
|
314 |
+ padding: 15px; |
|
315 |
+ background-color: #e9ebff; |
|
316 |
+ border-radius: 20px; |
|
317 |
+ } |
|
318 |
+ .ivory-box{ |
|
319 |
+ width: 200px; |
|
320 |
+ height: 320px; |
|
321 |
+ padding: 15px; |
|
322 |
+ background-color: #f8f9fa; |
|
323 |
+ border-radius: 20px; |
|
324 |
+ } |
|
325 |
+</style> |
|
17 | 326 |
|
18 | 327 |
</html>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?