账户信息 pc 样式

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^0.25.0",
+    "lodash-es": "^4.17.21",
     "vue": "^3.2.25",
     "vue-router": "4"
   },

src/App.vue

@@ -4,7 +4,9 @@
     :show-nav-icons="$route.path !== '/password'"
     :fixed="true"
   />
-  <router-view :key="$route.fullPath" class="page-container" />
+  <div class="main-container">
+    <router-view :key="$route.fullPath" class="main-wrapper" />
+  </div>
 
   <ul v-if="$route.path === '/'" class="contents">
     <li><router-link to="/login">登录</router-link></li>
@@ -35,15 +37,28 @@ const showNavBar = computed(() => !navBarIgnore.includes(route.path))
 </script>
 
 <style lang="scss">
-.page-container {
+.main-container {
   min-height: 100vh;
   padding-bottom: 48px;
+  background: #f7f7f7;
   overflow: hidden;
 
+  @media (min-width: 768px) {
+    min-height: auto;
+  }
+
   .nav-bar-wrap + & {
     padding-top: $nav-bar-height;
   }
 }
+.main-wrapper {
+  overflow: hidden;
+
+  @media (min-width: 1200px) {
+    margin: auto;
+    width: 1998px;
+  }
+}
 
 .contents {
   margin-top: $nav-bar-height + 50px;

src/pages/account/index.vue

@@ -2,48 +2,56 @@
   <div v-if="state === 0" class="p-account">
     <h3 class="ptc-title">Account Information</h3>
     <div class="ptc-block">
-      <p class="ptc-label">QR code</p>
-      <img class="qrcode" />
+      <div class="ptc-inner">
+        <p class="ptc-label">QR code</p>
+        <img class="qrcode" />
+      </div>
     </div>
     <div class="ptc-block">
-      <div class="ptc-cell">
-        <p class="ptc-label">Email</p>
-        <p class="ptc-value">Rebecca123@gmail.com</p>
-      </div>
-      <div class="ptc-cell">
-        <p class="ptc-label">Password</p>
-        <p class="ptc-value">
-          <span>********</span>
-          <span class="ptc-text" @click="state = 1">Edit ></span>
-        </p>
+      <div class="ptc-inner">
+        <div class="ptc-cell">
+          <p class="ptc-label">Email</p>
+          <p class="ptc-value">Rebecca123@gmail.com</p>
+        </div>
+        <div class="ptc-cell">
+          <p class="ptc-label">Password</p>
+          <p class="ptc-value">
+            <span>********</span>
+            <span class="ptc-text ml354-md" @click="state = 1">Edit ></span>
+          </p>
+        </div>
       </div>
     </div>
     <div class="ptc-block">
-      <div class="ptc-cell">
-        <p class="ptc-label">Account</p>
-        <p class="ptc-value flex-ac">
-          Rebecca123@gmail.com<i
-            class="account-icon"
-            :class="1 ? 'a-google' : 2 ? 'a-apple' : 'a-facebook'"
-          ></i>
-        </p>
+      <div class="ptc-inner">
+        <div class="ptc-cell">
+          <p class="ptc-label">Account</p>
+          <p class="ptc-value flex-ac">
+            Rebecca123@gmail.com<i
+              class="account-icon"
+              :class="1 ? 'a-google' : 2 ? 'a-apple' : 'a-facebook'"
+            ></i>
+          </p>
+        </div>
       </div>
     </div>
     <h3 class="ptc-title pr">
       Login Detail<button class="stroke-btn" @click="state = 2">Edit</button>
     </h3>
     <div class="ptc-block">
-      <div class="ptc-cell">
-        <p class="ptc-label">Name</p>
-        <p class="ptc-value">Rebecca123@gmail.com</p>
-      </div>
-      <div class="ptc-cell">
-        <p class="ptc-label">Pone number</p>
-        <p class="ptc-value">Rebecca123@gmail.com</p>
-      </div>
-      <div class="ptc-cell">
-        <p class="ptc-label">Address</p>
-        <p class="ptc-value">449WATERDALEROAD,HEIDELBERGWEST, VIC,3081</p>
+      <div class="ptc-inner">
+        <div class="ptc-cell">
+          <p class="ptc-label">Name</p>
+          <p class="ptc-value">Rebecca123@gmail.com</p>
+        </div>
+        <div class="ptc-cell">
+          <p class="ptc-label">Pone number</p>
+          <p class="ptc-value">Rebecca123@gmail.com</p>
+        </div>
+        <div class="ptc-cell">
+          <p class="ptc-label">Address</p>
+          <p class="ptc-value">449WATERDALEROAD,HEIDELBERGWEST, VIC,3081</p>
+        </div>
       </div>
     </div>
   </div>
@@ -51,53 +59,68 @@
   <div v-else-if="state === 1" class="p-account">
     <h3 class="ptc-title">Change Password</h3>
     <div class="ptc-block">
-      <div class="ptc-cell">
-        <p class="ptc-label">New password</p>
-        <p class="ptc-value">
-          <input class="ptc-input" type="password" placeholder="Please enter" />
-        </p>
+      <div class="ptc-inner">
+        <div class="ptc-cell">
+          <p class="ptc-label">New password</p>
+          <p class="ptc-value">
+            <input
+              class="ptc-input"
+              type="password"
+              placeholder="Please enter"
+            />
+          </p>
+        </div>
       </div>
     </div>
-    <div class="button-group">
-      <button class="ptc-button">SUBMIT</button>
-      <button class="ptc-button ptc-button--stroke" @click="state = 0">
-        BACK
-      </button>
+    <div class="ptc-button-group">
+      <div class="ptc-inner">
+        <button class="ptc-button">SUBMIT</button>
+        <button class="ptc-button ptc-button--stroke" @click="state = 0">
+          BACK
+        </button>
+      </div>
     </div>
   </div>
 
   <div v-else class="p-account">
     <h3 class="ptc-title">Modify My profile</h3>
     <div class="ptc-block">
-      <div class="ptc-cell">
-        <p class="ptc-label">Name</p>
-        <p class="ptc-value">
-          <input class="ptc-input" placeholder="Please enter your real name" />
-        </p>
-      </div>
-      <div class="ptc-cell">
-        <p class="ptc-label">Phone Number</p>
-        <p class="ptc-value">
-          <input
-            class="ptc-input"
-            placeholder="Please enter your phone number"
-          />
-        </p>
-      </div>
-      <div class="ptc-cell">
-        <p class="ptc-label">Address</p>
-        <p class="ptc-value">
-          <input class="ptc-input mb24" placeholder="Road" />
-          <input class="ptc-input mb24" placeholder="State" />
-          <input class="ptc-input" placeholder="Zip code" />
-        </p>
+      <div class="ptc-inner">
+        <div class="ptc-cell">
+          <p class="ptc-label">Name</p>
+          <p class="ptc-value">
+            <input
+              class="ptc-input"
+              placeholder="Please enter your real name"
+            />
+          </p>
+        </div>
+        <div class="ptc-cell">
+          <p class="ptc-label">Phone Number</p>
+          <p class="ptc-value">
+            <input
+              class="ptc-input"
+              placeholder="Please enter your phone number"
+            />
+          </p>
+        </div>
+        <div class="ptc-cell">
+          <p class="ptc-label">Address</p>
+          <p class="ptc-value">
+            <input class="ptc-input mb24" placeholder="Road" />
+            <input class="ptc-input mb24" placeholder="State" />
+            <input class="ptc-input" placeholder="Zip code" />
+          </p>
+        </div>
       </div>
     </div>
-    <div class="button-group">
-      <button class="ptc-button">SUBMIT</button>
-      <button class="ptc-button ptc-button--stroke" @click="state = 0">
-        BACK
-      </button>
+    <div class="ptc-button-group">
+      <div class="ptc-inner">
+        <button class="ptc-button">SUBMIT</button>
+        <button class="ptc-button ptc-button--stroke" @click="state = 0">
+          BACK
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -152,15 +175,18 @@ watch(state, () => window.scrollTo(0, 0))
     background-image: url(@img/a-facebook.png);
   }
 
-  .button-group {
-    margin: 48px 36px 0;
-    .ptc-button + .ptc-button {
-      margin-top: 36px;
-    }
-  }
-
   .mb24 {
     margin-bottom: 24px;
   }
+
+  @media (min-width: 768px) {
+    .ptc-block {
+      margin-bottom: 0;
+    }
+
+    .ml354-md {
+      margin-left: 354px;
+    }
+  }
 }
 </style>

