invite

src/pages/appointment/index.scss

@@ -0,0 +1,248 @@
+.p-appointment {
+  .search-wrap {
+    display: flex;
+    height: 88px;
+  }
+  .search-input {
+    flex: 1;
+    height: 100%;
+    border-radius: 8px 0 0 8px;
+    border-right: 0;
+  }
+  .search-btn {
+    width: 120px;
+    height: 100%;
+    border-radius: 0 8px 8px 0;
+    background: $primary-color url(@img/search.png) no-repeat center;
+    background-size: 48px 48px;
+  }
+
+  .suggestion {
+    padding: 48px 0 40px;
+    font-size: 32px;
+    color: #1a1a1a;
+    @include thin-border(bottom);
+    &:active {
+      background: #f2f5fb;
+    }
+  }
+
+  .tip {
+    margin-top: 48px;
+    line-height: 44px;
+    font-size: 32px;
+    color: #999;
+  }
+
+  .shop {
+    &-item {
+      padding: 48px 0;
+
+      &:last-child {
+        padding-bottom: 0;
+        &::before {
+          display: none;
+        }
+      }
+    }
+
+    &-name {
+      display: flex;
+      justify-content: space-between;
+      line-height: 56px;
+      font-size: 40px;
+      font-weight: 600;
+      color: #1a1a1a;
+      span {
+        &:last-child {
+          font-size: 24px;
+          font-weight: 400;
+          color: #999;
+        }
+      }
+    }
+    &-address {
+      margin: 24px 0;
+      line-height: 44px;
+      font-size: 32px;
+      color: #666;
+    }
+    &-mark {
+      position: relative;
+      display: inline-block;
+      vertical-align: top;
+      padding: 0 16px 0 56px;
+      line-height: 48px;
+      font-size: 28px;
+      color: $primary-color;
+      background: #dae1ef;
+      .icon {
+        @include icon('@img/success-s.png', 24px);
+        position: absolute;
+        left: 16px;
+        top: 10px;
+      }
+      &.danger {
+        background: #fce9de;
+        color: #fb5c00;
+
+        .icon {
+          background-image: url(@img/warn-s.png);
+        }
+      }
+    }
+  }
+
+  .date {
+    &-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+    width: 322px;
+    line-height: 116px;
+    text-align: center;
+    &:nth-child(n + 3) {
+      margin-top: 36px;
+    }
+  }
+
+  .t1 {
+    margin-bottom: 48px;
+    font-size: 32px;
+    line-height: 44px;
+    color: #333;
+  }
+  .t2 {
+    margin-bottom: 48px;
+    font-size: 32px;
+    line-height: 44px;
+    color: #999;
+  }
+  textarea {
+    display: block;
+    padding: 22px 34px;
+    width: 678px;
+    height: 346px;
+    border-radius: 8px;
+    border: 2px solid #d9d9d9;
+    resize: none;
+    font-size: 32px;
+    font-family: inherit;
+    line-height: 44px;
+  }
+
+  .sub-title {
+    line-height: 44px;
+    font-size: 32px;
+    font-weight: 600;
+    color: #333;
+  }
+  .cell {
+    line-height: 64px;
+    font-size: 32px;
+    &-label {
+      margin-right: 8px;
+      color: #999;
+    }
+    &-value {
+      color: #333;
+    }
+  }
+  .mb36 {
+    margin-bottom: 36px;
+  }
+
+  .container {
+    padding: 0 72px;
+  }
+  .alert {
+    margin-top: 64px;
+    &-icon {
+      @include icon('@img/success.png', 96px);
+      display: block;
+      margin: auto;
+    }
+    &-message {
+      margin-top: 32px;
+      text-align: center;
+      line-height: 56px;
+      font-size: 40px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+  .icon-calendar {
+    margin-right: 8px;
+    width: 32px;
+    height: 32px;
+    background: #eee;
+  }
+  .action {
+    margin: 50px 0 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    color: $primary-color;
+  }
+  .note {
+    margin-bottom: 48px;
+    padding: 24px 22px;
+    background: #f2f5fb;
+    font-size: 28px;
+    color: #193059;
+    &-title {
+      margin-bottom: 16px;
+      line-height: 40px;
+    }
+    &-list {
+      line-height: 46px;
+      font-size: inherit;
+    }
+  }
+
+  .pb24 {
+    padding-bottom: 24px;
+  }
+  .block-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    .text {
+      flex: 1;
+      font-size: 32px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 44px;
+    }
+  }
+  .ptc-tag {
+    flex-shrink: 0;
+    font-size: 24px;
+    &.s1 {
+      background: #dae1ef;
+      color: $primary-color;
+    }
+    &.s2 {
+      background: #f2f5fb;
+      color: #97A6C4;
+    }
+    &.s3 {
+      background: #eaeaea;
+      color: #999;
+    }
+  }
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 48px;
+    .ptc-button {
+      width: 328px;
+      height: 92px;
+      + .ptc-button {
+        margin-left: 26px;
+      }
+    }
+  }
+}

