feat: page archives

ChenJiaH · Sep 16, 2019 · ade6ee1 · ade6ee1
1 parent 66831d2
commit ade6ee1
Show file tree

Hide file tree

Showing 12 changed files with 385 additions and 84 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,37 +1,39 @@
 <template>
   <div id="app" :class="mode + '-mode'">
-    <div class="header">
-      <template v-if="mode === 'pc'">
-        <div class="breadcrumb">
-          <p v-text="name"></p>
-          <i class="iconfont icon-location"></i>
-        </div>
-        <div class="nav flex">
-          <a class="nav-item nav-home flex flex-middle flex-center" href="https://chenjiahao.xyz" rel="noopener noreferer">
-            <span>盒子</span>
-            <i class="iconfont icon-home"></i>
+    <div class="main-wrap">
+      <div class="header">
+        <template v-if="mode === 'pc'">
+          <div class="breadcrumb">
+            <p v-text="name"></p>
+            <i class="iconfont icon-location"></i>
+          </div>
+          <div class="nav flex">
+            <a class="nav-item nav-home flex flex-middle flex-center" href="https://chenjiahao.xyz" rel="noopener noreferer">
+              <span>盒子</span>
+              <i class="iconfont icon-home"></i>
+            </a>
+            <div class="list flex flex-middle">
+              <router-link class="nav-item flex flex-middle flex-center" :to="nav.path" v-for="(nav, index) in navs" :key="index">
+                <span v-text="nav.name"></span>
+              </router-link>
+            </div>
+          </div>
+        </template>
+        <div class="info" :class="[mode === 'pc' ? 'flex flex-middle' : 'flex-center']">
+          <a class="avatar" href="javascript:;">
+            <img src="img/avatar.png" alt="">
           </a>
-          <div class="list flex flex-middle">
-            <router-link class="nav-item flex flex-middle flex-center" :to="nav.path" v-for="(nav, index) in navs" :key="index">
-              <span v-text="nav.name"></span>
-            </router-link>
+          <div class="flex-item">
+            <h3 class="font-clg">McChen</h3>
+            <p>No pain, no gains!</p>
           </div>
         </div>
-      </template>
-      <div class="info" :class="[mode === 'pc' ? 'flex flex-middle' : 'flex-center']">
-        <a class="avatar" href="javascript:;">
-          <img src="img/avatar.png" alt="">
-        </a>
-        <div class="flex-item">
-          <h3>McChen</h3>
-          <p>No pain, no gains!</p>
-        </div>
       </div>
-    </div>
-    <div class="main-cont">
-      <transition name="multi-fade">
-        <router-view/>
-      </transition>
+      <div class="main-cont">
+        <transition name="multi-fade">
+          <router-view/>
+        </transition>
+      </div>
     </div>
   </div>
 </template>
