Skip to content

Commit 0bb3e58

Browse files
femmefatalehaeinfemmefatalehaein
authored
Merge pull request #13 from full-ownership/docker
Docker
2 parents 07411e1 + e83eba7 commit 0bb3e58

File tree

7 files changed

+219
-38
lines changed

7 files changed

+219
-38
lines changed

‎src/App.vue

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import HeaderView from '@/views/HeaderView.vue'
33
import FooterView from '@/views/FooterView.vue'
44
import MainView from '@/views/MainView.vue'
5+
import ChatbotButton from './Component/Chatbot/ChatbotButton.vue'
6+
57
68
79
</script>

‎src/Component/Introduction/Introduction2.vue

+102-33
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,122 @@
11
<template>
2-
<div class="flex flex-col h-[80%]">
3-
4-
<div class="bg-pink-800 w-[100vw] flex flex-row mt-12">
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">
55
<!-- 왼쪽 섹션 -->
6-
<div class = "bg-pink-400 w-1/2 pr-64">
7-
<div data-aos="fade-right" data-aos-duration="1000" class="pt-4 image-wrapper">
8-
<!-- <img src="https://via.placeholder.com/500" alt="샘플 이미지" width="600px" height="400px"> -->
9-
<div class="w-[500px] h-[300px] bg-gray-200 ml-auto" >
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-[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>
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
1022
</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>
1130
</div>
31+
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>
36+
1237
</div>
38+
39+
<!-- 가운데 선 -->
40+
<div class="relative">
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>
42+
<!--히트토리 타이틀 점-->
43+
<span class="bg-blue-400 w-[140px] h-[140px]
44+
text-center
45+
absolute top-[120px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full z-10
46+
flex">
47+
<span class="m-auto text-white text-2xl font-PretendardSemiBold">걸어온 길</span>
48+
</span>
49+
<!--점 -->
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>
52+
53+
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>
56+
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>
61+
1362
<!-- 오른쪽 섹션 -->
14-
<div class = "bg-blue-400 w-1/2">
15-
<div class="w-[200] text-center text-gray-800 text-6xl font-PretendardSemiBold ">
16-
2023.07.14
63+
<div class = "bg-white w-1/2 relative">
64+
<!-- 연혁 블록 오른쪽 블록-->
65+
<div class="
66+
absolute flex flex-row top-[300px] left-1/6 transform -translate-x-1/2 -translate-y-1/2"
67+
data-aos="fade-left" data-aos-duration="1400" >
68+
<div class="bg-blue-400 w-[120px] h-[2px] my-auto"></div>
69+
<div class="w-[200] text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
70+
2024
71+
</div>
72+
<div class="w-[200] ml-1 text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
73+
.07
74+
</div>
75+
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
76+
12
77+
</div>
78+
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
79+
뉴집스 설립
80+
</div>
1781
</div>
18-
<div class="bg-gray-600 w-[100]">
1982

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" />
2086
</div>
21-
<div class="w-[200] text-center text-gray-800 text-6xl font-PretendardSemiBold mt-4">
22-
00상사 설립
23-
</div>
24-
</div>
25-
</div>
2687

27-
<!--여ㅑ기 컴포넌트 나누고 싶은데 -->
28-
<div class="bg-pink-800 w-[100vw] flex flex-row mt-12">
2988

30-
<div class = "bg-pink-400 w-1/2 pl-12">
31-
</div>
32-
<div class = "bg-blue-400 w-1/2">
33-
<div data-aos="fade-left" data-aos-duration="1000" class="pt-4 image-wrapper">
34-
<!-- <img src="https://via.placeholder.com/500" alt="샘플 이미지" width="600px" height="400px"> -->
35-
<div class="w-[500px] h-[300px] bg-gray-200">
89+
<!-- 연혁 블록 오른쪽 블록-->
90+
<div class="
91+
absolute flex flex-row top-[650px] left-1/6 transform -translate-x-1/2 -translate-y-1/2"
92+
data-aos="fade-left" data-aos-duration="1400" >
93+
<div class="bg-blue-400 w-[120px] h-[2px] my-auto"></div>
94+
95+
<div class="w-[200] text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
96+
2024
97+
</div>
98+
<div class="w-[200] ml-1 text-center text-gray-800 text-3xl text-bold font-PretendardSemiBold ">
99+
.07
100+
</div>
101+
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
102+
27
36103
</div>
104+
<div class="w-[200] ml-4 text-center text-gray-800 text-3xl font-Pretendard">
105+
관통 4반 최우수상 수상
106+
</div>
107+
37108
</div>
38-
</div>
39-
</div>
40-
<!--여ㅑ기 컴포넌트 나누고 싶은데 -->
41109

42110

43-
<div data-aos="fade-right"></div>
44-
<div data-aos="zoom-in" data-aos-duration="1000" class="pt-4">
45-
<div class="w-[200] text-center text-gray-800 text-6xl font-PretendardSemiBold ">
46-
</div>
47-
<div class="w-[200] text-center text-gray-800 text-6xl font-PretendardSemiBold mt-4">
48-
뉴집스가 함께 하겠습니다
111+
112+
49113
</div>
50114
</div>
115+
<!--연혁 끝-->
116+
117+
118+
119+
51120

52121
</div>
53122

‎src/Component/Introduction/Introduction3.vue

+111
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

+4-5
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<Mouse class="mt-[100px]"></Mouse>
77
</div>
88
<!-- 두 번째 섹션 -->
9-
<div class="section" id="section2">
9+
<div class="section flex flex-col h-[100vh]" id="section2">
1010
<Introduction2></Introduction2>
11-
11+
<Mouse class="mt-[100px]"></Mouse>
1212
</div>
1313

1414
<!-- 세 번째 섹션 -->
@@ -62,7 +62,6 @@ onMounted(() => {
6262
// 스크롤 애니메이션 함수
6363
function scrollToSection(sectionId) {
6464
if (isScrolling) return; // 이미 스크롤 중이면 함수 종료
65-
6665
isScrolling = true; // 스크롤 시작
6766
6867
// id로 지정된 섹션으로 부드럽게 스크롤
@@ -81,7 +80,7 @@ onMounted(() => {
8180
const scrollPosition = window.scrollY;
8281
console.log(scrollPosition)
8382
// 예를 들어, 1000px 이상 스크롤하면 section2로 이동
84-
if (scrollPosition > 150 && scrollPosition < 400) {
83+
if (scrollPosition > 110 && scrollPosition < 400) {
8584
// id가 'targetSection'인 곳으로 스크롤
8685
scrollToSection('#section2'); // section2로 스크롤=
8786
} else if (scrollPosition > 2000 && scrollPosition < 3000) {
@@ -109,7 +108,7 @@ onMounted(() => {
109108
}
110109
111110
#section1 { background-color: #ffffff; }
112-
#section2 { background-color: #250066; }
111+
#section2 { background-color: #fdfdfd; }
113112
#section3 { background-color: #43004e; }
114113
#section4 { background-color: #630021; }
115114
#section5 { background-color: #5f0600; }

0 commit comments

Comments
 (0)