benefits

src/pages/benefits/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="p-benefits bg-gray">
+    <h3 class="ptc-title">Member benefits</h3>
+    <div class="ptc-block">
+      <div class="l1">
+        <i class="icon-lite"></i
+        ><strong class="ptc-text">Lite</strong>2021/09/01 to 2022/08/31
+      </div>
+      <p class="l2">iPhone 12</p>
+      <p class="l3">QWERTYUIO12345678</p>
+      <p class="l4">
+        <button class="ptc-button ptc-button--stroke">Renewal</button>
+      </p>
+      <p class="l5">Renewal management ></p>
+    </div>
+    <div class="ptc-block">
+      <div class="benefit benefit-a">
+        <p class="benefit-name">Unlimited</p>
+        <p class="benefit-desc">Avaliable 1</p>
+        <p class="benefit-sup">
+          Member price：<span class="highlight">$35</span>
+        </p>
+        <button class="ptc-button">Apply</button>
+      </div>
+      <div class="benefit benefit-b">
+        <p class="benefit-name">Phone Health Inspection Service</p>
+        <p class="benefit-desc">Avaliable 1</p>
+        <p class="benefit-sup">Available after 2021/06/01</p>
+        <button class="ptc-button">Nearby shops</button>
+      </div>
+      <div class="benefit benefit-c">
+        <p class="benefit-name">Technical Support</p>
+        <p class="benefit-desc">Available throughout the year</p>
+        <button class="ptc-button">Contact us</button>
+      </div>
+      <div class="benefit benefit-d">
+        <p class="benefit-name">Birthday Gift</p>
+        <p class="benefit-desc">
+          Pick up at the store in the month of your birthday, you can only enjoy
+          it once
+        </p>
+      </div>
+      <div class="benefit benefit-e">
+        <p class="benefit-name">Cleaning Kit</p>
+        <p class="benefit-desc">Give a gift of XX</p>
+        <button class="ptc-button">Send to me</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.p-benefits {
+  .l1 {
+    display: flex;
+    font-size: 28px;
+    color: #90a0c0;
+
+    strong {
+      margin: 0 20px 0 10px;
+    }
+  }
+  .l2 {
+    margin-top: 48px;
+    line-height: 56px;
+    font-size: 40px;
+    font-weight: bold;
+    color: #333;
+    text-align: center;
+  }
+  .l3 {
+    margin-top: 8px;
+    line-height: 40px;
+    font-size: 28px;
+    color: #999;
+    text-align: center;
+  }
+  .l4 {
+    margin: 64px 0 24px;
+    font-size: 0;
+    text-align: center;
+    button {
+      margin: auto;
+      width: 412px;
+      height: 68px;
+      font-size: 32px;
+    }
+  }
+  .l5 {
+    line-height: 44px;
+    font-weight: bold;
+    font-size: 32px;
+    color: $primary-color;
+    text-align: center;
+  }
+
+  .benefit {
+    padding-left: 100px;
+    padding-bottom: 46px;
+    background-repeat: no-repeat;
+    background-position: 0 48px;
+    background-size: 64px 64px;
+    &-a {
+      background-position: 0 0;
+      background-image: url(@img/benefit0.png);
+    }
+    &-b {
+      background-image: url(@img/benefit1.png);
+    }
+    &-c {
+      background-image: url(@img/benefit2.png);
+    }
+    &-d {
+      background-image: url(@img/benefit3.png);
+    }
+    &-e {
+      background-image: url(@img/benefit4.png);
+    }
+
+    + .benefit {
+      padding-top: 48px;
+      @include thin-border(top);
+    }
+
+    &-name {
+      line-height: 56px;
+      font-size: 40px;
+      font-weight: bold;
+      color: #1a1a1a;
+    }
+    &-desc {
+      margin-top: 24px;
+      line-height: 44px;
+      font-size: 32px;
+      color: #1a1a1a;
+    }
+    &-sup {
+      margin-top: 8px;
+      line-height: 44px;
+      font-size: 32px;
+      color: #999;
+    }
+    .ptc-button {
+      margin-top: 24px;
+      width: 248px;
+      height: 68px;
+      font-size: 32px;
+    }
+  }
+}
+</style>

src/router.ts

@@ -41,5 +41,9 @@ export default createRouter({
       path: '/gift-card',
       component: () => import('./pages/gift-card/index.vue'),
     },
+    {
+      path: '/benefits',
+      component: () => import('./pages/benefits/index.vue'),
+    },
   ],
 })