src/pages/appointment/index.vue

@@ -29,209 +29,4 @@ function next() {
 }
 </script>
 
-<style lang="scss">
-.p-appointment {
-  .search-wrap {
-    display: flex;
-    height: 88px;
-  }
-  .search-input {
-    flex: 1;
-    height: 100%;
-    border-radius: 8px 0 0 8px;
-    border-right: 0;
-  }
-  .search-btn {
-    width: 120px;
-    height: 100%;
-    border-radius: 0 8px 8px 0;
-    background: $primary-color url(@img/search.png) no-repeat center;
-    background-size: 48px 48px;
-  }
-
-  .suggestion {
-    padding: 48px 0 40px;
-    font-size: 32px;
-    color: #1a1a1a;
-    @include thin-border(bottom);
-    &:active {
-      background: #f2f5fb;
-    }
-  }
-
-  .tip {
-    margin-top: 48px;
-    line-height: 44px;
-    font-size: 32px;
-    color: #999;
-  }
-
-  .shop {
-    &-item {
-      padding: 48px 0;
-
-      &:last-child {
-        padding-bottom: 0;
-        &::before {
-          display: none;
-        }
-      }
-    }
-
-    &-name {
-      display: flex;
-      justify-content: space-between;
-      line-height: 56px;
-      font-size: 40px;
-      font-weight: 600;
-      color: #1a1a1a;
-      span {
-        &:last-child {
-          font-size: 24px;
-          font-weight: 400;
-          color: #999;
-        }
-      }
-    }
-    &-address {
-      margin: 24px 0;
-      line-height: 44px;
-      font-size: 32px;
-      color: #666;
-    }
-    &-mark {
-      position: relative;
-      display: inline-block;
-      vertical-align: top;
-      padding: 0 16px 0 56px;
-      line-height: 48px;
-      font-size: 28px;
-      color: $primary-color;
-      background: #dae1ef;
-      .icon {
-        @include icon('@img/success-s.png', 24px);
-        position: absolute;
-        left: 16px;
-        top: 10px;
-      }
-      &.danger {
-        background: #fce9de;
-        color: #fb5c00;
-
-        .icon {
-          background-image: url(@img/warn-s.png);
-        }
-      }
-    }
-  }
-
-  .date {
-    &-list {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-    }
-    width: 322px;
-    line-height: 116px;
-    text-align: center;
-    &:nth-child(n + 3) {
-      margin-top: 36px;
-    }
-  }
-
-  .t1 {
-    margin-bottom: 48px;
-    font-size: 32px;
-    line-height: 44px;
-    color: #333;
-  }
-  .t2 {
-    margin-bottom: 48px;
-    font-size: 32px;
-    line-height: 44px;
-    color: #999;
-  }
-  textarea {
-    display: block;
-    padding: 22px 34px;
-    width: 678px;
-    height: 346px;
-    border-radius: 8px;
-    border: 2px solid #d9d9d9;
-    resize: none;
-    font-size: 32px;
-    font-family: inherit;
-    line-height: 44px;
-  }
-
-  .sub-title {
-    line-height: 44px;
-    font-size: 32px;
-    font-weight: 600;
-    color: #333;
-  }
-  .cell {
-    line-height: 64px;
-    font-size: 32px;
-    &-label {
-      margin-right: 8px;
-      color: #999;
-    }
-    &-value {
-      color: #333;
-    }
-  }
-  .mb36 {
-    margin-bottom: 36px;
-  }
-
-  .container {
-    padding: 0 72px;
-  }
-  .alert {
-    margin-top: 64px;
-    &-icon {
-      @include icon('@img/success.png', 96px);
-      display: block;
-      margin: auto;
-    }
-    &-message {
-      margin-top: 32px;
-      text-align: center;
-      line-height: 56px;
-      font-size: 40px;
-      font-weight: bold;
-      color: #333;
-    }
-  }
-  .icon-calendar {
-    margin-right: 8px;
-    width: 32px;
-    height: 32px;
-    background: #eee;
-  }
-  .action {
-    margin: 50px 0 48px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-    color: $primary-color;
-  }
-  .note {
-    margin-bottom: 48px;
-    padding: 24px 22px;
-    background: #f2f5fb;
-    font-size: 28px;
-    color: #193059;
-    &-title {
-      margin-bottom: 16px;
-      line-height: 40px;
-    }
-    &-list {
-      line-height: 46px;
-      font-size: inherit;
-    }
-  }
-}
-</style>
+<style lang="scss" src="./index.scss"></style>

