Skip to content

Commit e83eba7

Browse files
femmefatalehaeinfemmefatalehaein
committed
fix : intro modify css
1 parent e383477 commit e83eba7

File tree

6 files changed

+143
-23
lines changed

6 files changed

+143
-23
lines changed

‎src/Component/Introduction/Introduction2.vue

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div class="flex flex-col bg-pink-200 h-[100%]">
2+
<div class="flex flex-col bg-pink-200 h-[80%] ">
33
<!--연혁 시작-->
4-
<div class="bg-pink-100 w-[100vw] h-full flex flex-row mt-12">
4+
<div class="bg-pink-100 w-[100vw] h-full flex flex-row">
55
<!-- 왼쪽 섹션 -->
66
<div class = "bg-white w-1/2 relative">
77
<div data-aos="fade-right" data-aos-duration="1400" class="image-wrapper p-auto absolute
8-
top-[250px] left-[25%] transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400">
9-
<img
10-
</div> src="@/assets/img/logo_kor.png" alt="logo_kor" width="400" />
8+
top-[210px] left-[30%] transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400">
9+
<img src="@/assets/img/intro/main1.jpg" alt="logo_kor" width="340" />
10+
</div>
1111

1212
<div class="
1313
absolute flex flex-row w-full ml-auto top-[480px] left-1/6 transform -translate-x-1/2 -translate-y-1/2
@@ -26,44 +26,46 @@
2626
<div class="text-center text-gray-800 text-3xl font-PretendardSemiBold">
2727
.11
2828
</div>
29-
<div class="bg-gray-800 w-[120px] h-[2px] my-auto "></div>
29+
<div class="bg-blue-400 w-[120px] h-[2px] my-auto "></div>
3030
</div>
3131

32+
<div data-aos="fade-right" data-aos-duration="1400" class="image-wrapper p-auto absolute
33+
top-[580px] left-[32%] transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400">
34+
<img src="@/assets/img/intro/main3.png" alt="logo_kor" width="300" />
35+
</div>
3236

3337
</div>
3438

