renewal

src/pages/renewal/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="p-renewal bg-gray">
+    <h3 class="ptc-title">Renewal management</h3>
+    <div class="ptc-block">
+      <div class="cell">
+        <span class="cell__label">Product Name:</span>
+        <span class="cell__value">Lite</span>
+      </div>
+      <div class="cell">
+        <span class="cell__label">Subscription method:</span>
+        <span class="cell__value">Annual</span>
+      </div>
+      <div class="ptc-text">Unsubscribe ></div>
+    </div>
+    <div class="ptc-wrap mt48">
+      <button class="ptc-button ptc-button--stroke">BACK</button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.p-renewal {
+  .cell {
+    display: flex;
+    font-size: 32px;
+    line-height: 64px;
+    &__label {
+      margin-right: 8px;
+      color: #999;
+    }
+    &__value {
+      color: #333;
+    }
+  }
+  .ptc-text {
+    margin-top: 8px;
+    font-weight: bold;
+    font-size: 32px;
+  }
+}
+</style>

src/router.ts

@@ -50,5 +50,10 @@ export default createRouter({
       component: () => import('./pages/mailing/index.vue'),
       props: true,
     },
+    {
+      path: '/renewal',
+      component: () => import('./pages/renewal/index.vue'),
+      props: true,
+    },
   ],
 })