Skip to content

Commit d53e1da

Browse files
author
midKitchen
committed
add: ヘッダー周りのデザイン修正・投稿の展開ボタンの間隔修正を全ページに適用
1 parent 4976c4e commit d53e1da

File tree

6 files changed

+61
-52
lines changed

6 files changed

+61
-52
lines changed

‎front/HaCollect/src/App.vue

+33-28
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,11 @@ header {
150150
}
151151
.header-inner {
152152
display: flex;
153+
background: #fff;
153154
height: 70px;
154155
justify-content: space-between;
155156
align-items: center;
156-
padding: 0 36px;
157+
padding: 0 5px;
157158
margin: 0 auto;
158159
}
159160
.header-logoImg {
@@ -164,22 +165,22 @@ header {
164165
margin-top: 10px;
165166
}
166167
.searchArea {
167-
width: 350px;
168-
/* inputの幅 */
168+
width: 500px;
169+
/* inputの幅 */
169170
height: 35px;
170171
background-repeat: no-repeat;
171172
/* 背景は繰り返さない */
172173
background-position: 8px center;
173174
/* 背景の位置 */
174175
background-size: auto 60%;
175176
/* 背景のサイズ */
176-
background-color: #eeeeee;
177+
background-color: #fff;
177178
/* 背景色 */
178179
margin-top: 10px;
179180
/* サンプルは中央寄せ */
180181
margin-left: 10px;
181182
/* アイコン間の左余白 */
182-
border-radius: 9999px;
183+
border-radius: 10px;
183184
/* 角丸 */
184185
color: #687684;
185186
/* 文字色 */
@@ -201,47 +202,51 @@ header {
201202
/* フォーカス時背景色 */
202203
}
203204
.header-inner2 {
204-
background-color: #ffffff;
205+
background-color: #fff;
205206
display: flex;
206207
justify-content: space-between;
207208
align-items: center;
208209
width: 100%;
209210
margin: 0 auto;
210211
position: fixed;
211-
height: 60px;
212+
height: 45px;
212213
z-index: 1;
213214
}
214215
.header-nav {
215216
display: flex;
216-
overflow-x: auto;
217+
overflow-x: scroll;
217218
white-space: nowrap;
218-
height: 60px;
219+
height: 45px;
220+
width: 100%;
219221
}
220222
.header-nav label {
221-
background: #FFFFFF;
223+
background: #FFF;
222224
border-left: 1px solid #CCCCCC;
223225
border-right: 1px solid #CCCCCC;
226+
border-bottom: 1px solid #bbbbbb;
224227
font-style: normal;
225-
width: 125px;
228+
width: 25%;
226229
}
227230
.pageChange {
228231
display: block;
229232
/* 扱いやすいようにblock要素にする */
230-
font-size: 20px;
233+
font-size: 16px;
231234
/* 任意のフォントサイズにする */
232235
font-weight: bold;
233236
/* 太字にする */
234-
color: #000;
237+
color: #808080;
235238
text-decoration-line: none;
236-
padding: 5px 15px;
237-
margin-top: 10px;
239+
padding: 10px 15px;
238240
}
239241
.header-nav input:checked+ label {
240-
background: #61d6d2;
241-
border: 1px solid #61d6d2;
242+
background: #FFFFFF;
243+
border-top: 1px solid #bbbbbb;
244+
border-left: 1px solid #bbbbbb;
245+
border-right: 1px solid #bbbbbb;
246+
border-bottom: none;
242247
}
243248
.header-nav input:checked+ label .pageChange {
244-
color: #ffffff;
249+
color: #000;
245250
}
246251
.header-nav input {
247252
display: none;
@@ -284,25 +289,25 @@ header {
284289
opacity: 0;
285290
}
286291
/* タブレット・スマートフォン用スタイル */
287-
@media(max-width: 971px) {
288-
/* .header-logoImg {
292+
/* @media(max-width: 971px) {
293+
.header-logoImg {
289294
width: 150px;
290295
margin-top: 10px;
291-
} */
292-
/* .searchArea {
296+
}
297+
.searchArea {
293298
width: 225px;
294299
height: 30px;
295-
} */
296-
}
300+
}
301+
} */
297302
/* スマートフォン用スタイル */
298-
@media(max-width: 647px) {
303+
@media(min-width: 750px) {
299304
.header-inner {
300-
padding: 0 5px;
305+
padding: 0 36px;
301306
}
302-
.searchArea {
307+
/* .searchArea {
303308
width: 225px;
304309
height: 30px;
305-
}
310+
} */
306311
/* .header-inner {
307312
display: block;
308313
height: 35px;

‎front/HaCollect/src/components/eatPage.vue

+6-5
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,8 @@ export default {
246246
247247
.card_Date {
248248
margin: auto;
249-
font-size: 20px;
249+
padding-right: 50px;
250+
font-size: 18px;
250251
}
251252
252253
.card_Image {
@@ -309,11 +310,11 @@ export default {
309310
}
310311
311312
.ac-box label {
312-
width: 50px;
313-
height: 35px;
313+
width: 75px;
314+
height: 52px;
314315
font-size: 16px;
315316
text-align: center;
316-
margin: 0 auto;
317+
margin: 15px auto 0;
317318
line-height: 50px;
318319
position: relative;
319320
display: block;
@@ -355,12 +356,12 @@ export default {
355356
font-style: normal;
356357
width: 50px;
357358
height: 25px;
358-
margin: 0 3px;
359359
display: block;
360360
font-size: 16px;
361361
color: #fff;
362362
text-decoration-line: none;
363363
padding: 5px 15px;
364+
margin-top: 25px;
364365
margin-left: auto;
365366
margin-right: auto;
366367
}

‎front/HaCollect/src/components/knowPage.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -247,9 +247,9 @@ export default {
247247
248248
.card_Date {
249249
margin: auto;
250-
font-size: 20px;
250+
padding-right: 50px;
251+
font-size: 18px;
251252
}
252-
253253
.card_Image {
254254
max-width: 100%;
255255
height: auto;
@@ -310,11 +310,11 @@ export default {
310310
}
311311
312312
.ac-box label {
313-
width: 50px;
314-
height: 35px;
313+
width: 75px;
314+
height: 52px;
315315
font-size: 16px;
316316
text-align: center;
317-
margin: 0 auto;
317+
margin: 15px auto 0;
318318
line-height: 50px;
319319
position: relative;
320320
display: block;
@@ -356,12 +356,12 @@ export default {
356356
font-style: normal;
357357
width: 50px;
358358
height: 25px;
359-
margin: 0 3px;
360359
display: block;
361360
font-size: 16px;
362361
color: #fff;
363362
text-decoration-line: none;
364363
padding: 5px 15px;
364+
margin-top: 25px;
365365
margin-left: auto;
366366
margin-right: auto;
367367
}

‎front/HaCollect/src/components/searchResult.vue

+7-6
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ export default {
212212
margin: 0 auto;
213213
position: fixed;
214214
height: 30px;
215-
margin-top: 60px;
215+
margin-top: 45px;
216216
z-index: 1;
217217
}
218218
@@ -276,7 +276,8 @@ export default {
276276
277277
.card_Date {
278278
margin: auto;
279-
font-size: 20px;
279+
padding-right: 50px;
280+
font-size: 18px;
280281
}
281282
282283
.card_Image {
@@ -339,11 +340,11 @@ export default {
339340
}
340341
341342
.ac-box label {
342-
width: 50px;
343-
height: 35px;
343+
width: 75px;
344+
height: 52px;
344345
font-size: 16px;
345346
text-align: center;
346-
margin: 0 auto;
347+
margin: 15px auto 0;
347348
line-height: 50px;
348349
position: relative;
349350
display: block;
@@ -385,12 +386,12 @@ export default {
385386
font-style: normal;
386387
width: 50px;
387388
height: 25px;
388-
margin: 0 3px;
389389
display: block;
390390
font-size: 16px;
391391
color: #fff;
392392
text-decoration-line: none;
393393
padding: 5px 15px;
394+
margin-top: 25px;
394395
margin-left: auto;
395396
margin-right: auto;
396397
}

‎front/HaCollect/src/components/seePage.vue

+6-5
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,8 @@ export default {
246246
247247
.card_Date {
248248
margin: auto;
249-
font-size: 20px;
249+
padding-right: 50px;
250+
font-size: 18px;
250251
}
251252
252253
.card_Image {
@@ -309,11 +310,11 @@ export default {
309310
}
310311
311312
.ac-box label {
312-
width: 50px;
313-
height: 35px;
313+
width: 75px;
314+
height: 52px;
314315
font-size: 16px;
315316
text-align: center;
316-
margin: 0 auto;
317+
margin: 15px auto 0;
317318
line-height: 50px;
318319
position: relative;
319320
display: block;
@@ -355,12 +356,12 @@ export default {
355356
font-style: normal;
356357
width: 50px;
357358
height: 25px;
358-
margin: 0 3px;
359359
display: block;
360360
font-size: 16px;
361361
color: #fff;
362362
text-decoration-line: none;
363363
padding: 5px 15px;
364+
margin-top: 25px;
364365
margin-left: auto;
365366
margin-right: auto;
366367
}

‎front/HaCollect/src/components/topPage.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,8 @@ export default {
245245
246246
.card_Date {
247247
margin: auto;
248-
font-size: 20px;
248+
padding-right: 50px;
249+
font-size: 18px;
249250
}
250251
251252
.card_Image {
@@ -356,12 +357,12 @@ export default {
356357
font-style: normal;
357358
width: 50px;
358359
height: 25px;
359-
margin: 0 3px;
360360
display: block;
361361
font-size: 16px;
362362
color: #fff;
363363
text-decoration-line: none;
364364
padding: 5px 15px;
365+
margin-top: 25px;
365366
margin-left: auto;
366367
margin-right: auto;
367368
}

0 commit comments

Comments
 (0)