ai-postcard/src/views/Step_2.vue

<script setup>
import "animate.css";
import Footer from "../components/Footer.vue";
</script>

<template>
  <div class="content">
    <ul class="step-list">
      <li>
        <img class="num" src="../assets/img/step-1.png" alt="" />
        <p>尋找一面乾淨的白牆</p>
        <img class="arrow" src="../assets/img/arrow_b.png" alt="" />
      </li>

      <li>
        <div class="img-box">
          <img class="cover" src="../assets/img/step/1.png" alt="" />
          <img class="arrow" src="../assets/img/arrow_b.png" alt="" />
        </div>
        <div class="step">
          <img class="num" src="../assets/img/step-2.png" alt="" />
          <p>選擇背景</p>
          <small>20 款以上景點照片挑選</small>
        </div>
      </li>

      <li>
        <div class="img-box">
          <img class="cover" src="../assets/img/step/2.png" alt="" />
          <img class="arrow" src="../assets/img/arrow_b.png" alt="" />
        </div>
        <div class="step">
          <img class="num" src="../assets/img/step-3.png" alt="" />
          <p>手機前後鏡頭拍攝</p>
          <small>人臉對準綠色框框</small>
        </div>
      </li>

      <li>
        <div class="img-box">
          <img class="cover" src="../assets/img/step/3.png" alt="" />
        </div>
        <div class="step">
          <img class="num" src="../assets/img/step-4.png" alt="" />
          <p>獲得照片！</p>
          <small>馬上分享給朋友</small>
        </div>
      </li>
    </ul>

    <router-link to="/step3" class="main-btn">下一步</router-link>

    <Footer url="/step1" />
  </div>
</template>

<style lang="scss" scoped>
p {
  font-size: 1.125rem;

  @media (max-width: 600px) {
    font-size: 1rem;
  }
}

span {
  font-size: 1rem;

  @media (max-width: 600px) {
    font-size: 0.75rem;
  }
}

.step-list {
  padding: 0;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  list-style: none;

  .num {
    width: 2rem;
    margin-bottom: 1rem;
  }

  .arrow {
    width: 3rem;
    margin-top: 1rem;
  }

  li {
    max-width: 500px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;

    &:first-child {
      align-items: center;
      flex-direction: column;
    }

    .step {
      width: 15rem;
      padding-top: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      @media (max-width: 600px) {
        max-width: 10.5rem;
        padding-top: 0;
      }
    }

    small {
      margin-top: 0.3rem;
      color: white;
      letter-spacing: 2px;
    }

    .img-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 1.5rem;

      .cover {
        max-width: 15rem;

        @media (max-width: 600px) {
          max-width: 9rem;
        }
      }
    }
  }
}

.content {

  p {
    &:first-child {
      margin-bottom: 1.625rem;
    }
  }

  .main-btn {
    margin: 3rem auto 0;
  }

  .hashtag {
    display: flex;
    justify-content: center;

    span {
      color: white;
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>