src/pages/appointment/records.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="p-appointment bg-gray">
+    <h3 class="ptc-title">Confirm appointment</h3>
+    <div class="ptc-block">
+      <div class="block-title">
+        <span class="text"
+          >Monday, October 10 9:00-9:30 PTC Browns Plains Kiosk</span
+        >
+        <span class="ptc-tag" :class="{ s1: 1, s2: 0, s3: 0 }"
+          >Under review</span
+        >
+      </div>
+      <div class="mt48">
+        <div class="cell">
+          <span class="cell-label">Phone Brand:</span>
+          <span class="cell-value">Apple</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Phone Model:</span>
+          <span class="cell-value">iPhone 12</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Phone Number:</span>
+          <span class="cell-value">6668888</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">IMEI:</span>
+          <span class="cell-value">iPhonaskfjoaxxx</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Service:</span>
+          <span class="cell-value">Batery Replacement</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Member Price:</span>
+          <span class="cell-value">$35</span>
+        </div>
+        <div class="cell mt48">
+          <span class="cell-label">Postcript:</span>
+          <span class="cell-value"
+            >This is my remark，This is my remarkThis is my remark</span
+          >
+        </div>
+      </div>
+      <div class="button-group">
+        <button class="ptc-button">Reschedule</button>
+        <button class="ptc-button ptc-button--stroke">Cancel</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./index.scss"></style>