35-
36-
3739
<!-- 가운데 선 -->
3840
<div class="relative">
39-
<div class="w-[6px] h-[700px] mt-12 bg-gray-700 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-8"></div>
40-
41+
<div class="w-[12px] h-[524px] mt-12 bg-blue-400 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-8"></div>
4142
<!--히트토리 타이틀 점-->
4243
<span class="bg-blue-400 w-[140px] h-[140px]
4344
text-center
44-
absolute top-[140px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10
45+
absolute top-[120px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10
4546
flex">
4647
<span class="m-auto text-white text-2xl font-PretendardSemiBold">걸어온 길</span>
4748
</span>
4849
<!--점 -->
49-
<span class="bg-gray-300 w-[30px] h-[30px] absolute top-[320px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
50-
<span class="bg-gray-700 w-[12px] h-[12px] absolute top-[320px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
50+
<span class="bg-blue-100 w-[30px] h-[30px] absolute top-[320px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
51+
<span class="bg-blue-400 w-[12px] h-[12px] absolute top-[320px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
5152

5253

53-
<span class="bg-gray-300 w-[30px] h-[30px] absolute top-[500px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
54-
<span class="bg-gray-700 w-[12px] h-[12px] absolute top-[500px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
54+
<span class="bg-blue-100 w-[30px] h-[30px] absolute top-[500px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
55+
<span class="bg-blue-400 w-[12px] h-[12px] absolute top-[500px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
5556

56-
<span class="bg-gray-300 w-[30px] h-[30px] absolute top-[665px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
57-
<span class="bg-gray-700 w-[12px] h-[12px] absolute top-[665px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
58-
</div>
57+
<span class="bg-blue-100 w-[30px] h-[30px] absolute top-[670px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
58+
<span class="bg-blue-400 w-[12px] h-[12px] absolute top-[670px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
59+
60+
</div>
5961

6062
<!-- 오른쪽 섹션 -->
6163
<div class = "bg-white w-1/2 relative">
6264
<!-- 연혁 블록 오른쪽 블록-->
6365
<div class="
6466
absolute flex flex-row top-[300px] left-1/6 transform -translate-x-1/2 -translate-y-1/2"
6567
data-aos="fade-left" data-aos-duration="1400" >
66-
<div class="bg-gray-800 w-[120px] h-[2px] my-auto"></div>
68+
<div class="bg-blue-400 w-[120px] h-[2px] my-auto"></div>
6769
<div class="w-[200] text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
6870
2024
6971
</div>
@@ -78,12 +80,18 @@
7880
</div>
7981
</div>
8082

83+
<div data-aos="fade-right" data-aos-duration="1400" class="image-wrapper p-auto absolute
84+
top-[400px] left-[25%] transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400">
85+
<img src="@/assets/img/intro/main2.jpeg" alt="logo_kor" width="300" />
86+
</div>
87+
8188

8289
<!-- 연혁 블록 오른쪽 블록-->
8390
<div class="
8491
absolute flex flex-row top-[650px] left-1/6 transform -translate-x-1/2 -translate-y-1/2"
8592
data-aos="fade-left" data-aos-duration="1400" >
86-
<div class="bg-gray-800 w-[120px] h-[2px] my-auto"></div>
93+
<div class="bg-blue-400 w-[120px] h-[2px] my-auto"></div>
94+
8795
<div class="w-[200] text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
8896
2024
8997
</div>
@@ -96,6 +104,7 @@
96104
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
97105
관통 4반 최우수상 수상
98106
</div>
107+
99108
</div>
100109

101110

‎src/Component/Introduction/Introduction3.vue

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<div class="flex flex-col bg-pink-200 h-[80%] ">
3+
<!--연혁 시작-->
4+
<div class="bg-pink-100 w-[100vw] h-full flex flex-row">
5+
<!-- 왼쪽 섹션 -->
6+
<div class = "bg-white w-1/2 relative">
7+
<div data-aos="fade-right" data-aos-duration="1400" class="image-wrapper p-auto absolute
8+
top-[250px] left-[25%] transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400">
9+
<img src="@/assets/img/intro/main1.jpg" alt="logo_kor" width="400" />
10+
</div>
11+
12+
<div class="
13+
absolute flex flex-row w-full ml-auto top-[480px] left-1/6 transform -translate-x-1/2 -translate-y-1/2
14+
flex flex-row justify-end"
15+
data-aos="fade-right" data-aos-duration="1400" >
16+
17+
<div class="text-center text-gray-800 text-3xl ml-4 text-bold font-Pretendard ">
18+
인재영입 (박주현 수석사원)
19+
</div>
20+
<div class=" text-center text-gray-800 text-3xl ml-4 text-bold font-Pretendard">
21+
12
22+
</div>
23+
<div class="text-center text-gray-800 text-3xl ml-4 font-PretendardSemiBold">
24+
2024
25+
</div>
26+
<div class="text-center text-gray-800 text-3xl font-PretendardSemiBold">
27+
.11
28+
</div>
29+
<div class="bg-blue-400 w-[120px] h-[2px] my-auto "></div>
30+
</div>
31+
</div>
32+
33+
<!-- 가운데 선 -->
34+
<div class="relative">
35+
<div class="w-[12px] h-[524px] mt-12 bg-blue-400 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-8"></div>
36+
<!--히트토리 타이틀 점-->
37+
<span class="bg-blue-400 w-[140px] h-[140px]
38+
text-center
39+
absolute top-[120px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10
40+
flex">
41+
<span class="m-auto text-white text-2xl">걸어온 길</span>
42+
</span>
43+
<!--점 -->
44+
<span class="bg-blue-100 w-[30px] h-[30px] absolute top-[320px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
45+
<span class="bg-blue-400 w-[12px] h-[12px] absolute top-[320px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
46+
47+
48+
<span class="bg-blue-100 w-[30px] h-[30px] absolute top-[500px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
49+
<span class="bg-blue-400 w-[12px] h-[12px] absolute top-[500px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
50+
51+
<span class="bg-blue-100 w-[30px] h-[30px] absolute top-[670px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
52+
<span class="bg-blue-400 w-[12px] h-[12px] absolute top-[670px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10"></span>
53+
54+
</div>
55+
56+
<!-- 오른쪽 섹션 -->
57+
<div class = "bg-white w-1/2 relative">
58+
<!-- 연혁 블록 오른쪽 블록-->
59+
<div class="
60+
absolute flex flex-row top-[300px] left-1/6 transform -translate-x-1/2 -translate-y-1/2"
61+
data-aos="fade-left" data-aos-duration="1400" >
62+
<div class="bg-blue-400 w-[120px] h-[2px] my-auto"></div>
63+
<div class="w-[200] text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
64+
2024
65+
</div>
66+
<div class="w-[200] ml-1 text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
67+
.07
68+
</div>
69+
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
70+
12
71+
</div>
72+
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
73+
뉴집스 설립
74+
</div>
75+
</div>
76+
77+
78+
<!-- 연혁 블록 오른쪽 블록-->
79+
<div class="
80+
absolute flex flex-row top-[650px] left-1/6 transform -translate-x-[300px] "
81+
data-aos="fade-left" data-aos-duration="1400" >
82+
<div class="bg-blue-400 w-[120px] h-[2px] my-auto"></div>
83+
<div class="w-[200] text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
84+
2024
85+
</div>
86+
<div class="w-[200] ml-1 text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
87+
.07
88+
</div>
89+
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
90+
27
91+
</div>
92+
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
93+
관통 4반 최우수상 수상
94+
</div>
95+
</div>
96+
97+
98+
99+
100+
</div>
101+
</div>
102+
<!--연혁 끝-->
103+
104+
105+
106+
107+
108+
</div>
109+
110+
</template>
111+

‎src/assets/img/intro/main1.jpg

9.37 KB
Loading

‎src/assets/img/intro/main2.jpeg

106 KB
Loading

‎src/assets/img/intro/main3.png

705 KB
Loading

‎src/views/IntroductionView.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<Mouse class="mt-[100px]"></Mouse>
77
</div>
88
<!-- 두 번째 섹션 -->
9-
<div class="section bg-yellow-400 h-[1800px]" id="section2">
9+
<div class="section flex flex-col h-[100vh]" id="section2">
1010
<Introduction2></Introduction2>
11+
<Mouse class="mt-[100px]"></Mouse>
1112
</div>
1213

1314
<!-- 세 번째 섹션 -->
@@ -61,7 +62,6 @@ onMounted(() => {
6162
// 스크롤 애니메이션 함수
6263
function scrollToSection(sectionId) {
6364
if (isScrolling) return; // 이미 스크롤 중이면 함수 종료
64-
6565
isScrolling = true; // 스크롤 시작
6666
6767
// id로 지정된 섹션으로 부드럽게 스크롤
@@ -80,7 +80,7 @@ onMounted(() => {
8080
const scrollPosition = window.scrollY;
8181
console.log(scrollPosition)
8282
// 예를 들어, 1000px 이상 스크롤하면 section2로 이동
83-
if (scrollPosition > 150 && scrollPosition < 400) {
83+
if (scrollPosition > 110 && scrollPosition < 400) {
8484
// id가 'targetSection'인 곳으로 스크롤
8585
scrollToSection('#section2'); // section2로 스크롤=
8686
} else if (scrollPosition > 2000 && scrollPosition < 3000) {

0 commit comments

Comments
 (0)