登录注册页面

package.json

@@ -7,9 +7,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-router": "4"
   },
   "devDependencies": {
+    "@types/node": "^17.0.8",
     "@vitejs/plugin-vue": "^2.0.0",
     "eslint": "^6.7.2",
     "eslint-config-ktsn-vue": "^2.1.0",

postcss.config.js

@@ -5,7 +5,7 @@ module.exports = {
         return /[\\/]node_modules[\\/]vant/.test(input.file) ? 37.5 : 75
       },
       propList: ['*', '!filter'],
-      minPixelValue: 2, // 不对1像素做转换
+      minPixelValue: 3,
     },
   },
 }

src/App.vue

@@ -1,21 +1,3 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <router-view />
 </template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/main.ts

@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 import './utils/rem'
 import './style'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router).mount('#app')

src/pages/login/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div v-if="!showSurprise" class="p-login">
+    <i class="nav-home"></i>
+    <div class="logo"></div>
+    <div class="container">
+      <div class="ptc-form">
+        <div class="title">Sign in to PTC Care Plus</div>
+        <div class="ptc-form-item">
+          <input class="ptc-input" placeholder="email address" />
+        </div>
+        <div class="ptc-form-item">
+          <input class="ptc-input" type="password" placeholder="password" />
+        </div>
+        <div class="ptc-form-item">
+          <button class="ptc-button" @click="showSurprise = true">
+            SIGN IN
+          </button>
+        </div>
+        <div class="ptc-form-item">
+          <p class="tip">
+            Don’t have an account?
+            <router-link class="ptc-text" to="/register"
+              >Create one</router-link
+            >
+          </p>
+        </div>
+      </div>
+      <div class="alternative">
+        <div class="delimiter">Or sign in with</div>
+        <ul class="list">
+          <li class="item"></li>
+          <li class="item"></li>
+          <li class="item"></li>
+        </ul>
+      </div>
+      <div class="policy">
+        By clicking “Sign in” you agree to PTC’s
+        <span class="ptc-text">terms of use</span> and confirm that you’ve read
+        and acknowledged PTC’s <span class="ptc-text">privacy policy</span>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="surprise">
+    <div class="header">
+      <i class="logo"></i>
+    </div>
+    <div class="ptc-form">
+      <div class="title">Change Password</div>
+      <div class="ptc-form-item">
+        <input
+          class="ptc-input"
+          type="password"
+          placeholder="Enter new password"
+        />
+      </div>
+      <div class="ptc-form-item">
+        <input
+          class="ptc-input"
+          type="password"
+          placeholder="Repeat new password"
+        />
+      </div>
+      <div class="ptc-form-item">
+        <button class="ptc-button" @click="showSurprise = false">SUBMIT</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const showSurprise = ref(false)
+</script>
+
+<style lang="scss">
+.surprise {
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 116px;
+    border-bottom: 1px solid #d9d9d9;
+    .logo {
+      width: 160px;
+      height: 88px;
+      background: #efefef;
+    }
+  }
+
+  .ptc-form {
+    padding: 96px 80px 0;
+  }
+
+  .title {
+    line-height: 56px;
+    font-size: 40px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+</style>

src/pages/password/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="p-password">
+    <div class="header">
+      <i class="logo"></i>
+    </div>
+    <div v-if="step === 0" class="step">
+      <h3 class="title">Recover password</h3>
+      <div class="desc">
+        We will send you an email for password reset. Please check it
+      </div>
+      <div class="ptc-form">
+        <div class="ptc-form-item">
+          <input class="ptc-input" placeholder="email address" />
+        </div>
+        <div class="ptc-form-item">
+          <button class="ptc-button" @click="step++">NEXT</button>
+        </div>
+        <div class="ptc-form-item">
+          <button class="ptc-button ptc-button--strok">BACK</button>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="step === 1" class="step">
+      <h3 class="title">Recover password</h3>
+      <div class="desc">
+        We will send you an email（ xxx@126.com ）The password reset email has
+        been sent. Please go to check it
+      </div>
+      <div class="ptc-form">
+        <div class="ptc-form-item">
+          <button class="ptc-button" @click="step++">GO</button>
+        </div>
+      </div>
+    </div>
+    <div v-if="step === 2" class="step">
+      <h3 class="title">Recover password</h3>
+      <div class="desc">
+        Please set a new password for helloworld@gmail.com. It is recommended to
+        use a combination of numbers, letters, and characters to improve the
+        password security level
+      </div>
+      <div class="ptc-form">
+        <div class="ptc-form-item">
+          <input
+            class="ptc-input"
+            placeholder="6-20 digits password, case sensitive"
+          />
+        </div>
+        <div class="ptc-form-item">
+          <button class="ptc-button" @click="step++">SUBMIT</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const { query } = useRoute()
+const step = ref(query.step ? +(query.step as string) : 0)
+</script>
+
+<style lang="scss">
+.p-password {
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 116px;
+    border-bottom: 1px solid #d9d9d9;
+    .logo {
+      width: 160px;
+      height: 88px;
+      background: #efefef;
+    }
+  }
+
+  .step {
+    margin-top: 98px;
+    padding: 0 80px;
+  }
+
+  .title {
+    line-height: 56px;
+    font-size: 40px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .desc {
+    margin: 36px 0 64px;
+    line-height: 44px;
+    font-size: 32px;
+    color: #333;
+  }
+}
+</style>

src/pages/register/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="p-register">
+    <i class="nav-home"></i>
+    <div class="logo"></div>
+    <div class="container">
+      <div class="ptc-form">
+        <div class="title">Welcome to PTC Care Plus</div>
+        <div class="ptc-form-item">
+          <input class="ptc-input" placeholder="email address" />
+        </div>
+        <div class="ptc-form-item">
+          <input
+            class="ptc-input"
+            type="password"
+            placeholder="password"
+          />
+        </div>
+        <div class="ptc-form-item">
+          <button class="ptc-button">CONTINUE</button>
+        </div>
+        <div class="ptc-form-item">
+          <p class="tip">
+            Already have an accout ？
+            <router-link class="ptc-text" to="/login">Sign in</router-link>
+          </p>
+        </div>
+      </div>
+      <div class="policy">
+        By clicking “Continue” you agree to PTC’s
+        <span class="ptc-text">terms of use</span> and confirm that you’ve read
+        and acknowledged PTC’s <span class="ptc-text">privacy policy</span>
+      </div>
+    </div>
+  </div>
+</template>

src/router.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+export default createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/login',
+      component: () => import('./pages/login/index.vue'),
+    },
+    {
+      path: '/register',
+      component: () => import('./pages/register/index.vue'),
+    },
+    {
+      path: '/password',
+      component: () => import('./pages/password/index.vue'),
+    },
+  ],
+})

