<template>
<div class="root">
<q-dialog v-model="seamless" seamless position="bottom">
<div class="dialog">
<div class="container">
<div class="stepbar">
<div class="stepbarwrap">
<div class="steptitle">
<div class="stepcircle">
<span>STEP<br />1</span>
</div>
<p class="title">テキスト1</p>
</div>
<div class="steptxt">
<span class="txt"
>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストト</span
>
</div>
<span class="stepline"></span>
</div>
<div class="stepbarwrap">
<div class="steptitle">
<div class="stepcircle">
<span>STEP<br />2</span>
</div>
<p class="title">テキスト2</p>
</div>
<div class="steptxt">
<span class="txt"
>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストト</span
>
</div>
<span class="stepline"></span>
</div>
<div class="stepbarwrap">
<div class="steptitle">
<div class="stepcircle">
<span>STEP<br />3</span>
</div>
<p class="title">テキスト3</p>
</div>
<div class="steptxt">
<span class="txt"
>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストト</span
>
</div>
<span class="stepline"></span>
</div>
</div>
</div>
</div>
</q-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const seamless = ref(true);
</script>
<style lang="scss" scoped>
.root {
width: 100%;
margin: 0 auto;
}
.dialog {
filter: drop-shadow(0 0 10px #000);
border-radius: 16px 16px 0 0;
width: 100%;
height: 500px;
background-color: #fff;
padding: 30px;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.container {
width: 100%;
margin: 0 auto;
display: flex;
padding: 0;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 100px;
margin-bottom: 120px;
scroll-snap-type: y mandatory;
}
.stepbarwrap {
animation: fadeIn linear both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
scroll-snap-align: start;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.stepbar {
margin: 0 auto;
}
.stepbar .stepbarwrap {
margin: 2em 0;
position: relative;
}
.stepbar .stepbarwrap .steptitle {
display: inline-flex;
align-items: center;
}
.stepbar .stepbarwrap .steptitle .stepcircle {
display: inline-block;
width: 3em;
height: 3em;
content: "";
border-radius: 50%;
background-color: #000;
color: #fff;
text-align: center;
}
.stepbar .stepbarwrap .steptitle .stepcircle span {
display: inline-block;
line-height: 1.2em;
font-size: 0.8em;
font-weight: bold;
position: relative;
top: 0.9em;
}
.stepbar .stepbarwrap .steptitle .title {
margin: 0.5em;
font-weight: bold;
font-size: 1.2em;
}
.stepbar .stepbarwrap .steptxt {
padding-left: 3.5em;
}
.stepbar .stepbarwrap .steptxt .txt {
font-size: 0.9em;
}
.stepbar .stepbarwrap .stepline {
width: 1px;
height: calc(100% + 1em);
background-color: #000;
position: absolute;
top: 1em;
left: 1.5em;
z-index: -1;
}
.stepbarwrap:last-of-type .stepline:last-of-type {
display: none;
}
</style>