|
@@ -0,0 +1,198 @@
|
|
|
+<template>
|
|
|
+ <div class="step-one">
|
|
|
+ <div class="ptc-block">
|
|
|
+ <p class="ptc-label">Choose a version</p>
|
|
|
+ <PtcRadioGroup v-model="state.product" style="display: flex">
|
|
|
+ <PtcRadio class="version" value="lite">
|
|
|
+ <i class="icon-lite"></i>
|
|
|
+ <span class="mt18">Lite</span>
|
|
|
+ </PtcRadio>
|
|
|
+ <PtcRadio class="version" value="pro">
|
|
|
+ <i class="icon-pro"></i>
|
|
|
+ <span class="mt18">Pro</span>
|
|
|
+ </PtcRadio>
|
|
|
+ </PtcRadioGroup>
|
|
|
+ <div class="version-desc" :class="{ pro: state.product === 'pro' }">
|
|
|
+ Introduction of member products,Introduction of member products
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ptc-block">
|
|
|
+ <p class="ptc-label">Choose a subscription method</p>
|
|
|
+ <PtcRadioGroup v-model="state.type">
|
|
|
+ <PtcRadio class="method" :value="1">
|
|
|
+ <span class="cost">$99</span>
|
|
|
+ <span class="name">Annual</span>
|
|
|
+ <span class="ptc-tag">-25% OFF</span>
|
|
|
+ </PtcRadio>
|
|
|
+ <PtcRadio class="method" :value="2">
|
|
|
+ <span class="cost">$12.5</span>
|
|
|
+ <span class="name"> Monthly Activation fee $20</span>
|
|
|
+ </PtcRadio>
|
|
|
+ </PtcRadioGroup>
|
|
|
+ </div>
|
|
|
+ <div class="ptc-block">
|
|
|
+ <p class="ptc-label">Do you have a discount code?</p>
|
|
|
+ <div v-if="!showCoupon" class="input-wrap pr">
|
|
|
+ <input
|
|
|
+ v-model="state.couponCode"
|
|
|
+ class="ptc-input"
|
|
|
+ placeholder="Enter promotional code"
|
|
|
+ />
|
|
|
+ <button class="input-btn" @click="showCoupon = true">sbumit</button>
|
|
|
+ </div>
|
|
|
+ <div v-else class="coupon-wrap">
|
|
|
+ <div class="coupon">
|
|
|
+ <p class="p1">PTC CARE PLUS</p>
|
|
|
+ <p class="p2">NEWCOMER DISCOUNT</p>
|
|
|
+ <p class="p3">- $10</p>
|
|
|
+ </div>
|
|
|
+ <div class="action">
|
|
|
+ <span class="code">87889122</span>
|
|
|
+ <span class="ptc-text" @click="showCoupon = false">Revise</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="total">
|
|
|
+ <p>total<strong>$99</strong></p>
|
|
|
+ <p class="highlight">($10 discounted)</p>
|
|
|
+ </div>
|
|
|
+ <button class="ptc-button block-button">NEXT</button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+import { PtcRadioGroup, PtcRadio } from '@/components/radio'
|
|
|
+import { state } from './store'
|
|
|
+
|
|
|
+const showCoupon = ref(false)
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.version {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 64px;
|
|
|
+ width: 212px;
|
|
|
+ height: 212px;
|
|
|
+ font-size: 56px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .mt18 {
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-desc {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 32px;
|
|
|
+ padding: 28px 24px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #193059;
|
|
|
+ background: #f2f5fb;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 88px;
|
|
|
+ top: 0;
|
|
|
+ transform: translateY(-100%);
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 0 12px 14px;
|
|
|
+ border-color: #f2f5fb transparent;
|
|
|
+ }
|
|
|
+ &.pro::before {
|
|
|
+ left: 88px + 276px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.method {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 38px;
|
|
|
+ height: 130px;
|
|
|
+ + .method {
|
|
|
+ margin-top: 48px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cost {
|
|
|
+ font-size: 56px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ margin-left: 20px;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ptc-input {
|
|
|
+ padding-right: 154px;
|
|
|
+}
|
|
|
+
|
|
|
+.input-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 154px;
|
|
|
+ background: #1a3059;
|
|
|
+ border-radius: 0px 8px 8px 0px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32px;
|
|
|
+ &:active {
|
|
|
+ background: $primary-color-lighten;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.total {
|
|
|
+ margin-bottom: 48px;
|
|
|
+ padding-left: 36px;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #333;
|
|
|
+ strong {
|
|
|
+ margin-left: 8px;
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.block-button {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ width: 678px;
|
|
|
+}
|
|
|
+
|
|
|
+.coupon {
|
|
|
+ @include icon('@img/coupon-s.png', 488px, 224px);
|
|
|
+ margin-bottom: 48px;
|
|
|
+ padding-top: 22px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .p1 {
|
|
|
+ color: #9aa8c5;
|
|
|
+ }
|
|
|
+ .p2 {
|
|
|
+ margin: 16px 0 34px;
|
|
|
+ color: $primary-color;
|
|
|
+ }
|
|
|
+ .p3 {
|
|
|
+ font-size: 56px;
|
|
|
+ color: $primary-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+.action {
|
|
|
+ font-size: 32px;
|
|
|
+ color: #666;
|
|
|
+ .code {
|
|
|
+ margin-right: 64px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.highlight {
|
|
|
+ margin-top: 4px;
|
|
|
+ color: $danger-color;
|
|
|
+}
|
|
|
+</style>
|