effendy/qris_bank_jatim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update flow final

Browse Source
This commit is contained in:
bagus-arie05
2025-09-17 15:40:54 +07:00
parent 4e30edeaf8
commit 3ef6f38f2e
8 changed files with 440 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
components/Home.vue
View File

@@ -4,29 +4,29 @@
<div class="logo-group-contact">
<v-img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
width="60"
height="60"
width="50"
height="50"
class="logo-img-contact"
contain
/>
<v-img
src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
width="60"
height="60"
width="50"
height="50"
class="logo-img-contact"
contain
/>
<v-img
src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
width="60"
height="60"
width="50"
height="50"
class="logo-img-contact"
contain
/>
<v-img
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
width="60"
height="60"
width="50"
height="50"
class="logo-img-contact"
contain
/>
@@ -49,7 +49,7 @@
:cycle="false"
:interval="0"
class="banner-carousel"
height="450"
height="300"
:continuous="false"
>
<v-carousel-item
@@ -93,7 +93,7 @@
class="thumbnail-img"
/>
<div class="play-button-overlay">
<v-icon color="white" size="64">mdi-play-circle</v-icon>
<v-icon color="white" size="48">mdi-play-circle</v-icon>
</div>
</div>
</div>
@@ -110,50 +110,31 @@
/>
</div>
</div>
<!-- <div class="cta-section-contact">
<v-btn
@click="navigateToQrisPayment"
color="#FF9248"
class="cta-button"
x-large
>
<span class="button-text">LANJUT KE PEMBAYARAN</span>
</v-btn>
<v-btn
@click="navigateToDebugPage"
color="#FF9248"
class="cta-button debug-button"
x-large
>
<span class="button-text">DEBUG KE STEP 2</span>
</v-btn>
</div> -->
</div>
<div class="orange-background-contact">
<div class="contact-info-section-contact">
<div class="contact-item-contact">
<div class="contact-icon-contact whatsapp-icon">
<v-icon color="#25D366" size="28">mdi-whatsapp</v-icon>
<v-icon color="#25D366" size="24">mdi-whatsapp</v-icon>
</div>
<div class="contact-text-contact">+62 815-5560-6668</div>
</div>
<div class="contact-item-contact">
<div class="contact-icon-contact instagram-icon">
<v-icon color="#E1306C" size="28">mdi-instagram</v-icon>
<v-icon color="#E1306C" size="24">mdi-instagram</v-icon>
</div>
<div class="contact-text-contact">rssasaifulanwar</div>
</div>
<div class="contact-item-contact">
<div class="contact-icon-contact phone-icon">
<v-icon color="#FF9248" size="28">mdi-phone</v-icon>
<v-icon color="#FF9248" size="24">mdi-phone</v-icon>
</div>
<div class="contact-text-contact">0341-362101</div>
</div>
<div class="contact-item-contact">
<div class="contact-icon-contact web-icon">
<v-icon color="#2196F3" size="28">mdi-web</v-icon>
<v-icon color="#2196F3" size="24">mdi-web</v-icon>
</div>
<div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
</div>
@@ -233,9 +214,8 @@ watch(currentSlide, (newSlide, oldSlide) => {
</script>
<style scoped>
.contact-page-container {
min-height: 100vh;
min-height:auto;
width: 100%;
background: white;
display: flex;
@@ -244,29 +224,29 @@ watch(currentSlide, (newSlide, oldSlide) => {
.orange-background-contact {
width: 100%;
height: clamp(120px, 15vh, 200px);
height: clamp(80px, 12vh, 180px);
background: #ff9248;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 20px;
margin-top: 2rem;
padding-bottom: 10px;
margin-top: auto;
}
.logo-section-contact {
position: relative;
z-index: 2;
padding: 15px 20px;
padding: 8px 12px;
display: flex;
justify-content: center;
}
.logo-group-contact {
display: flex;
gap: 2rem;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
justify-content: center;
@@ -274,8 +254,8 @@ watch(currentSlide, (newSlide, oldSlide) => {
.logo-img-contact {
transition: transform 0.3s ease;
width: clamp(40px, 6vw, 60px) !important;
height: clamp(40px, 6vw, 60px) !important;
width: clamp(20px, 5vw, 50px) !important;
height: clamp(20px, 5vw, 50px) !important;
}
.logo-img-contact:hover {
@@ -290,52 +270,52 @@ watch(currentSlide, (newSlide, oldSlide) => {
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 10px 20px;
padding: 5px 15px;
}
.title-section-contact {
text-align: center;
margin-bottom: 20px;
margin-bottom: 8px;
}
.main-title-contact {
color: #ff9248;
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-size: clamp(2rem, 2vw, 1.5rem);
font-family: "Roboto", sans-serif;
font-weight: 800;
margin-bottom: 12px;
line-height: 1.2;
margin-bottom: 8px;
line-height: 0.8;
}
.subtitle-contact {
color: black;
font-size: clamp(0.9rem, 2vw, 1.1rem);
font-size: clamp(0.8rem, 1.8vw, 1rem);
font-family: "Roboto", sans-serif;
font-weight: 500;
margin: 0;
max-width: 600px;
max-width: 500px;
}
.banner-carousel-container {
width: 90%;
max-width: 900px;
margin-bottom: 30px;
width: 95%;
max-width: 800px;
margin-bottom: 20px;
position: relative;
border-radius: 20px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.banner-carousel {
border-radius: 20px;
border-radius: 15px;
overflow: hidden;
height: 450px;
height: clamp(300px, 45vh, 400px);
}
.carousel-item {
position: relative;
width: 100%;
height: 450px;
height: 350px;
}
.video-container {
@@ -352,7 +332,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
width: 100%;
height: 100%;
border: none;
border-radius: 20px;
border-radius: 15px;
}
.video-thumbnail {
@@ -369,7 +349,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
border-radius: 15px;
}
.play-button-overlay {
@@ -379,7 +359,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
padding: 20px;
padding: 15px;
transition: all 0.3s ease;
}
@@ -395,23 +375,23 @@ watch(currentSlide, (newSlide, oldSlide) => {
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 40px 30px 30px;
padding: 30px 20px 20px;
z-index: 2;
}
.overlay-content {
max-width: 600px;
max-width: 500px;
}
.overlay-title {
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-size: clamp(1.2rem, 1.8vw, 1.6rem);
font-weight: 700;
margin-bottom: 8px;
margin-bottom: 6px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.overlay-description {
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
font-size: clamp(0.8rem, 1.3vw, 1rem);
font-weight: 400;
margin: 0;
opacity: 0.9;
@@ -420,17 +400,17 @@ watch(currentSlide, (newSlide, oldSlide) => {
.custom-indicators {
position: absolute;
bottom: 15px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
gap: 10px;
z-index: 3;
}
.indicator-dot {
width: 12px;
height: 12px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
@@ -448,7 +428,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
.contact-info-section-contact {
display: flex;
gap: 2rem;
gap: 1.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
@@ -459,18 +439,18 @@ watch(currentSlide, (newSlide, oldSlide) => {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
gap: 6px;
}
.contact-icon-contact {
width: clamp(40px, 8vw, 50px);
height: clamp(40px, 8vw, 50px);
border-radius: 50%;
width: 35px;
height: 35px;
border-radius: 80%;
background: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
@@ -480,7 +460,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
.contact-text-contact {
color: white;
font-size: clamp(12px, 2vw, 14px);
font-size: 12px;
font-family: "Roboto", sans-serif;
font-weight: 500;
white-space: nowrap;
@@ -490,13 +470,13 @@ watch(currentSlide, (newSlide, oldSlide) => {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-top: 20px;
gap: 12px;
margin-top: 15px;
}
.cta-button {
width: 100%;
max-width: 300px;
max-width: 250px;
font-weight: 700;
letter-spacing: 1px;
}
@@ -510,6 +490,6 @@ watch(currentSlide, (newSlide, oldSlide) => {
}
:deep(.v-carousel__controls--bottom) {
bottom: 50px !important;
bottom: 40px !important;
}
</style>