@@ -101,34 +103,58 @@ export default {
   @import "./assets/css/fonts/calligraffitti-regular-webfont.css";
 
   #app {
+    position: relative;
   }
 
   .pc-mode {
     width: 500px;
     margin: 0 auto;
     padding: 40px 0 80px;
-    border-left: 4px solid #f9f9f9;
+    min-height: calc(100vh + 1px);
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 80px;
+      width: 4px;
+      bottom: 80px;
+      background-color: #f9f9f9;
+      z-index: -1;
+      pointer-events: none;
+    }
   }
 
   .mobile-mode {
     width: 100%;
-    padding: 32px 16px 0;
-    .header .info { margin-top: 0;
-      .avatar { margin-left: auto; margin-right: auto;}
-      h3 { margin: 16px 0 4px;}
+    padding: 32px 16px 8px;
+
+    .header .info {
+      margin-top: 0;
+
+      .avatar {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      h3 {
+        margin: 16px 0 4px;
+      }
     }
   }
 
-  .header { padding-bottom: 32px;
+  .header {
+    padding-bottom: 32px;
+
     .breadcrumb {
       width: 60px;
-      margin-left: -32px;
+      margin-left: -28px;
       text-align: center;
-
+      min-height: 50px;
       p {
         font-size: 13px;
         line-height: 17px;
         color: #d0d0d0;
+        height: 17px;
       }
 
       i {
@@ -140,9 +166,9 @@ export default {
 
     .nav {
       margin-top: 8px;
-
+      min-height: 40px;
       .nav-home {
-        margin-left: -22px;
+        margin-left: -18px;
 
         span {
           font-size: 13px;
@@ -204,14 +230,15 @@ export default {
 
     .info {
       margin-top: 16px;
+
       .avatar {
         display: block;
         width: 60px;
         height: 60px;
         border-radius: 50%;
         overflow: hidden;
         object-fit: cover;
-        margin-left: -32px;
+        margin-left: -28px;
         margin-right: 8px;
 
         img {
@@ -220,9 +247,9 @@ export default {
       }
 
       h3 {
-        font-family: "calligraffitti-regular-webfont";
         font-weight: bold;
         font-size: 24px;
+        line-height: 1.5;
         transition: all 0.2s;
       }
 

diff --git a/src/assets/css/fonts/calligraffitti-regular-webfont.css b/src/assets/css/fonts/calligraffitti-regular-webfont.css
@@ -8,4 +8,6 @@
     font-weight: normal;
 }
 
+.font-clg { font-family: "calligraffitti-regular-webfont"}
+
 
diff --git a/src/assets/css/fonts/calligraffitti-regular-webfont.eot b/src/assets/css/fonts/calligraffitti-regular-webfont.eot
diff --git a/src/assets/css/fonts/calligraffitti-regular-webfont.ttf b/src/assets/css/fonts/calligraffitti-regular-webfont.ttf
diff --git a/src/assets/css/fonts/calligraffitti-regular-webfont.woff b/src/assets/css/fonts/calligraffitti-regular-webfont.woff
diff --git a/src/assets/css/fonts/iconfont.css b/src/assets/css/fonts/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1567654733669'); /* IE9 */
-  src: url('iconfont.eot?t=1567654733669#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('iconfont.woff?t=1567654733669') format('woff'),
-  url('iconfont.ttf?t=1567654733669') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  src: url('./iconfont.eot?t=1568600941274'); /* IE9 */
+  src: url('./iconfont.eot?t=1568600941274#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('./iconfont.woff?t=1568600941274') format('woff'),
+  url('./iconfont.ttf?t=1568600941274') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 }
 
 .iconfont {
@@ -65,6 +65,14 @@
   content: "\e704";
 }
 
+.icon-comment:before {
+  content: "\e614";
+}
+
+.icon-loading:before {
+  content: "\e60a";
+}
+
 .icon-home:before {
   content: "\e679";
 }
@@ -73,6 +81,14 @@
   content: "\e738";
 }
 
+.icon-none:before {
+  content: "\e643";
+}
+
+.icon-time:before {
+  content: "\e909";
+}
+
 .icon-location:before {
   content: "\e76f";
 }

diff --git a/src/assets/css/fonts/iconfont.eot b/src/assets/css/fonts/iconfont.eot
diff --git a/src/assets/css/fonts/iconfont.ttf b/src/assets/css/fonts/iconfont.ttf
diff --git a/src/assets/css/fonts/iconfont.woff b/src/assets/css/fonts/iconfont.woff
diff --git a/src/components/loading/src/Loading.vue b/src/components/loading/src/Loading.vue
@@ -4,7 +4,7 @@
     <transition name="fade">
       <div class="loading-cont flex flex-middle flex-center" v-show="show">
         <div>
-          <i class="icon-loading"></i>
+          <i class="icon"></i>
           <p class="text" v-text="text"></p>
         </div>
       </div>
@@ -53,7 +53,7 @@ export default createComponent({
       box-sizing: border-box;
       padding: 0 10px;
 
-      .icon-loading {
+      .icon {
         display: block;
         width: 34px;
         height: 34px;

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -20,6 +20,42 @@ const getTime = Date.now || function () {
   return new Date().getTime();
 };
 
+const formatTime = (time, _format) => {
+  if (!time) {
+    return null;
+  }
+  const date = typeof time === 'string' && time.length === 10 ? time.replace(/-/g, '/') : time;
+  const t = new Date(date);
+  const format = _format || 'yyyy-MM-dd';
+  const tf = function (i) {
+    return (i < 10 ? '0' : '') + i;
+  };
+  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (a) => {
+    switch (a) {
+      case 'yyyy':
+        return tf(t.getFullYear());
+      case 'MM':
+        return tf(t.getMonth() + 1);
+      case 'mm':
+        return tf(t.getMinutes());
+      case 'dd':
+        return tf(t.getDate());
+      case 'HH':
+        return tf(t.getHours());
+      case 'ss':
+        return tf(t.getSeconds());
+      default:
+        break;
+    }
+    return null;
+  });
+};
+
+const getZodiac = (year) => {
+  const map = ['shu', 'niu', 'hu', 'tu', 'long', 'she', 'ma', 'yang', 'hou', 'ji', 'gou', 'zhu'];
+  return year ? map[(parseFloat(year) + 8) % 12] : '';
+};
+
 const restArguments = function (func, startIdx) {
   const startIndex = startIdx == null ? func.length - 1 : +startIdx;
   return function (...argus) {
@@ -135,5 +171,5 @@ const throttle = (func, wait, options = {}) => {
 };
 
 export {
-  pageLock, pageUnlock, getTime, debounce, throttle,
+  debounce, formatTime, getTime, getZodiac, pageLock, pageUnlock, throttle,
 };