src/pages/invite/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="p-invite">
+    <div class="main">
+      <div class="award">
+        <p class="award-name">Invite friends to get</p>
+        <div class="award-worth">
+          <span class="num">- $10</span>
+          <span class="txt">COUPON</span>
+        </div>
+        <p class="award-instruction">PTC offline store use</p>
+      </div>
+      <div class="desc">
+        <p class="desc-title"><i class="star"></i>Event Description</p>
+        <p class="desc-content">
+          Friends who share your link will get a <strong>$10</strong> coupon. If
+          a friend buys a membership, you will get a
+          <strong>$10</strong> coupon. after the purchase, which can be used for
+          the next membership fee payment and electronic accessories products.
+        </p>
+      </div>
+      <div class="methods">
+        <div class="method">
+          <p class="method-title">Share your exclusive link with friends</p>
+          <p class="ptc-comboinput">
+            <input
+              type="text"
+              class="ptc-input"
+              readonly
+              value="http://www.ptcplis.com/2333453"
+            />
+            <button class="ptc-button">Copy Link</button>
+          </p>
+        </div>
+        <div class="method">
+          <p class="method-title">Email invitation</p>
+          <textarea
+            placeholder="Enter email addresses, multiple mailboxes are separated by“ ,”"
+          ></textarea>
+        </div>
+        <button class="ptc-button">Send invitation</button>
+      </div>
+    </div>
+    <div class="block">
+      <h3 class="block-title">My Reward $90</h3>
+      <ul class="records">
+        <li v-for="n of 5" :key="n" class="record">
+          <span class="left">John</span>
+          <span class="center">2021/09/02</span>
+          <span class="right">$10</span>
+        </li>
+      </ul>
+    </div>
+    <div class="block">
+      <h3 class="block-title">Activity Details</h3>
+      <div class="details">
+        <p>
+          After a friend places an order, you can get a corresponding coupon
+          according to the amount of his first order, which can be used for the
+          purchase of membership services and consumption at PTC's offline
+          outlets.
+        </p>
+        <p class="mt48">1. The invitee is an unregistered new user;</p>
+        <p class="mt48">
+          2. On the 10th of each month/at 23:00 every day, the invitation
+          rewards will be settled, and the coupons will be issued to the
+          personal account
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.p-invite {
+  .main {
+    padding-top: 8px;
+    background: $primary-color;
+    overflow: hidden;
+  }
+  .award {
+    @include icon('@img/coupon.png', 736px, 370px);
+    margin: auto;
+    text-align: center;
+    overflow: hidden;
+    &-name {
+      margin-top: 66px;
+      font-weight: bold;
+      font-size: 48px;
+      color: #193059;
+    }
+    &-worth {
+      margin: 32px 0 24px;
+      line-height: 56px;
+      color: #193059;
+      .num {
+        font-size: 56px;
+      }
+      .txt {
+        margin-left: 20px;
+        font-size: 40px;
+      }
+    }
+    &-instruction {
+      font-size: 28px;
+      color: #9aa8c5;
+    }
+  }
+  .desc {
+    margin: auto;
+    padding: 52px 26px 26px;
+    width: 680px;
+    border: 2px solid rgba(218, 225, 239, 0.25);
+    color: #dae1ef;
+    &-title {
+      @include thin-border(bottom, rgba(218, 225, 239, 0.25));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-bottom: 48px;
+      font-size: 32px;
+      font-weight: bold;
+      .star {
+        @include icon('@img/star.png', 40px);
+        margin-right: 16px;
+      }
+    }
+    &-content {
+      margin-top: 26px;
+      font-size: 28px;
+      line-height: 40px;
+    }
+    strong {
+      font-size: 32px;
+    }
+  }
+  .methods {
+    margin: 36px auto 48px;
+    padding: 64px 36px;
+    width: 680px;
+    background: #fff;
+    border-radius: 16px;
+  }
+  .method {
+    &:nth-child(1) {
+      margin-bottom: 64px;
+    }
+    &:nth-child(2) {
+      margin-bottom: 24px;
+    }
+    &-title {
+      margin-bottom: 24px;
+      font-size: 32px;
+      font-weight: bold;
+      color: #193059;
+    }
+    .ptc-input {
+      height: 88px;
+      font-size: 24px;
+    }
+  }
+  textarea {
+    display: block;
+    padding: 24px;
+    width: 100%;
+    height: 182px;
+    border-radius: 8px;
+    border: 2px solid #d9d9d9;
+    font-size: 28px;
+    line-height: 40px;
+  }
+
+  .block-title {
+    padding: 24px 36px;
+    background: #f7f7f7;
+    font-size: 40px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 56px;
+  }
+  .records {
+    padding: 0 36px;
+  }
+  .record {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 36px 0;
+    + .record {
+      @include thin-border(top);
+    }
+    .left {
+      font-weight: bold;
+      font-size: 32px;
+      color: #1a1a1a;
+    }
+    .center,
+    .right {
+      font-size: 28px;
+      color: #666;
+    }
+    .center {
+      padding-right: 50px;
+    }
+  }
+
+  .details {
+    padding: 36px;
+    font-size: 32px;
+    line-height: 44px;
+    color: #666;
+  }
+}
+</style>

src/router.ts

@@ -60,5 +60,13 @@ export default createRouter({
       component: () => import('./pages/appointment/index.vue'),
       props: true,
     },
+    {
+      path: '/appointment-list',
+      component: () => import('./pages/appointment/records.vue'),
+    },
+    {
+      path: '/invite',
+      component: () => import('./pages/invite/index.vue'),
+    },
   ],
 })

src/style/components.scss

@@ -113,3 +113,19 @@
     background: #eee;
   }
 }
+
+.ptc-comboinput {
+  display: flex;
+  .ptc-input {
+    flex: 1;
+    border-radius: 8px 0 0 8px;
+    border-right: 0;
+  }
+  .ptc-button {
+    padding: 0 16px;
+    height: auto;
+    width: auto;
+    border-radius: 0 8px 8px 0;
+    font-size: 28px;
+  }
+}

src/style/normalize.scss

@@ -62,6 +62,7 @@ textarea {
   border: none;
   outline: none;
   font-size: inherit;
+  font-family: inherit;
   background: none;
 }