vue-ptc/src/pages/fill-order/StepTwo.vue

<template>
  <div class="step-2">
    <div class="ptc-block">
      <p class="ptc-label">Choose a mobile phone brand</p>
      <PtcRadioGroup v-model="state.brand" class="device-list">
        <PtcRadio
          v-for="brand of brandList"
          :key="brand.name"
          class="device-item"
          :value="brand.name"
        >
          <img class="device-img" />
          <p class="device-name">{{ brand.name }}</p>
        </PtcRadio>
      </PtcRadioGroup>
    </div>
    <template v-if="state.brand">
      <div class="ptc-block">
        <p class="ptc-label">Choose phone model</p>
        <PtcRadioGroup v-model="state.model" class="device-list">
          <PtcRadio
            v-for="model of modelList"
            :key="model.name"
            class="device-item"
            :value="model.name"
          >
            <img class="device-img" />
            <p class="device-name">{{ model.name }}</p>
          </PtcRadio>
        </PtcRadioGroup>
      </div>
      <div class="ptc-button-group">
        <button class="ptc-button" @click="$emit('next')">$89 NEXT</button>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { PtcRadioGroup, PtcRadio } from '@/components/radio'
import { state } from './store'

defineEmits<{
  (e: 'next'): void
}>()

const brandList = [
  { name: 'iPhone', img: '' },
  { name: 'iPad', img: '' },
  { name: 'Samsung', img: '' },
  { name: 'Xiaomi', img: '' },
]
const modelList = [
  { name: 'iPhone13 Pro', img: '' },
  { name: 'iPhone13', img: '' },
  { name: 'iPhone12', img: '' },
  { name: 'iPhoneSE', img: '' },
]
</script>

<style lang="scss">
.device {
  &-list {
    display: flex;
    flex-wrap: wrap;
  }

  &-item {
    padding-top: 24px;
    width: 322px;
    height: 322px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    &:nth-child(2n + 1) {
      margin-right: 34px;
    }
    &:nth-child(n + 3) {
      margin-top: 36px;
    }
  }

  &-img {
    margin-bottom: 18px;
    width: 200px;
    height: 200px;
    background: teal;
  }
}
</style>