src/style/_variables.scss

@@ -4,4 +4,7 @@ $danger-color: #EB3735;
 $border-color: #D9D9D9;
 $placeholder-color: #bebebe;
 
-$nav-bar-height: 116px;
+$nav-bar-height: 116px;
+
+$breakpoint-md: 768px; // pad
+$breakpoint-lg: 992px; // desktop

src/style/components.scss

@@ -52,12 +52,38 @@
   font-size: 40px;
   font-weight: 600;
   color: #333;
+  @media (min-width: 1200px) {
+    padding-left: 0;
+  }
 }
 
 .ptc-block {
   margin-bottom: 24px;
   padding: 48px 36px;
   background: #fff;
+  @media (min-width: 768px) {
+    padding: 48px 0;
+  }
+}
+
+.ptc-inner {
+  @media (min-width: 768px) {
+    margin: auto;
+    padding: 0 36px;
+    width: 750px;
+  }
+}
+
+.ptc-button-group {
+  margin: 48px 36px 0;
+  .ptc-button + .ptc-button {
+    margin-top: 36px;
+  }
+  @media (min-width: 768px) {
+    margin: 0;
+    padding: 48px 0 64px;
+    background: #fff;
+  }
 }
 
 .ptc-cell {

src/utils/rem.js

@@ -1,11 +1,12 @@
+import { throttle } from 'lodash-es'
+
 // 设置 rem 函数
 export function setRem() {
   const doc = document
-  const h = Math.max(doc.documentElement.clientHeight, window.innerHeight || 0)
-  const w = Math.max(doc.documentElement.clientWidth, window.innerWidth || 0)
+  let width = Math.max(doc.documentElement.clientWidth, window.innerWidth || 0)
 
-  let width = w
-  width = width > 750 ? 750 : width
+  // 屏幕宽度>=768，采用PC排版
+  width = width >= 768 ? 375 : width
 
   const fz = ~~((width * 100000) / 100) / 10000
   doc.getElementsByTagName('html')[0].style.cssText = 'font-size: ' + fz + 'px'
@@ -26,6 +27,4 @@ export function setRem() {
 setRem()
 
 // 改变窗口大小时重新设置 rem
-window.onresize = function() {
-  setRem()
-}
+window.onresize = throttle(setRem, 100)

yarn.lock

@@ -1270,6 +1270,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"