src/style/components.scss

@@ -0,0 +1,36 @@
+.ptc-button {
+  width: 598px;
+  height: 92px;
+  background: $primary-color;
+  border-radius: 8px;
+  font-size: 32px;
+  font-weight: 600;
+  color: #fff;
+
+  &--strok {
+    background: none;
+    border: 2Px solid $primary-color;
+    color: $primary-color;
+  }
+}
+
+.ptc-text {
+  color: $primary-color;
+}
+
+.ptc-form {
+  &-item {
+    margin-top: 36px;
+  }
+}
+
+.ptc-input {
+  display: block;
+  padding-left: 28px;
+  width: 100%;
+  height: 100px;
+  border-radius: 8px;
+  border: 2px solid #d9d9d9;
+  font-size: 32px;
+  color: #333;
+}

src/style/index.js

@@ -1 +1,3 @@
 import './normalize.scss'
+import './components.scss'
+import './login.scss'

src/style/login.scss

@@ -0,0 +1,93 @@
+.p-login,
+.p-register {
+  min-height: 100vh;
+  background: lightblue;
+  overflow: hidden;
+
+  .logo {
+    display: block;
+    margin: 120px auto 60px;
+    width: 300px;
+    height: 100px;
+    background: #efefef;
+  }
+
+  .container {
+    margin: auto;
+    padding: 48px 36px 54px;
+    width: 670px;
+    border-radius: 8px;
+    background: #fff;
+  }
+
+  .ptc-form {
+    .title {
+      line-height: 44px;
+      font-size: 32px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .tip {
+      font-size: 32px;
+      color: #bebebe;
+      text-align: center;
+    }
+  }
+
+  .alternative {
+    margin-top: 60px;
+    text-align: center;
+    font-size: 0;
+  }
+  .delimiter {
+    position: relative;
+    display: inline-block;
+    padding: 0 20px;
+    font-size: 32px;
+    color: #bebebe;
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: 170px;
+      height: 2px;
+      background: #e5e5e5;
+    }
+    &::before {
+      left: 0;
+      transform: translate(-100%, -50%);
+    }
+    &::after {
+      right: 0;
+      transform: translate(100%, -50%);
+    }
+  }
+  .list {
+    margin: 40px 0;
+    display: inline-flex;
+  }
+  .item {
+    width: 80px;
+    height: 80px;
+    background: #efefef;
+    + .item {
+      margin-left: 60px;
+    }
+  }
+
+  .policy {
+    font-size: 28px;
+    line-height: 40px;
+    color: #bebebe;
+  }
+}
+
+.p-register {
+  .policy {
+    margin-top: 128px;
+    padding-top: 60px;
+    border-top: 2px solid #E5E5E5;
+  }
+}

yarn.lock

@@ -65,6 +65,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/node@^17.0.8":
+  version "17.0.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.8.tgz#50d680c8a8a78fe30abe6906453b21ad8ab0ad7b"
+  integrity sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg==
+
 "@typescript-eslint/eslint-plugin@^3.3.0":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.10.1.tgz#7e061338a1383f59edc204c605899f93dc2e2c8f"
@@ -239,6 +244,11 @@
     "@vue/compiler-dom" "3.2.26"
     "@vue/shared" "3.2.26"
 
+"@vue/devtools-api@^6.0.0-beta.18":
+  version "6.0.0-beta.21.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
+  integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
+
 "@vue/reactivity-transform@3.2.26":
   version "3.2.26"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.26.tgz#6d8f20a4aa2d19728f25de99962addbe7c4d03e9"
@@ -2010,6 +2020,13 @@ vue-eslint-parser@^7.0.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
+vue-router@4:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
+  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.18"
+
 vue-tsc@^0.29.8:
   version "0.29.8"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.29.8.tgz#f4d8de5dd8756107c878489ccf9178d2d72fff47"